:root.light-mode {
    --foreground: #48404F;
    --background: #F1E5E9;
    --secondary: #6A597A;
    --tertiary: #E0D4D8;
    --accent: #931A30;
    --accent-highlight: #DE3F5C;
    --table-border: #D3C7CB;
    --table-row: #FAEEF2;
}

:root.dark-mode {
    --foreground: #F1E5E9;
    --background: #48404F;
    --secondary: #AA99BA;
    --tertiary: #766E7D;
    --accent: #FCCFD5;
    --accent-highlight: #F7A6B5;
    --table-border: var(--tertiary);
    --table-row: #504857;
}

@media (prefers-color-scheme: light) {
    :root {
        --foreground: #48404F;
        --background: #F1E5E9;
        --secondary: #6A597A;
        --tertiary: #E0D4D8;
        --accent: #931A30;
        --accent-highlight: #DE3F5C;
        --table-border: #D3C7CB;
        --table-row: #FAEEF2;
    }
}

@media (prefers-color-sheme: dark) {
    :root {
        --foreground: #F1E5E9;
        --background: #48404F;
        --secondary: #AA99BA;
        --tertiary: #766E7D;
        --accent: #FCCFD5;
        --accent-highlight: #F7A6B5;
        --table-border: var(--tertiary);
        --table-row: #504857;
    }
}

* {
    font-family: "Atkinson Hyperlegible", sans-serif !important;
}

strong {
    color: var(--accent-highlight);
}

a {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.lang-picker {
    background: var(--background);
    color: var(--foreground);
    border: 1px solid var(--table-border);
    border-radius: 4px;
    padding: 2px 5px;
    font-family: inherit;
    cursor: pointer;
    font-size: 0.9em;
}

:root.dark-mode #dark-mode-off, :root.light-mode #dark-mode-on {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.page-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.page-list-container {
    width: 70%;
    margin: 0 auto;
}

.page-list li {
    margin-bottom: 0.25em;
}

.page-list li .page-item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.page-list li p {
    margin-block-start: -0.5em;
    margin-block-end: 0px;
}

.page-list li p > a {
    color: var(--secondary);
    font-style: italic;
}

.page-list li p > a:hover {
    color: var(--foreground);
}

pre:has(> code) {
    border: 1px solid var(--secondary);
    padding: 1em;
    font-size: 95%;
}

pre code {
    font-family: "Roboto Mono", monospace !important;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

.button-parent-container {
    justify-content: center;
}

.button-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, 88px);
    gap: 8px;
    justify-content: center;
    margin: 0 auto 1em;
}

.other-buttons {
    display: flex;
    justify-content: center;
    margin: 0 auto;
}

.button-grid img {
    width: 88px;
    height: 31px;
    image-rendering: pixelated;
    display: block;
}

.other-buttons img {
    display: block;
    margin: 8px 0 0;
}

.other-buttons img:first-child {
    margin: 0;
}

hr {
    margin: calc(1em - 5px) auto 1em;
    border-top: 2px solid var(--table-border);
}

h1#title {
    margin-bottom: 0.5rem;
}

h1:has(+ p.secondary.small) {
    margin-block-end: 0px;
}

h1 + p.secondary.small {
    margin-block-start: 0px;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 80vh;
}

main {
    flex: 1;
}

main > :last-child {
    margin-bottom: 0px;
    padding-bottom: 0px;
}