* {
  margin: 0;
  padding: 0;
}

@keyframes rotateClockwise {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes rotateCounterclockwise {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-360deg);
  }
}

#container {
  position: relative;
  width: 100vw;
  height: 100vh;
}

#beige,
#red,
#blue,
#yellow,
#pink,
#green,
#black {
  width: 5px;
  height: 5px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform-origin: center;
  transform: translate(-50%, -50%) scale(100%);
}

#beige {
  background-color: beige;
  animation: rotateClockwise 60s linear infinite, ease-in-out infinite;
  transform: scale(90%);
}

#red {
  background-color: red;
  animation: rotateCounterclockwise 90s linear infinite, ease-in-out infinite;
  transform: scale(90%);
  transform-origin: center;
}

#blue {
  background-color: blue;
  animation: rotateClockwise 30s linear infinite, ease-in-out infinite;
  transform: scale(90%);
}

#yellow {
  background-color: yellow;
  animation: rotateCounterclockwise 100s linear infinite, ease-in-out infinite;
  transform: scale(90%);
}

#pink {
  background-color: pink;
  animation: rotateCounterclockwise 50s linear infinite, ease-in-out infinite;
  transform: scale(90%);
}

#green {
  background-color: green;
  animation: rotateClockwise 60s linear infinite, ease-in-out infinite;
  transform: scale(90%);
}

#black {
  background-color: black;
  animation: rotateClockwise 70s linear infinite,  ease-in-out infinite;
  transform: scale(90%);
}