@import url(https://rsms.me/inter/inter.css);

* {
    box-sizing: border-box;
}

:root {
    font-family: Inter, sans-serif;
    font-feature-settings: 'liga' 1, 'calt' 1;
}

@supports (font-variation-settings: normal) {
    :root {
        font-family: InterVariable, sans-serif;
    }
}

body {
    max-width: 1024px;
    margin: auto;
    background-color: hsl(var(--hue), var(--s50), var(--l100));
    color: hsl(var(--hue), var(--s50), var(--l0));
}

footer {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex: 1;
    background-color: hsl(var(--hue), var(--s50), var(--l80));
    padding: 2rem;
    margin-top: 1rem;
}

button,
a.button {
    border: unset;
    text-decoration: none;
    color: white;
    padding: 0.75rem 2rem;
    background-color: hsl(var(--hue), var(--s100), var(--l50));
    font-family: inherit;
    font-weight: bold;
    border-radius: 0.75rem;
    transition: scale 0.3s;
    scale: 100%;
}

button.outline,
a.button.outline {
    background-color: transparent;
    color: hsl(var(--hue), var(--s70), var(--l40));
    border: 2px solid hsl(var(--hue), var(--s100), var(--l40));
    padding: calc(0.75rem - 2px) calc(2rem - 4px);
}

button.outline:hover,
a.button.outline:hover {
    background-color: transparent;
    /*hsl(var(--hue), var(--s100), var(--l95));*/
    border: 2px solid hsl(var(--hue), var(--s50), var(--l40));
    color: hsl(var(--hue), var(--s50), var(--l40));
}

button:hover,
a.button:hover {
    background-color: hsl(var(--hue), var(--s100), var(--l50));
}

button.outline:active,
a.button.outline:active {
    background-color: hsl(var(--hue), 90%, var(--l90));
}

button:active,
a.button.outline:active {
    background-color: hsl(var(--hue), 90%, var(--l60));
    scale: 90%;
}

table {
    border-collapse: collapse;
}

table td,
th {
    padding: 0.5rem 1rem;
}

table tr {
    background-color: hsl(var(--hue), var(--s50), var(--l90));
}

table tr:nth-child(2n) {
    background-color: hsl(var(--hue), var(--s50), var(--l80));
}

input {
    color: hsl(var(--hue), var(--s50), var(--l0));
    background-color: hsl(var(--hue), var(--s50), var(--l100));
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number],
input {
    appearance: textfield;
    -moz-appearance: textfield;
}

/* input::placeholder {
    font-size: 16px;
} */

input[type="number"],
input,
select {
    border: unset;
    font-size: 1rem;
    padding: 0.5rem 0rem 0.5rem 1rem;
    border: 1px solid hsl(var(--hue), var(--s10), var(--l50));
    font-family: inherit;
    border-radius: 0.75rem;
}

input[type="number"]:focus-visible {
    border: 1px solid hsl(var(--hue), var(--s25), var(--l50));
}

header {
    display: flex;
    width: 100%;
    gap: 1rem;
    justify-content: space-between;
    padding: 2rem;
    background-color: hsl(var(--hue), var(--s15), var(--l90));
    border-radius: 0 0 1rem 1rem;
}

header>nav {
    display: flex;
    align-items: center;
    gap: 2rem;
}

header>h1>a {
    text-decoration: none;
    color: inherit;
}

header>nav>a {
    color: hsl(var(--hue), var(--s50), var(--l20));
    padding: 0.25rem 0.5rem;
}

header>nav>a.active {
    background-color: hsl(var(--hue), var(--s50), var(--l80));
}

.flex1rem {
    display: flex;
    gap: 1rem;
}

.flex2rem {
    display: flex;
    gap: 2rem;
}

.flexspaceevely {
    justify-content: space-evenly;
}

header h1 {
    margin: 0;
}

@media (max-width: 800px) {
    header {
        flex-direction: column;
    }
}