/* Font face */

@font-face {
  font-family: 'WhyteEDU';
  src: url("../dinamo/WhyteVariableEDU.ttf") format("truetype");
}
@font-face {
  font-family: 'ProphetEDU';
  src: url("../dinamo/ProphetVariableEDU") format("truetype");
}
@font-face {
  font-family: 'GintoEDU';
  src: url("../dinamo/GintoVariableEDU.ttf") format("truetype");
}
@font-face {
  font-family: 'MonumentGroteskEDU';
  src: url("../dinamo/MonumentGroteskVariableEDU.ttf") format("truetype");
}
@font-face {
  font-family: 'MonumentGroteskMonoEDU';
  src: url("../dinamo/MonumentGroteskMonoVariableEDU.ttf") format("truetype");
}
@font-face {
  font-family: 'EstragonEDU';
  src: url("../dinamo/EstragonVariableEDU.ttf") format("truetype");
}
@font-face {
  font-family: 'EstragonGXBubbles';
  src: url("../dinamo/EstragonGXBubbles.ttf") format("truetype");
}
@font-face {
  font-family: 'PlanetXGX';
  src: url("../dinamo/PlanetXGX.ttf") format("truetype");
}
@font-face {
  font-family: 'FavoritEDU';
  src: url("../dinamo/FavoritVariableEDU.ttf") format("truetype");
}
@font-face {
  font-family: 'favorit_upside-down_rotate';
  src: url("../dinamo/favorit_upside-down_rotate_03.ttf") format("truetype");
}
@font-face {
  font-family: 'favorit_upside-down_mirror';
  src: url("../dinamo/favorit_upside-down_mirror_05.ttf") format("truetype");
}
@font-face {
  font-family: 'favorit_lining';
  src: url("../dinamo/favorit_lining_04_06.ttf") format("truetype");
}

@font-face {
    font-family: 'BaronNeue';
    src: url('../dinamo/baronneue-webfont.woff2') format('woff2'),
         url('../dinamo/baronneue-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}






/* Font classes and hover states */

.whyte {
  font-family: 'WhyteEDU';
  font-variation-settings: "wght" 0, "ital" 0, "opsz" 0;
}
.whyte:hover {
  font-variation-settings: "wght" 100, "ital" 100, "opsz" 100;
}

.ginto {
  font-family: 'GintoEDU';
  font-variation-settings: "wght" 0, "wdth" 0, "ital" 0;
}
.ginto:hover {
  font-variation-settings: "wght" 100, "wdth" 100, "ital" 100;
}

.monumentgrotesk {
  font-family: 'MonumentGroteskEDU';
  font-variation-settings: "wght" 0, "ital" 0;
}
.monumentgrotesk:hover {
  font-variation-settings: "wght" 100, "ital" 100;
}
.monumentgrotesk_active {
  font-variation-settings: "wght" 100, "ital" 100;
}

.monumentgrotesk_mono {
  font-family: 'MonumentGroteskMonoEDU';
  font-variation-settings: "mono" 0;
}
.monumentgrotesk_mono:hover {
  font-variation-settings: "mono" 100;
}

.estragon {
  font-family: 'EstragonEDU';
  font-variation-settings: "wght" 0;
}
.estragon:hover {
  font-variation-settings: "wght" 100;
}

.estragon_bubbles {
  font-family: 'EstragonGXBubbles';
  font-variation-settings: "bubl" 0, "wght" 100, "pos2" 0;
}
.estragon_bubbles:hover {
  font-variation-settings: "bubl" 100, "wght" 150, "pos2" 100;
}

.planetx {
  font-family: 'PlanetXGX';
  font-variation-settings: "ivrt" 0;
}
.planetx:hover {
  font-variation-settings: "ivrt" 100;
}

.favorit {
  font-family: 'FavoritEDU';
  font-variation-settings: "wght" 0, "ital" 0, "mono" 0;
}
.favorit:hover {
  font-variation-settings: "wght" 100, "ital" 100, "mono" 100;
}

.favorit_lining {
  font-family: 'favorit_lining';
  font-variation-settings: "wght" 100;
}
.favorit_lining:hover {
  font-variation-settings: "wght" 900;
}

.favorit_upside-down_mirror {
  font-family: 'favorit_upside-down_mirror';
  font-variation-settings: "wght" 100;
}
.favorit_upside-down_mirror:hover {
  font-variation-settings: "wght" 900;
}

.favorit_upside-down_mirror_active {
  font-variation-settings: "wght" 900;
}

.favorit_upside-down_rotate {
  font-family: 'favorit_upside-down_rotate';
  font-variation-settings: "wght" 100;
}
.favorit_upside-down_rotate:hover {
  font-variation-settings: "wght" 900;
}

.animate_font{
  transition: font-variation-settings 1s linear;
}

/* Reset CSS */

html, body {
  background: linear-gradient(180deg, black, white);
  z-index: 1;
  font-size: 16px;
  padding: 0;
  margin: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* .text {
  background-color: white;
  color: black;
  font-family: BaronNeue;
  font-size: 10vw;
  font-weight: bold;
  margin: 0 auto;
  padding: 10px;
  width: 60vw;
  height: 47vh;
  text-align: left;
  position: absolute;
  top: 10%;
  left: 10%;
  mix-blend-mode: screen;
} */

a, button, input, label {
  cursor: pointer
}

*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

ul, li {
  list-style: none;
  margin: 0;
  padding: 0
}

/* Your CSS */

h1{
  color: #ffffff;
  font-size: 10vw;
}
#front{
  mix-blend-mode: exclusion;
  position: absolute;
  top: 0;
  left: 0;
  font-size: 5vw;
  letter-spacing: 0.5vw;
  display: none;
}
#back{
  mix-blend-mode: exclusion;
  position: absolute;
  top: 0;
  left: 0;
  font-size: 20vw;
  margin-top: 2rem;

}

/* .letter{
  transition: font-variation-settings 0.25s linear;
} */

.front-text {
  text-transform: uppercase;
  font-family: 'Major Mono Display', monospace;

  }

body {
  background-color: black;
}

@keyframes wave {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-90px);
  }
}
.wavetext {
  margin-top: 5rem;
  font-family: BaronNeue;
}

