:root {
    --background: #0f0f0f;
    --foreground: #dedede;
    --accent: #fcb81b;
}

@media (prefers-color-scheme:light) {
    :root {
        --background: #dedede;
        --foreground: #0f0f0f;
        --accent: #3d3df9;
    }
}

body {
    width: min(90%, 650px);
    margin: 1.5rem auto;
    background-color: var(--background);
    color: var(--foreground);
    font-size: 18px;
}

h1 {
    text-align: center;
}

ul li {
    margin: 0 0 1rem;
    padding: 0;
}

nav ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    column-gap: 2rem;
    justify-content: center;
    margin: 0;
    padding: 0;
}

nav ul li {
    list-style-type: none;
}

a {
    color: var(--foreground);
    text-decoration: underline;
    text-underline-offset: 0.3rem;
    text-decoration-color: var(--accent);
}

a:hover,
a:focus {
    background-color: var(--accent);
    color: var(--background);
    text-decoration: none;
}

mark {
    background-color: var(--accent);
    color: var(--background);
    padding: 0.1rem 0;
}

footer {
    text-align: center;
}

time {
    font-family: monospace;
}