* {
    font-family    : 'Roboto', sans-serif;
    list-style     : none;
    margin         : 0;
    padding        : 0;
    text-decoration: none;
}

html, body {
    background    : #f9f9f9;
    display       : flex;
    flex-direction: column;
    min-height    : 100vh;
}

h1,h2,h3 { font-weight: 500; }
h1 { font-size: 1.6em; }
h2 { font-size: 1.3em; }
h3 { font-size: 1.0em; font-weight: 400; }

p, li { color: #313131;  }

.con, .container {
    display  : flex;
    flex-wrap: wrap;
}

.menu {
    letter-spacing: 1px;
    margin        : 6em auto 9em;
    width         : 650px;
}
.menu a { color: #626262; }
.menu a:hover {
    color          : #000;
    text-decoration: underline;
}
.menu li { margin-right: 1em; }
.menu em {
    color      : #000;
    font-style : normal;
    font-weight: 500;
}

#content {
    flex-direction: column;
    flex-grow     : 1;
    margin        : 0 auto;
    width         : 650px;
}

.post { margin-bottom: 2em; }
.post p { margin: 1em 0; }
.post a {
    color          : #003bbd;
    text-decoration: underline;
}
.post h2:first-of-type {
    border-bottom: 1px solid #000;
    color        : #626262;
    font-size    : 12px;
    font-weight  : 100;
    margin-bottom: 2em;
    text-align   : right;
}

#footer {
    background    : #313131;
    border-top    : 3px solid #000;
    color         : #FFF;
    flex-direction: column;
    font-size     : 14px;
    padding       : 1em 0;
}
#footer .con:nth-child(1) {
    flex-direction: row;
    margin        : 0 auto;
    max-width     : 650px;
}
#footer .con:nth-child(2) {
    flex-basis    : 50%;
    flex-direction: column;
}
#footer img {
    border       : 2px solid #626262;
    border-radius: 50%;
    height       : 150px;
    margin-right : 2em;
    max-width    : 150px;
}
#footer h2 {
    font-size    : 2em;
    margin-bottom: 0.5em;
}

#footer p { color: #FFF; }

/* resume style */
.resume h1, .resume h2, .resume h3, .resume p {
    margin-bottom: 0.5em;
}

.resume h1 { border-bottom: 1px solid #000; }
.resume p { margin-bottom: 2em; }
.resume ul {
    margin-bottom: 1em;
    padding-left: 2em;
}
.resume li { list-style: disc; }

.con.edu, .con.employ { justify-content: space-between; }
.edu ul, .employ ul { padding: 0;}
.edu li, .employ li { list-style: none; }
.edu ul:nth-child(1) li:first-child,
.employ ul:nth-child(1) li:first-child {
    font-size  : 1.1em;
    font-weight: 500;
}
.edu ul:nth-child(1) li:last-child,
.employ ul:nth-child(1) li:last-child {
    font-size: 0.9em;
}
.edu ul:nth-child(2),
.employ ul:nth-child(2) {
    font-size : 0.8em;
    text-align: right;
}

/* contact */
#c {
    background   : url('../img/c.png');
    height       : 21px;
    margin-bottom: 2em;
    width        : 212px;
}

@media all and (max-width: 650px) {
    .con, .container { padding: 0 1em; }
    .con.edu, .con.employ { padding: 0; }

    .edu ul:nth-child(2),
    .employ ul:nth-child(2) {
        text-align: left;
    }

    .menu {
        flex-flow: column wrap;
        margin   : 0 0 2em;
        width    : auto;
    }
    .menu a { 
        border-bottom: 1px solid rgba(0,0,0,0.1);
        display      : block;
        padding      : 0.75em;
        text-align   : center;
    }
    .menu li { margin: 0; }
    .menu li:last-of-type a {
        border-bottom: none;
    }

    #content {
        max-width: 650px;
        width    : auto;
    }

    #footer img { margin: 0 auto 1em; }
    #footer .con:nth-child(2) {
        flex-basis: auto;
        margin    : 0 auto;
        padding   : 0;
        text-align: center;
    }
}