@font-face {
    font-family: matter;
    src: url(./matter-regular.ttf);
}
@font-face {
    font-family: matterl ;
    src: url(./matter-light.ttf);
}
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
html,body{
    width: 100%;
    height: 100%;
}
#main{
    width: 100%;
    /* height: 100vh; */
    background-color:#121212;
}
#page-1{
    width: 100%;
    height: 220vh;
     position: relative;
}
#nav{
    width: 100%;
    top: 0%;
    height: 50px;
    /* background-color: aqua; */
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0px 60px;
}
#nav h2{
    font-family: matter;
   color: aliceblue;
}
#page-1 h1{
    margin-top: 50px;
    margin-left: 50px;
    color: aliceblue;
    font-size: 190px;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height:1;
    font-weight: 400;
    z-index: 9999;
}
#span1{
   /* background-color: aqua; */
   border-radius: 150px; 
   padding: 0px 10px;
   color: #E0FD60;
   font-family: serif;
    overflow: hidden;
   border: 5px solid #E0FD60;
}
#span1 h2{
    font-weight: 100;
    font-size: 30px;
}
#video-1{
    /* border-radius: 50%; */
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background-color: aqua;
    position: absolute;
    right: 10%;
    top: 36%;
    overflow: hidden;
}

#page-1 h3{
    position: absolute;
    bottom: 5%;
    width: 1300px;
    color: aliceblue;
    font-size: 60px;
    font-family: matter;
    left: 4%;
    font-weight: 300;
}







#page-2{
    width: 100%;
    height: 120vh;
    background-color: aliceblue;
    position: relative;
    overflow: hidden;
}
#video-2{
    /* border-radius: 50%; */
    width: 400px;
    height: 300px;
    border-radius: 40%;
    /* background-color: aqua; */
    position: absolute;
    right: 10%;
    top: 36%;
    overflow: hidden;
    object-fit: cover;
}
#pg2-top{
    display: flex;
    align-items: center;
    justify-self: center;
    /* overflow-x:hidden ; */
   
    scroll-behavior: smooth;
    width: 100%;
    height: 80vh;
    position: relative;
    animation: marquee-1 linear 8s infinite ;
    /* animation-delay: 0s; */
}
@keyframes marquee-1 {
    0%{
        transform: translateX(0%);
    }
    100%{
        transform: translateX(-100%);
    }
}
#pg2-top h1{
    position: relative;
    font-size: 120px;
    font-family: matterl;
    /* padding: 0px 10px; */
    padding-right: 160px;
}
#marquee1{
    display: flex;
    align-items: center;
    justify-content: center;
}
#video-2{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    /* margin: 0px 10px; */
    /* margin-left: 30px; */
}
#line{
    width: 90%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: .2%;
    margin-left:50px ;
    background-color: #121212;
    transition: all cubic-bezier(0.19, 1, 0.22, 1) .5s;
}
#pg2-down{
    position: relative;
    width: 100%;
    height: 40vh;
    /* background-color: aqua; */
    display: flex;
    align-items: center;
    justify-content: center;
}
#pg2-left{
    width: 40%;
    display: flex;
    align-items: center;
    justify-content: space-around;
}
#pg2-left video{
     border-radius: 50%;
 }
#pg2-left h3{
   font-weight: 500;
   font-family: gilroy;
}
#pg2-right{
    width: 60%;
    font-size: 35px;
    display: flex;
    align-items: center;
    justify-content: space-around;
}







#page-3{
    height: 200vh;
    position: relative;
    width: 100%;
    overflow: hidden;
}
#page-3 h1{
    font-size: 170px;
    margin-left:80px;
    margin-top: 60px;
    font-weight: 200;
    font-family: matter;
    color: aliceblue;
}
#page-3 span{
    animation: blink .9s linear infinite;
}
@keyframes blink {
    0%{
        opacity: 0;
    }
    /* 50%{
        opacity: 1;
    } */
    100%{
        opacity: 1;
    }
}
#pg3-video{
    width: 90%;
    height: 50%;
    position: absolute;
    left: 5%;
    background-color: #1B1B1B;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 30%;
    margin: 30px 30px;
    transition: all cubic-bezier(0.19, 1, 0.22, 1) 1s;
}
#pg3-video video{
    width: 500px;
    height: 500px;
}
#line-3{
    width: 90%;
    height: .1%;
    margin-left: 5%;
    background-color: #f7f3f3;
    letter-spacing: 10%;
    position: absolute;
    top: 75%;
    transition: all cubic-bezier(0.19, 1, 0.22, 1) .5s;
}

