*{
    margin: 0%;
    padding: 0%;
    box-sizing: border-box;
}

html,body{
    height: 100%;
    width: 100%;
}

#main{
    position: relative;
    overflow: hidden;
    
}
header{
    position: fixed;
    top: 0;
    width: 100vw;
    height: 10vh;
    z-index: 10;
    background-color: black;
    display: flex;
  justify-content: space-between;
  transition: 0.6s;
  align-items: center;

   
    

}
header>a>img{
    position: relative;
    padding-top: 5px;
    padding-left: 15px;
    padding-bottom: 5px;
    height: 8vh;
}
header>ul{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-right: 50px;
    border-radius: 10px;
    
}
header>ul>li{
    position: relative;
  padding-right: 20px;
  display: block;
    list-style: none;
    border-right: 1px solid white;
}
header>ul>li>a{
    position: relative;
    text-decoration: none;
    margin: 0 15px;
    padding-left: 10px;
    
    letter-spacing: 2px;
    font-weight: 500px;
    transition: 0.5s;
    color: rgba(251, 111, 111, 0.867);
    font-family: "Bourgeois W00 Medium","Arial Regular",Arial,sans-serif;


}
header>ul>li>a:after{
    content: "";
    position: absolute;
    background-color: white;
    height: 1px;
    width: 0;
    left: 5px;
    bottom: -10px;
    transition: 0.3s;

}
header>ul>li>a:hover{
    color: red;
}
header>ul>li>a:hover:after{
    width: 100%;

}
#page1{
    
    height: 100vh;
    width: 100vw;
    background-color: white;
    position: relative;

}
canvas{
    padding-top: 70px;
    padding-left: 11%;
   width: 90vw;
    height: 100vh;
    position: relative;
    z-index: 50;
}
.backtext{
width: 100vw;
height: 25vh;
position: absolute;
top: 40%;

color: black;
display: flex;
;
}
.backtext h1{
    font-size: 100px;
    padding-left: 50px;
    white-space: nowrap;
    font-family: Tungsten-Bold,arial,georgia,sans-serif;
    padding-top: 20px;
    font-weight: 400;
    animation-name: anim;
    animation-duration: 19s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
.backtext b{
    font-family: Refinery-25,sans-serif;
    color: rgba(248, 50, 50, 0.867);
}
.backtext span{
    -webkit-text-stroke: 1.2px black;
    color: transparent;
}
@keyframes anim{
    0%{
        transform: translateX(0);
    }
    100%{
        transform: translateX(-100%);
    }
}

#page2{
   
    height: 100vh;
    width: 100vw;
    background-color:white;
}
#page2>#left{
    max-width: 23%;
    font-family: "Bourgeois W00 Medium", sans-serif;
    position: absolute;
    color: rgba(251, 111, 111, 0.867);
    margin-top: 13%;
    margin-left: 8%;
    text-align: left;
    word-spacing: 3px;
    padding-left: 9px;
    padding-right: 7px;
    padding-bottom: 9px;
    line-height: 1.5;
    font-size: 15px;
    box-shadow: 10px 10px 40px black;
    background-color: black;
    

}

