*{
    box-sizing:border-box;

}

img {
    max-width:100%;
}

body {
    background-color: rgb(0, 0, 0);
    height:100%;
}

.main-container {
    background-color:rgb(0, 0, 0);
    height:100vh;
    margin:100px;
}

.top {
    background-color:rgb(0, 0, 0); 
    height: 30%;
    display: flex;
    gap: 10px;
    padding:10px;
}

.top-left {
    background-color: rgb(0, 0, 0);
    width:25%;
    display:flex;
    align-items:end;

}






.top-middle {
    background-color: rgb(0, 0, 0);
    width:25%;
    display:flex;
    flex-direction:column;
}



.top-right {
    background-color: rgb(0, 0, 0);
    width: 50%;
    overflow:hidden;
}

.middle {
    background-color: rgb(0, 0, 0);
    height: 40%;
    display:flex;
    gap: 10px;
    padding: 10px;
    padding-bottom: 0px;
    }
/* 
.middle-item-1 {
    background-color: rgb(83, 83, 83);
    height:100%;
    margin:10px;
}
.middle-item-2 {
    background-color: rgb(83, 83, 83);
    height:100%;
    margin:10px;
    margin-top:0px;

}

.middle-item-3 {
    background-color: rgb(83, 83, 83);
    height:100%;
    margin:10px;

}

.middle-item-4 {
    background-color: rgb(83, 83, 83);
    height:100%;
    margin:10px;
    margin-top:0px;

} */
    
.middle-left {
    background-color: rgb(0, 0, 0);
    width:33%;
    display:flex;
    align-items:center;
    justify-content:center;
    
    
    
}

.middle-middle {
    background-color: rgb(0, 0, 0);
    width: 33%;
    display:flex;
    align-items:center;
    justify-content:center;

}

#video {
    object-fit:cover;
    width:100%;
    height:100%;
    align-items:center;
    justify-content:center;
    opacity:0%;
    transition:ease 3s;
}

#video:hover {
    opacity:100%;
    transition:ease 10s;
    cursor:pointer;
}

.title {
    font-size:40px;
    font-family:Silkscreen; 
    text-align:center;
    display:flex;
    bottom:0;
    left:0;
    margin-right:auto;
    margin-left: auto;
    color:rgb(0, 0, 0);

}

.middle-right {
    background-color: rgb(0, 0, 0);
    width:33%;
    display:flex;
    margin-bottom:0;

}

.bottom {
    background-color:rgb(0, 0, 0); 
    height: 30%;
    display: flex;
    gap: 10px;
    padding:10px;
    padding-bottom:0;

}

.bottom-left {
    background-color:rgb(0, 0, 0);
    width: 50%;
    overflow:hidden;

}
.bottom-middle {
    background-color:rgb(0, 0, 0);
    width:25%;
    display:flex;
    align-items:end;
}


.bottom-right {
    background-color:rgb(0, 0, 0);
    width: 25%;
    display:flex;
    flex-direction:column;
}

.bottom-right-top {
    background-color: rgb(0, 0, 0);
    display:flex;
    height: 85%;
}

.bottom-right-bottom {
    background-color:rgb(0, 0, 0);
    display:flex;
    height:15%;
}

.end {
    background-color: rgb(0, 0, 0);
    height: 40%;
    display:flex;
    gap: 10px;
    padding: 10px;
    
    }

.end-left {
     /* background-color: rgb(83, 83, 83); */
     width:33%;
    display:flex;
    align-items:center;
    justify-content:center;
        
        
        
    }
    
    .end-middle {
        background-color: rgb(0, 0, 0);
        width: 33%;
        display:flex;
        align-items:center;
        justify-content:center;
    
    }

    .end-right {
        background-color: rgb(0, 0, 0);
        width:33%;
        display:flex;
        margin-bottom:0;
    
    }

img {
    width:100%;
    height: 100%;
    overflow:hidden;
    object-fit:cover;
}