
/* GLOBAL SETTINGS AND VARIABLES */
    :root {
        --gutter: 3.5vw;
        --spacer: 15vw;
        --lineHeight: 2rem;
        --trackWidth: 100%;
        --formWidth: min(85%, 420px);
        --cardCellSize: min(calc(100vw - var(--gutter) * 2), 350px);
        --artCellSize: min(calc(100vw - var(--gutter) * 2), 480px);
        --colorBackground: #e6e6e6;
        --colorLight: #aaaaaa;
        --colorFade: #59595a;
        --colorFont: #1b1b1c;
    }
    * {
        /*overscroll-behavior: auto;*/
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        text-decoration: none;
        list-style: none;
    }
    
/* MAIN ELEMENTS */
    html {
        image-rendering: pixelated;
        scroll-behavior: smooth;
        background-color: var(--colorBackground);
        overflow-x: hidden;
        background: #000;
    }
    body {
        height: 100vh;
        height: 100svh;
        width: 100vw;
        display: grid;
        overflow-x: hidden;
        background: var(--colorBackground);
    }
    main {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        height: auto;
        width: 100%;
        padding: 0 var(--gutter);
    }
    
@media (max-aspect-ratio: 5/4) {
    body {
        grid-template-columns: 100vw;
        grid-template-rows: 30% 70%;
    }
}

@media (min-aspect-ratio: 5/4) and (max-width: 1280px) {
    body {
        grid-template-columns: 40vw 60vw;
        grid-template-rows: 100%;
    }
}

@media only screen and (min-width: 480px) {
    :root {
        --trackWidth: min(100%, 480px);
    }
}

@media only screen and (min-width: 480px) and (min-aspect-ratio: 5/4) {
    main {
        margin-top: var(--gutter);
    }
}

@media only screen and (min-width: 768px) {
    :root {
        --trackWidth: 550px;
    }
}

@media only screen and (min-width: 1281px) {
    :root {
        --trackWidth: 600px;
        --spacer: 5vw;
    }
    body {
            grid-template-columns: 25vw 50vw 25vw;
            grid-template-rows: 100%;
    }
}
