/*Important*/
* {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
body {
    background-color: rgb(10, 10, 10);
}
/*Important end*/

/*Top homepage bar*/
.bar {
    height: 40vh;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    overflow: hidden;
    /*Flexbox*/
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.title {
    color: white;
    font-size: 4rem;
    font-weight:500;
}
.bar > p {
    color: white;
    margin-bottom: 20px;
}
.bar > div > p {
    color: white;
    margin-bottom: 20px;
}
.bar > p > a > img {
    width: 25px;
    border-radius: 50%;
    padding-bottom: 1px;
}
.bar > p > a {
    text-decoration: none;
    color: rgb(255, 230, 0);
}
.bar > div {
    width: 100%;
    display: flex;
    justify-content: center;
}
.bar > div > img {
    width: 100px;
    height: 100px;
    padding-top: 50px;
}
/*Top homepage bar end*/

/*Main Body*/
.mainBody {
    height: 49vh;
    width: 100%;
    margin-top: 4.2vh;
    /*Flexbox*/
    display: flex;
    justify-content: center;
    gap: 10px;
}
.box {
    background-color: rgba(0, 0, 0, 0.3);
    height: 50vh;
    width:25vw;
    border-radius: 10px;
  
    position: relative;
    /*Flexbox*/
    display: flex;
    justify-content: center;
    align-items: center;
}
.box > img {
    width: 22vw;
    height: 22vw;
    border-radius: 10px;
    position: absolute;
}
.fade-in-text {
    width: 22vw;
    height: 22vw;
    position: absolute;
    top: -1.5vw;
    border-radius: 10px;
    color: white;
    opacity: 0;
    transition: 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.fade-in-text:hover {
    opacity: 1;
}
.box > a {
    position: absolute;
    width: 22vw;
    height: 22.5vw;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.6);
    opacity: 0;
    transition: 0.2s;
    
}
.box > a:hover {
    opacity: 1;
}
.bg {
    position: fixed;
    top: 0;
    left: 0;
    z-index: -999;
    max-width: 100vw;
    min-width: 100vw;
    filter: brightness(30%);
}
.bgg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -999; /* Ensure content is on top of the video */
}
  
.bgg {
    object-fit: cover; /* Ensure the video covers the entire background */
    width: 100%;
    height: 100%;
    filter: brightness(30%);
}