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

body {
  background-color: #e27ea6;
  margin: 0;
  padding: 0;
}

#flexbox {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  height: 100%;
  width: 100%;
}

#backofen {
  width: 60vw;
  height: 60vw;
  border-radius: 60vw;
  border: 5vw double #f9461c;
  filter: blur(0.5vw);
  position: absolute;
  animation-name: backofenanimation;
  animation-duration: 12s;
  animation-iteration-count: infinite;
}

@keyframes backofenanimation {
  0% {opacity: 0;}
  25% {opacity: 0;}
  35% {opacity: 1;}
  60% {opacity: 1;}
  70% {opacity: 0;}
  100% {opacity: 0;}
}

#kreiscontainer {
  width: 40vw;
  height: 40vw;
  position: relative;
}



/* Kreis rot 40vw Durchmesser */

.kreis-rot {
  width: 20vw;
  height: 20vw;
  position: absolute;
  border: 0.01vw solid;
}

.rot-oben-links {
  border-top-left-radius: 20vw;
  top: 0;
  left: 0;
  animation-name: rotobenlinksanimation;
  animation-duration: 12s;
  animation-iteration-count: infinite;
}

@keyframes rotobenlinksanimation {
  0% {background-color: #c60c30; transform: translate(0, 0); border-color: #c60c30;}
  10% {background-color: #c60c30; transform: translate(0, 0); border-color: #c60c30;}
  20% {background-color: #f9e300; transform: translate(0, 0); border-color: #f9e300;}
  70% {background-color: #62361b; transform: translate(0, 0); border-color: #62361b;}
  80% {transform: translate(-2vw, -2vw);}
  95% {background-color: #62361b; transform: translate(0, 0); border-color: #62361b;}
  100% {background-color: #c60c30; transform: translate(0, 0); border-color: #c60c30;}
}

.rot-oben-rechts {
  border-top-right-radius: 20vw;
  top: 0;
  right: 0;
  animation-name: rotobenrechtsanimation;
  animation-duration: 12s;
  animation-iteration-count: infinite;
}

@keyframes rotobenrechtsanimation {
  0% {background-color: #c60c30; transform: translate(0, 0); border-color: #c60c30;}
  10% {background-color: #c60c30; transform: translate(0, 0); border-color: #c60c30;}
  20% {background-color: #f9e300; transform: translate(0, 0); border-color: #f9e300;}
  70% {background-color: #62361b; transform: translate(0, 0); border-color: #62361b;}
  80% {transform: translate(10vw, -10vw);}
  95% {background-color: #62361b; transform: translate(0, 0); border-color: #62361b;}
  100% {background-color: #c60c30; transform: translate(0, 0); border-color: #c60c30;}
}

.rot-unten-links {
  border-bottom-left-radius: 20vw;
  bottom: 0;
  left: 0;
  animation-name: rotuntenlinksanimation;
  animation-duration: 12s;
  animation-iteration-count: infinite;
}

@keyframes rotuntenlinksanimation {
  0% {background-color: #c60c30; transform: translate(0, 0); border-color: #c60c30;}
  10% {background-color: #c60c30; transform: translate(0, 0); border-color: #c60c30;}
  20% {background-color: #f9e300; transform: translate(0, 0); border-color: #f9e300;}
  70% {background-color: #62361b; transform: translate(0, 0); border-color: #62361b;}
  80% {transform: translate(-2vw, 2vw);}
  95% {background-color: #62361b; transform: translate(0, 0); border-color: #62361b;}
  100% {background-color: #c60c30; transform: translate(0, 0); border-color: #c60c30;}
}

.rot-unten-rechts {
  border-bottom-right-radius: 20vw;
  bottom: 0;
  right: 0;
  animation-name: rotuntenrechtsanimation;
  animation-duration: 12s;
  animation-iteration-count: infinite;
}

@keyframes rotuntenrechtsanimation {
  0% {background-color: #c60c30; transform: translate(0, 0); border-color: #c60c30;}
  10% {background-color: #c60c30; transform: translate(0, 0); border-color: #c60c30;}
  20% {background-color: #f9e300; transform: translate(0, 0); border-color: #f9e300;}
  70% {background-color: #62361b; transform: translate(0, 0); border-color: #62361b;}
  80% {transform: translate(2vw, 2vw);}
  95% {background-color: #62361b; transform: translate(0, 0); border-color: #62361b;}
  100% {background-color: #c60c30; transform: translate(0, 0); border-color: #c60c30;}
}




/* Kreis weiss 36vw Durchmesser */

.kreis-weiss {
  width: 18vw;
  height: 18vw;
  position: absolute;
  border: 0.01vw solid;
}

.weiss-oben-links {
  border-top-left-radius: 18vw;
  top: 2vw;
  left: 2vw;
  animation-name: weissobenlinksanimation;
  animation-duration: 12s;
  animation-iteration-count: infinite;
}

@keyframes weissobenlinksanimation {
  0% {background-color: white; transform: translate(0, 0); border-color: white;}
  10% {background-color: white; transform: translate(0, 0); border-color: white;}
  20% {background-color: white; transform: translate(0, 0); border-color: white;}
  70% {background-color: #f9e300; transform: translate(0, 0); border-color: #f9e300;}
  80% {transform: translate(-2vw, -2vw); border-color: #f9e300;}
  95% {background-color: #f9e300; transform: translate(0, 0); border-color: #f9e300;}
  100% {background-color: white; transform: translate(0, 0); border-color: white;}
}

.weiss-oben-rechts {
  border-top-right-radius: 18vw;
  top: 2vw;
  right: 2vw;
  animation-name: weissobenrechtsanimation;
  animation-duration: 12s;
  animation-iteration-count: infinite;
}

@keyframes weissobenrechtsanimation {
  0% {background-color: white; transform: translate(0, 0); border-color: white;}
  10% {background-color: white; transform: translate(0, 0); border-color: white;}
  20% {background-color: white; transform: translate(0, 0); border-color: white;}
  70% {background-color: #f9e300; transform: translate(0, 0); border-color: #f9e300;}
  80% {transform: translate(10vw, -10vw); border-color: #f9e300;}
  95% {background-color: #f9e300; transform: translate(0, 0); border-color: #f9e300;}
  100% {background-color: white; transform: translate(0, 0); border-color: white;}
}

.weiss-unten-links {
  border-bottom-left-radius: 18vw;
  bottom: 2vw;
  left: 2vw;
  animation-name: weissuntenlinksanimation;
  animation-duration: 12s;
  animation-iteration-count: infinite;
}

@keyframes weissuntenlinksanimation {
  0% {background-color: white; transform: translate(0, 0); border-color: white;}
  10% {background-color: white; transform: translate(0, 0); border-color: white;}
  20% {background-color: white; transform: translate(0, 0); border-color: white;}
  70% {background-color: #f9e300; transform: translate(0, 0); border-color: #f9e300;}
  80% {transform: translate(-2vw, 2vw); border-color: #f9e300;}
  95% {background-color: #f9e300; transform: translate(0, 0); border-color: #f9e300;}
  100% {background-color: white; transform: translate(0, 0); border-color: white;}
}

.weiss-unten-rechts {
  border-bottom-right-radius: 18vw;
  bottom: 2vw;
  right: 2vw;
  animation-name: weissuntenrechtsanimation;
  animation-duration: 12s;
  animation-iteration-count: infinite;
}

@keyframes weissuntenrechtsanimation {
  0% {background-color: white; transform: translate(0, 0); border-color: white;}
  10% {background-color: white; transform: translate(0, 0); border-color: white;}
  20% {background-color: white; transform: translate(0, 0); border-color: white;}
  70% {background-color: #f9e300; transform: translate(0, 0); border-color: #f9e300;}
  80% {transform: translate(2vw, 2vw); border-color: #f9e300;}
  95% {background-color: #f9e300; transform: translate(0, 0); border-color: #f9e300;}
  100% {background-color: white; transform: translate(0, 0); border-color: white;}
}




/* Kreis blau 34.5vw Durchmesser */

.kreis-blau {
  width: 17.25vw;
  height: 17.25vw;
  position: absolute;
  border: 0.01vw solid;
}

.blau-oben-links {
  border-top-left-radius: 17.25vw;
  top: 2.75vw;
  left: 2.75vw;
  animation-name: blauobenlinksanimation;
  animation-duration: 12s;
  animation-iteration-count: infinite;
}

@keyframes blauobenlinksanimation {
  0% {background-color: #00a1de; transform: translate(0, 0); border-color: #00a1de;}
  10% {background-color: #00a1de; transform: translate(0, 0); border-color: #00a1de;}
  20% {background-color: #f9461c; transform: translate(0, 0); border-color: #f9461c;}
  70% {background-color: #c60c30; transform: translate(0, 0); border-color: #c60c30;}
  80% {transform: translate(-2vw, -2vw);}
  95% {background-color: #c60c30; transform: translate(0, 0); border-color: #c60c30;}
  100% {background-color: #00a1de; transform: translate(0, 0); border-color: #00a1de;}
}

.blau-oben-rechts {
  border-top-right-radius: 17.25vw;
  top: 2.75vw;
  right: 2.75vw;
  animation-name: blauobenrechtsanimation;
  animation-duration: 12s;
  animation-iteration-count: infinite;
}

@keyframes blauobenrechtsanimation {
  0% {background-color: #00a1de; transform: translate(0, 0); border-color: #00a1de;}
  10% {background-color: #00a1de; transform: translate(0, 0); border-color: #00a1de;}
  20% {background-color: #f9461c; transform: translate(0, 0); border-color: #f9461c;}
  70% {background-color: #c60c30; transform: translate(0, 0); border-color: #c60c30;}
  80% {transform: translate(10vw, -10vw);}
  95% {background-color: #c60c30; transform: translate(0, 0); border-color: #c60c30;}
  100% {background-color: #00a1de; transform: translate(0, 0); border-color: #00a1de;}
}

.blau-unten-links {
  border-bottom-left-radius: 17.25vw;
  bottom: 2.75vw;
  left: 2.75vw;
  animation-name: blauuntenlinksanimation;
  animation-duration: 12s;
  animation-iteration-count: infinite;
}

@keyframes blauuntenlinksanimation {
  0% {background-color: #00a1de; transform: translate(0, 0); border-color: #00a1de;}
  10% {background-color: #00a1de; transform: translate(0, 0); border-color: #00a1de;}
  20% {background-color: #f9461c; transform: translate(0, 0); border-color: #f9461c;}
  70% {background-color: #c60c30; transform: translate(0, 0); border-color: #c60c30;}
  80% {transform: translate(-2vw, 2vw);}
  95% {background-color: #c60c30; transform: translate(0, 0); border-color: #c60c30;}
  100% {background-color: #00a1de; transform: translate(0, 0); border-color: #00a1de;}
}

.blau-unten-rechts {
  border-bottom-right-radius: 17.25vw;
  bottom: 2.75vw;
  right: 2.75vw;
  animation-name: blauuntenrechtsanimation;
  animation-duration: 12s;
  animation-iteration-count: infinite;
}

@keyframes blauuntenrechtsanimation {
  0% {background-color: #00a1de; transform: translate(0, 0); border-color: #00a1de;}
  10% {background-color: #00a1de; transform: translate(0, 0); border-color: #00a1de;}
  20% {background-color: #f9461c; transform: translate(0, 0); border-color: #f9461c;}
  70% {background-color: #c60c30; transform: translate(0, 0); border-color: #c60c30;}
  80% {transform: translate(2vw, 2vw)}
  95% {background-color: #c60c30; transform: translate(0, 0); border-color: #c60c30;}
  100% {background-color: #00a1de; transform: translate(0, 0); border-color: #00a1de;}
}


/* Schrift */

p {
  color: white;
  font-weight: 750;
  font-variation-settings: "slnt" -10;
  font-size: 18vw;
  text-align: center;
  position: relative;
  top: -10vw;
  animation-name: schriftanimation;
  animation-duration: 12s;
  animation-iteration-count: infinite;
}

@keyframes schriftanimation {
  0% {opacity: 1;}
  20% {opacity: 1;}
  60% {opacity: 0;}
  95% {opacity: 0;}
  100% {opacity: 1;}
}