/*/// File Handling*/

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

/*/// Color Settings*/

body {
  background-color: WhiteSmoke;
  cursor: crosshair;
}

a{
  color: #000;
  border-bottom:1px solid #000;
}

.cover {
  background-color:gainsboro;
  box-shadow: inset 4px 0 10px rgb(120 120 120 / 10%), 10px 10px 60px rgb(0 0 0 / 10%) !important;
}

.header, .footer {
  color:#fff;
  text-transform: uppercase;
}

#includedName{
  color: #000;
}

.title > a{
  border-bottom: 0;
  color: inherit;
  cursor: nesw-resize;
}

/*/// Font Settings*/

/*/// Desktop*/

.header {
  font-size: 1vw;
  text-align: center;
}

.title {
  font-size: 12vw;
  line-height: .8em;
  text-align: center;
  color: #000;
}

.footer {
  font-size: 1vw;
  text-align: center;
}

/*/// Mobile*/

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

  .header {
    font-size: 3vw;
  }

  .title {
    font-size: 27vw;
    line-height: .8em;
  }

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

/*/// Animation*/

.title > .top, .title > .middle, .title > .bottom {
  animation-duration: 3s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;  
}

.title > .top {
  animation-name: variable-animation-top;
}

.title > .middle {
  animation-name: variable-animation;
}

.title > .bottom {
  animation-name: variable-animation-bottom;
}

@keyframes variable-animation-top {
  0% {
    font-variation-settings: "wght" 1;
  }
  10% {
    font-variation-settings: "wght" 1;
    color: #000;
  }
  25% {
    font-variation-settings: "wght" 1000;
    color:red;
  }
  50% {
    font-variation-settings: "wght" 1000;
    color:red;
  }
  75% {
    font-variation-settings: "wght" 1000;
    color:red;
  }
  90% {
    font-variation-settings: "wght" 1;
    color: #000;
  }
  100% {
    font-variation-settings: "wght" 1;
    color: #000;
  }
}

@keyframes variable-animation {
  0% {
    font-variation-settings: "wght" 1;
  }
  10% {
    font-variation-settings: "wght" 1;
  }
  25% {
    font-variation-settings: "wght" 1;
    color: #000;
  }
  50% {
    font-variation-settings: "wght" 1000;
    color:red;
  }
  75% {
    font-variation-settings: "wght" 1000;
    color:red;
  }
  90% {
    font-variation-settings: "wght" 1;
    color: #000;
  }
  100% {
    font-variation-settings: "wght" 1;
    color: #000;
  }
}


@keyframes variable-animation-bottom {
  0% {
    font-variation-settings: "wght" 1;
  }
  10% {
    font-variation-settings: "wght" 1;
  }
  25% {
    font-variation-settings: "wght" 1;
  }
  50% {
    font-variation-settings: "wght" 1;
    color: #000;
  }
  75% {
    font-variation-settings: "wght" 1000;
    color:red;
  }
  90% {
    font-variation-settings: "wght" 1;
    color: #000;
  }
  100% {
    font-variation-settings: "wght" 1;
    color: #000;
  }
}


/* Background animation */


.cover{
  animation-duration: 6s;
  animation-direction: normal;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-name: cover-animation;
}

@keyframes cover-animation {
  0% {
    background-color: inherit;
  }
  10% {
    background-color: inherit;
  }
  25% {
    background-color: blue;
  }
  75% {
    background-color: blue;
  }
  85% {
    background-color: inherit;
  }
  100% {
    background-color: inherit;
  }
}