:root {
    font-family: 'Open Sans', sans-serif;
    --mono-fonts: 'Jetbrains Mono', 'Courier New', Courier, monospace;
    --theme: #0aa;
    --theme-100: #088;
    
    --theme-alt: #a0a;

    --fg: #000;
    --fg-alt: #fff;

    --bg: #fff;
    --bg-100: #eee;
    --bg-200: #ddd;
    --bg-300: #ccc;
    --bg-400: #bbb;

    color: var(--fg);
}

@media (prefers-color-scheme: dark) {
    :root {
        --fg: #fff;
        --bg: #222;
        --bg-100: #333;
        --bg-200: #444;
        --bg-300: #555;
        --bg-400: #666;
    }
}

body {
    margin: 0;
    background-color: var(--bg);
    width: 100%;
}

nav {
    padding: 1em 1em;
    display: flex;
    justify-content: space-between;
    border-top: 5px solid var(--theme);
}

main {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 1em;
    margin-bottom: 4em;
}

footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: .25em .5em;
    background-color: #111;
    color: #666;
    border-top: 2px solid var(--theme-100);
}

a {
    color: var(--theme);
    transition: color .3s ease-in-out;

    &:hover {
        color: var(--fg);
    }

    &.alt {
        color: var(--fg);

        &:hover {
            color: var(--theme);
        }
    }
}

button,
.button {
    outline: none;
    border: none;
    width: fit-content;
    text-decoration: none;
    font-weight: 700;
    background-color: var(--theme);
    color: var(--fg-alt);
    font-family: var(--mono-fonts);
    text-transform: uppercase;
    text-rendering: optimizeLegibility;
    border-radius: 5px;
    margin: .2em;
    padding: 10px 20px;
    transition: background-color .3s ease-in-out;
    cursor: pointer;
    border: 1px solid var(--fg-alt);

    &:hover {
        background-color: var(--theme-100);
    }

    &.alt {
        border: 2px solid var(--fg-alt);
        color: var(--fg-alt);
        background-color: var(--theme-alt);
        
        &:hover {
            color: var(--bg-400);
            background-color: var(--fg-alt);
        }
    }
}

section {
    padding: 2em;
    background-color: var(--bg-100);
    display: flex;
    flex-direction: column;

    .tag {
        width: fit-content;
        background-color: var(--theme);
        color: var(--fg-alt);
        padding: 3px 8px;
        border-radius: 7px;
        margin-bottom: 1rem;
        margin-right: 1em;
        text-transform: uppercase;
        text-rendering: optimizeLegibility;

        &.alt {
            background-color: var(--theme-alt);
        }

        &.full {
            width: 100%;
        }
    }

    &.board {
        background-color: var(--theme);
        color: var(--fg-alt);

        &.glare {
            background: linear-gradient(40deg, #a3c, #e2a, #d3c, #a3c);
        }
    }
}

.landscape {
    display: flex;
    flex-direction: row;
    width: fit-content;
    margin: .5em 0;

    &.border {
        border: 2px solid var(--bg-200);
        border-radius: 7px;
        padding: 5px;
    }
}

div.card {
    display: flex;
    flex-direction: column;

    height: fit-content;
    width: fit-content;

    margin: 1em;
    padding: 1em 1.5em;
    border-radius: 7px;

    background-color: var(--bg-200);

    &.wide {
        width: 100%;
    }

    &.tall {
        height: 100%;
    }
}

.mono {
    font-family: var(--mono-fonts);
}

.uppercase {
    text-transform: uppercase;
}

[hidden] {
    display: none;
}

div.space { height: 1em; }

h1, h2, h3, h4, h5, h6 { margin: 0; }