@keyframes fade {
  0% {
    opacity: 0.3;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.3;
  }
}
body {
  background: #000;
  padding: 0;
  margin: 0;
}

.container {
  width: 70vw;
  height: 100vh;
  margin: 0 auto;
  display: flex;
}

.box {
  width: 100%;
}

.box1 {
  background: black;
}

.box2 {
  background: #00001a;
}

.box3 {
  background: #000033;
}

.box4 {
  background: #00004d;
}

.box5 {
  background: #000066;
}

.box6 {
  background: navy;
}

.box7 {
  background: #000099;
}

.box8 {
  background: #0000b3;
}

.box9 {
  background: #0000cc;
}

.box10 {
  background: #0000e6;
}

.box11 {
  background: blue;
}

.box12 {
  background: #1a1aff;
}

.box13 {
  background: #3333ff;
}

.box14 {
  background: #4d4dff;
}

.box15 {
  background: #6666ff;
}

.box16 {
  background: #8080ff;
}

.box17 {
  background: #9999ff;
}

.box18 {
  background: #b3b3ff;
}

.box19 {
  background: #ccccff;
}

.box20 {
  background: #e6e6ff;
}

.box21 {
  background: white;
}

.box22 {
  background: #e6e6ff;
}

.box23 {
  background: #ccccff;
}

.box24 {
  background: #b3b3ff;
}

.box25 {
  background: #9999ff;
}

.box26 {
  background: #8080ff;
}

.box27 {
  background: #6666ff;
}

.box28 {
  background: #4d4dff;
}

.box29 {
  background: #3333ff;
}

.box30 {
  background: #1a1aff;
}

.box31 {
  background: blue;
}

.box32 {
  background: #0000e6;
}

.box33 {
  background: #0000cc;
}

.box34 {
  background: #0000b3;
}

.box35 {
  background: #000099;
}

.box36 {
  background: navy;
}

.box37 {
  background: #000066;
}

.box38 {
  background: #00004d;
}

.box39 {
  background: #000033;
}

.box40 {
  background: #00001a;
}

.box41 {
  background: black;
}

.animation-1 {
  animation: fade 3s ease-in-out infinite;
  animation-delay: 0s;
}

.animation-2 {
  animation: fade 3s ease-in-out infinite;
  animation-delay: 0.1s;
}

.animation-3 {
  animation: fade 3s ease-in-out infinite;
  animation-delay: 0.2s;
}

.animation-4 {
  animation: fade 3s ease-in-out infinite;
  animation-delay: 0.3s;
}

.animation-5 {
  animation: fade 3s ease-in-out infinite;
  animation-delay: 0.4s;
}

.animation-6 {
  animation: fade 3s ease-in-out infinite;
  animation-delay: 0.5s;
}

.animation-7 {
  animation: fade 3s ease-in-out infinite;
  animation-delay: 0.6s;
}

.animation-8 {
  animation: fade 3s ease-in-out infinite;
  animation-delay: 0.7s;
}

.animation-9 {
  animation: fade 3s ease-in-out infinite;
  animation-delay: 0.8s;
}

.animation-10 {
  animation: fade 3s ease-in-out infinite;
  animation-delay: 0.9s;
}

.animation-11 {
  animation: fade 3s ease-in-out infinite;
  animation-delay: 1s;
}

.animation-12 {
  animation: fade 3s ease-in-out infinite;
  animation-delay: 1.1s;
}

.animation-13 {
  animation: fade 3s ease-in-out infinite;
  animation-delay: 1.2s;
}

.animation-14 {
  animation: fade 3s ease-in-out infinite;
  animation-delay: 1.3s;
}

.animation-15 {
  animation: fade 3s ease-in-out infinite;
  animation-delay: 1.4s;
}

.animation-16 {
  animation: fade 3s ease-in-out infinite;
  animation-delay: 1.5s;
}

.animation-17 {
  animation: fade 3s ease-in-out infinite;
  animation-delay: 1.6s;
}

.animation-18 {
  animation: fade 3s ease-in-out infinite;
  animation-delay: 1.7s;
}

.animation-19 {
  animation: fade 3s ease-in-out infinite;
  animation-delay: 1.8s;
}

.animation-20 {
  animation: fade 3s ease-in-out infinite;
  animation-delay: 1.9s;
}

.animation-21 {
  animation: fade 3s ease-in-out infinite;
  animation-delay: 2s;
}

.animation-21 {
  animation: fade 3s ease-in-out infinite;
  animation-delay: 2s;
}

.animation-22 {
  animation: fade 3s ease-in-out infinite;
  animation-delay: 1.9s;
}

.animation-23 {
  animation: fade 3s ease-in-out infinite;
  animation-delay: 1.8s;
}

.animation-24 {
  animation: fade 3s ease-in-out infinite;
  animation-delay: 1.7s;
}

.animation-25 {
  animation: fade 3s ease-in-out infinite;
  animation-delay: 1.6s;
}

.animation-26 {
  animation: fade 3s ease-in-out infinite;
  animation-delay: 1.5s;
}

.animation-27 {
  animation: fade 3s ease-in-out infinite;
  animation-delay: 1.4s;
}

.animation-28 {
  animation: fade 3s ease-in-out infinite;
  animation-delay: 1.3s;
}

.animation-29 {
  animation: fade 3s ease-in-out infinite;
  animation-delay: 1.2s;
}

.animation-30 {
  animation: fade 3s ease-in-out infinite;
  animation-delay: 1.1s;
}

.animation-31 {
  animation: fade 3s ease-in-out infinite;
  animation-delay: 1s;
}

.animation-32 {
  animation: fade 3s ease-in-out infinite;
  animation-delay: 0.9s;
}

.animation-33 {
  animation: fade 3s ease-in-out infinite;
  animation-delay: 0.8s;
}

.animation-34 {
  animation: fade 3s ease-in-out infinite;
  animation-delay: 0.7s;
}

.animation-35 {
  animation: fade 3s ease-in-out infinite;
  animation-delay: 0.6s;
}

.animation-36 {
  animation: fade 3s ease-in-out infinite;
  animation-delay: 0.5s;
}

.animation-37 {
  animation: fade 3s ease-in-out infinite;
  animation-delay: 0.4s;
}

.animation-38 {
  animation: fade 3s ease-in-out infinite;
  animation-delay: 0.3s;
}

.animation-39 {
  animation: fade 3s ease-in-out infinite;
  animation-delay: 0.2s;
}

.animation-40 {
  animation: fade 3s ease-in-out infinite;
  animation-delay: 0.1s;
}

.animation-41 {
  animation: fade 3s ease-in-out infinite;
  animation-delay: 0s;
}/*# sourceMappingURL=style.css.map */