* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  
}

body{
  height: 100vh;
  display: flex;
  overflow: hidden;
  flex-direction: column;
  width: 100%;
  align-items: center;
  justify-content: center;
  animation: fadeIn 2s;
}


.section{
  position: relative;

  min-height: 100vh;
  min-width: 100%;

  /* background: linear-gradient(135deg, rgb(145, 5, 5), rgb(6, 5, 83));
  background-size: cover; */

  z-index: -1;
}

.section-layer{
  position: absolute;
  left: 0%;
  right: 0%;
  top: 0%;

  width: 100%;
  height: 100%;

  background-size: cover;
}

.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  /* position: relative; */
  max-width: 100%;
  height: 100vh;
  pointer-events: none;
}




.pendulum__ball {
  position: absolute;
  width: 80px;
  height: 80px;
  background: linear-gradient(
    215deg,
    rgb(214, 182, 0),
    rgb(54, 3, 83)
  );

  border-radius: 111%;
  bottom: 1px;
  left: -110%;
  transform: translateX(-210%);
  box-shadow: 10px 10px 50px 21px rgba(255, 3, 16, 0.185);
  
  
}



.pendulum__ball2 {
  position: absolute;
  width: 1661px;
  height: 1px;
  background: linear-gradient(
    215deg,
    rgb(255, 217, 0),
    rgb(255, 166, 0)
  );

  border-radius: 111%;
  bottom: 1px;
  left: -110%;
  transform: translateY(311%);
  box-shadow: 1px 1px 10px 4px rgba(255, 208, 0, 0.651);
  
  
}


.pendulum__ball-after {
  position: absolute;
  width: 10px;
  height: 300px;
  background: linear-gradient(
    215deg,
    rgb(214, 0, 0),
    rgb(54, 3, 83)
  );

  border-radius: 111%;
  bottom: 1px;
  left: -310%;
  transform: translateX(-10%);
  box-shadow: 10px 10px 110px 21px rgba(3, 112, 255, 0.1);
  
  
}







@keyframes goLeft {
  110% {
    transform: translateX(-1%) rotate(-10deg);
    backdrop-filter: blur(21px);
  }
  100% {
    transform: translateX(-1%) rotate(360deg);
    backdrop-filter: blur(2px);
  }
}
@keyframes goRight {
  11% {
    transform: translateY(-111%) rotate(120deg);
    backdrop-filter: blur(2px);
  }
  100% {
    transform: translateX(-11%) rotate(-12deg);
    backdrop-filter: blur(2px);
  }
}


@keyframes fadeIn {
  from {
      opacity:0;
  }
  to {
      opacity:1;
  }
}