body {
    background-color: #111; color: white;
    margin: 0; width: 100%;
    font-family: 'Courier New', Courier, monospace;
    font-size: 150%;
}

a {
    display: inline-text;
    text-decoration: none;
    color: white;
}

.logo {
    width: 400px; max-width: 100%;
}

.header {
    margin: auto; width: 100%; text-align: center;
    padding: 32px 0;
}

footer {
    margin: 32px auto; width: 100%; text-align: center;
    color: white;
}

.content {
    background-color: #c00; color: white;
    margin: 32px auto; width: 90%; max-width: 700px;
    padding: 32px;
}

.content-right {
    background-color: #c00; color: white;
    margin: 32px auto; width: 90%; max-width: 700px;
    padding: 32px; text-align: right;
}

h1 {
    display: block; margin: 8px 0;
}

h2 {
    display: block; margin: 8px 0;
}

.subline {
    display: block; font-size: 70%; margin: 8px 0;
}

@media (prefers-color-scheme:light) {
    body {
        background-color: #c00; color: black;
    }
    .content, .content-right {
        background-color: #111; color: white;
    }
}

.top {
    width: 100%; font-size: 50%; margin: 0; display: inline-block;
    text-align: left;
}