@font-face{
    font-family: ABCDiatypeMonoVariable-Trial;
    src: url(fonts/ABCDiatypeMonoVariable-Trial.ttf);
}

 .container{
   height: 100%;
   width: 100%;
   left: 0;
   top: 0;
   position: absolute;
   overflow-x: hidden;
   overflow-y: scroll;
   background-color: black;
   transition: 0.5s;
   visibility: hidden;
   z-index: 0;
 }
 .container2{
     visibility: visible;
     z-index: 0;
 }

 .title{
   width: 100vw;
   height: 7vh;
   font-family: ABCDiatypeMonoVariable-Trial;
   top: 3%;
   left: 0;
   cursor: pointer;
   position: absolute;
   animation: glow 1s ease-in-out infinite alternate;
   white-space: nowrap;
   display: flex;
   flex-wrap: wrap;
   margin: 0 auto;
   
}
.all{
  display: none;
}
.allinfo{
  display: none;
  width: 100vw;

}
.name{
  color: rgb(255, 121, 4);
   font-size: 5.2vw;
   font-weight: bold;
   text-align: left;
   padding-left: 3%;
   overflow: hidden;
   display: flex;
   flex-wrap: nowrap;
   display: inline-block;
}
@keyframes animated-text{
    from{width: 0;}
    to{width: 100vw;}
    99%{
        background-color: black;
        color: rgb(255, 121, 4);
        box-shadow: none;
    }
    100%{
        background-color: rgb(255, 121, 4);
        color: black;
        box-shadow: 0 0 20px rgb(255, 121, 4);

    }

 }
.show2{
    display: hidden;
}
  .nameanime{
    animation: animated-text 2s steps(30,end) 1s 1 normal both;
  }
.namenew{
   display: none;
}
.close{
    display: none;
}
.name2{
  color: rgb(255, 121, 4);
  font-size: 5.2vw;
  padding-left: 3%;
   position: absolute;
   font-weight: bold;
   text-align: left;
   overflow: hidden;
   display: none;
  
}
.bios{
  
  width: 100%;
  margin-top: 10vh;
  white-space: nowrap;
  display: flex;
  flex-direction: row;
}

.bio {
  font-size: 4vw;
  font-family:ABCDiatypeMonoVariable-Trial;
   padding-top: 0%;
   margin-top:3vh ;
   padding-bottom: 2vh;
   height: 8vh;
   padding-left: 10%;
   width: 100vw;
   color: rgb(255, 121, 4);
   position: relative;
   cursor: pointer;
   font-weight: bold;
   display: none;
   animation: glow3 1s ease-in-out infinite alternate;
 }

 .bionew{
   display: none;
 }
 .bio2 {
  font-size: 4vw;
  font-family:ABCDiatypeMonoVariable-Trial;
   padding-top: 0%;
   margin-top:2vh ;
   padding-left: 10%;
   width: 100vw;
   padding-top: 1vh;
   padding-bottom: 1vh;
   height: 8vh;
   color: rgb(255, 121, 4);
   position: relative;
   cursor: pointer;
   font-weight: bold;
   display: none;
   animation: glow3 1s ease-in-out infinite alternate;
 }
/*
.title{
  top: 5%;
  position: absolute;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
   
}
.name{
  
  width:100vw;
  animation: typing 2s steps(22), blink .5s step-end infinite alternate;
  white-space: nowrap;
  overflow: hidden;
  border-right: 3px solid;
  font-family: ABCDiatypeMonoVariable-Trial;
  font-size: 46px;
  color: orange;
}

@keyframes typing {
  from {
    width: 0
  }
}
    
@keyframes blink {
  50% {
    border-color: transparent
  }
  100%{
    opacity: 0;
  }
}
*/






