.bgg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -999; /* Ensure content is on top of the video */
}
* {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
* {
    color: white;
}
body {
    background-color: black;
}  
.bgg {
    object-fit: cover; /* Ensure the video covers the entire background */
    width: 100%;
    height: 100%;
    filter: brightness(30%);
}


.bar {
    height: 10vh;
    width: 99vw;
    position: absolute;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}
.bar > img {
    height: 3vw;
    height: 3vw;
    filter: brightness(90%);
    margin-right: 1vw;
}
.mainBody {
    position: absolute;
    height: 87vh;
    width: 99vw;
    border-radius: 10px;
    margin-top: 11vh;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2vw;
}
.subBody {
    height: 30vw;
    width: 30vw;
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0.3);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
#backbutton {
    display: flex;
    position: absolute;
    width: 95%;
    justify-items: left;
}