:root {
  margin: 0;
  font-size: 100%;
  font-family: 'Bodoni Moda'; 
}

body {
  background-color: black;
  position: relative; 

}

h1 {
  font-size: 20rem;
  color: rgb(192, 184, 27);
  font-weight: 400;
  animation: my-super-weight1 2s infinite alternate;
}

@keyframes my-super-weight1 {
  0% { font-size: 6rem; font-variation-settings: "wght" 400, "opsz" 96;
    -webkit-text-stroke: 1px rgb(0, 0, 0);
  }
  100% { font-size: 6rem; font-variation-settings: "wght" 600, "opsz" 46;
    -webkit-text-stroke: 1px rgb(0, 0, 0);
}
}

@keyframes my-super-weight2 {
  0% { font-size: 6rem; font-variation-settings: "wght" 400, "opsz" 96;
    -webkit-text-stroke: 1px rgb(0, 0, 0);
  }
 50% { font-size: 6rem; font-variation-settings: "wght" 600, "opsz" 46;
    -webkit-text-stroke: 1px rgb(0, 0, 0);
  }

    100% { font-size: 6rem; font-variation-settings: "wght" 400, "opsz" 96;
      -webkit-text-stroke: 1px rgb(0, 0, 0);
}
}

.container {
  margin-top: 200px;
  margin-left: -20px;
  display: flex;
  flex-direction: column; 
  align-items: center;
  justify-content: center;
  transform-origin: center;
}

.flex-container1 {
  transform: rotate(-10deg) skewX(15deg) scale(1.1);
  margin-top: 2rem;
  display: flex;
  justify-content: center; 
}

.flex-container2 {
  transform: rotate(-10deg) skewX(15deg) scale(1.1);
  margin-top: 2rem;
  display: flex;
  justify-content: center; 
  animation: my-super-weight2 1s ease-in-out 1s infinite; 
  gap: 0px;
}

.flex-container3 {
    transform: rotate(-10deg) skewX(15deg) scale(1.1);
  margin-top: 2rem;
  display: flex;
  justify-content: center; 
  gap: 0px;
}

.flex-container span {
  font-size: 10rem;
}


.o-color-1 { color: #FFC107; } /* Gelb */
.o-color-2 { color: #FFEB00; } /* Helles Gelb */
.o-color-3 { color: #FFD700; } /* Gold */
.o-color-4 { color: #FFC107; } /* Gelb */
.o-color-5 { color: #FFD700; } /* Gold */
.o-color-6 { color: #FFCA28; } /* Mellow Gelb */
.o-color-7 { color: #FFD700; } /* Gold */


.font-1 {
  font-family: 'Bodoni Moda';
  font-weight: normal;
  transform: scale(0.6,1.5);
  margin-right: 12px;
}

.font-2 {
  font-family: 'Bodoni Moda';
  font-weight: bold;
  transform: scale(0.6,1.5);
  margin-right: 18px;
}

.font-3 {
  font-family: 'Bodoni Moda';
  font-weight: 100;
  transform: scale(0.6,1.5);
  margin-right: -12px;
}

.font-4 {
  font-family: 'Bodoni Moda';
  font-weight: bolder;
  transform: scale(0.6,1.5);
  margin-right: -20px;
}

.font-5 {
  font-family: 'Bodoni Moda';
  font-weight: normal;
  transform: scale(0.6,1.5);
}

.font-6 {
  font-family: 'Bodoni Moda';
  font-weight: 100;
  transform: scale(0.6,1.5);
}

.font-7 {
  font-family: 'Bodoni Moda';
  font-weight: bold;
  transform: scale(0.6,1.5);
}