:root {
    --content-width: 1400px;
}
body {
    margin: 0;
    min-height: 100dvh;
    background-color: #1a0b2e; 
    background-image: url("/images/background.png");
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
}
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(26, 11, 46, 0.2);
    z-index: -1;
}
#container {
    grid-template-columns: 1fr min(90dvw, var(--content-width)) 1fr;
    & header {
        background-color: transparent;
        & img {
            margin-left: 2rem;
        }
        & #menu-button {
            background-color: transparent;
        }
    }
    & #page-content {
        grid-column: 2;
        grid-row: 2;

        & #video-player {
            position:relative;
            width: 100%;
            aspect-ratio: 4 / 3;
            border-top: 1px solid rgba(255, 255, 255, 0.4);
            border-left: 1px solid rgba(255, 255, 255, 0.4);
            box-shadow: 3px 3px 3px rgba(0,0,0,0.09);
            border-radius: 20px;
            margin-bottom: 4rem;
            & #htmlplayer {
                left:0;
                top:0;
                height:100%;
                width:100%;
                position:absolute;
                background-color: rgba(255, 255, 255, 0.024);
                backdrop-filter: blur(10px);
                padding: 5dvw;
                border-radius: 20px;
            }
        }
        & #video-list {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-auto-rows: max-content;
            gap: 3rem;
            background-color: rgba(255, 255, 255, 0.024);
            backdrop-filter: blur(10px);
            border-top: 1px solid rgba(255, 255, 255, 0.4);
            border-left: 1px solid rgba(255, 255, 255, 0.4);
            border-right: 2px inset rgba(255, 255, 255, 0.04);
            border-bottom: 2px inset rgba(255, 255, 255, 0.04);
            padding: 3dvw;
            border-radius: 20px;
            
            & .video-thumb {
                width: 100%;
                aspect-ratio: 16 / 9;
                display: grid;
                align-content: center;
                cursor: pointer;
                & img {
                    border-radius: 8px;
                    width: 100%;
                    filter: grayscale(50%);
                    transition: transform 0.4s ease, filter 0.4s ease;
                    &:hover {
                        transform: scale(1.1);
                        filter: grayscale(0%);
                    }
                }
            }
        }
    }
    & footer {
        & #contact-wrapper {
            & #contact-email {
                color: #cbcbcb;
            }
            & #cell-number {
                color: #cbcbcb;
            }
        }
    }
}
@media screen and (width < 1000px) {
    #container {
        & #page-content {
            & #video-list {
                grid-template-columns: repeat(2, 1fr);
            }
        }
    }
}