body {
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
}

img {
  display: block;
}

* {
  box-sizing: border-box;
}

main {
  overflow: hidden;
  width: 100vw;
  height: 100vh;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.container {
  position: fixed;
  left: 50%;
  transform: translate(-50%, -50%);
  top: 50%;
  width: max(100vw, 100vh);
  aspect-ratio: 1 / 1;
  container-type: inline-size;
  display: flex;
  justify-content: center;
  align-items: center;
  object-position: 50% 50%;
}

.background {
  position: absolute;
  background: radial-gradient(circle at 80cqw 80cqw, #fcc1a140 0%, #fcc1a1 30%);
  width: 200cqw;
  height: 200cqw;
  animation-name: rotate;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.logo {
  width: 30cqw;
  opacity: 0.8;
}

.hexagon {
  container-type: inline-size;
  position: absolute;
  aspect-ratio: cos(30deg);
  clip-path: polygon(-50% 50%, 50% 100%, 150% 50%, 50% 0);
  background: linear-gradient(180deg, #2a7b8d, #ffe266);
  opacity: 0.8;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  text-align: center;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  opacity: 0;

  & p {
    font-size: 13cqw;
  }
}

@keyframes animation-01 {
  0% {
    opacity: 0;
    top: 0cqw;
    left: 84cqw;
  }
  30% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    top: 22cqw;
    left: 78cqw;
  }
}

@keyframes animation-02 {
  0% {
    opacity: 0;
    top: 6cqw;
    left: 2cqw;
  }
  30% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    top: 10cqw;
    left: 34cqw;
  }
}

@keyframes animation-03 {
  0% {
    opacity: 0;
    top: 71cqw;
    left: 21cqw;
  }
  30% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    top: 57cqw;
    left: 24cqw;
  }
}

@keyframes animation-04 {
  0% {
    opacity: 0;
    top: 34cqw;
    left: 47cqw;
  }
  30% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    top: 57cqw;
    left: 39cqw;
  }
}

@keyframes animation-05 {
  0% {
    opacity: 0;
    top: 78cqw;
    left: 66cqw;
  }
  30% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    top: 29cqw;
    left: 46cqw;
  }
}

@keyframes animation-06 {
  0% {
    opacity: 0;
    top: 55cqw;
    left: 59cqw;
  }
  30% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    top: 43cqw;
    left: 67cqw;
  }
}

@keyframes animation-07 {
  0% {
    opacity: 0;
    top: 29cqw;
    left: 21cqw;
  }
  30% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    top: 43cqw;
    left: 11cqw;
  }
}

.animate-01 {
  animation-delay: 0s;
  animation-duration: 10s;
  animation-name: animation-01;
}

.animate-02 {
  animation-delay: 0.5s;
  animation-duration: 13s;
  animation-name: animation-02;
}

.animate-03 {
  animation-delay: 1s;
  animation-duration: 9s;
  animation-name: animation-03;
}

.animate-04 {
  animation-delay: 1.5s;
  animation-duration: 14s;
  animation-name: animation-04;
}

.animate-05 {
  animation-delay: 2s;
  animation-duration: 18s;
  animation-name: animation-05;
}

.animate-06 {
  animation-delay: 2.5s;
  animation-duration: 11s;
  animation-name: animation-06;
}

.animate-07 {
  animation-delay: 3s;
  animation-duration: 21s;
  animation-name: animation-07;
}