#page2>#right{
    
    position: absolute;
    font-family: "Bourgeois W00 Medium", sans-serif;
    max-width: 21%;
    top: 70%;
    right: 9%;
    word-spacing: 3px;
    line-height: 1.5;
    font-size: 15px;
    box-shadow: 10px 10px 40px black;
    padding-left: 9px;
    padding-right: 7px;
    padding-bottom: 9px;
    padding-top: 9px;
    color:black;
    background-color: rgba(251, 111, 111, 0.867);
    
}
#page3{
    
    height: 100vh;
    width: 100vw;
    background-color:white;
}
#page3>#left{
    max-width: 23%;
    font-family: "Bourgeois W00 Medium", sans-serif;
    position: absolute;
    margin-top: 13%;
    margin-left: 8%;
    word-spacing: 3px;
    line-height: 1.5;
    font-size: 15px;
    box-shadow: 10px 10px 40px rgba(251, 111, 111, 0.867);;
    padding-left: 9px;
    padding-right: 7px;
    padding-bottom: 9px;
    
}
#page3>#right{
    
    position: absolute;
    font-family: "Bourgeois W00 Medium", sans-serif;
    max-width: 20%;
    top: 70%;
    right: 9%;
    word-spacing: 3px;
    line-height: 1.5;
    font-size: 15px;
    box-shadow: 10px 10px 40px black;
    padding-left: 9px;
    padding-right: 7px;
    padding-bottom: 9px;
    padding-top: 9px;
    color: rgba(251, 111, 111, 0.867);
    background-color: black;
    
}
#page4{
    
    height: 100vh;
    width: 100vw;
    background-color:white;
}
#page4>#left{
    max-width: 23%;
    font-family: "Bourgeois W00 Medium", sans-serif;
    position: absolute;
    margin-top: 13%;
    margin-left: 8%;
    word-spacing: 3px;
    line-height: 1.5;
    font-size: 15px;
    box-shadow: 10px 10px 40px black;
    padding-left: 9px;
    padding-right: 7px;
    padding-bottom: 9px;
    background-color: rgba(251, 111, 111, 0.867);
    color: black;
    
}
#page4>#right{
    
    position: absolute;
    font-family: "Bourgeois W00 Medium", sans-serif;
    max-width: 20%;
    font-size: 15px;
    top: 60%;
    right: 9%;
    word-spacing: 3px;
    line-height: 1.5;
    box-shadow: 10px 10px 40px rgba(251, 111, 111, 0.867);;
    padding-left: 9px;
    padding-right: 7px;
    padding-bottom: 9px;
    padding-top: 9px;
    
    
}
.page5{
    background-color: rgba(248, 50, 50, 0.867);
   /* background: url(photos/background-sprite-removebg-preview.png);
    background-repeat: no-repeat;
    background-size: contain;
    */
    width:100vw;
    height: 100vh;
    display: flex;
   
    position: relative;
    
    
   
}
.image{
    padding-top: 100px;
    height: 120vh;
    width: 15vw;
   
}
.temp img{
    position: relative;
   padding-top: 120px;
    height: 100vh;
    animation: animateUser 1.9s linear infinite;
    /* box-shadow: 10px 10px 10px black; */
    filter: drop-shadow(0px 0px 80px white);
}
@keyframes animateUser 
{
    50%{
        right: 10px;
        top: -20px;
    }
    
}
.text{
    margin-top: 200px;
}
.text h1{
    padding-left: 180px;
    font-size: 70px;
    font-weight: 900;
    font-family: 'Audiowide';
    color: rgb(243, 226, 199);
    
}
.text h2{
    padding-left: 180px;
    font-size: 23px;
    font-weight: 200;
    font-family: 'Audiowide';
    color: rgb(243, 226, 199);
    padding-top: 40px;
    
}
.text h3{
    padding-left: 200px;
    font-size: 18px;
    font-weight: 50;
    font-family: 'Audiowide';
    color: rgb(243, 226, 199);
    padding-top: 20px;
    max-width: 35vw;
    margin-bottom: 50px;
    
}
.button{
    height: 58px;
    padding: 10px 15px 5px 15px;
    display: block;
    transition: background_color 0.3s ease;
    background-color:black;
    margin-top: 50px;
    text-align: center;
    margin-left: 250px;
    max-width: 18vw;
    clip-path: polygon(7.5% 0,100% 0%,92.5% 100%,0% 100%);
    cursor: pointer;
   

   

}
.button a{
    text-decoration: none;
    color: red;
    font-weight: 600;
    font-family: "BourgeoisUltra", "Arial Regular", Arial, sans-serif;
    font-size: 24px;
    

}
.button:hover{
    background-color: rgb(243, 226, 199);
    border-color: rgb(243, 226, 199);

}
.button:before{
    font-weight: bold;
    font-size: 20px;
} 
.button:focus {
    outline: none;
} 

   .page6{
    height: 100vh;
    width: 100vw;
    position: relative;
    background-color:rgb(236, 231, 221);
    display: flex;
}
.text2{
    margin-top: 200px;
}
.text2 h1{
   
    font-size: 70px;
    font-weight: 900;
    font-family: 'Audiowide';
    color:black;
    
}
.text2 h2{
    font-size: 23px;
    font-weight: 200;
    font-family: 'Audiowide';
    color:black;
    padding-top: 40px;
    
}
.text2 h3{
   padding-left: 50px;
    font-size: 18px;
    font-weight: 50;
    font-family: 'Audiowide';
    color: black;
    padding-top: 20px;
    max-width: 35vw;
    
}
.button2{
    height: 58px;
    padding: 10px 15px 5px 15px;
    display: block;
    transition: background_color 0.3s ease;
    background-color:rgba(248, 50, 50, 0.867);
    margin-top: 50px;
    text-align: center;
    margin-left: 20px;
    max-width: 18vw;
    clip-path: polygon(7.5% 0,100% 0%,92.5% 100%,0% 100%);
    cursor: pointer;
   

   

}
.button2 a{
    text-decoration: none;
    color: white;
    font-weight: 600;
    font-family: "BourgeoisUltra", "Arial Regular", Arial, sans-serif;
    font-size: 24px;


}
.button2:hover{
    background-color: rgb(30, 28, 28);
    border-color: rgb(243, 226, 199);

}
.button2:before{
    font-weight: bold;
    font-size: 20px;
} 
.button2:focus {
    outline: none;
} 


