@import url('https://fonts.googleapis.com/css?family=Istok+Web:400,700|Passion+One');

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: 'Istok Web', sans-serif;
}

#container {
    width: 1000px;
    margin: 0 auto;
}

nav {
    display: flex;
    align-items: center;
    padding: 20px;
}

nav a { text-decoration: none; }

#fullname > a {
    font-family: 'Passion One', serif;
    font-size: 300%;
    color: #009879;
}

#nav-links {
    flex-grow: 1;
    text-align: right;
}

#nav-links > a {
    margin-right: 15px;
    color: #222C6A;
    transition: color 0.25s;
}

#nav-links > a:hover { color: #ff4611; }

#content {
    padding: 20px 20px 50px;
    border-top: 1px solid #DDD;
    animation: 0.5s FadeIn;
}

#content > p {
    line-height: 125%;
    font-size: 110%;
    color: #333;
}

#content a { color: #ff4611; }

.content-condense > p,
.content-condense > h1,
.content-condense > h3 { width: 60%; }

h1, h3 {
    color: #222C6A;
    font-weight: normal;
}

h3 {
    border-right: 2px solid #222C6A;
}

/* less than 1000px */
@media screen and (max-width: 1000px) {
    #container { width: 100%; }
    .content-condense p { width: 100%; }
}

/* less than 600px */
@media screen and (max-width: 600px) {
    nav { flex-wrap: wrap; }

    nav > div { width: 100%; }

    #fullname {
        text-align: center;
        margin-bottom: 20px;
    }

    #nav-links { text-align: left; }

    #nav-links > a {
        display: block;
        padding: 8px 0;
        margin-right: 0;
    }
}

@keyframes FadeIn {
    from {
        opacity: 0;
        transform: rotateY(-10deg);
    }

    to {
        opacity: 1;
        transform: rotateY(0deg);
    }
}