body {
  width: 100vw;
  height: 100vh;
  margin: 0;
  overflow: hidden;
  background: linear-gradient(90deg, rgba(0,41,69,1) 6%, rgb(53, 0, 56) 29%, rgba(7,33,71,1) 84%);
}
.container {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 40px;
  animation: zooming 10s ease-in-out infinite;
}
.frame {
  width: 600px; /*700 or 900px*/
  height: 600px;
  position: absolute;
  border-radius: 50px;
  border: 5px #087be6 solid;
  box-shadow: 
  0px 0px 20px #00ccff,
  inset 0px 0px 20px #00ccff,
  0px 0px 60px #ff00c8,
  inset 0px 0px 60px #ff00c8;
  filter: brightness(1.5) contrast(3);
  animation: breathing 3s ease-out infinite;
}
.frame:nth-child(1) {
  transform: rotate(40deg) translateY(0px) translateZ(0px);
  opacity: 1.00;
  animation-delay: 0.1s;
  }
.frame:nth-child(2) {
  transform: rotate(40deg) translateY(50px) translateZ(-10px);
  opacity: 0.9;
  animation-delay: 0.3s;
  }
.frame:nth-child(3) {
  transform: rotate(40deg) translateY(100px) translateZ(-20px);
  opacity: 0.85;
  animation-delay: 0.5s;
}
.frame:nth-child(4) {
  transform: rotate(40deg) translateY(150px) translateZ(-30px);
  opacity: 0.80;
  animation-delay: 0.7s;
}
.frame:nth-child(5) {
  transform: rotate(40deg) translateY(200px) translateZ(-40px);
  opacity: 0.75;
  animation-delay: 0.9s;
}
.frame:nth-child(6) {
  transform: rotate(40deg) translateY(250px) translateZ(-50px);
  opacity: 0.70;
  animation-delay: 1.1s;
}
.frame:nth-child(7) {
  transform: rotate(40deg) translateY(300px) translateZ(-60px);
  opacity: 0.65;
  animation-delay: 1.3s;
}
.frame:nth-child(8) {
  transform: rotate(40deg) translateY(350px) translateZ(-70px);
  opacity: 0.60;
  animation-delay: 1.5s;
}
.frame:nth-child(9) {
  transform: rotate(40deg) translateY(400px) translateZ(-80px);
  opacity: 0.5;
  animation-delay: 1.7s;
}
.frame:nth-child(10) {
  transform: rotate(40deg) translateY(450px) translateZ(-90px);
  opacity: 0.4;
  animation-delay: 1.9s;
}
.frame:nth-child(11) {
  transform: rotate(40deg) translateY(500px) translateZ(-100px);
  opacity: 0.3;
  animation-delay: 2.1s;
}
.frame:nth-child(12) {
  transform: rotate(40deg) translateY(550px) translateZ(-110px);
  opacity: 0.2;
  animation-delay: 2.3s;
}
.frame:nth-child(13) {
  transform: rotate(40deg) translateY(600px) translateZ(-120px);
  opacity: 0.1;
  animation-delay: 2.5s;
}
.frame:nth-child(14) {
  transform: rotate(40deg) translateY(650px) translateZ(-130px);
  opacity: 0.05;
  animation-delay: 2.7s;
}
@keyframes breathing {
  0% {filter: brightness(1.5) contrast(3);}
  50% {filter: brightness(1.0) contrast(2);}
  100% {filter: brightness(1.5) contrast(3);}
}

@keyframes zooming {
  0% {perspective: 45px;}
  50% {perspective: 60px;}
  100% {perspective: 45px;}
}