@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&family=Sofia+Sans:ital,wght@0,1..1000;1,1..1000&display=swap');

html {
    --light-bg: #ccccee;
    --dark-bg: #000022;

    --light-fg: #ffffff;
    --dark-fg: #000044;

    --flex-direction: row;
}

@media (prefers-color-scheme: dark) {
    html {
        --primary-bg: var(--dark-bg);
        --secondary-bg: var(--light-bg);

        --primary-fg: var(--light-fg);
        --secondary-fg: var(--dark-fg);

        --one: #ffffff;
        --zero: #000000;
    }
}

@media (prefers-color-scheme: light) {
    html {
        --primary-bg: var(--light-bg);
        --secondary-bg: var(--dark-bg);

        --primary-fg: var(--dark-fg);
        --secondary-fg: var(--light-fg);

        --one: #000000;
        --zero: #ffffff;
    }
}

@media (max-width: 1250px) {
    html {
        --flex-direction: column;
    }
}

html {
    --main-font: "EB Garamond";
    --accent-font: "Sofia Sans", sans-serif;
    --primary-emph-fg: color-mix(in srgb, var(--primary-fg) 70%, var(--one) 30%);
    --secondary-deemph-fg: color-mix(in srgb, var(--secondary-fg) 70%, var(--secondary-bg) 30%);
}

html, body {
    height: 100%;
    width: 100%;
    box-sizing: border-box;
}

body {
    font-family: var(--main-font);
    background-color: var(--primary-bg);
    color: var(--primary-fg);

    margin: 0;

    display: flex;
    flex-direction: column;
}

main {
    padding: 2em;
    flex-grow: 1;
}

header, footer {
    /* Positioning */
    width: 100%;
    margin: 0;
    padding-left: 2em;
    padding-right: 2em;

    flex-grow: 0;
    flex-shrink: 0;

    background: var(--secondary-bg);
    color: var(--secondary-fg);
}

header a, footer a {
    color: var(--zero);
}

header h1 {
    font-weight: 100;
    font-size: 20pt;
    color: var(--secondary-deemph-fg);
}

header h1 strong {
    color: var(--zero);
}

header h1 .wordmark {
    font-size: 36pt;
    color: var(--zero);
}

header nav a {
    font-family: var(--accent-font);
    text-decoration-line: none;
}

a {
    color: var(--primary-emph-fg);
}

a.wordmark {
    text-decoration-line: none;
}

.wordmark {
    text-transform: lowercase;
    font-style: italic;
    font-family: var(--accent-font);
}

main {
    display: flex;
    gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    flex-direction: var(--flex-direction);
    flex-wrap: wrap;
}

main > * {
    flex-grow: 1;
}

.img-container {
    display: flex;
    gap: 10px;
    flex-direction: column;
    flex-wrap: nowrap;
}

.img-container img {
    flex-grow: 0;
    flex-shrink: 0;
}

.column section:has(img) {
    text-align: center;
}