.dropdown1{
  margin-top: 1vh;
  height: auto;
  display: block;
}
.dropdown2,.dropdown3, .dropdown4, .dropdown5, .dropdown6 { 
  margin-top: 0%;
  height: auto;
  display: block;
  
}


 .home{
  height: 100%;
  margin-left: 10%;
  display: none;
  animation: glow 1s ease-in-out infinite alternate;


 }

 

 .openbtn1,.openbtn2, .openbtn3, .openbtn4, .openbtn5 {
  font-size: 4vw;
  font-family:ABCDiatypeMonoVariable-Trial;

   padding-left: 15%;
   padding-top: 0.3vh;
   margin-top:1.5vh ;
   padding-bottom: 0.5vh;
   height: 8vh;
   width: 100vw;
   height: max-content;
   color: rgb(255, 121, 4);
   position: relative;
   cursor: pointer;
   font-weight: bold;
   display: none;
   animation: glow4 1s ease-in-out infinite alternate;
 }
 .closebtn1, .closebtn2, .closebtn3,.closebtn4, .closebtn5{
  font-size: 4vw;
  font-family:ABCDiatypeMonoVariable-Trial;
  padding-top: 0.3vh;
  margin-top:1.5vh ;
  padding-bottom: 1vh;
  height: 8vh;
   padding-left: 15%;
   width: 100vw;
   color: rgb(255, 121, 4);
   position: relative;
   cursor: pointer;
   font-weight: bold;
   display: none;
   animation: glow4 1s ease-in-out infinite alternate;
}



 .openbtn1:hover, .openbtn2:hover, .openbtn3:hover, .openbtn4:hover, .openbtn5:hover, .bio:hover, .back:hover{
   background-color: rgb(255, 121, 4);
   box-shadow: 0 0 20px rgb(255, 121, 4);
   color: black;
   text-shadow: 0 0 4px black;
 }

 @-webkit-keyframes glow {
  from {
    text-shadow: 0 0 3px rgba(255, 166, 2, 0.822), 0 0 3px rgba(255, 115, 0, 0.856);
  }
  
  to {
    text-shadow: 0 0 4px rgba(255, 166, 2, 0.822), 0 0 6px rgba(255, 115, 0, 0.856);
  }
}

 @-webkit-keyframes glow3 {
  from {
    text-shadow: 0 0 5px rgba(255, 166, 2, 0.822), 0 0 5px rgba(255, 115, 0, 0.856);
  }
  
  to {
    text-shadow: 0 0 6px rgba(255, 166, 2, 0.822), 0 0 8px rgba(255, 115, 0, 0.856);
  }
}
@-webkit-keyframes glow4 {
  from {
    text-shadow: 0 0 7px rgba(255, 166, 2, 0.822), 0 0 7px rgba(255, 115, 0, 0.856);
  }
  
  to {
    text-shadow: 0 0 8px rgba(255, 166, 2, 0.822), 0 0 9px rgba(255, 115, 0, 0.856);
  }
}
@-webkit-keyframes glow2 {
  from {
    text-shadow: 0 0 15px rgba(255, 115, 0, 0.856), 0 0 20px rgba(255, 115, 0, 0.856);
  }
  
  to {
    text-shadow: 0 0 20px rgba(255, 166, 2, 0.822), 0 0 15px rgba(255, 115, 0, 0.856);
  }
}
.closebtn1click,.closebtn2click,.closebtn3click,.closebtn4click,.closebtn5click{
 position: relative;
 display: block;

  
}

.info1, .info2, .info3, .info4, .info5{
  width:80vw;
   margin-left: 22%;
   padding-right: 4%;
   padding-top: 3vh;
   padding-bottom: 2vh;
   color: rgb(255, 136, 0);
   font-size: 2.5vw;
   font-family: ABCDiatypeMonoVariable-Trial;
   font-weight: bold;
   text-align: left;
   display: none;
   cursor: default;
   animation: glow2 1s ease-in-out infinite alternate;
}




.back{
  width:100vw;
  position: relative;
  font-size: 4vw;
  font-family:ABCDiatypeMonoVariable-Trial;
   padding-left: 10%;
   color: rgb(255, 121, 4);
   font-weight: bold;
   display: none;
   cursor: pointer;
   padding-top: 0.3vh;
  padding-bottom: 1.5vh;
   width: 100vw;
   height: 8vh;
   animation: glow3 1s ease-in-out infinite alternate;
   margin-top: 1vh;

}


.show {
  display: block;
}