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

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

#grund-flexbox {
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
}


#gridcontainer {
  display: grid;
  grid-template-columns: repeat(4, 4vw);
  grid-template-rows: repeat(3, 6vh);
  justify-items: center; 
  align-items: center; 
  position: absolute;
}

.textcontainer {
  display: flex;
  justify-content: center; 
  align-items: center;
  position: relative;
  height: 5vw;
  width: 5vw;
  border-radius: 5vw;
  border: none;
  background-color: transparent;
  transition-duration: 5s;
  transition-timing-function: ease;
  animation-fill-mode: forwards;
}


p {
  font-size: 1vw;
  line-height: 0vw;
  font-variation-settings: "wght" 200, "ELSH" 8, "ELGR" 1;
  margin: 0;
  text-align: center;
  position: absolute;
  transition-duration: 5s;
  transition-timing-function: ease;
  animation-fill-mode: forwards;
}

/* GELB */

.containergelb:hover {
animation-name: textcontaineranimation-gelb;
animation-duration: 1s;
animation-timing-function: ease;
animation-direction: alternate;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}

@keyframes textcontaineranimation-gelb {
  0% {
    filter: blur(0vw);
    border: none;
  }

  50% {
    filter: blur(0.01vw);
    border: 0.1vw dotted #f9e300;
}

80% {
  filter: blur(0.1vw);
  transform: scale(20);
  border: 0.01vw dotted #f9e300;
}

  100% {
    filter: blur(0.1vw);
    transform: scale(20);
    border: 0.01vw dotted #f9e300;
}
}

.textgelb {
  color: #f9e300;
}

.textgelb:hover {
  animation-name: textanimation-gelb;
  animation-duration: 1s;
  animation-timing-function: ease;
  animation-direction: alternate;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  }

@keyframes textanimation-gelb {
  0% {
    filter: blur(0vw);
    color: #f9e300;
  }

  50% {
    filter: blur(0.01vw);
    color: #f9e300;
}

  100% {
    filter: blur(0.1vw);
    transform: scale(5);
    color: #f9e300;
}
}

/* ORANGE */

.containerorange:hover {
  animation-name: textcontaineranimation-orange;
  animation-duration: 1s;
  animation-timing-function: ease;
  animation-direction: alternate;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  }
  
  @keyframes textcontaineranimation-orange {
    0% {
      filter: blur(0vw);
      border: none;
    }
  
    50% {
      filter: blur(0.01vw);
      border: 0.1vw dotted #f9461c;
  }

  80% {
    filter: blur(0.1vw);
    transform: scale(10);
    border: 0.01vw dotted #f9461c;
}
  
    100% {
      filter: blur(0.1vw);
      transform: scale(10);
      border: 0.01vw dotted #f9461c;
  }
  }
  
  .textorange {
    color: #f9461c;
  }
  
  .textorange:hover {
    animation-name: textanimation-orange;
    animation-duration: 1s;
    animation-timing-function: ease;
    animation-direction: alternate;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    }
  
  @keyframes textanimation-orange {
    0% {
      filter: blur(0vw);
      color: #f9461c;
    }
  
    50% {
      filter: blur(0.01vw);
      color: #f9461c;
  }
  
    100% {
      filter: blur(0.1vw);
      transform: scale(5);
      color: #f9461c;
  }
  }


  /* BLUE */

.containerblue:hover {
  animation-name: textcontaineranimation-blue;
  animation-duration: 1s;
  animation-timing-function: ease;
  animation-direction: alternate;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  }
  
  @keyframes textcontaineranimation-blue {
    0% {
      filter: blur(0vw);
      border: none;
    }
  
    50% {
      filter: blur(0.01vw);
      border: 0.1vw dotted #00a1de;
  }

  80% {
    filter: blur(0.1vw);
    transform: scale(10);
    border: 0.01vw dotted #00a1de;
}
  
    100% {
      filter: blur(0.1vw);
      transform: scale(10);
      border: 0.01vw dotted #00a1de;
  }
  }
  
  .textblue {
    color: #00a1de;
  }
  
  .textblue:hover {
    animation-name: textanimation-blue;
    animation-duration: 1s;
    animation-timing-function: ease;
    animation-direction: alternate;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    }
  
  @keyframes textanimation-blue {
    0% {
      filter: blur(0vw);
      color: #00a1de;
    }
  
    50% {
      filter: blur(0.01vw);
      color: #00a1de;
  }
  
    100% {
      filter: blur(0.1vw);
      transform: scale(5);
      color: #00a1de;
  }
  }