.wavetext span {
  display: inline-block;
  font-size: 70px;
  animation-duration: 0.3s;
  animation-name: wave;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  mix-blend-mode: exclusion;
  top: 0;
  left: 0;
  font-size: 6vw;
  letter-spacing: 0.1vw;
  line-height: 6vw
}

.wavetext :nth-child(40n + 0) {
  animation-delay: -0.6s;
  color: white;
}

.wavetext :nth-child(40n + 1) {
  animation-delay: -0.585s;
  color: white;
}

.wavetext :nth-child(40n + 2) {
  animation-delay: -0.57s;
  color: white;
}

.wavetext :nth-child(40n + 3) {
  animation-delay: -0.555s;
  color: white;
}

.wavetext :nth-child(40n + 4) {
  animation-delay: -0.54s;
  color: white;
}

.wavetext :nth-child(40n + 5) {
  animation-delay: -0.525s;
  color: white;
}

.wavetext :nth-child(40n + 6) {
  animation-delay: -0.51s;
  color: white;
}

.wavetext :nth-child(40n + 7) {
  animation-delay: -0.495s;
  color: white;
}

.wavetext :nth-child(40n + 8) {
  animation-delay: -0.48s;
  color: white;
}

.wavetext :nth-child(40n + 9) {
  animation-delay: -0.465s;
  color: white;
}

.wavetext :nth-child(40n + 10) {
  animation-delay: -0.45s;
  color: white;
}

.wavetext :nth-child(40n + 11) {
  animation-delay: -0.435s;
  color: white;
}

.wavetext :nth-child(40n + 12) {
  animation-delay: -0.42s;
  color: white;
}

.wavetext :nth-child(40n + 13) {
  animation-delay: -0.405s;
  color: white;
}

.wavetext :nth-child(40n + 14) {
  animation-delay: -0.39s;
  color: white;
}

.wavetext :nth-child(40n + 15) {
  animation-delay: -0.375s;
  color: white;
}

.wavetext :nth-child(40n + 16) {
  animation-delay: -0.36s;
  color: white;
}

.wavetext :nth-child(40n + 17) {
  animation-delay: -0.345s;
  color: white;
}

.wavetext :nth-child(40n + 18) {
  animation-delay: -0.33s;
  color: white;
}

.wavetext :nth-child(40n + 19) {
  animation-delay: -0.315s;
  color: white;
}

.wavetext :nth-child(40n + 20) {
  animation-delay: -0.3s;
  color: white;
}

.wavetext :nth-child(40n + 21) {
  animation-delay: -0.285s;
  color: white;
}

.wavetext :nth-child(40n + 22) {
  animation-delay: -0.27s;
  color: white;
}

.wavetext :nth-child(40n + 23) {
  animation-delay: -0.255s;
  color: white;
}

.wavetext :nth-child(40n + 24) {
  animation-delay: -0.24s;
  color: white;
}

.wavetext :nth-child(40n + 25) {
  animation-delay: -0.225s;
  color: white;
}

.wavetext :nth-child(40n + 26) {
  animation-delay: -0.21s;
  color: white;
}

.wavetext :nth-child(40n + 27) {
  animation-delay: -0.195s;
  color: white;
}

.wavetext :nth-child(40n + 28) {
  animation-delay: -0.18s;
  color: white;
}

.wavetext :nth-child(40n + 29) {
  animation-delay: -0.165s;
  color: white;
}

.wavetext :nth-child(40n + 30) {
  animation-delay: -0.15s;
  color: white;
}

.wavetext :nth-child(40n + 31) {
  animation-delay: -0.135s;
  color: white;
}

.wavetext :nth-child(40n + 32) {
  animation-delay: -0.12s;
  color: white;
}

.wavetext :nth-child(40n + 33) {
  animation-delay: -0.105s;
  color: white;
}

.wavetext :nth-child(40n + 34) {
  animation-delay: -0.09s;
  color: white;
}

.wavetext :nth-child(40n + 35) {
  animation-delay: -0.075s;
  color: white;
}

.wavetext :nth-child(40n + 36) {
  animation-delay: -0.06s;
  color: white;
}

.wavetext :nth-child(40n + 37) {
  animation-delay: -0.045s;
  color: white;
}

.wavetext :nth-child(40n + 38) {
  animation-delay: -0.03s;
  color: white;
}

.wavetext :nth-child(40n + 39) {
  animation-delay: -0.015s;
  color: white;
}