:root {
  --gradient: linear-gradient(90deg, #ee6352, purple, #ee6352);
  *, *:after, *:before {
    box-sizing: border-box;
  }
}
body {
  /* BACK GROUND */
  overflow: hidden;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 1.6;
  color: #333;
  background-size: 300%;
  background-image: var(--gradient);
  animation: bg-animation 5s infinite;

}
.text-container {
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  font-style: normal;
  float: inline-start;
  position: absolute;
  top: 10;
  left: 0;
  right: 0;
  bottom: 0;
  width: 0;
  display: 0;
  width: 100%;
  display: flex;
  align-items: left;
  justify-content: center;
}
h1{
  color: green;
  font-size: calc(2em + 12vw) ;  
  font-weight: 850;  
 
}
.text-paragraph{
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  font-style: normal;

}
p{
  line-height: 28px;
  padding-bottom: 5%;
  padding-right: 30%%;
  opacity: 70%;
  text-transform: uppercase;
  color: royalblue
  
}

@keyframes bg-animation {
  0% {background-position: left}
  50% {background-position: right}
  100% {background-position: left}
}

/* Circle ANIMATION */
.container {
  position: absolute;
  left: 65%;
  top: 50%;
  transform: translate(-50%, -50%);
  
}
.circle-container {
  width: 150px;
  height: 150px;
  position: absolute;
  left: 200%;
  top: 200%;
  transform: translate(-50%, -50%);
}
.circle-container:after {
  content: '';
  position: absolute;
  width: 150px;
  height: 250px;
  border-radius: 50%;
  background: #000;
  bottom: 70;
  opacity: 0.1;
  left: 50%;
  animation: shadow 1s linear infinite;
}
.circle-container:nth-child(2):after {
  animation-delay: -0.3s;
}
.circle-container:nth-child(3):after {
  animation-delay: -0.2s;
}
.circle-container:nth-child(4):after {
  animation-delay: -0.s;
}
.circle-container:nth-child(5):after {
  animation-delay: -1s;
}
.circle {
  width: 150px;
  height: 150px;
  background: greenyellow;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  position: absolute;
  animation: anim 3s linear infinite;
  opacity: 0.6;
}
.circle-container:nth-child(2) .circle {
  animation-delay: -0.3s;
}
.circle-container:nth-child(3) .circle {
  animation-delay: -0.6s;
}
.circle-container:nth-child(4) .circle {
  animation-delay: -0.8s;
}
.circle-container:nth-child(5) .circle {
  animation-delay: -1s;
}
 @keyframes anim { 
  0% {
    transform-origin: 400% 50%;
  }
  50% {
    transform: rotate(360deg);
    transform-origin: 400% 50%;
  }
  50.1% {
    transform: rotate(0);
    transform-origin: -400% 50%;
  }
  100% {
    transform: rotate(-360deg);
    transform-origin: -300% 50%;
  }
}
@keyframes shadow {
  0% {
    
  }
  12.5% {
    transform: translate(50px) scale(0.6);
  }
  25% {
    transform: translate(150px);
  }
  37.5% {
    transform: translate(50px) scale(1.4);
  }
  50% {
    transform: translate(0px);
  }
  62.5% {
    transform: translate(-50px) scale(0.6);
  }
  75% {
    transform: translate(-120px);
  }
  87.5% {
    transform: translate(-50px) scale(1.4);
  }
  100% {
    transform: translate(0px);
  }
  /* FINISH Circle ANIMATION */
  /*BUTTON*/
  
}