.page7{
    position: relative;
    height: 100vh;
    width: 100vw;
    background: black;
    z-index: -2;;
  
}
.video-background{
    z-index: -1;
    right: 0;
    top: 0;
    position: absolute;
    height: auto;
    width: auto;

}
.page7 a{
    position: relative;
    font-family: "FF Mark W05",Arial,sans-serif;
   display: inline-block;
    text-transform: uppercase;
    
    letter-spacing: 6px;

    text-decoration: none;
    overflow: hidden;
    color: #00FFFF;
    font-size: 45px;
    font-weight: bold;
    margin-top: 550px;
    margin-left: 41%;
    transition: 0.5s;
    cursor: pointer;
}
.popup .overlay{
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.7);
    z-index: 1;
    display: none;
}
.popup .content{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%) scale(0);
    background: #191d2b;
    width: 64vw;
    height: 42vh;
    z-index: 2;
    text-align: center;
    padding: 20px;
    box-sizing: border-box;
    
    border-top:1px whitesmoke solid ;
    border-bottom:1px whitesmoke solid;
}
.popup .content h2{
    font-family: Tungsten-Bold,arial,georgia,sans-serif;
    color: #f4f1ed;
    ;
}
.popup .content .sign{
    display: flex;
    gap: 30px;
    margin-left: 70px;
    margin-top: 130px;
}
.popup .content .white h3{
    color: #f4f1ed;
    font-family: DINNextW1G,arial,georgia,sans-serif;
    font-size: 15px;
    padding-left: 143px;
    font-weight: 100;
    
}

.popup .content .sign .white .anch .a1{
    
    border-style: inset;
  border-color: rgb(17, 16, 16);
  border-width: 4px;
cursor: pointer;
    color:black;
    font-size: 20px;
   
    padding-top: 10px;
    font-family: "Bourgeois W00 Medium", sans-serif;
    font-weight: 700;
    
    background: #f4f1ed;
    margin-top: 10px;
    width: 14vw;
    height: 50px;
    
}

.popup .content .red h3{
    color: #f4f1ed;
   padding-left: 150px;
   font-weight: 100;
    font-family: DINNextW1G,arial,georgia,sans-serif;
    font-size: 15px;
    
    
}

.popup .content .sign .red .anch2 .a3{
    
    border-style: inset;
    border-color: rgb(17, 16, 16);
    border-width: 4px;
    cursor: pointer;
    color:#f4f1ed;
    font-family: "Bourgeois W00 Medium", sans-serif;
    font-weight: 700;
    font-size: 20px;
    padding-top: 10px;
    background: rgba(248, 50, 50, 0.867);
    margin-top: 10px;
    width: 14vw;
    height: 50px;
}
.popup .close{
    position: absolute;
    right: 20px;
    top: 18px;
    width: 36px;
    height: 36px;
    background: rgb(174, 59, 59);
    color: black;
    font-size:29px ;
    
    font-weight: 900;
    line-height: 36px;
    text-align: center;
    border-radius: 50%;
    cursor: pointer;

    
}
.popup.active .overlay{
    display: block;

}
.popup.active .content{
    transition:all 300ms ease-in-out;
    transform:translate(-50%,-50%) scale(1);

}

