@font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 200;
    src: local('Nunito ExtraLight'), local('Nunito-ExtraLight'), url(https://fonts.gstatic.com/s/nunito/v11/XRXW3I6Li01BKofA-seUYevI.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

html, body {
    background-color: #000;
    color: #fff;
    font-family: 'Nunito', sans-serif;
    height: 100vh;
    margin: 0;
}

a {
    color: #fff;
    padding: 0 5px;
    font-size: 13px;
    font-weight: 300;
    letter-spacing: .1rem;
    text-decoration: none;
}

.content {
    width: 90%;
    margin: auto;
    max-width: 1024px;
}

.header {
    padding: 1em 0em 1em 0em;
}

.title {
    font-size: 42px;
    display: flex;
    text-align: center;
}

ul.links {
    list-style: none;
    padding: 1em 0 0 0;
    margin: 0;

    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -webkit-flex-flow: row wrap;
    justify-content: space-around;
}

ul.links li {
    padding: 0;
    margin: 0 .25em .5em .25em;
}

.picture {
    max-width: 250px;
    padding: 1em;
    margin: auto;
}

.picture img {
    width: 100%;
}

#picture {
    border-radius: 15%;
    display: block;
}

#contact-card {
    display: none;
}

.introduction {
    padding: 2em 0 0 0;
    text-indent: .5em;
    text-align: justify;
}

.red {
    color: #CC3333;
}

.footer {
    padding: 1em 0 0 0;
    font-size: 11px;
    font-weight: 300;
    letter-spacing: .1rem;

    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    flex-direction: column;
    align-items: flex-end;
}

.footer p {
    padding: .25em;
    margin: 0;
}

.footer a {
    font-size: 11px;
}

@media screen and (min-width: 1024px) {
    .picture {
        max-width: 350px;
        padding: 3em;
    }
}