@font-face {
    font-family: 'Alte-din';
    src: url(../alte-din.ttf);
}

body {text-align:center;font-family: 'Lato', sans-serif;}

header {
    padding-top:1.5em;
    background-color:#403F3F;
    color:white;
    text-align:center;
}

h1,h2{
    font-family: 'Alte-din', 'PT Sans Narrow', sans-serif;
    font-weight:bold;
    text-transform:uppercase;
    letter-spacing:8px;
}

span.narrow {
    transform:scale(.8,1);
    -webkit-transform:scale(.8,1);
    display:inline-block;
}

h1 {
    font-size:4em;
    letter-spacing:12px;
    margin-bottom:0;
}

h2 {
    font-size:1.5em;
    letter-spacing:6px;
}

header img {
    margin:1em 0;
    max-width:80px;
}

.contact-info span {
    display:inline-block;
    padding:8px 25px;
    letter-spacing:1px;
}

a, a:visited {
    color:currentColor;
}

a:hover {
    color:#999;
}

section#portfolio {
    padding:2em 0;
}

section#portfolio h2 {
    margin:2em;
}

section#portfolio p {
    margin-top:1em;
}

section#portfolio div.work-link:hover, section#portfolio a:hover {
    transform:scale(1.02);
    -webkit-transform:scale(1.02);
}

section#portfolio div.work-link, section#porfolio a {
    -webkit-transition: transform .2s; /* Safari */
    transition: transform .2s;
}

.other-work p {font-size:.9em;}

@media screen and (max-width:410px) {
    h1{font-size:3em;}
}

@media screen and (max-width:360px) {
    h1{font-size:2.5em;}
}