.page7 .a2:hover{
    color: black;
    background: #00FFFF;
    box-shadow: 0 0 5px #00FFFF, 0 0 15px #00FFFF,0 0 25px #00FFFF,0 0 55px #00FFFF;
    transition-delay: 0.2s;
}
.page7 .a2 span{
    position: absolute;
    display: block;
}
.page7 .a2 span:nth-child(1)
{
    top:0;
    left: -100%;
    width: 100%;
    height: 3px;
    animation: animate1 0.75s linear infinite; 
    background: linear-gradient(90deg,transparent,#00FFFF);
}
@keyframes animate1{
    0%
    {
        left:-100%;
    }
    50%,100%{
        left:100%;
    }
}

.page7 .a2 span:nth-child(2)
{
    top:-100%;
    right: 0;
    width: 3px;
    height:100%;
    animation: animate2 0.75s linear infinite; 
    animation-delay: 0.25s;
    background: linear-gradient(180deg,transparent,#00FFFF);
}
@keyframes animate2{
    0%
    {
        top:-100%;
    }
    50%,100%{
        top:100%;
    }
}
.page7 .a2 span:nth-child(3)
{
    bottom:0;
    right: -100%;
    width: 100%;
    height: 3px;
    animation: animate3 0.75s linear infinite; 
    animation-delay: 0.5s;
    background: linear-gradient(270deg,transparent,#00FFFF);
}
@keyframes animate3{
    0%
    {
        right:-100%;
    }
    50%,100%{
        right:100%;
    }
}
.page7 .a2 span:nth-child(4)
{
    left:0;
    bottom: -100%;
    width: 3px;
    height: 100%;
    animation: animate4 0.75s linear infinite;
    animation-delay: 0.75s;
    background: linear-gradient(360deg,transparent,#00FFFF);
}
@keyframes animate4{
    0%
    {
        bottom:-100%;
    }
    50%,100%{
        bottom:100%;
    }
}
.page8{
    position: relative;
    height: 70vh;
    width: 100vw;
    background: black;   
}
.upper{
    display: flex;
    /* flex-wrap: nowrap; */
    justify-content: center;
    gap: 30px;
}
.upper img{
    height: 40px;
    width: 40px;
    margin-top: 20px;
    border-radius: 40%;
    border-color: rgb(37, 37, 37);
    border-width: 4px;
    border-style: solid;
    background-color: rgb(37, 37, 37);
    
    
   
}
.middle{
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 10px;
}
.middle img{
    height: 100px;
    width: 150px;
    margin-top: 20px;
    opacity: 80%;
      
}
.page8 h1{
    color: rgb(228, 225, 225);
    font-weight: 10;
    font-size: 13px;
    margin-left: 28%;
    opacity: 80%;
    word-spacing: 2px;
    text-transform: uppercase;
    font-family: "FF Mark W05",Arial,sans-serif;
    
}
.middle2{
    display: flex;
    gap: 10px;
    color: white;
    margin-top: 30px;
    justify-content: center;
    margin-left: 39px;
}
.middle2 div {
    font-family: "FF Mark W05",Arial,sans-serif;
    font-weight: 600;
    font-size: 15px;
    color: rgb(237, 233, 233);
    display: block;
    transition: all .2s linear;
    cursor: pointer;
    text-rendering: optimizeLegibility;
    /* -webkit-font-smoothing: antialiased; */
    padding: 8px 16px;
   
}
.middle2 div:hover{
    background-color: rgba(128,128,128,.3);
    
    border-radius: 6.5px;
}
.lower{
    display: flex;
    margin-left: 43.4%;
    margin-top: 50px;
    gap: 15px;
    width: 230px;
    background-color:rgba(128,128,128,.3) ;
    padding: 10px 16px;
    border-radius: 6.5px;
}
.lower li{
    color: #efefef;
    list-style: none;
    font-size: 13px;
    font-weight: 550;
    line-height: 150%;
    font-family: "FF Mark W05",Arial,sans-serif;
    

}
.social-icon__link:hover{
    scale: 1.2;
}