#pg3-down{
    position:absolute;
    bottom: 5%;
    color: aliceblue;
    width: 100%;
    height: 40vh;
    /* background-color: aqua; */
    display: flex;
    align-items: center;
    justify-content: center;
}






#page-4{
    position: relative;
    height: 180vh;
    /* background: url(./videoss/bg-1\(teddy\).mp4); */
    width: 100%;
}
#page-4 h1{
    color: #121212;
    position: absolute;
    top: 10%;
    font-family: matterl;
    font-size: 160px;
    margin-left: 10%;
}
#thin{
    font-weight: 200;
}
#line-4{
    width: 90%;
    height: .2%;
    background-color: #121212;
    position: absolute;
    top: 45%;
    margin-left: 5%;
    transition: all cubic-bezier(0.19, 1, 0.22, 1) .5s;
}
#pg4-down{
    position: absolute;
    top: 45%;
    width: 100%;
    height: 40vh;
    /* background-color: aqua; */
    display: flex;
    align-items: center;
    justify-content: center;
}

#pg4-left{
    width: 40%;
    display: flex;
    align-items: center;
    justify-content: space-around;
}
#pg4-left video{
     border-radius:50%;
     border: 25px solid #fae2be;
     /* background-color: #fae2be; */
 }
#pg4-left h3{
   font-weight: 500;
   font-family: gilroy;
}
#pg4-right{
    width: 60%;
    font-size: 35px;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

#page-5{
    position: relative;
    background-color: #FFFFFF;
    width: 100%;
    height: 250vh;
    overflow: hidden;
}


#page-5 h1{
    position: absolute;
    font-size: 180px;
    font-weight: 300;
    line-height: 1;
    font-family: matter;
    top: 5%;
    left: 10%;
}

#box-5 video{
    /* position: absolute;
    top: 4%;
    left: 3%; */
   border-radius:50% ;
   width: 400px;
   height: 400px;

}


/* #box-5{
    position:  absolute;
    width: 1250px;
    height: 600px;
    left: 8%;
    border-radius: 1000px;
    top: 30%;
    
  background-color: #efeeec;
} */

#box-5{
    z-index: 999;
    position:  relative;
    overflow: hidden;
    width: 400px;
    height: 400px;
    left: 40%;
    border-radius: 1000px;
    top: 38%;
    /* background-color: #E0FD60; */
  background-color: #efeeec;
  transition: all linear .4s;
  display: flex;
  align-items: center;
  justify-content:center ;
}
#line-5{
    width: 90%;
    height: .2%;
    background-color: #121212;
    position: absolute;
    top: 65%;
    margin-left: 5%;
    transition: all cubic-bezier(0.19, 1, 0.22, 1) .5s;
}
#pg5-left{
    position: absolute;
    bottom: 0%;
    left: 10%;
  display: flex;
  flex-direction: column;
  align-items:left;
  justify-content: space-around;
  width: 50%;
  height: 30%;
  font-family: matter;
  /* text-align: left; */
  line-height:1;
  /* background-color: red; */
}
#pg5-left video{
    width: 100px;
    border-radius: 50%;
    margin-bottom: 180px;
}
#pg5-right{
    bottom: 18%;
    right: 10%;
    position: absolute;
}
.box5{
    display:inline-table;
    padding: 10px 20px;
    border-radius: 10px;
    background-color: #E0FD60;
}

#page6{
    position: relative;
    width: 100%;
    height: 200vh;
    background-color: #E0FD60;
     background-image: url(./imagess/shadow.png);
}
#page6 h1{
    padding-top:100px;
    padding-left: 80px;
    line-height: 1;
    font-size: 200px;
    font-family: matter;
   
}
#pg6-down{
    position: absolute;
    bottom: 5%;
    right: 5%;
}
#pg6-down h3{
     font-size: 35px;
}

