@font-face {
  font-family: 'KarioDuplexVar';
  src: url('../39C3-Design-Package/39C3-Fonts/Kario 39C3 Variable/Web/Kario39C3VarWEB-Roman.woff2') format('woff2'),
       url('../39C3-Design-Package/39C3-Fonts/Kario 39C3 Variable/Web/Kario39C3VarWEB-Roman.woff') format('woff'),
       url('../39C3-Design-Package/39C3-Fonts/Kario 39C3 Variable/Desktop/Kario39C3Var-Roman.ttf') format('truetype');
  font-weight: 1 1000;
  font-style: normal;
  font-display: swap;
}

@keyframes font_weight_wave {
  from {
    font-weight: 10;
  }
  to {
    font-weight: 100;
  }
}

.cdc-embed {
  display: inline-flex;
  flex-direction: column;
  gap: 2.5rem;
}

.cdc-type {
  font-family: 'KarioDuplexVar', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 52pt;
  font-weight: 10;
  font-kerning: none;
  margin: 0;
  line-height: 1.05;
}

.cdc-type span {
  display: inline-block;
}

.anim1 span,
.anim1_5 span,
.anim2 span,
.anim3 span,
.anim4 span,
.anim5 span,
.anim6 span,
.anim7 span,
.anim8 span,
.anim9 span,
.anim10 span,
.anim11 span {
  animation: font_weight_wave 3s ease-in-out 0s infinite alternate both;
}

.anim2,
.anim3,
.anim10 {
  display: inline-block;
  text-align: left;
}

.anim10 :not(:first-child) {
  font-size: 48pt;
  display: inline-block;
  margin-top: 0.8em;
  transform: scale(1, 2);
}

.anim10 span:first-child {
  font-size: 36pt;
  font-height: 150%;
  margin-bottom: 0.1em;
  display: inline-block;
  transform: scale(1, 2.5);
}

.anim1 span:nth-child(1) { animation-delay: -0.1s; }
.anim1 span:nth-child(2) { animation-delay: -0.2s; }
.anim1 span:nth-child(3) { animation-delay: -0.3s; }
.anim1 span:nth-child(4) { animation-delay: -0.4s; }
.anim1 span:nth-child(5) { animation-delay: -0.5s; }
.anim1 span:nth-child(6) { animation-delay: -0.6s; }
.anim1 span:nth-child(7) { animation-delay: -0.7s; }
.anim1 span:nth-child(8) { animation-delay: -0.8s; }
.anim1 span:nth-child(9) { animation-delay: -0.9s; }
.anim1 span:nth-child(10) { animation-delay: -1.0s; }
.anim1 span:nth-child(11) { animation-delay: -1.1s; }
.anim1 span:nth-child(12) { animation-delay: -1.2s; }
.anim1 span:nth-child(13) { animation-delay: -1.3s; }
.anim1 span:nth-child(14) { animation-delay: -1.4s; }
.anim1 span:nth-child(15) { animation-delay: -1.5s; }
.anim1 span:nth-child(16) { animation-delay: -1.6s; }
.anim1 span:nth-child(17) { animation-delay: -1.7s; }
.anim1 span:nth-child(18) { animation-delay: -1.8s; }
.anim1 span:nth-child(19) { animation-delay: -1.9s; }
.anim1 span:nth-child(20) { animation-delay: -2.0s; }
.anim1 span:nth-child(21) { animation-delay: -2.1s; }
.anim1 span:nth-child(22) { animation-delay: -2.2s; }
.anim1 span:nth-child(23) { animation-delay: -2.3s; }
.anim1 span:nth-child(24) { animation-delay: -2.4s; }
.anim1 span:nth-child(25) { animation-delay: -2.5s; }
.anim1 span:nth-child(26) { animation-delay: -2.6s; }
.anim1 span:nth-child(27) { animation-delay: -2.7s; }
.anim1 span:nth-child(28) { animation-delay: -2.8s; }
.anim1 span:nth-child(29) { animation-delay: -2.9s; }
.anim1 span:nth-child(30) { animation-delay: -3.0s; }
.anim1 span:nth-child(31) { animation-delay: -3.1s; }
.anim1 span:nth-child(32) { animation-delay: -3.2s; }
.anim1 span:nth-child(33) { animation-delay: -3.3s; }
.anim1 span:nth-child(34) { animation-delay: -3.4s; }
.anim1 span:nth-child(35) { animation-delay: -3.5s; }
.anim1 span:nth-child(36) { animation-delay: -3.6s; }
.anim1 span:nth-child(37) { animation-delay: -3.7s; }
.anim1 span:nth-child(38) { animation-delay: -3.8s; }

.anim10 span:nth-child(2) { animation-delay: -0.2s; }
.anim10 span:nth-child(3) { animation-delay: -0.3s; }
.anim10 span:nth-child(4) { animation-delay: -0.4s; }
.anim10 span:nth-child(5) { animation-delay: -0.5s; }
.anim10 span:nth-child(6) { animation-delay: -0.6s; }
.anim10 span:nth-child(7) { animation-delay: -0.7s; }
.anim10 span:nth-child(8) { animation-delay: -0.8s; }
.anim10 span:nth-child(9) { animation-delay: -0.9s; }
.anim10 span:nth-child(10) { animation-delay: -1.0s; }
.anim10 span:nth-child(11) { animation-delay: -1.1s; }
.anim10 span:nth-child(12) { animation-delay: -1.2s; }
.anim10 span:nth-child(13) { animation-delay: -1.3s; }
.anim10 span:nth-child(14) { animation-delay: -1.4s; }

.anim6 span:nth-child(1) { animation-delay: -0.5s; }
.anim6 span:nth-child(2) { animation-delay: -1.0s; }
.anim6 span:nth-child(3) { animation-delay: -1.5s; }
.anim6 span:nth-child(4) { animation-delay: -2.0s; }
.anim6 span:nth-child(5) { animation-delay: -2.5s; }
.anim6 span:nth-child(6) { animation-delay: -3.0s; }
.anim6 span:nth-child(7) { animation-delay: -3.5s; }
.anim6 span:nth-child(8) { animation-delay: -4.0s; }
.anim6 span:nth-child(9) { animation-delay: -4.5s; }
.anim6 span:nth-child(10) { animation-delay: -5.0s; }
.anim6 span:nth-child(11) { animation-delay: -5.5s; }
.anim6 span:nth-child(12) { animation-delay: -6.0s; }
.anim6 span:nth-child(13) { animation-delay: -6.5s; }
.anim6 span:nth-child(14) { animation-delay: -7.0s; }
.anim6 span:nth-child(15) { animation-delay: -7.5s; }
.anim6 span:nth-child(16) { animation-delay: -8.0s; }

.anim7 span:nth-child(odd) { animation-delay: -3.0s; }
.anim7 span:nth-child(even) { animation-delay: 0.0s; }

.anim8 span:nth-child(2n)   { animation-delay: -3.0s; }
.anim8 span:nth-child(2n+1) { animation-delay: -1.5s; }
.anim8 span:nth-child(2n+2) { animation-delay:  0.0s; }

.black {
  background-color: #000;
  color: #fff;
  width: 100%;
  min-height: 4em;
  padding: 1.5rem;
  border-radius: 20px;
}