@font-face {
  font-family: catto-patto-superdooper-rooper;
  src: url(./catcrypt.ttf);
  font-weight: 300;
}

@font-face {
  font-family: alla-som-spelar-wow-ar-tontar;
  src: url(./Wowza.ttf);
  font-weight: 300;
}

body {
  width: 100%;
  height: 100%;
  background: rgb(2, 0, 36);
  background: linear-gradient(
    90deg,
    rgba(2, 0, 36, 1) 0%,
    rgba(121, 9, 121, 1) 35%,
    rgba(255, 0, 31, 1) 100%
  );
  color: #fff;
  text-align: center;
  font-family: catto-patto-superdooper-rooper;
  font-size: 30px;
}
h1 {
  font-family: alla-som-spelar-wow-ar-tontar;
  line-height: 0;
  text-transform: uppercase;
}

h2 {
  font-weight: 300 !important;
  font-size: 50px !important;
}

.human-readable-text {
  font-family: "Comic Sans MS";
  color: lightgreen;
}

.very-cool-anti-gt-commercial {
  -webkit-animation: linear end;
  -webkit-animation-fill-mode: forwards;
  -webkit-animation-name: disappear;
  -webkit-animation-duration: 50s;
  position: absolute;
  right: 100vw;
  width: 0px;
  z-index: 9999999999;
}

#cat {
  font-size: 510px !important;
  line-height: 0px;
  position: absolute;
  top: 0vh;
}

.progress-bar {
  width: 10vw;
  height: 10px;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 5px;
  overflow: hidden;
}

#bar-0,
#bar-1,
#bar-2,
#bar-3 {
  width: 0%;
  height: 10px;
  background-color: orange;
  transition: all 0.3s ease-in-out;
  border-radius: 5px;
}

.hattHolder {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 50vw;
  height: 50vh;
  margin-left: 25vw;
  margin-top: 20vh;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000000;
}

.hattHolder p,
.progress-bar {
  z-index: 1000000;
}

p {
  font-family: alla-som-spelar-wow-ar-tontar;
  line-height: 40px;

  font-size: 20px;
  white-space: nowrap;
}

.beast {
  bottom: 15%;
  position: absolute;
  -webkit-animation: linear infinite alternate;
  -webkit-animation-name: run;
  -webkit-animation-duration: 5s;
  z-index: 10;
}

.mikke {
  top: 15%;
  position: absolute;
  -webkit-animation: linear infinite alternate;
  -webkit-animation-name: run;
  -webkit-animation-duration: 3s;
  z-index: 10;
  height: 200px;
  width: 200px;
}

.gt {
  left: 0;
  position: absolute;
  top: 0;
}
@-webkit-keyframes run {
  0% {
    left: 0;
    bottom: -15;
  }
  50% {
    left: 80%;
    bottom: 50%;
  }
  100% {
    left: 0;
    bottom: -15%;
  }
}
.shame {
  -webkit-animation: linear infinite alternate;
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 5s;
}
@-webkit-keyframes zoom {
  0% {
    width: 25%;
    height: 25%;
  }
  100% {
    width: 50%;
    height: 50%;
  }
}
.tt {
  border-radius: 50%;
  animation: spin 2s linear infinite;
  z-index: 99999;
  border: 50px dotted green;
}

@keyframes spin {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(360deg);
  }
}

@-webkit-keyframes disappear {
  0% {
    position: absolute;
    right: 100vw;
  }
  100% {
    right: -100vw;
  }
}

.gbg {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 15%;
  -webkit-animation: linear infinite alternate;
  -webkit-animation-name: run;
  -webkit-animation-duration: 10s;
}

.gbg-container {
  animation: spin 2s linear infinite;
}

.rgk {
  width: 100px;
  height: 400px;
  position: absolute;
  left: 0;
  border: 50px solid #5598ff;
  border-style: ridge;
  box-shadow: 50px 50px 16px 3px #666363;
  animation: doFunThingsWithImage 20s linear infinite;
}

@keyframes doFunThingsWithImage {
  0% {
    filter: invert(100%);
  }
  20% {
    filter: saturate(70);
  }
  40% {
    filter: sepia(100%);
  }
  60% {
    filter: hue-rotate(180deg);
  }
  80% {
    filter: contrast(180%);
  }
  100% {
    filter: blur(50px);
  }
}

.ä {
  font-size: 36px;
}