#page7{
    position: relative;
    width: 100%;
    height: 150vh;
}
#page7 h1{
    font-size: 200px;
    font-family: matter;
    color: #ffff;
    
}
#coolest{
    display: flex;
    position: absolute;
    top: 20%;
    left: 5%;
}
#starin{
    position: absolute;
    left: 33.5%;
    top: 18%;
}

#starin img{
    position: absolute;
    top: 50%;
    left: 50%;
   animation: rotating linear 4s infinite ;
    /* animation-delay: 0s; */
}
@keyframes rotating {
    0%{
        rotate:0deg;
    }
    100%{
        rotate:360deg;
    }
}

#stars{
    position: absolute;
    left: 37.5%;
    top: 45%;
}
#project{
    display: flex;
}
#clap{
    width: 400px;
    height: 250px;
    border-radius: 1000px;
    background-color: #E0FD60;
    position: absolute;
    top: 40%;
    left: 5%;
}
#clap video{
    border-radius: 50%;
}
#project h1{
    position: absolute;
    top: 40%;
    left: 33%;
}

#page8{
    padding: 10px 20px;
    width: 100%;
    height: 550vh;
    position: relative;
    background-color: #000000;
}
#page8 video{
    padding: 10px 0px;
    border-radius: 10%;
    position: relative;
}
.videoss{
    position: relative;
}
.marq{
    position: absolute;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: space-between;
    overflow-x: hidden;
    overflow-y: hidden;
    top: 40%;
    mix-blend-mode:exclusion;
    animation: marquee11 60s infinite linear;
}
@keyframes marquee11 {
    0%{
        transform: translateX(0%);
    }
    100%{
        transform: translateX(-100%);
    }
}
.marq h1{
    font-size: 180px;
    font-family: matter;
    padding: 0px 40px;
    color: #efeeec;
}
.marq img{
    animation: rotating linear 4s infinite ;
}
.arrow{
    width: 30px;
    color: #E0FD60;
    position: absolute;
    z-index: 999;
}
#pg8-down{
    display: flex;
    align-items: center;
    justify-content: space-around;
    position: absolute;
    bottom: 19%;
    right: 10%;
}
#pg8-down h1{
    color: #FFFFFF;
    padding-left: 30px;
}
#pg8-down span{
    color: #E0FD60;
}
#pg8-line{
    width: 90%;
    height: .1%;
    background-color: #f2ecec;
    position: absolute;
    bottom: 14%;
    margin-left: 5%;
    transition: all linear .5s;
}
#marqee8-1{
    width: 100%;
    position: absolute;
    bottom: 10%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    /* padding: 10px 100px; */
    /* overflow-x: hidden; */
    animation: marquee11 40s infinite linear;
}
#marqee8-1 img{
    padding: 10px 60px;
}
@keyframes marquee11 {
    0%{
        transform: translateX(0%);
    }
    100%{
        transform: translateX(-100%);
    }
}

#marqee8-2{
    width: 100%;
    position: absolute;
    bottom: 6%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    animation: marquee22 40s infinite linear;
}
#marqee8-2 img{
    padding: 10px 60px;
}
@keyframes marquee22 {
    0%{
        transform: translateX(0%);
    }
    100%{
        transform: translateX(100%);
    }
}

#page9
{
    position: relative;
    width: 100%;
    height: 220vh;

}
#pg9-top{
    display: flex;
    align-items: center;
    justify-content: center;
}
#pg9-top img{
    position: relative;
    width: 550px;
    height: 95vh;
    border-radius: 10%;
    margin-right: 20px;
}
#pg9-1{
    transition: all cubic-bezier(0.19, 1, 0.22, 1)2s;
}
#pg9-2{
    transition: all cubic-bezier(0.19, 1, 0.22, 1)2s;
}
#pg9-3{
    transition: all cubic-bezier(0.19, 1, 0.22, 1)2s;
}
#pg9-4{
    transition: all cubic-bezier(0.19, 1, 0.22, 1)2s;
}
#pg9-1 h2{
  position: absolute;
  top: 4%;
  left: 14%;
  font-size: 45px;
  font-family: matter;
}
 
