:root {
  --box-background-color: rgba(241, 136, 224, 0.719);
  --body-bacground-color: #020617;
}


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

}

body {
  background-color: #000;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;

}

.box {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: var(--box-background-color);
  animation:rotate 2s ease 0s infinite alternate;
}

.box:hover {
  animation-play-state: paused;
}

@keyframes rotate {
  from {
    transform: translateY(0px) rotate(0deg)
  }
  to {
transform: translateY(-100px) rotate(180deg) ;
  }
}