body {
    background: url("/stuff/bg.avif");
    background-size: cover;
}

main {
    display: grid;
    height: 100dvh;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto;

    @media (width < 48rem) {
        grid-template-columns: 1fr;

        * {
            grid-column: 1 !important;
            grid-row: unset !important;
            place-self: center !important;
        }

        nav {
            flex-direction: column;
        }

        .auth {
            grid-row: 1 !important;
        }
    }
}

header {
    background: white;
    width: max-content;
    padding: 1rem;
    grid-column: 2;
    place-self: start end;
    margin: 2rem;
}

.nav {
    background: white;
    width: max-content;
    height: max-content;
    padding: .25rem .5rem;
    place-self: end start;
    grid-row: 2;
    grid-column: 1 / span 2;
    margin: 2rem;
}

.auth {
    background: white;
    width: max-content;
    height: max-content;
    grid-row: 1;
    grid-column: 1;
    place-self: start start;
    padding: 0.25rem .5rem;
    padding-left: .75rem;
    margin: 2rem;
}