@charset "UTF-8";

body{
  margin:0;
  height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
}

h1{
  font-size:clamp(600px,200vw,1000px);
  margin:0;
}

.changing{
  animation:fontLoop 20s infinite linear;
  font-display: swap;
}

button.special{
  font-family: 'Courier New', Courier, monospace;
  font-size: 20px;
  position:fixed;
  top:0;
  left:0;
  background-color: rgb(255, 255, 255);
  z-index: index 9;;
}

button.normal{
  font-family: 'Courier New', Courier, monospace;
  font-size: 20px;
  position:fixed;
  bottom:0;
  left:0;
  background-color: rgb(255, 255, 255);
  z-index: index 9;;
}
button.normal:hover ~ h1{
  .changing{color: rgb(255, 255, 255) !important;}
  color : rgb(0, 0, 0) !important;
  background-color: rgb(0, 0, 0);
  
}

button.special:hover ~ h1{
  .changing{color: rgb(212, 0, 255) !important;}
  color : rgb(0, 247, 255) !important;
  background-color: rgb(221, 255, 0);
}

@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Pacifico&family=Bungee&family=Rubik+Glitch&family=UnifrakturCook:wght@700&family=Creepster&family=Monoton&family=Orbitron&family=Fredericka+the+Great&family=Permanent+Marker&display=swap');

@keyframes fontLoop{
  
  0%   {font-family:monospace;color: rgb(255,115,0);font-stretch:extra-expanded;}
  5%   {font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;color: rgb(255,174,0);}
  10%  {font-family:cursive;color: rgb(255,255,0);}
  15%  {font-family:serif;color: rgb(120,232,15);}
  20%  {font-family:'Courier New', Courier, monospace;color: rgb(0,240,248);}
  25%  {font-family:'Rubik Glitch', cursive;color: rgb(0,148,223);}
  30%  {font-family:'Creepster', cursive;color: rgb(0,60,226);}
  35%  {font-family:'UnifrakturCook', cursive;color: rgb(43,0,255);}
  40%  {font-family:'Monoton', cursive;color: rgb(167,24,255);}
  45%  {font-family:'Fredericka the Great', cursive;color: rgb(208,14,226);}
  50%  {font-family:'Bungee', sans-serif;color: rgb(255,28,142);}
  55%  {font-family:'Press Start 2P', monospace;color: rgb(204,0,61);}
  60%  {font-family:'Pacifico', cursive;color: rgb(255,41,41);}
  65%  {font-family:'Permanent Marker', cursive;color: rgb(255,120,120);}
  70%  {font-family:'Orbitron', sans-serif;color: rgb(255,180,120);}
  75%  {font-family:'Rubik Glitch', cursive;color: rgb(255,230,120);}
  80%  {font-family:'Creepster', cursive;color: rgb(120,255,200);}
  85%  {font-family:'UnifrakturCook', cursive;color: rgb(120,200,255);}
  90%  {font-family:'Monoton', cursive;color: rgb(180,120,255);}
  95%  {font-family:'Fredericka the Great', cursive;color: rgb(255,120,200);}
  100% {font-family:'Pacifico', cursive;color: rgb(255, 0, 30);}
}



body{ 
  overflow:hidden;
  opacity: 100%;
  animation:bgColor 20s infinite linear;
}
@keyframes bgColor{
  0% {
    background-color: rgb(0, 160, 214);
  }
  5% {
    background-color: rgb(14, 88, 207);
  }
  10% {
    background-color: rgb(0, 74, 211);
  }
  15% {
    background-color: rgb(115, 15, 221);
  }
  20% {
    background-color: rgb(245, 27, 169);
  }
  25% {
    background-color: rgb(238, 31, 65);
  }
  30% {
    background-color: rgb(255, 128, 0);
}
  35% {
    background-color: rgb(255, 213, 0);
  }
  40% {
    background-color: rgb(224, 253, 3);
  }
  45% {
    background-color: rgb(229, 255, 0);
  }
  50% {
    background-color: rgb(20, 238, 8);
  }
  55% {
    background-color: #0be168;
  }
  60% {
    background-color: rgb(0, 255, 208);
  } 
  65% {
    background-color: rgb(0, 255, 128);
  }
    70% {
    background-color: rgb(9, 166, 140);   
    }
  75% {
    background-color: rgb(0, 255, 132); 
  }   
  80% {
    background-color: rgb(1, 201, 14); 
  } 
  85% {
    background-color: rgb(0, 255, 128); 
  } 
  90% {
    background-color: rgb(0, 255, 234); 
  } 
  95% {
    background-color: rgb(0, 47, 255);
  } 
  100% {
    background-color: rgb(9, 81, 197);
  } 

  }