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

body {
  background-color: #522398;
  margin: 0;
  padding: 0;
  overflow: hidden;
}


#gridcontainer {
  display: grid;
  grid-template-columns: repeat(8, 12.5vw);
  grid-template-rows: repeat(5, 20vh);
  justify-items: center; 
  align-items: center; 
  position: absolute;
  animation-name: blurani;
  animation-duration: 5s;
  animation-direction: alternate;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes blurani {
  0% {  filter: blur(2vh);}
  40% {  filter: blur(0);}
  100% {  filter: blur(0);}
}

.textcontainer {
  display: flex;
  justify-content: center; 
  align-items: center;
  position: relative;
}

/* BLINKI1 */

.blinki1 {
  font-size: 30vh;
  line-height: 0vh;
  color: #f9e300;
  margin: 0;
  text-align: center;
  position: absolute;
  animation-name: blinki1ani;
  animation-duration: 1s;
  animation-direction: alternate;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-fill-mode: backwards;
}

@keyframes blinki1ani {
  0% {  font-variation-settings: "wght" 350, "ELSH" 8, "ELGR" 1;}
  100% {  font-variation-settings: "wght" 350, "ELSH" 11, "ELGR" 1;}
}

/* BLINKI2 */

.blinki2 {
  font-size: 10vh;
  line-height: 6vh;
  color: #00a1de;
  margin: 0;
  text-align: center;
  position: absolute;
  animation-name: blinki2ani;
  animation-duration: 0.4s;
  animation-direction: alternate;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-fill-mode: backwards;
}

@keyframes blinki2ani {
  0% {  font-variation-settings: "wght" 100, "ELSH" 6.5, "ELGR" 1;}
  100% {  font-variation-settings: "wght" 900, "ELSH" 6.5, "ELGR" 1;}
}

/* BLINKI3 */

.blinki3 {
  font-size: 110vh;
  line-height: 0vh;
  color: #f9461c;
  margin: 0;
  text-align: center;
  position: absolute;
  animation-name: blinki3ani;
  animation-duration: 1s;
  animation-direction: alternate;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-fill-mode: backwards;
}

@keyframes blinki3ani {
  0% {  font-variation-settings: "wght" 350, "ELSH" 16, "ELGR" 1;}
  100% {  font-variation-settings: "wght" 350, "ELSH" 16, "ELGR" 2;}
}

/* BLINKI4 */

.blinki4 {
  font-size: 10vh;
  line-height: 6vh;
  color: #e27ea6;
  margin: 0;
  text-align: center;
  position: absolute;
  animation-name: blinki4ani;
  animation-duration: 0.6s;
  animation-direction: alternate;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-fill-mode: backwards;
}

@keyframes blinki4ani {
  0% {  font-variation-settings: "wght" 100, "ELSH" 0, "ELGR" 1;}
  100% {  font-variation-settings: "wght" 900, "ELSH" 2, "ELGR" 1;}
}

/* BLINKI5 */

.blinki5 {
  font-size: 80vh;
  line-height: 0vh;
  color: #f9e300;
  margin: 0;
  text-align: center;
  position: absolute;
  animation-name: blinki5ani;
  animation-duration: 6s;
  animation-direction: alternate;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-fill-mode: backwards;
}

@keyframes blinki5ani {
  0% {  font-variation-settings: "wght" 350, "ELSH" 13.5, "ELGR" 1;}
  100% {  font-variation-settings: "wght" 350, "ELSH" 15, "ELGR" 1; color: #00a1de;}
}


.verzoegerung0 {
  animation-delay: 0s;
}

.verzoegerung1 {
  animation-delay: 0.5s;
}

.verzoegerung2 {
  animation-delay: 1s;
}

.verzoegerung3 {
  animation-delay: 1.5s;
}

.verzoegerung4 {
  animation-delay: 2s;
}

.verzoegerung5 {
  animation-delay: 2.5s;
}