.confetti-land {
  background: url(../images/2024/kami1-2024_bg_main.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  position: relative;
  padding-top: 10vh;
  height: 100vh;
  background-color: #333;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.confetti-box .container {
  position:relative;
}

.confetti-land p {
  writing-mode: vertical-rl;
  position:absolute;
  left:0.4%;
  top:20%;
  font-size: 2.25em;
  font-family: 'Hiragino Kaku Gothic Pro';
  font-weight: bold;
  background: rgb(153,17,19);
/* background: ; */
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 1px 3px radial-gradient(circle, rgba(153,17,19,1) 0%, rgba(233,60,57,1) 69%);
}

.confetti-land h4 {
  position:absolute;
  right:2%;
  bottom:20%;
  font-size: 1.25em;
  font-family: 'Hiragino Kaku Gothic Pro';
  font-weight: bold;
  text-align: center;
  background: rgb(15,6,96);
background: linear-gradient(140deg, rgba(15,6,96,1) 0%, rgba(21,96,172,1) 100%);
  color:#fff;
  padding:10px;
  transform: rotate(-10deg);
  box-shadow: 1px 3px 6px rgba(50,50,50,0.5);
}

.confetti {
  width: 1rem;
  height: 1rem;
  display: inline-block;
  position: absolute;
  top: 60px;
  left: 0;
  z-index: 150;
}

.confetti .rotate {
  animation: drifting 1s infinite both ease-in-out;
  perspective: 1000;
}

.confetti .askew {
  background: currentColor;
  transform: skewY(10deg);
  width: 0.5rem;
  height: 1rem;
  animation: blowing 1s infinite alternate both ease-in-out;
  perspective: 1000;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

.confetti:nth-of-type(5n) {
  color: #3F51B5;
}

.confetti:nth-of-type(5n+1) {
  color: #c277ab;
}

.confetti:nth-of-type(5n+2) {
  color: #f0d198;
}

.confetti:nth-of-type(5n+3) {
  color: #40a1bf;
}

.confetti:nth-of-type(5n+4) {
  color: #ab6ea7;
}

.confetti:nth-of-type(7n) .askew {
  animation-delay: -.6s;
  animation-duration: 2.25s;
}

.confetti:nth-of-type(7n + 1) .askew {
  animation-delay: -.879s;
  animation-duration: 3.5s;
}

.confetti:nth-of-type(7n + 2) .askew {
  animation-delay: -.11s;
  animation-duration: 1.95s;
}

.confetti:nth-of-type(7n + 3) .askew {
  animation-delay: -.246s;
  animation-duration: .85s;
}

.confetti:nth-of-type(7n + 4) .askew {
  animation-delay: -.43s;
  animation-duration: 2.5s;
}

.confetti:nth-of-type(7n + 5) .askew {
  animation-delay: -.56s;
  animation-duration: 1.75s;
}

.confetti:nth-of-type(7n + 6) .askew {
  animation-delay: -.76s;
  animation-duration: 1.5s;
}

.confetti:nth-of-type(9n) .rotate {
  animation-duration: 2s;
}

.confetti:nth-of-type(9n + 1) .rotate {
  animation-duration: 2.3s;
}

.confetti:nth-of-type(9n + 2) .rotate {
  animation-duration: 1.1s;
}

.confetti:nth-of-type(9n + 3) .rotate {
  animation-duration: .75s;
}

.confetti:nth-of-type(9n + 4) .rotate {
  animation-duration: 4.3s;
}

.confetti:nth-of-type(9n + 5) .rotate {
  animation-duration: 3.05s;
}

.confetti:nth-of-type(9n + 6) .rotate {
  animation-duration: 2.76s;
}

.confetti:nth-of-type(9n + 7) .rotate {
  animation-duration: 7.6s;
}

.confetti:nth-of-type(9n + 8) .rotate {
  animation-duration: 1.78s;
}

@keyframes blowing {
  0% {
    transform: skewY(10deg) translate3d(-250%, 0, 0);
  }

  100% {
    transform: skewY(-12deg) translate3d(250%, 0, 0);
  }
}

@keyframes drifting {
  0% {
    transform: rotateX(0);
  }

  100% {
    transform: rotateX(359deg);
  }
}

@media screen and (max-width:790px) {
  .confetti .askew {
    background: currentColor;
    transform: skewY(10deg);
    width: 3px;
    height: 5px;
    animation: blowing 1s infinite alternate both ease-in-out;
    perspective: 1000;
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  }
}