:root {
    --bg: #c4f;
    --fg: #106;
    --accent: #f4c;
    --semitrans: #fff4;
    --link: #04f;
}

@media (prefers-color-scheme: light) {
    :root {
        --bg: #e8e;
        --fg: #308;
        --accent: #f4c;
        --semitrans: #fff4;
        --link: #04f;
    }
}

:root {
    --link-alt: color-mix(in srgb, var(--link) 50%, var(--fg));
    --link-highlight: color-mix(in srgb, var(--bg) 80%, white);
}

html {
    /* max-width: 120ch; */
    max-width: 80ch;
    margin: auto auto;

    background-color: var(--bg);
    color: var(--fg);
    scrollbar-color: var(--accent) var(--semitrans);

    font-size: x-large;
}

a {
    color: var(--link);
    background-color: var(--link-highlight);
    border-radius: 0.2em;
}

a:active {
    background-color: var(--semitrans);
    border-radius: 0.2em;
}

/* a:visited { */
/*     color: var(--link-alt); */
/* } */

code {
    background-color: var(--semitrans);
    text-shadow: 0 0 2px var(--accent);
    border-radius: 0.2em;
}

li {
    list-style-type: none;
    padding: 0.5em 0;
}

li a {
    padding: 0.3em;
}

hr {
    color: var(--accent)
}

ul {
    padding: 0;
}

h1, h2, h3 {
    font-style: italic;
    font-weight: bold;
    white-space: nowrap;
}

/* TODO: flex-box or something, pic left, text right */

@media only screen and (min-width: 800px) {
    .about {
        display: flex;
    }

    .links {
        display: flex;
    }

    .links > * {
        padding: 2ch;
    }
}

.about img {
    width: 20ch;
    height: 20ch;
    padding: 2ch;
}