:root {
    /* Base (background) */
    --lumo-base-color: hsl(210, 8%, 16%);

    /* Tint */
    --lumo-tint-5pct: hsla(210, 65%, 85%, 0.06);
    --lumo-tint-10pct: hsla(210, 61%, 80%, 0.14);
    --lumo-tint-20pct: hsla(210, 64%, 82%, 0.23);
    --lumo-tint-30pct: hsla(210, 69%, 84%, 0.32);
    --lumo-tint-40pct: hsla(210, 73%, 86%, 0.41);
    --lumo-tint-50pct: hsla(210, 78%, 88%, 0.5);
    --lumo-tint-60pct: hsla(210, 82%, 90%, 0.58);
    --lumo-tint-70pct: hsla(210, 87%, 92%, 0.69);
    --lumo-tint-80pct: hsla(210, 91%, 94%, 0.8);
    --lumo-tint-90pct: hsla(210, 96%, 96%, 0.9);
    --lumo-tint: hsl(210, 100%, 98%);

    /* Shade */
    --lumo-shade-5pct: hsla(210, 0%, 0%, 0.07);
    --lumo-shade-10pct: hsla(210, 4%, 2%, 0.15);
    --lumo-shade-20pct: hsla(210, 8%, 4%, 0.23);
    --lumo-shade-30pct: hsla(210, 12%, 6%, 0.32);
    --lumo-shade-40pct: hsla(210, 16%, 8%, 0.41);
    --lumo-shade-50pct: hsla(210, 20%, 10%, 0.5);
    --lumo-shade-60pct: hsla(210, 24%, 12%, 0.6);
    --lumo-shade-70pct: hsla(210, 28%, 13%, 0.7);
    --lumo-shade-80pct: hsla(210, 32%, 13%, 0.8);
    --lumo-shade-90pct: hsla(210, 33%, 13%, 0.9);
    --lumo-shade: hsl(210, 33%, 13%);

    /* Contrast */
    --lumo-contrast-5pct: var(--lumo-tint-5pct);
    --lumo-contrast-10pct: var(--lumo-tint-10pct);
    --lumo-contrast-20pct: var(--lumo-tint-20pct);
    --lumo-contrast-30pct: var(--lumo-tint-30pct);
    --lumo-contrast-40pct: var(--lumo-tint-40pct);
    --lumo-contrast-50pct: var(--lumo-tint-50pct);
    --lumo-contrast-60pct: var(--lumo-tint-60pct);
    --lumo-contrast-70pct: var(--lumo-tint-70pct);
    --lumo-contrast-80pct: var(--lumo-tint-80pct);
    --lumo-contrast-90pct: var(--lumo-tint-90pct);
    --lumo-contrast: var(--lumo-tint);

    /* Text */
    --lumo-header-text-color: var(--lumo-contrast);
    --lumo-body-text-color: var(--lumo-contrast-90pct);
    --lumo-secondary-text-color: var(--lumo-contrast-70pct);
    --lumo-tertiary-text-color: var(--lumo-contrast-50pct);
    --lumo-disabled-text-color: var(--lumo-contrast-30pct);

    /* Primary */
    --lumo-primary-color: hsl(161, 41%, 17%);
    --lumo-primary-color-50pct: hsla(161, 90%, 70%, 0.69);
    --lumo-primary-color-10pct: hsla(161, 90%, 55%, 0.13);
    --lumo-primary-text-color: hsl(0, 0%, 83%);
    --lumo-primary-contrast-color: #fff;

    /* Error */
    --lumo-error-color: hsl(3, 79%, 49%);
    --lumo-error-color-50pct: hsla(3, 75%, 62%, 0.5);
    --lumo-error-color-10pct: hsla(3, 75%, 62%, 0.14);
    --lumo-error-text-color: hsl(25, 100%, 50%);

    /* Success */
    --lumo-success-color: hsl(145, 72%, 30%);
    --lumo-success-color-50pct: hsla(145, 92%, 51%, 0.5);
    --lumo-success-color-10pct: hsla(145, 92%, 51%, 0.1);
    --lumo-success-text-color: hsl(145, 85%, 46%);

    /* Font */
    --lumo-font-family: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
        "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
        sans-serif;

    --lumo-font-size-xxxl: 1.75rem;
    --lumo-font-size-xxl: 1.375rem;
    --lumo-font-size-xl: 1.125rem;
    --lumo-font-size-l: 1rem;
    --lumo-font-size-m: 0.875rem;
    --lumo-font-size-s: 0.8125rem;
    --lumo-font-size-xs: 0.75rem;
    --lumo-font-size-xxs: 0.7rem;

    --lumo-line-height-m: 1.375;
    --lumo-line-height-s: 1.25;
    --lumo-line-height-xs: 1.15;
}

@font-face {
    font-family: "Nunito";
    font-style: normal;
    font-weight: 300;
    src: local(""), url("assets/fonts/nunito-v16-latin-regular.woff2") format("woff2");
}

html {
    color: var(--lumo-body-text-color);
    background-color: var(--lumo-base-color);
    color-scheme: dark;
}

body {
    font-family: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
        "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
        sans-serif;
    overscroll-behavior: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--lumo-header-text-color);
}

a:where(:any-link) {
    color: var(--lumo-primary-text-color);
}

a:not(:any-link) {
    color: var(--lumo-disabled-text-color);
}

blockquote {
    color: var(--lumo-secondary-text-color);
}

code,
pre {
    background-color: var(--lumo-contrast-10pct);
    border-radius: var(--lumo-border-radius-m);
}

/* disable text selection */
:not(input):not(textarea),
:not(input):not(textarea)::after,
:not(input):not(textarea)::before {
    -webkit-user-select: none;
    user-select: none;
    cursor: default;
}
input, button, textarea, :focus {
    outline: none;
}
