html, body {
    height: 100%;
    
    margin: 0;
}

body {
    overflow-y: hidden;
}

main {
    position: relative;
    
    margin-top: 0;

    flex-grow: 1;
    height: 1%; /* grows until it hits footer */
}

#navbar::before {
    backdrop-filter: none;
}

#footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
}

.rect_button {
    background-color: rgba(0,0,0,0.3);
    color: white;
    
    border: 2px solid #cccccc;
    box-shadow: 1px 1px 4px rgba(255,255,255,0.5);

    text-align: center;
    font-family: Lexend, sans-serif;
    text-decoration: none;
}

#gallery_container {
    display: grid;
    grid-template-columns: 1fr minmax(300px, 2fr);
    grid-template-rows: 4em auto 1fr 0.5em;
    height: 100%;
}

#gallery_container > * {
    grid-row: 3;
    
    min-height: 0;
    min-width: 0;
}

#gallery_container::before {
    content: "";
    grid-row: 1 / 5;
    grid-column: 2 / 3;

    opacity: 60%;

    background-color: black;
}

#gallery_header {
    grid-row: 2;
    grid-column: 1 / 2;
    
    display: flex;

    height: fit-content;
    
    margin: 1em;
    
    font-family: Lexend, sans-serif;
    
    color: white;
}

#gallery_header_text {
    flex-grow: 1;
    max-width: 80%;

    h1, h3 {
        margin: 0;
    }
    
    h1 {
        font-size: 3em;
        font-weight: 500;
    }
    
    h3 {
        font-size: 1em;
        font-weight: 200;
    }
}

#gallery_header_btn_cart {
    display: flex;
    flex-direction: column;
    justify-content: center;

    width: 20%;
    
    font-size: 1.4em;
    
    p {
        margin: 0;
        margin-top: 0.2em;
        
        font-size: 0.8em;
        font-weight: 200;
    }
}

#gallery_grid {
    position: relative;
    
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9em, 1fr));
    grid-auto-rows: 1fr;
    
    gap: 0.25em;
    margin-left: 0.5em;
    margin-right: 0.5em;
    
    height: 100%;
    
    overflow-y: auto;
}

.grid_image {
    position: relative;

    aspect-ratio: 1;
    
    box-shadow: 2px 2px 3px rgba(0,0,0,0.3);
    
    img {
        display: block; /* this is required, or container height will be slightly off */

        height: 100%;
        width: 100%;
        
        object-fit: cover;
    }
}

.grid_image.active {
    border: 2px solid lightgray;
    filter: brightness(60%);
}

.grid_image.in_cart {
    border: 5px solid #32cf2a;
}

.grid_image.in_cart::after {
    /* content: "\1f6d2"; */
    content: "\2705";
    
    position: absolute;
    top: 0;
    right: 0;
    
    /* background-color: #3bed32; */
}

#gallery_viewer {
    grid-row: 2 / 4;
    grid-column: 2 / 3;
    
    position: relative;
    
    display: grid;
    grid-template-columns: 1fr 10fr 1fr;
    grid-template-rows: 1fr 20fr 3fr;
    align-items: center;
    
    margin-top: 1rem;
    padding-bottom: 3.5rem;
    
    overflow: hidden;

    opacity: 1;
    
    /* background-color: #0A090C; */
    
    button {
        height: 100%;
        
        color: white;
        
        z-index: 11;
    }
}

#gallery_viewer > * {
    grid-row: 2 / 3;
}

#gallery_viewer_img_container, #gallery_viewer_img {
    height: 100%;
    width: 100%;

    min-height: 0;
    min-width: 0;
}

#gallery_viewer_img_container {
    grid-column: 2 / 3;
    
    position: relative;

    box-sizing: border-box;
}

#gallery_viewer_img {
    position: relative;

    z-index: 1; /* on top of loading marker */

    object-fit: contain;
}

#gallery_viewer_img_loader_container {
    position: absolute;
    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    p {
        z-index: 0;

        text-align: center;
        font-size: 1.5rem;
        font-family: Lexend, sans-serif;
        font-weight: 200;
    }
}

#gallery_viewer_info {
    grid-row: 1 / 2;
    grid-column: 2 / 3;

    display: flex;
    
    z-index: 11;

    margin: 0.5rem;
    
    color: white;
    /* background-color: #212121; */
    
    h3 {
        width: fit-content;

        margin: 0;
        text-align: center;

        padding: 0.5rem;
        
        font-size: 1.2em;
        font-weight: 300;
        font-family: Lexend, sans-serif;
        
        text-align: left;

        border: 1px solid white;
    }

    em {
        font-weight: 200;
    }
}

#gallery_viewer_btn_close, #gallery_viewer_btn_left, #gallery_viewer_btn_right {
    background: none;
    border: none;
}

#gallery_viewer_btn_close {
    grid-row: 1 / 2;
    grid-column: 3 / 4;
    
    display: none;
    
    aspect-ratio: 1/1;

    padding: 0.2em;
    
    font-size: 2em;
}

#gallery_viewer_btn_left, #gallery_viewer_btn_right {    
    font-size: 5em;
    
    text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
}

#gallery_viewer_btn_left {
    grid-column: 1 / 2;
}

#gallery_viewer_btn_right {
    grid-column: 3 / 4;
}

#gallery_viewer_purchase_menu {
    grid-row: 3 / 4;
    grid-column: 2 / 3;
    
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    
    gap: 1em;
    
    height: 100%;
    box-sizing: border-box;
    
    padding-top: 1em;
    padding-bottom: 1em;
    
    button {
        width: 40%;

        font-size: 1.5em;
    }
    
    button.in_cart {
        background-color: #cccccc;
        color: #0A090C;
    }
}

@media (height <= 600px), (max-aspect-ratio: 1/1) {
    #footer {
        position: inherit;
    }

    #gallery_header_text h1 {
        font-size: 2em;
    }

    #gallery_header_btn_cart {
        font-size: 0.8em;

        p {
            font-size: 0.7em;
        }
    }
    
    #gallery_container {
        grid-template-columns: 1fr;
    }

    #gallery_container::before {
        content: none;
    }
    
    #gallery_grid {
        grid-template-columns: repeat(auto-fill, minmax(7em, 1fr));
    }
    
    #gallery_viewer {
        display: none;
        
        transition: opacity 0.2s ease-in-out;
        
        position: absolute;
        inset: 0;
        height: 100dvh;
        
        z-index: 101;
        
        margin-top: 0;
        
        grid-template-columns: 1fr 5fr 1fr;
        
        background-color: rgba(0,0,0,0.8);
        backdrop-filter: blur(5px);
    }
    
    #gallery_viewer.show {
        display: inherit;

        touch-action: none;
    }
    
    #gallery_viewer_img_container {
        grid-column: 1 / 4;
        
        padding-left: 1em;
        padding-right: 1em;
    }
    
    #gallery_viewer_btn_close {
        display: inline-block;
    }
    
    #gallery_viewer_btn_left {
        grid-row: 2 / 3;
    }
    
    #gallery_viewer_btn_right {
        grid-row: 2 / 3;
    }
    
    #gallery_viewer_purchase_menu {
        grid-column: 1 / 4;

        padding-top: 0.2em;

        button {
            font-size: 1em;
        }
    }
}

@media (pointer: coarse) {
    #gallery_viewer_btn_left, #gallery_viewer_btn_right {
        display: none;
    }
}