:root {
    --lavender-veil: #e5d4edff;
    --berry-crush: #b84a62ff;
    --space-indigo: #171738ff;
    --muted-olive: #a1c181ff;
    --seagrass: #619b8aff;
    --primary-theme: var(--seagrass);
    --secondary-theme: var(--muted-olive);
    --dark-color: var(--space-indigo);
    --light-color: var(--lavender-veil);
    --contrasting-color: var(--berry-crush);

    --base-padding: 0.5rem;
    --text-width: 70ch;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 1.2rem;
    font-family:
        Lexend,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Oxygen,
        Ubuntu,
        Cantarell,
        "Open Sans",
        "Helvetica Neue",
        sans-serif;
}

nav {
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: space-between;
    padding: var(--base-padding);
    flex-wrap: wrap;
    gap: calc(var(--base-padding) * 2);
}

nav > ul {
    list-style: none;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

nav > ul > li {
    padding: calc(var(--base-padding) * 1.6);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

nav > ul > li:target {
    background-color: var(--secondary-theme);
}

main {
    max-width: var(--text-width);
    padding: var(--base-padding);
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: calc(var(--base-padding) * 2);
}

button {
    font-size: 1em;
    padding: calc(var(--base-padding) * 0.5);
}