:root {
  font-family: "Fraunces"; /* Dieser Name korrespondiert mit den Einstellungen in fonts.css */
  --prespective: 100px;
  --originVertical: 50%;
  --originHorizontal: 50%;
}

@property --ry {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@property --rx {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@property --rz {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

h2 {
  font-style: italic;
}

.optical-size-9 {
  font-variation-settings: "opsz" 9;
}

.optical-size-144 {
  font-variation-settings: "opsz" 144;
}

.no-wonk {
  font-variation-settings: "WONK" 0;
}

.wonk {
  font-variation-settings: "WONK" 1;
}

.no-soft {
  font-variation-settings: "SOFT" 0;
}

.soft {
  font-variation-settings: "SOFT" 100;
}

.active-btn {
  background-color: white !important;
  color: #eb51b5 !important;
  border-color: white !important;
}

.arrow-left {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px 10px 6px 0;
  border-color: transparent #0a0a0a transparent transparent;
  margin-right: 4px;
}
.arrow-right {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px 0 6px 10px;
  border-color: transparent transparent transparent #0a0a0a;
  margin-left: 4px;
}

.animation-a {
  animation-name: a;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes a {
  from {
    font-variation-settings: "wght" 1, "WONK" 0, "SOFT" 0;
    background-color: #fff;
    color: #000;
  }
  to {
    font-variation-settings: "wght" 1000, "WONK" 0, "SOFT" 100;
    background-color: #f4f161;
    color: #eb51b5;
  }
}

.animation-b {
  animation-name: b;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes b {
  from {
    font-variation-settings: "SOFT" 0;
  }
  to {
    font-variation-settings: "SOFT" 100;
  }
}

@keyframes rotate-y {
  0% {
    transform: scale(var(--scale, 1)) rotateY(0deg);
  }
  100% {
    transform: scale(var(--scale, 1)) rotateY(360deg);
  }
}

.animate-rotate-y {
  animation: rotate-y 4s linear infinite;
  transform-style: preserve-3d;
}

/* Qube */

.cube-container {
  width: 400px;
  height: 400px;
  border-radius: 4px;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
  pointer-events: none;
  -webkit-perspective: var(--prespective);
  perspective: var(--prespective);
  -webkit-perspective-origin: var(--originHorizontal) var(--originVertical);
  perspective-origin: var(--originHorizontal) var(--originVertical);
}

.cube {
  --ry: 0deg;
  --rx: 0deg;
  --rz: 0deg;
  position: relative;
  width: 200px;
  height: 200px;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(var(--rz));
  animation: cubeRotate 10s linear infinite;
}

@keyframes cubeRotate {
  from {
    --ry: 0deg;
  }
  to {
    --ry: 360deg;
  }
}

.side {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0.75;
}

.front {
  -webkit-transform: translateZ(100px) rotateY(180deg);
  transform: translateZ(100px) rotateY(180deg);
}

.back {
  -webkit-transform: translateZ(-100px);
  transform: translateZ(-100px);
}

.left {
  -webkit-transform: rotateY(90deg) translateZ(100px) rotateY(180deg);
  transform: rotateY(90deg) translateZ(100px) rotateY(180deg);
}

.right {
  -webkit-transform: rotateY(-90deg) translateZ(100px);
  transform: rotateY(-90deg) translateZ(100px);
}

.top {
  -webkit-transform: rotateX(90deg) translateZ(100px);
  transform: rotateX(90deg) translateZ(100px);
}

.bottom {
  -webkit-transform: rotateX(-90deg) translateZ(100px);
  transform: rotateX(-90deg) translateZ(100px);
}