@media (prefers-color-scheme: light) {
    :root {
        --text-color: rgb(20, 20, 20);
        --background-color: rgb(235, 235, 235);
        --foreground-color: rgb(215, 215, 215);
        --border-color: rgb(195, 195, 195);
        --link-color: oklch(44.3% 0.11 240.79); /* Sky 800 */
        --visited-link-color: oklch(43.2% 0.232 292.759); /* Purple 800 */
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        --text-color: rgb(235, 235, 235);
        --background-color: rgb(20, 20, 20);
        --foreground-color: rgb(40, 40, 40);
        --border-color: rgb(60, 60, 60);
        --link-color: oklch(82.8% 0.111 230.318); /* Sky 300*/
        --visited-link-color: oklch(82.7% 0.119 306.383); /* purple 300*/
    }
}

a {
    color: var(--link-color)
}

a:visited {
    color: var(--visited-link-color)
}

main {
    max-width: 100ch;
    margin: auto;
    display: flex;
    flex-direction: column;
    gap: 1em;
}

html {
    background-color: var(--background-color);
}

p, h1, h2, h3, h4, h5, h6, li, figcaption {
    color: var(--text-color)
}

p {
    font-family: sans-serif;
    font-size: 14pt;
}

h1 {
    font-size: 28pt;
}

/* This centers the main header of the website */
body > header, body > footer {
    max-width: 100ch;
    margin: auto;
}

a {
    text-decoration: none;
}