:root {
    color-scheme: light dark;
    --bg-main: #f2f2f2;
    --bg-secondary: #fcfaf4;
    --text: #000000;
    --link: blue;
    --link-hover: red;
    --link-active: red;
    --link-visited: purple;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg-main: #1e1e1e;
        --bg-secondary: #2a2a2a;
        --text: #dadada;
        --link: #60a5fa;
        --link-hover: red;
        --link-active: red;
        --link-visited: #aa7dfa;
    }
}

html {
    min-height: 100%;
}

body {
    font-family: sans-serif;
    font-size: 18px;
    line-height: 130%;
    font-weight: 100;
    line-height: 140%;
    padding: 1.5rem 3rem;
    color: var(--text);
    background: var(--bg);
    background: 
        /* Noise */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cfilter id='n' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.6' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23n)' opacity='0.25'/%3E%3C/svg%3E") repeat,
        radial-gradient( circle at 50% 0%, var(--bg-secondary) 0%, var(--bg-main) 100% );    
    background-blend-mode: multiply;
}

a {
    color: var(--link);
}
a:visited {
    color: var(--link-visited);
}
a:active, a:visited:active {
    color: var(--link-active);
}
a:hover, a:visited:hover {
    color: var(--link-hover);
}

ul {
    margin: 0 0 1rem;
    list-style: inside;
    padding: 0;
    list-style-position: outside;
}
li {
    margin: 0.3rem 0 0.6rem 1.5rem;
}
h1, h2, h3, h4 {
    margin-bottom: 0.5rem;
    font-weight: 100;
}
h3 {
    margin-top: 2rem;
}
footer {
    border-top: 1px solid #d8d8d8;
    margin-top: 2rem;
}

.icon {
    position: relative;
    top: 1px;
}