:root {
  font-size: 1000%;
  font-family: "Swiss Now";
}


body {
  animation: colorbeat 0.2s infinite;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
    /* overflow: hidden; */
}

@keyframes colorbeat {
  from { background-color: rgb(105, 195, 230); }
  to {  background-color: black; }
}


.container {
  display: flex;
  justify-content: space-evenly;
  gap: 200px;
}


h1 {
  text-align: center;
}


.W {
  animation: danceW 4s infinite alternate-reverse, movebabyW 4s infinite alternate-reverse;
}

@keyframes danceW {
  0% { font-variation-settings: 'wght' 100, 'ital' 0 }
  20% { font-variation-settings: 'wght' 600, 'ital' 0 }
  40% { font-variation-settings: 'wght' 100, 'ital' 0 }
  60% { font-variation-settings: 'wght' 300, 'ital' 12 }
  80% { font-variation-settings: 'wght' 100, 'ital' 0 }
  100% { font-variation-settings: 'wght' 900, 'ital' 0 }
}

@keyframes movebabyW {
  0% { font-size: 100%; }
  40% { font-size: 120%; }
  80% { font-size: 60%; }
  100% { font-size: 140%; }
}


.L {
  animation: danceL 2s infinite alternate-reverse, movebabyL 2s infinite alternate-reverse;
}

@keyframes danceL {
  0% { font-variation-settings: 'wght' 100, 'ital' 0 }
  20% { font-variation-settings: 'wght' 200, 'ital' 12 }
  40% { font-variation-settings: 'wght' 500, 'ital' 6 }
  60% { font-variation-settings: 'wght' 300, 'ital' 12 }
  80% { font-variation-settings: 'wght' 100, 'ital' 0 }
  100% { font-variation-settings: 'wght' 900, 'ital' 6 }
}

@keyframes movebabyL {
  0% { font-size: 120%; }
  40% { font-size: 100%; }
  80% { font-size: 60%; }
  100% { font-size: 80%; }
}


.B {
  animation: danceB 4s infinite linear, movebabyB 4s infinite linear;
}

@keyframes danceB {
  0% { font-variation-settings: 'wght' 100, 'ital' 0 }
  40% { font-variation-settings: 'wght' 200, 'ital' 6 }
  60% { font-variation-settings: 'wght' 100, 'ital' 0 }
  80% { font-variation-settings: 'wght' 900, 'ital' 12 }
  90% { font-variation-settings: 'wght' 100, 'ital' 0 }
  100% { font-variation-settings: 'wght' 600, 'ital' 0 }
}

@keyframes movebabyB {
  0% { font-size: 100%; }
  20% { font-size: 160%; }
  80% { font-size: 60%; }
  100% { font-size: 120%; }
}