:root {
    --bg-color: rgb(15, 56, 15);
    --fg-color: rgb(155, 188, 15);
    --light-color: rgb(139, 172, 15);
    --dark-color: rgb(48, 98, 48);
    --base-size: 1vh;
}

@font-face {
    font-family: Gameboy;
    font-display: swap;
    src: url("../fonts/GameBoy.ttf") format("truetype");
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    touch-action: manipulation;
    user-select: none;
}

html,
body {
    font-family: GameBoy, monospace;
    font-size: clamp(12px, 1.5vw, 22px);
    color: var(--fg-color);
    background-color: var(--bg-color);
    overflow: hidden;
}

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

header,
footer {
    background-color: var(--dark-color);
    display: flex;
    flex-grow: 0;
    flex-direction: row;
    gap: 1vw;
    justify-content: space-between;
    padding: 4px 8px;
}

header {
    color: var(--fg-color);
    font-size: 150%;
}

main {
    margin: 0 auto;
    padding: 8px;
    width: 100vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
}

footer {
    color: var(--light-color);
}

numemory-game {
    height: 100%;
}

#menu-button,
#help-button {
    cursor: pointer;
}

dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 1em;
    background: var(--bg-color);
    color: var(--fg-color);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    border-width: calc(clamp(18px, 2vw, 22px) / 2);
    border-color: var(--dark-color);
    border-style: solid;
    width: 100%;
    overflow: auto;
}

dialog * {
    user-select: text;
}

dialog>div {
    margin: 0 auto;
    width: fit-content;
    font-size: 1.2rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 16px;
}

dialog h2 {
    font-size: 1.7rem;
    margin: 0 0 1ex 0;
}

dialog h2:not(:first-child) {
    margin-top: 2ex;
}

dialog p,
ol,
h3 {
    margin: 0 0 1ex 0;
}

dialog>div:last-child {
    margin-top: 2ex;
}

dialog div>div.form {
    display: flex;
    flex-direction: row;
    gap: 8px;
    justify-content: flex-start;
}

dialog input {
    display: inline-block;
    font-family: GameBoy, monospace;
    font-size: 1rem;
    padding: 1ex 0.5em;
}

dialog button {
    font-family: GameBoy, monospace;
    font-weight: bold;
    font-size: clamp(16px, 2vw, 24px);
    padding: 1ex 1em;
    background: var(--fg-color);
    color: var(--bg-color);
    border: none;
    cursor: pointer;
}

dialog::backdrop {
    background-color: color-mix(in srgb, var(--bg-color) 50%, transparent);
}

dialog input[type="number"] {
    text-align: right;
}

:root {
    --checkbox-size: clamp(22px, 2vw, 44px);
    --checkbox-border-size: 3px;
}

dialog input[type="checkbox"] {
    position: relative;
    appearance: none;
    left: var(--checkbox-size);
    top: 0;
    z-index: 0;
}

dialog input[type="checkbox"]+label {
    position: relative;
    display: block;
    cursor: pointer;
    padding-left: calc(3 * var(--checkbox-size));
    height: calc(2 * var(--checkbox-size));
}

dialog input[type="checkbox"]+label:before {
    width: calc(var(--checkbox-size) * 2);
    height: var(--checkbox-size);
    border: var(--checkbox-border-size) solid var(--light-color);
    background-color: var(--bg-color);
    content: "";
    margin-right: var(--checkbox-size);
    z-index: 5;
    position: absolute;
    left: 0;
}

dialog input[type="checkbox"]+label:after {
    background-color: var(--fg-color);
    width: var(--checkbox-size);
    height: var(--checkbox-size);
    content: "";
    position: absolute;
    left: var(--checkbox-border-size);
    top: var(--checkbox-border-size);
    z-index: 10;
}

dialog input[type="checkbox"]:checked+label:before {
    background-color: var(--light-color);
}

dialog input[type="checkbox"]:checked+label:after {
    background-color: white;
    margin: 0 0 0 var(--checkbox-size);
}

ol {
    display: block;
}

ol>li {
    display: list-item;
    list-style-type: decimal;
    list-style-position: outside;
    margin-left: 3em;
}