#logo {
  z-index: 1;
  height: 150px;
  width: 150px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: opacity var(--transitionSpeedOpacity) ease,
    transform var(--transitionSpeedOpacity) ease;
}

#logo:hover {
  transform: translate(-50%, -50%) rotate(360deg);
}

/* mobile */
@media screen and (max-width: 600px) {
  #logo {
    top: 80%;
  }
}