body {
    margin: 0;
    border: 0;
}

body {
    background-color: #333;
    font-family: 'Open Sans', sans-serif; 
    color: white;

    /* display: flex;
    justify-content: space-evenly;
    align-items: center; */

}

button{
    font-family: 'Open Sans', sans-serif; 

}


section{
    width: 100vw;

}

section h1 {
    margin-left: 2rem;
    margin-bottom : 0;
    font-weight: 100;
}

.button_panel{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    width: 100vw;
    flex-direction: row;
    flex-wrap: wrap;
    
}


#categories {

}


.CategoryButton {
    cursor: pointer;
    color: white;

    width: 12rem;
    height: 6rem;
    background-color: rgba(56, 56, 56, 0.8);
    background-image: linear-gradient(357deg, #1f232b, #2b2c30);
    box-shadow: 0 4px 12px 1px #030618;
    border-style: solid;
    border-width: 3px;
    border-color: rgba(56, 56, 56, 0.8);
    border-radius: 10px;
    background-color: #292a33;

    display: flex;
    justify-content: space-evenly;
    align-items: center;
    transition: all 300ms;

    overflow: hidden;
    position: relative;

    font-size: 1.4rem;

    margin: 0.5rem 2rem;

}
.CategoryButton:hover {
    scale: 1.07;
    transition: all 300ms;
    border-color: white;
}
















#featured{
    margin-top: 10rem;
}

.ShowButton {

    margin: 1.6rem;
    cursor: pointer;

    width: 12rem;
    height: 6rem;
    background-color: rgba(56, 56, 56, 0.8);
    background-image: linear-gradient(357deg, #1f232b, #2b2c30);
    box-shadow: 0 4px 12px 1px #030618;
    border-style: solid;
    border-width: 3px;
    border-color: rgba(56, 56, 56, 0.8);
    border-radius: 10px;
    background-color: #292a33;

    display: flex;
    justify-content: space-evenly;
    align-items: center;
    transition: all 300ms;

    overflow: hidden;
    position: relative;

    position: relative;
    display: flex; /* Use flexbox for centering */
    justify-content: center; /* Center content horizontally */
    align-items: center; /* Center content vertically */

    margin: 0.5rem 2rem;

}


.ShowButton:hover {
    scale: 1.07;
    transition: all 300ms;
    border-color: white;
}

.ShowButton  video {
    opacity: 0;
    width: 100%; /* Ensures the video fills the width of the container */
}

.ShowButton:hover  video {
    opacity: 1;
}

.ShowButton img {
    position: absolute; /* Positions the image relative to its closest positioned ancestor */
    width: 80%;
    height: auto;
}