:root {
  font-size: 4vw;
  font-family: 'harber'; /* Dieser Name korrespondiert mit den Einstellungen in fonts.css */
}

body {
  background-color: rgb(0, 0, 0);
  margin-top: 20px;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;

}

h1 {
  color: white;
  justify-self: center;
  animation: my-anim 0.6s infinite alternate ease-in-out;
}


@keyframes my-anim {
  0% { font-variation-settings: 'slnt' -5, 'VVLM' 2, 'NSSS' -10;}
  100% { font-variation-settings: 'slnt' 5, 'VVLM' -2, 'NSSS' 10;}
  0%  { transform: perspective(400px) translateZ(10px) rotateY(-30deg);}
  50%  { transform: perspective(200px) translateZ(10px) rotateY(-60deg);}
  100%  { transform: perspective(400px) translateZ(10px) rotateY(30deg);}
  0%   {color: black;}
  10%  {color: red;}
  20%  {color: #FFC5F4;}
  30% {color: blue;}
  40%   {color: black;}
  50%  {color: red;}
  60%  {color: #FFC5F4;}
  70% {color: blue;}
  80%   {color: black;}
  90%  {color: red;}
  100%  {color: #FFC5F4;}
}