html, body {
    margin: 0;
    padding: 0;
    height: 100%; /* helps with 100vh consistency */

    background-color: black;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

/*---------HEADER-------------*/

header {
    position: sticky;
    height: 4rem;
    background-color: black;
    padding: 0.5rem 2rem;
    display: flex;
    align-items: center;
    img {
        height: 3rem;
    }
    nav {
        flex-grow: 2;
    }
    nav ul {
        display: flex;
        justify-content: flex-start;
        gap: 1rem;
        li, a, a:visited {
            list-style-type: none;
            color: white;
            text-decoration: none;
        }
    }
    /*this contains the bell and the user button, not search */
    #profile-area {
        display: flex;
    }
    button {
        border: 0;
        /* border-radius: 0.25rem; */
        background: none;
        color: rgb(255, 255, 255);
        padding: 0.25rem 0.5rem;
        margin: 0.25rem;
        cursor: pointer;
    }
    /* display: none; */

}

/* HORIZONTAL CONTENT EXPLORER AREA */

#top-content-explorer {
    .splash-box {
        aspect-ratio: 16 / 9; 
        width: 100%;
        max-height: 80vh; 
        display: flex;
    } 
    .splash {
        display: none;
    }
    .splash.active {
        display: flex; 
    }
    .splash {
        box-sizing: border-box;
        width: 100%;
        height: 100%; 
        background-size:cover;
        background-position: 50% 25%;
        /* background-color: blue; */
        flex-direction: column;
        justify-content: flex-end;

        padding: 0 2rem;
        
        .title-desc-and-actions {
            /* background-color: aqua; */

            max-height: 15rem;
            height: 30%;
            margin:  0;
            margin-bottom: 12rem;
            width: 15rem;
            color: rgb(255, 255, 255);
            img {
                height:100%;
            }
            .controls {
                display: flex;
                button {
                    flex: 1;
                    border: none;
                    background: rgba(90, 90, 90, 0.295);
                    color: rgb(255, 255, 255);
                    padding: 0.25rem 0.5rem;
                    margin: 0.25rem;
                    cursor: pointer;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
            }
            p {
                margin-top: 0.5rem;
            }
        }
    }

    #movie-row {
        position: relative;
        background: linear-gradient(
            to bottom, 
            rgba(0, 0, 0, 0) 0%,
            rgba(0, 0, 0, 1) 30% 
        );
        /* background-color: aqua; */
        height: 9rem;
        margin-top: -5rem;
        .scroll-row {
            display: flex;
            gap: 0.5rem;
        }
        img {
            height: 8rem;
            scroll-snap-align: start;
            cursor: pointer;
            transition: filter 0.3s ease, transform 0.3s ease;
        }

        img:hover {
            filter: brightness(0.8); /* darkens slightly */
            transform: scale(1.03);  /* subtle pop */
        }

        .scroll-row{
            overflow-x: auto;
            overflow-y: hidden;
            scroll-behavior: smooth; /* for smooth scroll on button click */
            scroll-snap-type: x mandatory;
        }
        /*---- Hide the scrollbarbut keep scrolling ----*/
        .scroll-row {
            -ms-overflow-style: none;  /* IE and Edge */
            scrollbar-width: none;     /* Firefox */
        }
        .scroll-row::-webkit-scrollbar {
            display: none;             /* Chrome, Safari, Opera */
        }
        /*----------------------------------------------*/

        .move-btn {
            z-index: 10;
            height: 7rem;
            width: 5rem;
            border: none;
            background: rgba(90, 90, 90, 0.295);
            color: rgb(255, 255, 255);
            padding: 0.25rem 0.5rem;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            
            /*animation*/
            opacity: 0;
        }
        .move-btn:hover{
            opacity: 1;
        }
        .move-fw-btn {
            right:0;
            top:0;
        }
    }
}

#backenden {
    background-image: url(images/Backenden/splash.png);
}

#inner-peace {
    background-image: url(images/InnerPeace/splash.png);
}

#farmors-spaghetti {
    background-image: url(images/FarmorsSpaghetti/splash.png);
}

#hang {
    background-image: 
    linear-gradient(30deg, rgba(0, 0, 0, 1) 10%, rgba(0, 0, 0, 0) 50%),
    url(images/Hang/splash.png);
}