@font-face {
  font-family: 'HourTrial';
  src: url('fonts/HourTrialVAR.woff2') format('woff2');
}

body {
  display: grid;
  justify-items: center;
  align-items: center;
  transform: translateY(8vw)
}

h1,
.center {
  grid-column: 1/-1;
  grid-row: 1/-1;
}

h1 {
  font-family: "HourTrial";
  font-size: 24rem;
  letter-spacing: -1rem;
  color: white;
  font-weight: 400;
  text-align: center;
  line-height: 20%;
  animation: vars 8s infinite linear;
}

@keyframes vars {
  0%, 100% {
    font-variation-settings: "HOUR" 0, "OKTA" 800;
  }
  50% {
    font-variation-settings: "HOUR" 1200, "OKTA" 800;
  }
}