#pg9-1 h3{
    position: absolute;
    top: 13%;
    left: 14%;
    padding: 10px 10px;
    border-radius: 10px;
    border:2px solid #000000;
}
#pg9-1 h4{
    position: absolute;
    top: 13%;
    left: 18%;
    padding: 10px 10px;
    border-radius: 10px;
    border:2px solid #000000;
}
#pg9-2 h3{
    position: absolute;
    top: 13%;
    right: 41%;
    padding: 10px 10px;
    border-radius: 10px;
    border:2px solid #000000;
}
#pg9-2 h4{
    position: absolute;
    top: 13%;
    right: 33%;
    padding: 10px 10px;
    border-radius: 10px;
    border:2px solid #000000;
}
#pg9-2 h2{
    position: absolute;
    top: 4%;
    right: 25%;
    font-size: 45px;
    font-family: matter;
  }
  #pg9-down{
    padding-top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}
#pg9-down img{
    position: relative;
    width: 550px;
    height: 95vh;
    border-radius: 10%;
    margin-right: 20px;
}
#pg9-3 h2{
  position: absolute;
  bottom: 44%;
  left: 14%;
  font-size: 45px;
  font-family: matter;
}
 
#pg9-3 h3{
    position: absolute;
    bottom: 40%;
    left: 14%;
    padding: 10px 10px;
    border-radius: 10px;
    border:2px solid #000000;
}
#pg9-3 h4{
    position: absolute;
    bottom: 40%;
    left: 25%;
    padding: 10px 10px;
    border-radius: 10px;
    border:2px solid #000000;
}
#pg9-4 h3{
    position: absolute;
    bottom: 40%;
    right: 35%;
    padding: 10px 10px;
    border-radius: 10px;
    border:2px solid #000000;
}
#pg9-4 h4{
    position: absolute;
    bottom: 40%;
    right: 27%;
    padding: 10px 10px;
    border-radius: 10px;
    border:2px solid #000000;
}
#pg9-4 h2{
    position: absolute;
    bottom: 44%;
    right: 25%;
    font-size: 45px;
    font-family: matter;
  }
 

#pg9-1:hover{
    transform: rotateY(180deg);
  }
  #pg9-2:hover{
    transform: rotateY(180deg);
  }
  #pg9-3:hover{
    transform: rotateY(180deg);
  }
  #pg9-4:hover{
    transform: rotateY(180deg);
  }

  #page10{
    position: relative;
    width: 100%;
    height: 320vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    background-color: #FFFFFF;
    font-family: matter;
  }
  #text10{
    position: relative;
    top: 3%;
     
    margin-bottom: 100px;
  }
  #text10 h5{
    font-size: 50px;
    font-weight: 200;
   
  }
  #text10 span{
    color: #b0acac;
  }
  .container10{
    width: 98%;
    height: 900px;
    margin-bottom: 30px;
    border-radius: 1000px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    overflow: hidden;
  }
