html,
body {
  margin: 0;
  padding: 0;
  height: 100vh;
  
  background: rgb(241, 249, 255);
  
  overflow: hidden;
}

.App {
  height: 100%;
  
  display: flex;
  justify-content: center;
  align-items: center;
}

.bottom {
  height: 15rem;
  width: 15rem;

  border-radius: 500px;
  border: 5px solid rgb(201, 201, 201);
  box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.534);
  
  background: repeating-conic-gradient(black 0deg 10deg, white 0deg 20deg);
  background: repeating-conic-gradient(cyan, magenta, yellow);
  
  transform: translateX(50%) rotate(360deg);
  animation-name: anim;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes anim {
  from {
      transform: translateX(50%) rotate(0deg);
  }

  to {
      transform: translateX(50%) rotate(359deg);
  }
}

.top {
  z-index: 1;
  height: 15rem;
  width: 15rem;
  
  background: rgb(255, 237, 237);
  
  border-radius: 500px;
  border: 5px solid white;
  box-shadow: 3px 3px 15px rgba(0, 0, 0, 0.397);
  
  transition: 300ms;
  transform: rotate(0deg) translate(-50%, 0%);
}

.top:hover {
  transform: rotate(5deg) translate(-45%, 5%);
}

.top:active {
  transform: rotate(50deg) translate(50%, 50%);
}