:root {
    --light: #FFF;
    --dark: #000;
    --blue: #00B4FF;
    --dark-purple: #776191;
    --max-width: 600px;
    --gray: #EFEFEF;
    --red: #FA7373;
}

body {
    background: var(--dark);
    color: var(--light);
    font-family: monospace, sans-serif;
    padding: 0px;
    margin: 0px;
    font-size: 16px;
}

.content {
    margin: 0px auto;
    width: 100%;
    max-width: var(--max-width);
    padding: 0px 15px;
}

hr {
    border: 0px;
    display: block;
    height: 1px;
    width: 100%;
    background-color: var(--dark-purple);
    margin: 15px 0px;
}

code {
    color: #D9FFA9;
}

input, button {
    font-family: monospace, sans-serif;
    background: var(--light);
    border: 1px solid var(--gray);
    font-size: 18px;
    color: var(--dark);
    padding: 5px 10px;
}

nav {
    display: flex;
    justify-content: space-between;
}

h1 {
    margin-bottom: 0.15em;
}

nav ul {
    display: flex;
    list-style: none;
    margin: 0px;
    padding: 0px;
}

nav ul li {
    margin-right: 15px;
}

a {
    color: var(--blue);
    text-decoration: underline;
}

a:visited {
    color: var(--blue);
}

a:hover {
    text-decoration: none;
}

ul.flash {
    color: var(--red);
    margin: 0px;
    padding: 0px;
    list-style: none;
}

footer {
    color: var(--dark-purple);
    font-size: 12px;
    margin: 25px auto 15px auto;
    width: 100%;
    max-width: var(--max-width);
}

footer a {
    color: var(--dark-purple) !important;
    text-decoration: underline;
}

footer a:hover {
    text-decoration: none;
}

.timeline {
    margin-bottom: 15px;
}

.timeline input {
    width: 100%;
    display: block;
}

.timeline--name {
    margin-bottom: 5px;
}

.timeline--details {
    display: flex;
}