/* ----------- Created by InCoder ----------- */

* {
  margin: 0;
  padding: 0;
}

body {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wrapper {
  width: 25rem;
  height: 25rem;
  display: flex;
  position: absolute;
  align-items: center;
  background-color: #fff;
  justify-content: center;
  box-shadow: 0px 0px 10px #c9c4c4;
}

.square {
  width: 20rem;
  height: 20rem;
  position: absolute;
  border: 1px solid #000;
}

#s1 {
  animation: animateBox1 3s infinite alternate;
}

@keyframes animateBox1 {
  50% {
    height: 5em;
    border-radius: 50%;
    transform: rotate(180deg);
  }
}

#s2 {
  animation: animateBox2 3s infinite alternate;
}

@keyframes animateBox2 {
  50% {
    height: 5em;
    border-radius: 50%;
    transform: rotate(170deg);
  }
}

#s3 {
  animation: animateBox3 3s infinite alternate;
}

@keyframes animateBox3 {
  50% {
    height: 5em;
    border-radius: 50%;
    transform: rotate(160deg);
  }
}

#s4 {
  animation: animateBox4 3s infinite alternate;
}

@keyframes animateBox4 {
  50% {
    height: 5em;
    border-radius: 50%;
    transform: rotate(150deg);
  }
}

#s5 {
  animation: animateBox5 3s infinite alternate;
}

@keyframes animateBox5 {
  50% {
    height: 5em;
    border-radius: 50%;
    transform: rotate(140deg);
  }
}

#s6 {
  animation: animateBox6 3s infinite alternate;
}

@keyframes animateBox6 {
  50% {
    height: 5em;
    border-radius: 50%;
    transform: rotate(130deg);
  }
}

#s7 {
  animation: animateBox7 3s infinite alternate;
}

@keyframes animateBox7 {
  50% {
    height: 5em;
    border-radius: 50%;
    transform: rotate(120deg);
  }
}

#s8 {
  animation: animateBox8 3s infinite alternate;
}

@keyframes animateBox8 {
  50% {
    height: 5em;
    border-radius: 50%;
    transform: rotate(110deg);
  }
}

#s9 {
  animation: animateBox9 3s infinite alternate;
}

@keyframes animateBox9 {
  50% {
    height: 5em;
    border-radius: 50%;
    transform: rotate(100deg);
  }
}

#s10 {
  animation: animateBox10 3s infinite alternate;
}

@keyframes animateBox10 {
  50% {
    height: 5em;
    border-radius: 50%;
    transform: rotate(90deg);
  }
}
#s11 {
  animation: animateBox11 3s infinite alternate;
}

@keyframes animateBox11 {
  50% {
    height: 5em;
    border-radius: 50%;
    transform: rotate(80deg);
  }
}

#s12 {
  animation: animateBox12 3s infinite alternate;
}

@keyframes animateBox12 {
  50% {
    height: 5em;
    border-radius: 50%;
    transform: rotate(70deg);
  }
}

#s13 {
  animation: animateBox13 3s infinite alternate;
}

@keyframes animateBox13 {
  50% {
    height: 5em;
    border-radius: 50%;
    transform: rotate(60deg);
  }
}

#s14 {
  animation: animateBox14 3s infinite alternate;
}

@keyframes animateBox14 {
  50% {
    height: 5em;
    border-radius: 50%;
    transform: rotate(50deg);
  }
}

#s15 {
  animation: animateBox15 3s infinite alternate;
}

@keyframes animateBox15 {
  50% {
    height: 5em;
    border-radius: 50%;
    transform: rotate(40deg);
  }
}

#s16 {
  animation: animateBox16 3s infinite alternate;
}

@keyframes animateBox16 {
  50% {
    height: 5em;
    border-radius: 50%;
    transform: rotate(30deg);
  }
}

#s17 {
  animation: animateBox17 3s infinite alternate;
}

@keyframes animateBox17 {
  50% {
    height: 5em;
    border-radius: 50%;
    transform: rotate(20deg);
  }
}

#s18 {
  animation: animateBox18 3s infinite alternate;
}

@keyframes animateBox18 {
  50% {
    height: 5em;
    border-radius: 50%;
    transform: rotate(0deg);
  }
}

#s19 {
  animation: animateBox19 3s infinite alternate;
}

@keyframes animateBox19 {
  50% {
    height: 5em;
    border-radius: 50%;
    transform: rotate(-20deg);
  }
}

#s20 {
  animation: animateBox20 3s infinite alternate;
}

@keyframes animateBox20 {
  50% {
    height: 5em;
    border-radius: 50%;
    transform: rotate(90deg);
  }
}