:root {
    /* Variable definitions */
    --bg-color: #ffdb58;
    --panel-color: #ffeba5;
    --panel-border-color: brown;
    --text-color: #444;

    --text-link-color: pink;
    --text-link-hover-color: red;

    --space-xs: 4px;
    --space-s: 8px;
    --space-m: 16px;
    --space-l: 32px;
    --space-xl: 64px;

    --background-stripe-width: 24px;
    --panel-border-thickness: 24px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg-color: #4b3900;
        --bg-color-gradient-start: #654c00;
        --background: repeating-linear-gradient(
            var(--bg-color-gradient-start),
            var(--bg-color-gradient-start) var(--background-stripe-width),
            var(--bg-color) var(--background-stripe-width),
            var(--bg-color) calc(var(--background-stripe-width) * 2)
        );
        --panel-color: #a58000;
        --text-color: white;
        --text-link-color: pink;
        --text-link-hover-color: red;
    }
}

@media (max-width: 768px) {
    .container {
        align-items: inherit !important;
        background-color: red !important;
    }

    .main-panel {
        width: 100vw;
        height: 100vh;
        max-width: 100%;
        border-radius: 0;
    }
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Atkinson Hyperlegible Next', sans-serif;

    background: var(--background);
    /* background-color: var(--bg-color); */
    color: var(--text-color);
    line-height: 1.6;
    font-size: 20px;
}

h1,
h2,
h3 {
    line-height: 1.2
}

.wide-text {
    letter-spacing: 1rem;
    text-indent: 1rem; /* wide letter-spacing adds a space after the last character, making text appear off-center. */
}

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

.main-panel {
    background-color: var(--panel-color);
    border-block: var(--panel-border-thickness) solid var(--panel-border-color);
    padding: var(--space-l) var(--space-xl);
    width: 100%;
}

.main-panel-content {
    width: fit-content;
    margin: 0 auto;
}

header {
    text-align: center;
}

header h1 {
    margin-bottom: 16px;
}

header aside {
    font-size: 16px;
}

a,
a:visited {
    color: var(--text-link-color);
    text-decoration: none;
}

a:hover {
    color: var(--text-link-hover-color);
}