/*/// File Handling*/

@font-face {
  font-family: "variable";
/*/// Insert here your font file name*/
  src: url("0-fonts/BloblaVF.woff2") format("woff2-variations");
  font-weight: 1 1000;
}

/*/// Color Settings*/

body {
  background-color: #222;
}

.cover {
  background-color: transparent;
}

.header {
  color:black;
}

.title {
  color:black;
}

.footer {
  color:black;
}

/*/// Font Settings*/

/*/// Desktop*/

.header {
  font-size: 3.5vw;
  text-align: center;
  top: 0.25em !important;
  line-height: 1;
}

.title {
  font-size: 20vw;
  line-height: .65em;
  text-align: center;
}

.footer {
  font-size: 1.5vw;
  text-align: center;
  bottom: 1em !important;
  z-index: -1;
}

/*/// Mobile*/

@media only screen and (max-width: 800px) {

  .header {
    font-size: 7vw;
  }

  .title {
    font-size: 47vw;
    line-height: .65em;
  }

  .footer {
    font-size: 3vw;
  }
}

/*/// Animation*/

.title {
  transition: font-variation-settings 0.3s ease;
  animation-name: variable-animation;
  animation-duration: 3s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

a:hover {
  color: white;
  text-shadow: 0.6rem 0 0.6rem red, -0.125rem 0 0.6rem rgb(0, 255, 0);
  animation-duration: 0.01s;
  animation-name: textflicker;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
a:hover {
  color: #FFF;
  border-bottom: 0;
}
.title a {
  border-bottom: 0;
}
@keyframes variable-animation {
  from {
    font-variation-settings: "wght" 1;
  }
  to {
    font-variation-settings: "wght" 1000;
  }
}

@keyframes textflicker {
  from {
    text-shadow: 5px 0 0 red, -5px 0 0 rgb(0, 255, 0);
  }
  to {
    text-shadow: 20px 0.5px 2px red, -20px -0.5px 2px rgb(0, 255, 0);
  }
}