/*/// File Handling*/

@font-face {
  font-family: "variable";
/*/// Insert here your font file name*/
  src: url("0-fonts/GTVAR–BlenioGX.ttf") format("truetype-variations");
  font-weight: 1 1000;
  font-stretch: 1 1000;
}

/*/// Color Settings*/

body {
  background-color: #222;
}

.cover {
  background-color: #FFD601;
}

.header {
  color:red;
}

.title {
  color:red;
}

.footer {
  color:red;
}

.alt {
font-feature-settings: "ss01";
}


/*/// Font Settings*/

/*/// Desktop*/

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

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

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

/*/// Mobile*/

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

  .header {
    font-size: 2vw;
  }

  .title {
    font-size: 17vw;
    line-height: 0.1em;
  }

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

/*/// Animation*/

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

@keyframes variable-animation {
  from {
    font-variation-settings: "wght" 1, "wdth" 1;
  }
  33% {
    font-variation-settings: "wght" 1, "wdth" 1000;
  }
  66% {
    font-variation-settings: "wght" 1000, "wdth" 1000;
  }
  to {
    font-variation-settings: "wght" 1000, "wdth" 1;
  }
}