body {
  background-color: rgb(248, 178, 250);
  font-family: sans-serif;
  font-weight: lighter;
  color: white;
  text-align: center;
  animation-name: lalala;
  animation-duration: 40s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}
.lol {
  color: white;
  font-size: 10px;
  text-align: right;
}
.haha {
  color: white;
  top: 300px;
  /* position: absolute; */
  text-align: center;
}
.deco {
  background-color: beige;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  position: absolute;
  left: 400px;
  top: 1500px;
  opacity: 50%;
  animation-name: example;
  animation-duration: 7s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
.begin {
  color: rgb(247, 247, 248);
  opacity: 50%;
}
.trial {
  width: 100%;
  height: 5px;
  position: absolute;
  top: 180px;
  background-color: white;
}
@keyframes example {
  0% {
    background-color: rgb(126, 15, 170);
    transform: scale(1, 1);
  }
  25% {
    background-color: rgb(160, 26, 212);
    transform: scale(0.67, 0.67);
  }
  50% {
    background-color: rgb(236, 142, 232);
    transform: scale(0.33, 0.33);
  }
  100% {
    background-color: rgb(250, 187, 250);
    transform: scale(0.1, 0.1);
  }
}
@keyframes lalala {
  0% {
    background-color: rgb(2, 116, 2);
  }
  25% {
    background-color: rgb(39, 189, 9);
  }
  50% {
    background-color: rgb(128, 233, 79);
  }
  100% {
    background-color: rgb(240, 243, 36);
  }
}
.circletwo {
  background-color: beige;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  position: absolute;
  left: 800px;
  top: 3250px;
  opacity: 40%;
  animation-name: example;
  animation-duration: 7s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
.circlethree {
  background-color: beige;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  position: absolute;
  left: 100px;
  top: 4750px;
  opacity: 40%;
  animation-name: example;
  animation-duration: 7s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
.circlefour {
  background-color: beige;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  position: absolute;
  left: 800px;
  top: 6600px;
  opacity: 40%;
  animation-name: example;
  animation-duration: 7s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
.circlefive {
  background-color: beige;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  position: absolute;
  left: 100px;
  top: 6900px;
  opacity: 40%;
  animation-name: example;
  animation-duration: 7s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
/* .circlesix {
  background-color: beige;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  position: absolute;
  left: 800px;
  top: 950px;
  opacity: 40%;
  animation-name: example;
  animation-duration: 7s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
} */
.circleseven {
  background-color: beige;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  position: absolute;
  left: 800px;
  top: 10100px;
  opacity: 40%;
  animation-name: example;
  animation-duration: 7s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
.trialtwo {
  width: 100%;
  height: 5px;
  position: absolute;
  top: 11350px;
  background-color: white;
}