:root {
    font-size: clamp(1em, 0.9em + .25vw, 1.2em);
    line-height: 1.7;

    --background-colour: #fff;
    --text-colour: #000;
    --link-colour: #a4215e;

    --accent-soft:  #fba1c3;
    --accent-softer: #ffedf4;
}


@media (prefers-color-scheme: dark) {
    :root {
        --background-colour: #271635;
        --text-colour: #fff;
        --link-colour: #ff98f4;

        --accent-soft:  #5c236c;
        --accent-softer: #34214a;
    }
}

body {
    margin: 0;
    color: var(--text-colour);
    font-family: 'system-ui', 'sans';
    background-color: var(--background-colour);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

*, ::after, ::before {
    box-sizing: border-box;
}

.visually-hidden:not(:focus):not(:active) {
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    position: absolute;
    white-space: nowrap;
}

#skip-link {
    position: absolute;
    background-color: inherit;
}

.container {
    max-width: 45rem;
    margin-left: auto;
    margin-right: auto;
    padding-left: .5rem;
    padding-right: .5rem;
}

a {
    color: var(--link-colour);
}

main {
    flex-grow: 1;
    width: 100%;
}

header[role="banner"] {
    background-color: var(--accent-softer);
    border-bottom: 1px solid var(--accent-soft);
    padding: 1rem 0;
    a {
        color: inherit;
        text-decoration: none;

        &:hover, &:focus-visible {
            text-decoration: underline;
        }

        &[aria-current="page"] {
            font-weight: bold;
        }
    }

    a.brand {
        margin-right: 2rem;
    }

    nav {
        display: flex;

        ul {
            flex-grow: 1;
            padding: 0;
            margin: 0;
            display: flex;
            gap: 1rem;
            justify-content: end;
        }

        li {
            list-style: none;
        }
    }
}

footer[role="contentinfo"] {
    font-size: .8rem;
    text-align: center;

    a {
        color: inherit;
    }
}

.page-list {
    ul {
        padding: 0;
        margin: 0;
    }

    li {
        list-style: none;
        margin-bottom: 0.5rem;

        h2 {
            margin: 0;
            font-size: 1.25rem;
            font-weight: normal;
        }
        p {
            margin: 0;
            margin-top: .25rem;
        }
    }
}