@font-face{font-family:"Cassius";src:url(./assets/a43fd0f63f1cf5d0277a.woff2) format("woff2"),url(./assets/3c0c83a4d1884678f240.woff) format("woff"),url(./assets/2d525593dd073e1888fb.ttf) format("ttf")}
body{background-color:#000;color:#fff;font-family:"Cassius","Times New Roman",Times,serif}.hero{width:100vw;min-height:100vh;display:flex;justify-content:center;align-items:center}.button{cursor:pointer;padding:48px}.text{font-size:min(clamp(1.6vw,3.6vh,999px),10vw);pointer-events:none}.content{font-size:.75rem;width:100%;text-align:center;padding:0 24px 24px 24px}.content a{color:#fff;text-decoration:none}

html {background-color:black;
color:white;
background-color:#000;color:#fff;}










html,body   
  {
    margin:0;padding:0;
    width:100%;
    height:100%;
    font-family:"Cassius","Times New Roman",Times,serif;
    overflow: hidden;
  }



#mad
    {
    width:100%;
    height:100%;
    overflow: hidden;
    background-color:#000;
    color:white;
    overflow:hidden;
   }  

#bg1,#bg2 
   {
    position: absolute;
    width:100%;
    height:100%;
    left:0%;
    top:0%;
    background-image: url(./assets/data_w.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size:100% auto;
    opacity:0;
    overflow:visible;
   }


#bgs   {  opacity: 0.25;

}
#bg1   {  transform:  translate(-40%,1%); }


#bg2 
   {  transform: translate(40%,29%);  }

.start #bg1
   {  animation: blink 1.5s linear .95s infinite forwards; }

.start #bg2
   { animation: blink 1.5s linear .75s infinite forwards;  }





   h1, h2, h3 {         
    text-transform: uppercase;
    font-weight: 100; 
    font-size: 13vw;
    line-height:1;
    margin:20px 0px;
  }
  
  h2 {         
    text-transform: inherit;
    font-weight: 100; 
    font-size: 6vh;
    margin: 0;
  }
  h3 
  {
    font-size: 4vh;
    margin: 0;
    margin-bottom:30px;
  }

#middle, #yeah, #endcard 
    {  
      opacity:0;
      display:inline-block;
      position: absolute;
      left:50%;
      top:45%;
      transform:translate(-50%,-50%);
      text-align:center;
      width:95%;
    }



#endcard
  {
    transform: translate(-50%,-20%);
    opacity: 0;
  }


.end #yeah 
  {  animation: up 1.75s ease-in-out 3s 1 forwards;  }


.end #endcard 
  {  animation: show 1.75s ease-in-out 3s 1 forwards;  }


@keyframes up {
    0%    {   transform: translate(-50%,-50%);  }
    100%  {  transform: translate(-50%,-90%)   }
  }



@keyframes show {
      0%    {   opacity:0;transform: translate(-50%,0%);  }
      100%  { opacity:1; transform: translate(-50%,30%);   }
    }
  

#yeah 
    {   opacity: 1;   }



.sound #middle {
      animation: show2 .5s linear 0s 1 forwards;
  }



  @keyframes show2 {
    0%    {   opacity:0;  }
    100%  { opacity:1;   }
  }

.blinky
    { animation: blink 1.5s linear .75s 2 forwards;  }


#yeah #logo
    {
      width: 100%;
      margin-bottom: -14%;
      margin-top: -7%;
    }


    
#track 
    {
      opacity:0.1;
      min-width:100%;
      min-height:100%;
   
      -webkit-transition: all 2.75s 0s ease;
      -moz-transition: all 2.75s 0s ease;
      -o-transition: all 2.75s 0s ease;
      transition: all 2.75s 0s ease;

      -webkit-filter: blur(15px);
      -moz-filter: blur(15px);
      -o-filter: blur(15px);
      -ms-filter: blur(15px);
      filter: blur(15px);
    }

#track.unblur 
    {
      opacity:0.3;
      -webkit-filter: blur(2px);
      -moz-filter: blur(2px);
      -o-filter: blur(2px);
      -ms-filter: blur(2px);
      filter: blur(2px);
    }

.btn 
    {
      font-size:16px;
      border:1px solid white;
      padding:10px 30px;
      cursor: pointer;
    }






@keyframes blink
  {
      0%    {opacity:0;}
      5%    {opacity:1;}
      10%   {opacity:0;}
      20%   {opacity:1;}
      90%    {opacity:1;}
      95%   {opacity:0;}
  }


#navbar 
  {
    width:calc(100% - 12px);
    padding:0 6px;
    position:absolute;
    bottom:0;
    left:0;
    height:55px;
    z-index: 999;
  }

#navbar.hide 
  { transform:translate(0,100%); }

.end #navbar
  {
    animation: showbar .5s linear 0s 1 forwards; 

  }

  @keyframes showbar
  {
      0%    {transform:translate(0,100%);}
      100%   {transform:translate(0,0%);}
  }

#navbar img
  {
    display:inline-block;
    float:left;
    height:calc(100% - 30px);
    padding: 15px 6px;
  }

@media screen and (max-aspect-ratio: 10/15) {       }




#rotate
    {
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: 999;
    display: none;
    background-color: #000000;
    background-image: linear-gradient(315deg, #111111 0%, #252525 74%);
    }

#rotate::after  
    {
    content:'';
    height:100%;
    width:100%;
    position:absolute;
    top:0;
    left:0;
    background: url('assets/rotate.svg') no-repeat;
    background-size: 40% auto;
    background-position: center 45%;
    }
  
  @media screen and (orientation:landscape) {
     /*  #rotate   {  display:block;   } */

     #yeah #logo
     {
       width: 70%;
       margin-bottom: -7%;
       margin-top: -7%;
     }
 


     h1, h2, h3 {         
      text-transform: uppercase;
      font-weight: 100; 
      font-size: 15vh;
      line-height:1;
      margin:20px 0px;
    }
    
    h2 {         
      text-transform: inherit;
      font-weight: 100; 
      font-size: 6vh;
    }
    h3 
    {
      font-size: 4vh;
      margin: 0;
    }

    }