#cont1{
    background-color: #E0FD60;
    transition: all cubic-bezier(0.19, 1, 0.22, 1) .5s;
}
#cont2{
    background-color:  #F1F1F1;
}
#cont3{
    background-color:#000000;
}
  .left10{
    height: 100%;
  width: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  padding: 100px ;
  
  }
  .left10 h1{
    font-size: 150px;
  }
  .left10 h2{
    font-size: 30px;
    font-weight: 300;
  }
  #page10 video{
    width: 700px;
  }
  #cont3 h1{
    color: #FFFFFF;
  }
  #cont3 h5{
    color: #FFFFFF;
    font-size: 30px;
    font-weight: 200;
  }


  #page11{
    width: 100%;
    min-height: 180vh;
    position: relative;
    padding: 50px;
  }
  #page11>img{
    width: 160px;
    position: absolute;
    top: 8.5%;
    left: 40.5%;
    border-radius: 50%;
  }
  #page11>video{
    position: absolute;
    border-radius: 50%;
    width: 7%;
    top: 10.5%;
    left: 42.5%;
  }
  #page11>h1{
    font-size: 220px;
    padding: 20px 30px;
    color: #FFFFFF;
    font-family: matter;
  }
  #page11>h3{
    font-size: 20px;
    padding: 20px 50px;
    color: #FFFFFF;
    font-family: matter;
  }
    
  #page11 h4{
    font-size: 40px;
    padding: 20px 50px;
    color: #FFFFFF;
    font-family: matter;
  }
  .rect{
    position: relative;
    width: 100%;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: .1px solid #ffff;
    border-bottom: .1px solid #ffff;
  }
  
  .rect h3{
    position: absolute;
    left: 5%;
    font-size: 60px;
    color: #f5efef;
    font-family: matter;
  }
   
  .rectin{
    width: 100%;
    height: 0%;
    background-color:#E0FD60;
    display: flex;
    align-items: center;
    justify-content: space-around;
    overflow-x: hidden;
    animation: reactinmove 20s linear infinite;
    transition: all linear .3s;
  }
  #filler
  {
    transition: all linear .3s;
  }
  @keyframes reactinmove {
    0%{
        transform: translateX(0%);
    }
    50%{
        transform: translateX(-50%);
    }
    100%{
        transform: translateX(-100%);
    }
  }
  .rectin h2{
    left: 5%;
    font-family: matter;
    margin-left: 80px;
    margin-right: 80px;
    color: #121212;
    z-index: 999;
  }

  #page12{
    width: 100%;
    height: 100vh;
    position: relative;
    background-color: black;
   
  }
  #content{
    display: flex;
    align-items: center;
    justify-content: center;

  }
  #content h1{
    position: absolute;
    color: #FFFFFF;
    top: 10%;
    font-size: 160px;
    font-family: matter;
    line-height: .8;
    text-align: center;

  }
  #content span{
    position: absolute;
    color:#E0FD60;
    top: 50%;
    font-size: 160px;
    text-align: center;
    border-radius: 1000px;
    border: 1px solid #E0FD60;
    padding: 20px 30px;
   transition: all linear .8s;
  }
  #footer{
    position: absolute;
    bottom: 5%;
    color: #FFFFFF;
    width: 50%;
    left: 5%;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
  #footer h3,h4{
    font-family: matter;
    padding: 10px 20px;
    border: 1px solid #ffff;
    border-radius: 1000px;
    font-weight: 300;
  }

  #faceid{
    position: fixed;
   
    top: 75%;
    right: 2%;
    z-index: 99999;
  }
  #faceid img{
    width: 160px;
    background-color: #000000;
    border-radius: 50%;
    animation: rotating linear 4s infinite ;
  }
  #faceid video{
    position: absolute;
    width: 100px;
    top: 19%;
    left: 19%;
    border-radius: 50%;
  }



  .social{
    position: relative;
    font-size: 30px;
    padding: 30px 50px;
  
}
.social>h1{
    font-size: 40px;
    color: #FFFFFF;
    font-family: matter;
}
.media>h1{
    font-size: 40px;
    color: #FFFFFF;
    font-family: matter;
}
.media{

    position: absolute;
    left: 0%;
    width: 100%;
    height: 90%;
    background-color: #e0fd60;
    overflow-x: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    color: black;
    font-size:20px;
    gap:80px ;
    transform: scaleY(0);
    transition: cubic-bezier(0.19, 1, 0.22, 1)1s;
}
.media-0{
    position: relative;
    width: 17%;
    display: flex;
    justify-content: space-between;
     opacity: 0;
     transition: cubic-bezier(0.19, 1, 0.22, 1)0.5s;
    animation: social 2s infinite linear;   
}
.media-0>h2{
    position: relative;
    font-size: 45px;
    padding: 0px 30px;
}

@keyframes social {
    0%{
        transform: translateX(0%);

    }
    100%{
        transform: translateX(-100%);
    }
}
.social:hover .media{
    transform: scaleY(1);
    opacity: 1;
}
.social:hover .media-0{
 opacity: 1;
}