.loader-body {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   height: 100vh;
   background: #000;
}

.loader {
   height: 25vh;
   width: 25%;
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.loader span {
   height: 50px;
   width: 3px;
   background: #FF0202;
   animation: animation 0.9s ease-in-out infinite;
}

.loader span:nth-of-type(2) {
   background: #EFFF00;
   animation-delay: -0.8s;
}

.loader span:nth-of-type(3) {
   background: #00FF39;
   animation-delay: -0.7s;
}

.loader span:nth-of-type(4) {
   background: #8F00FF;
   animation-delay: -0.6s;
}

.loader span:nth-of-type(5) {
   background: #D7FF00;
   animation-delay: -0.5s;
}

.loader span:nth-of-type(6) {
   background: #FF0017;
   animation-delay: -0.4s;
}

@keyframes animation {

   0%,
   40%,
   100% {
      transform: scaleY(0.05);
   }

   20% {
      transform: scaleY(2.2);
   }
}

@media screen and (max-width: 780px) {
   @keyframes animation {

      0%,
      40%,
      100% {
         transform: scaleY(0.05);
      }

      20% {
         transform: scaleY(1.2);
      }
   }
}

.loader-body p {
   font-family: 'Times New Roman', Times, serif;
   font-variant-caps: petite-caps;
   font-weight: bold;
   font-size: 1.6em;
   color: #D2D2D2;
}

.loader-body p::after {
   content: "....";
   color: #F4ACAC;
}

.main-body {
   display: none;
}