body {
    font-family: tox_typewriterregular;
    color: #eefded;
    background-color: #eefded;
    display: grid;
    grid-template-columns: 20% 1fr;
    margin: 0;
}

.sidebar {
    position: fixed;
    width: 20%;
    height: 100%;
    background-color: #2d757e;
    padding-top: 12px;
}

.content {
    grid-column: 2;
    padding: 12px;
    margin-left: .2em;
    margin-top: 0;
    background-color: #001b2e;
    color: #eefded;
    height: 100%;
    font-size: 1.3em;
}

ul {
    list-style: none;
    text-align: center;
    padding: 0;
}

ul li {
    padding-top: .6em;
    padding-bottom: .6em;
    display: block;
    border-bottom: .1em dashed #001b2e;
    font-size: 1.2em;
    text-decoration: none;
}

h1 {
    color: orange;
    text-align: center;
}

hr {
    display: block;
    border: none;
    height: .5em;
    background-color: #9a7bbc;
}

i {
    color: orange;
}

.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

li:hover {
    background-color: #001b2e;
}

a {
    text-decoration: none;
    color: orange;
}

a:visited {
    text-decoration: none;
    color: #9a7bbc;
}

.microbutton {
    display: block;
    margin: auto;
    image-rendering: pixelated;
    width: 88px; height: 31px;
}

@font-face {
    font-family: 'tox_typewriterregular';
    src: url('tox_typewriter-webfont.woff2') format('woff2'),
         url('tox_typewriter-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}