.page__content {
  display: none;
  color: white;
  font-size: 40px;
}
.page__content--active {
  display: block;
}

.overlay {
  z-index: 1000;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  overflow: hidden;
  pointer-events: none;
  perspective: 1000px;
}
.overlay__scene {
  position: absolute;
  width: calc(100vw + 72.794vh);
  height: 100%;
  top: 0;
  left: -36.397vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 15vmin;
  perspective: 500px;
  background: linear-gradient(-20deg, #ae1313, #ebdd47);
  transform: skew(20deg) translateX(172.794%);
  overflow: hidden;
}
.overlay__scene--in {
  -webkit-animation: overlayIn 400ms ease-in-out 1 both;
          animation: overlayIn 400ms ease-in-out 1 both;
}
.overlay__scene--in .overlay__label {
  -webkit-animation: labelIn 2s ease-in-out 1 forwards;
          animation: labelIn 2s ease-in-out 1 forwards;
}
.overlay__scene--out {
  -webkit-animation: overlayOut 400ms ease-in-out 1 both;
          animation: overlayOut 400ms ease-in-out 1 both;
}
.overlay__scene--out .overlay__label {
  -webkit-animation: none;
          animation: none;
}
@-webkit-keyframes labelIn {
  from {
    transform: skewY(-10deg) translateY(-50%) rotatey(10deg);
  }
  to {
    transform: skewY(-10deg) translateY(-50%) rotatey(-10deg);
  }
}
@keyframes labelIn {
  from {
    transform: skewY(-10deg) translateY(-50%) rotatey(10deg);
  }
  to {
    transform: skewY(-10deg) translateY(-50%) rotatey(-10deg);
  }
}
@-webkit-keyframes overlayIn {
  from {
    transform: skew(20deg) translate3d(172.794%, 0, 0);
  }
  to {
    transform: skew(20deg) translate3d(0, 0, 0);
  }
}
@keyframes overlayIn {
  from {
    transform: skew(20deg) translate3d(172.794%, 0, 0);
  }
  to {
    transform: skew(20deg) translate3d(0, 0, 0);
  }
}
@-webkit-keyframes overlayOut {
  from {
    transform: skew(20deg) translate3d(0, 0, 0);
  }
  to {
    transform: skew(20deg) translate3d(-100%, 0, 0);
  }
}
@keyframes overlayOut {
  from {
    transform: skew(20deg) translate3d(0, 0, 0);
  }
  to {
    transform: skew(20deg) translate3d(-100%, 0, 0);
  }
}
.overlay__label {
  position: absolute;
  width: 200%;
  height: 25vmin;
  line-height: 1;
  top: 50vh;
  left: -50%;
  background: #f28888;
  color: #810e0e;
  mix-blend-mode: multiply;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: skewY(-10deg) translateY(-50%);
}
.overlay__label-content {
  transform: skew(-20deg);
}
.overlay__ribbon {
  -webkit-animation: ribbon 750ms infinite linear both;
          animation: ribbon 750ms infinite linear both;
  width: 200px;
  height: 10px;
  background: #ff5656;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -2;
}
.overlay__ribbon:nth-child(1) {
  background-color: #cb6e28;
  top: 41vh;
  -webkit-animation-delay: 280ms;
          animation-delay: 280ms;
  width: 473px;
}
.overlay__ribbon:nth-child(2) {
  background-color: #c65b24;
  top: 34vh;
  -webkit-animation-delay: 1755ms;
          animation-delay: 1755ms;
  width: 300px;
}
.overlay__ribbon:nth-child(3) {
  background-color: #d58e31;
  top: 55vh;
  -webkit-animation-delay: 923ms;
          animation-delay: 923ms;
  width: 110px;
}
.overlay__ribbon:nth-child(4) {
  background-color: #c96526;
  top: 38vh;
  -webkit-animation-delay: 710ms;
          animation-delay: 710ms;
  width: 586px;
}
.overlay__ribbon:nth-child(5) {
  background-color: #deae39;
  top: 18vh;
  -webkit-animation-delay: 1155ms;
          animation-delay: 1155ms;
  width: 128px;
}
.overlay__ribbon:nth-child(6) {
  background-color: #e8ce41;
  top: 21vh;
  -webkit-animation-delay: 550ms;
          animation-delay: 550ms;
  width: 157px;
}
.overlay__ribbon:nth-child(7) {
  background-color: #dba336;
  top: 99vh;
  -webkit-animation-delay: 157ms;
          animation-delay: 157ms;
  width: 410px;
}
.overlay__ribbon:nth-child(8) {
  background-color: #c45322;
  top: 47vh;
  -webkit-animation-delay: 353ms;
          animation-delay: 353ms;
  width: 356px;
}
.overlay__ribbon:nth-child(9) {
  background-color: #e5c43e;
  top: 46vh;
  -webkit-animation-delay: 795ms;
          animation-delay: 795ms;
  width: 151px;
}
.overlay__ribbon:nth-child(10) {
  background-color: #ba341a;
  top: 18vh;
  -webkit-animation-delay: 386ms;
          animation-delay: 386ms;
  width: 567px;
}
.overlay__ribbon:nth-child(11) {
  background-color: #b01111;
  top: 79vh;
  -webkit-animation-delay: 1063ms;
          animation-delay: 1063ms;
  width: 116px;
}
.overlay__ribbon:nth-child(12) {
  background-color: #d58a30;
  top: 86vh;
  -webkit-animation-delay: 993ms;
          animation-delay: 993ms;
  width: 373px;
}
.overlay__ribbon:nth-child(13) {
  background-color: #cd742a;
  top: 25vh;
  -webkit-animation-delay: 1273ms;
          animation-delay: 1273ms;
  width: 555px;
}
.overlay__ribbon:nth-child(14) {
  background-color: #dba336;
  top: 79vh;
  -webkit-animation-delay: 1452ms;
          animation-delay: 1452ms;
  width: 354px;
}
.overlay__ribbon:nth-child(15) {
  background-color: #be401d;
  top: 42vh;
  -webkit-animation-delay: 1149ms;
          animation-delay: 1149ms;
  width: 312px;
}
.overlay__ribbon:nth-child(16) {
  background-color: #d58a30;
  top: 46vh;
  -webkit-animation-delay: 1443ms;
          animation-delay: 1443ms;
  width: 459px;
}
@-webkit-keyframes ribbon {
  from {
    transform: translatez(-100px) rotatey(-5deg) skew(-20deg) translateX(-100%);
  }
  to {
    transform: translatez(-100px) rotatey(-5deg) skew(-20deg) translateX(172.794vw);
  }
}
@keyframes ribbon {
  from {
    transform: translatez(-100px) rotatey(-5deg) skew(-20deg) translateX(-100%);
  }
  to {
    transform: translatez(-100px) rotatey(-5deg) skew(-20deg) translateX(172.794vw);
  }
}

.hint {
  text-align: center;
  margin-bottom: 20px;
  font-size: 0.4em;
  color: #710404;
  opacity: 0.6;
}
.hint p {
  margin: 0;
  line-height: 1.1;
}

a {
  text-decoration: none;
  border: 0.05em solid #ae1313;
  color: #ae1313;
  padding: 0.2em 1em;
  border-radius: 0.4em;
  transition: color 100ms, background 150ms;
}
a:hover {
  background: #ae1313;
  color: #d38c32;
}

input[type=checkbox] {
  margin: 20px;
}

label {
  cursor: pointer;
}

body,
html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

body {
  background: #d38c32;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  font-family: system-ui, sans-serif;
}