:root {
    --colour-base: #8edc6f;
    --colour-green: #43a856ff;
    --colour-green-aa: #358544;
    --colour-dark-green: #286433;
    --colour-green-2: #64bd76ff;
    --colour-green-3: #85cb91ff;
    --colour-green-4: #75c585ff;
    --colour-teal: #9bbcabff;
    --colour-grey: #9fa6b4ff;
}

html {
    color-scheme: light;
    background: var(--colour-teal);
}

body {
    margin: 0;
    font-family:
        -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
        Arial, sans-serif;
    display: grid;
    grid-template:
        'header' auto
        'main' 85%
        'footer' auto
        'keyboard' env(keyboard-inset-height, 0px);
}

body > * {
    min-width: 0;
}

header {
    grid-row: 1;
    height: 100%;
    text-align: left;
    padding-left: 2em;
    color: var(--colour-dark-green);

    a:visited {
        color: inherit;
    }
}

main {
    grid-row: 2;

    height: 80vh;
    max-width: 22em;
    margin: 0 auto;
    padding: 1em;
    display: grid;
    font-size: 1.25rem;
    line-height: 1.25;
    align-content: center;
    justify-content: stretch;
}

footer {
    grid-row: 3;
    text-align: center;
    justify-items: center;
}

#clue.header {
    font-size: clamp(1.1rem, 0.8rem + 5vw, 2.2rem);
}

.pill {
    padding: 0.5em 0.75em;
    background: var(--colour-dark-green);
    color: white;
    font-size: medium;
    border-radius: 1.5em;
    border-width: 0;
    cursor: pointer;
    text-align: center;
    line-height: 1.1;

    &:hover {
        background: color-mix(in srgb, var(--colour-dark-green), black 30%);
    }
}

.pill--big {
    font-size: large;
}

a {
    text-decoration: none;
}

p {
    text-align: center;
    padding-bottom: 1em;
    font-size: x-large;
}

.header {
    color: var(--colour-dark-green);
    text-align: center;
}

.header--large {
    font-size: 5rem;
}

.input {
    padding: 1em;
    resize: none;
    font-family: inherit;
    font-size: large;
}

.list {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
}