:root {
  font-size: 10vh;
  font-family: 'Climate Crisis'; /* Dieser Name korrespondiert mit den Einstellungen in fonts.css */
}

body {
  margin: 0;
  padding: 0;
  background: #1D1D1D;
}

ul {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  padding: 0;
  display: flex;

}

ul li {
  list-style: none;
  color: #484848;
  text-shadow: none;
  animation: animate 1s infinite linear;
}

@keyframes animate {
    0%
    { 
        color: #b289aa;
        text-shadow: none;
    }
    18%
    { 
        color: #b289aa;
        text-shadow: none;
    }
    20%
    { 
        color: #FFC5F4;
        text-shadow: 0 0 7px, 0 0 20px #ff352A;
    }
    30%
    { 
        color: #b289aa;
        text-shadow: none;
    }
    35%
    { 
        color: #FFC5F4;
        text-shadow: 0 0 7px, 0 0 20px #ff352A;
    }
    70%
    { 
        color: #b289aa;
        text-shadow: none;
    }
    85%
    { 
        color: #FFC5F4;
        text-shadow: 0 0 7px, 0 0 20px #ff352A;
    }
    90%
    { 
        color: #b289aa;
        text-shadow: none;
    }
    100%
    { 
      color: #b289aa;
      text-shadow: none;
    }
  }


  ul li:nth-child(1)
  {
      animation-delay: .2s; 
  }

  ul li:nth-child(2)
  {
      animation-delay: .4s; 
  }

  ul li:nth-child(3)
  {
      animation-delay: .6s; 
  }

  ul li:nth-child(4)
  {
      animation-delay: .8s; 
  }

  ul li:nth-child(5)
  {
      animation-delay: 1s; 
  }

  ul li:nth-child(6)
  {
      animation-delay: 1.2s; 
  }
  
  ul li:nth-child(7)
  {
      animation-delay: 1.4s; 
  }

  ul li:nth-child(8)
  {
      animation-delay: 1.6s; 
  }

  ul li:nth-child(9)
  {
      animation-delay: 1.6s; 
  }

  ul li:nth-child(10)
  {
      animation-delay: 1.8s; 
  }

  ul li:nth-child(11)
  {
      animation-delay: 2s; 
  }