:root {
  --spiegel-orange: #e64416;
  --spiegel-sans: 'SpiegelSans4';
  --spiegel-slab: 'SpiegelSlab4Cd';
  --spiegel-serif: 'SpiegelSerifUI';
  --darkmode-background: #1F1E1C;
  --color: #1F1E1C;
}

* {
  box-sizing: border-box;
}

html {
  font-size: 16px;
}

body {
  margin: auto;
  font-family:'SpiegelSans4',Verdana,sans-serif;
  max-width: 996px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.wrapper {
  max-width: 996px;
}

.container {
  max-width: 840px;
  color: var(--color);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stack {
  display: grid;
  grid-template-columns: 1fr;
  font-family: var(--spiegel-slab);
  font-weight: 700;
}

.stack span {
  font-weight: 700;
  grid-row-start: 1;
  grid-column-start: 1;
  font-size: 40px;
  --stack-height: calc(100% / var(--stacks) - 1px);
  --inverse-index: calc(calc(var(--stacks) - 1) - var(--index));
  --clip-top: calc(var(--stack-height) * var(--index));
  --clip-bottom: calc(var(--stack-height) * var(--inverse-index));
  clip-path: inset(var(--clip-top) 0 var(--clip-bottom) 0);
  animation: stack 340ms cubic-bezier(.46,.29,0,1.24) 1 backwards calc(var(--index) * 120ms), glitch 3s ease infinite 0.5s alternate-reverse;
}

.stack span:nth-child(odd) { --glitch-translate: 8px; }
.stack span:nth-child(even) { --glitch-translate: -8px; }

@keyframes stack {
  0% {
    opacity: 0;
    transform: translateX(-50%);
    text-shadow: -2px 3px 0 #1b1030, 2px -3px 0 #1b1030;
  };
  60% {
    opacity: 0.5;
    transform: translateX(50%);
  }
  80% {
    transform: none;
    opacity: 1;
    text-shadow: 2px -3px 0 #1b1030, -2px 3px 0 #1b1030;
  }
  100% {
    text-shadow: none;
  }
}

@keyframes glitch {
  0% {
    text-shadow: -2px 3px 0 #c4adef, 2px -3px 0 #c4adef;
    transform: translate(var(--glitch-translate));
  }
  2% {
    text-shadow: 2px -3px 0 #c4adef, -2px 3px 0 #c4adef;
  }
  4%, 100% {  text-shadow: none; transform: none; }
}



/* DARK MODE */
@media(prefers-color-scheme: dark){
  body {
    background: var(--darkmode-background, #1F1E1C);
  }
  .container {
    color: #F1EFED;
  }


}

/* RESPONSIVENESS */
@media screen and (max-width: 488px) {
  .body {
    max-width: 488px;
  }
  h3 {
    font-size: 20px;
  }

  .stack span {
    font-size: 36px;
}

@media screen and (max-width: 310px) {
  .body {
    max-width: 310px;
  }
}