/* css reset */
* {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    box-sizing: border-box;
    background-color: inherit;
    color: inherit;
    border: none;
}

/* typography */
@font-face {
    font-family: Pacifico;
    src: url(Pacifico/Pacifico-Regular.ttf);
}

@font-face {
    font-family: Zain;
    src: url(Zain/Zain-Light.ttf);
    font-weight: regular;
}

@font-face {
    font-family: Zain;
    src: url(Zain/Zain-Bold.ttf);
    font-weight: bold;
}

html {
    font-family: Zain, sans-serif;
}

h1 {
    font-family: Pacifico, cursive;
    font-size: 2.5rem;
}

h2 {
    font-family: Pacifico, cursive;
    font-size: 1.5rem;
}

/* colors */
html {
    --green: oklch(0.4045 0.1348 141.62);
    --red: oklch(0.5081 0.1751 21.1);
    background-color: var(--green);
    color: white;
}

/* overall page layout */
body {
    display: grid;
    grid-template-columns: minmax(2ch, 1fr) minmax(auto, 80ch) minmax(2ch, 1fr);
    grid-template-rows: min-content 1fr min-content;

    max-width: 100vw;
    min-height: 100vh;

    padding-block: 2rem;
}

body > *,
form > *,
main > * {
    grid-column: 2;
    margin-top: 2rem; /* can't be a row-gap on the grid because of our hack to always put the footer at the bottom */
}

form,
main {
    grid-column: 1 / -1;

    display: grid;
    grid-template-columns: subgrid;
    align-self: start;
}

footer {
    grid-row: -1;
}

/* transitions */
form,
main {
    view-transition-name: main;
}

@keyframes slide-in {
    from {
        transform: translate(-100vw, 0);
    }

    to {
        transform: translate(0, 0);
    }
}

@keyframes slide-out {
    from {
        transform: translate(0, 0);
    }

    to {
        transform: translate(100vw, 0);
    }
}

::view-transition-new(main) {
    animation: slide-in 0.6s ease-in-out;
    z-index: -1;
}

::view-transition-old(main) {
    animation: slide-out 0.6s ease-in-out;
    z-index: -1;
}

/* input styling for home page */
label {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

input {
    padding: 0.5rem 1ch;
    border-radius: 1ch;
    outline: 2px solid grey;
}

input:focus {
    outline: 2px solid var(--red);
}

button {
    justify-self: end;
    padding-inline: 2ch;
    border-radius: 1ch;
    background-color: var(--red);
}