* {
  margin: 0px;
  padding: 0px;
}

body {
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  width: auto;
  height: 100vh;
  background-color: rgb(56, 82, 82);
}

.newton-pendulum {
  display: flex;
  justify-content: center;
  border-top: 15px solid white;
  width: 25vw;
  height: 50vh;
}

.newton-pendulum span {
  position: relative;
  transform-origin: top;
  width: 0.2vw;
  height: 30vh;
  background-color: white;
  margin: 0vh 1.9vw;
}

.newton-pendulum span:before {
  position: absolute;
  content: "";
  width: 4vw;
  height: 8vh;
  background-color: white;
  border-radius: 50%;
  bottom: 0;
  left: -2vw;
}

.newton-pendulum span:nth-child(1) {
  animation: pendulum1 2s infinite ease-in-out;
}

@keyframes pendulum1 {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(45deg);
  }
  50% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

.newton-pendulum span:nth-child(5) {
  animation: pendulum2 2s infinite ease-in-out 1s;
}

@keyframes pendulum2 {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-45deg);
  }
  50% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(0deg);
  }
}