html {
    font-size: 16px;
}

body {
    display: grid;
    grid-template-columns: 1fr 52% 1fr;
    grid-template-rows: auto auto;
    /* styles */
    text-align: center;
    font-family: 'Roboto Light', sans-serif;
    font-size: 1.1em;
    color: #ccc;
    background-color: #222;
}

code {
    white-space: pre;
    text-align: left;
    background-color: black;
}

#header {
    grid-column: 2;
    grid-row: 1;
    color: #b55;
    border-color: white;
    border-bottom: 1px solid;
    font-size: 1.6em;
}

nav ul li {
    list-style: none;
    display: inline;
}

nav ul li * {
    color: #b55;
    margin-right: 4%;
    margin-left: 4%;
 }

.name {
    color: #f99;
    font-style: italic;
}

.expr {
    color: #dde;
    font-style: italic;
}

q {
    color: #bbf;
    font-style: italic;
}

.center {
    text-align: center;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}

.timestamp {
    margin-top: 2%;
    text-align-last: right;
    font-size: 0.6em;
    color: #bbb
}

a {
    color: #eee;
}

#main {
    grid-column: 2;
    grid-row: 2;
    text-align: left; 
}

h1 {
    color: #dda;
    font-size: 1.5em;
}

h2 {
    color: #dda;
    font-size: 1.3em;
}

::selection {
    color: #ccc;
    background-color: #a22;
}

@media screen and (max-width: 1200px) {
body {
    display: grid;
    grid-template-columns: 1fr 96% 1fr;
    grid-template-rows: auto auto;
}

#header {
    font-size: 1.4em;
}

.name {
    font-style: italic;
}

.timestamp {
    font-size: 0.5em;
}

}

@media screen and (max-width: 720px) {
#header {
    align-content: center;
    justify-content: center;
    padding: 2% 2%;
}

nav ul li {
    width: 90%;
    display: block;
    text-align: center;
    display: block;
}

body {
    font-size: 1.2em;
}

}