@import url('https://fonts.googleapis.com/css2?family=Rampart+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Shadows+Into+Light&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fredericka+the+Great&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cabin+Sketch&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rubik+Beastly&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Teko:wght@600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nanum+Myeongjo&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Monoton&display=swap');
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rochester&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rye&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Seaweed+Script&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Grenze+Gotisch:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Irish+Grover&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Frijole&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Pirata+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=New+Rocker&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Junge&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Ewert&display=swap');
/* WOW! So many fonts. */

@font-face { /*  Adding Arial font for mobile devices */
  font-family: 'ArialBlack-';
  src: url('arial-black.woff') format('woff'), /* Modern Browsers */
       url('arial-black.ttf')  format('truetype'); /* Safari, Android, iOS */
}

html, body{
  overflow-x: hidden;
  overflow-y: hidden;
  
}

body{
  background: black;
}

@keyframes shrink {
  0%   {height: 100%;}
  100% {height: 0%;}
}

.cover{
  position:absolute;
  background-color: black;
  height: 100%;
  width: 100%;
  z-index: 2;
  animation-name: shrink;
  animation-duration: 4s;
  animation-delay: 1s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
}

.square{
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  height: 500px;
  width: 500px;
  background: white;

  display: flex;
  flex-direction: column;

  -webkit-user-select: none; /* Safari */        
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE10+/Edge */
  user-select: none; /* Standard */
}

.letter{
  width: min-content;
  display: block;
  flex-direction: column;
  cursor: pointer;
}

.word{
  font-family:'ArialBlack-', sans-serif;
  text-align: center;
  width: 100%;
  font-size: 100px;

  display: flex;
  flex-direction: row;
  justify-content: center;
}

.fade_out{
  position:absolute;
  background-color: white;
  z-index: -1;
  width: 20px;
  height: 20px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@media (max-width: 500px) { /* optimize for mobile */
  .square{
    width: 80vw;
    height: 80vw;
  }

  .word{
    font-size: 16vw;
  }
}