:root {
    --color-text: #000000;
    --color-background: #d9fcff;
    --color-frame: #f5feff;
    --color-border: #09cdda;
    --color-tagline: #08b3bf;
    --color-input: #d5fcff;
    --color-extra: #555555;

    --font-header: Zyzol, Roboto, Arial, sans;
    --font-sans: Roboto, Arial, sans;
    --font-serif: "Roboto Serif", serif;
}

body {
    height: 90vh;
    min-height: 20em;
    display: grid;
    place-content: center;
    overflow-x: hidden;

    color: var(--color-text);
    background-color: var(--color-background);
    
    font-family: var(--font-sans);
    font-size: 1.5em;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-header);
}

main {
    max-width: max-content;
    max-height: max-content;

    margin: 0.5em;
    padding: 1em;
    border: 0.1em solid var(--color-border);
    border-radius: 1.75em;
    background-color: var(--color-frame);
    box-shadow: 0 0.5em 1em -0.1em #0232;

    display: flex;
    flex-flow: column nowrap;
    align-items: center;
}

h1 {
    margin-bottom: 0;
}

.tagline {
    color: var(--color-tagline);
    margin-top: 0;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 0.9em;
    text-align: center;
}

.ingredients {
    margin-block: 2em;
    max-width: max-content;

    display: grid;
    grid-template-columns: auto 1fr 1fr;
    grid-gap: 0.5em 0.25em;
}

.ingredients > * {
    display: inline;
    padding: 0.25em;
    align-self: center;
}

.ingredients > input {
    border-radius: 1em;
    padding-inline: 0.5em;
    border: none;
    background-color: var(--color-input);
    text-align: right;
    width: 3em;
    place-self: end;

    font-family: var(--font-sans);
    font-size: 1em;
}

.extra {
    color: var(--color-extra);
    font-family: var(--font-serif);
    font-size: 0.7em;
    font-style: italic;
    text-align: center;
}

@keyframes pan {
    0% {
        background-position: 0% 0%;
    }
    100% {
        background-position: 100% 0%;
    }
}

.background {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    
    background: url('dots.svg');
    opacity: 30%;
    background-size: 2em;
    animation: pan 200s linear infinite;
}

.background .gradient {
    width: 100%;
    height: 100%;
    
    background: radial-gradient(circle at center, transparent, var(--color-background));
}

/* Background animation */
@media (prefers-reduced-motion) {
    .background {
        animation: none !important;
    }
}

/* Hide number input spinner */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance: textfield;
}

/* Adapt to screen size */
@media screen and (max-width: 450px) {
    /* Make label and inputs on separate rows */
    .ingredients {
        grid-template-columns: 1fr auto;
        margin-top: 0;
        grid-row-gap: 0.25em;

        & .ingredient {
            grid-column-start: span 2;
            align-self: end;
            margin-top: 1em;
        }
    }
}

@media screen and (min-width: 451px) {
    .ingredient {
        text-wrap: nowrap;
    }
}