*{
    margin: 0;
}
:root {
    --primary-color:  white;
}
html{
    scroll-behavior: smooth;
}

body{
    display: flex;
    flex-direction: column;
    min-height: 100vh;
  
}


nav{
    display: flex;
    align-items: center;
    background-color: black;
    width: 100%;
    height: 100px;

}

nav ul{
    list-style-type: none;
    padding: 0;
    display: flex;
    height: 100%;
    width: 100%;
}

.leftNavDiv{
    display: flex;
    align-items: center;
    width: 200px;
}

#logo{
    width: 100%;    
    margin-left: 20px;
  
}

.centerNavDiv{
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    width: 100%;
}

.linkToHtml{
    display: inline-block;
    position: relative;
    text-decoration: none;
    color: white;
    font-family: "Montserrat";
    font-size: 2rem;
    transition: transform 0.2s ease;
}

.linkToHtml::after{
    content: "";
    position: absolute;
    left: 50%;
    bottom: -5px;
    width: 0%;
    border-radius: 5px;
    transform: translateX(-50%);
    height: 2px;
    background-color: #da3832;
    transition: width 0.6s ease;
}

.linkToHtml:hover::after{
    width: 100%;
}

.linkToHtml:hover{
    transform: scale(1.06);
}




.hero{
    display: flex;
    height: 90vh;
    position: relative;
}





#centerHeroDiv{
    background: #080808;
    background: linear-gradient(180deg, rgba(8, 8, 8, 1) 0%, rgb(255, 251, 251) 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    width: 100%;

}

.heroTitleDiv{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

#quizHeaderText{
    font-family: "MarkerFelt";
    color: var(--primary-color);
    filter: brightness(1.25);
    font-size: 7rem;
}

.heroTextDiv{
    display: flex;
    justify-content: center;
    align-items: center;
}

#heroText{
    text-align: center;
    width: 70%;
    font-size: 2.3rem;
    margin-left: 20px;
    margin-right: 20px;
    color: white;
    font-family: "ABeeZee";
}

.placeholderImage{
    width: 400px;
    border: 1px solid white;
}


.heroButtonsDiv{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 100px;
    width: 100%;
}

.heroButton{
    width: 200px;
    height: 70px;
    border-radius: 10px;
    cursor: pointer;
    transition:  transform 0.4s ease;
    border: none;
    background-color: rgba(255, 0, 0, 0.885);
    font-family: "ABeeZee";
    color: white;
    font-size: 2rem;
}

.heroButton:hover{
    transform: scale(1.1);  
    background-color: rgb(222, 37, 37);
    box-shadow: 0 0 5px 1px black inset;
}


.heroButton:active{
    transition: none;
    background-color: #bd9c72;
}


hr{
    border: none;
    height: 6px;
    background-color: black;
}





.videoSection{
    height: 150vh;
    display: flex;
}





.videoSectionWallCenter{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    width: 100%;
    height: 100%;
    background: #080808;
    background: linear-gradient(180deg, rgba(8, 8, 8, 1) 0%, rgb(255, 251, 251) 100%);
    background: linear-gradient(180deg, rgb(255, 251, 251) 0%, rgba(8, 8, 8, 1) 100% );
}

.infoContainer{
    margin-top: 20px;
    border: 1px solid white;
    box-shadow: 0 0 5px 1px black;
    width: 90%;
    border-radius: 15px;
    height: 26%;
    display: flex;
    background-color: #FBF8F7;
    transition: border-radius 0.3s ease;
}

.infoContainer:hover{
    border-radius: 40px;
}

.textInfoDiv{
    display: flex;
    align-items: center;
    width: 99.9%;
    height: 60%;
    padding: 10px;
}

.textInfo{
    text-align: center;
    font-size: 1.7rem;
    font-family: "AbeeZee";
    padding: 5px;
}

.infoVideoContainer{
    display: flex;
    min-width: 30%;;
    justify-content: center;
    height: 100%;
    width: 60%;
    align-items: center;
}

.infoVideo{
    height: 80%;   
    width: 80%; 
    object-fit: cover;
    padding: 0 10px;
    border-radius: 20px;
    
}

.buttonInfoDiv{
    display: flex;
    justify-content: flex-end;
    width: 97%;
}

.buttonInfo{
    width: 200px;
    height: 70px;
    border-radius: 10px;
    font-size: 1.8rem;
    cursor: pointer;
    background-color: rgba(255, 0, 0, 0.733);
    font-family: "ABeeZee";
    transition:  transform 0.4s ease;
    border: none;
    color: white;

}

.buttonInfo:hover{
    transform: scale(1.1);  
    background-color: rgb(222, 37, 37);
    box-shadow: 0 0 5px 1px black inset;
}

.videoDiv{
    display: flex;
    background-color: red;
}




.footer{
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-evenly;
    background-color: black;
    height: 200px;
    margin-top: auto;
}


.footerText{
    font-size: 1.5rem;
    color: white;
    font-family: "ABeeZee";
}

#footerLogo{
    width: 10%;
}



.footer p a{
    color: white;
}





@font-face {
    font-family: "Montserrat";
    src: url("../fonts/Montserrat-VariableFont_wght.ttf");
}

@font-face {
    font-family: "ABeeZee";
    src: url("../fonts/ABeeZee-Regular.ttf");
}


@font-face {
    font-family: "MarkerFelt";
    src: url("../fonts/Marker\ Felt.ttf");
}