* {
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
  /* for touch screen */
  touch-action: none;
}

body {
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background: #111;
  -webkit-perspective: 62.5rem;
  perspective: 62.5rem;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

@media (max-width: 1200px) {
  html {
    font-size: 16px;
  }
}

@media (max-width: 850px) {
  html {
    font-size: 8px;
  }
}

#drag-container,
#spin-container {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: auto;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform: rotateX(-10deg);
  transform: rotateX(-10deg);
}

#drag-container img,
#drag-container video {
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  line-height: 12.5rem;
  font-size: 3.125rem;
  text-align: center;
  -webkit-box-shadow: 0 0 0.5rem #fff;
  box-shadow: 0 0 0.5rem #fff;
  -webkit-box-reflect: below 0.625rem
    linear-gradient(transparent, transparent, #0005);
}

#drag-container img:hover,
#drag-container video:hover {
  -webkit-box-shadow: 0 0 0.9375rem #fffd;
  box-shadow: 0 0 0.9375rem #fffd;
  -webkit-box-reflect: below 0.625rem
    linear-gradient(transparent, transparent, #0007);
}

#drag-container p {
  font-family: Serif;
  position: absolute;
  top: 100%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%) rotateX(90deg);
  transform: translate(-50%, -50%) rotateX(90deg);
  color: #fff;
  width: 7.5rem;
}

#ground {
  width: 56.25rem;
  height: 56.25rem;
  position: absolute;
  top: 100%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%) rotateX(90deg);
  transform: translate(-50%, -50%) rotateX(90deg);
  background: -webkit-radial-gradient(
    center center,
    farthest-side,
    #9993,
    transparent
  );
}

.header {
  box-sizing: border-box;
  width: 100%;
  display: flex;
  padding: 1rem;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
}

#music-container {
  /* position: absolute;
  top: 0;
  left: 0; */
}

#music-logo {
  width: 3.375rem;
  height: 3.375rem;
  border-radius: 1.6875rem;
  overflow: hidden;
}

.start {
  animation: spinMusicLogo 6s infinite linear;
}

.paused {
  animation: spinMusicLogo 6s infinite linear;
  /* 暂停动画 */
  animation-play-state: paused;
}

.music-icon {
  width: 100%;
  height: 100%;
}

#next-box {
  width: 12.5rem;
  height: 3.375rem;
  line-height: 3.375rem;
  text-align: center;
  border-radius: 1.6875rem;
  /* background-color: #fff; */
  background: -webkit-gradient(linear, 0% 0%, 100% 0%, from(rgb(236, 80, 75)), to(#86ec41));
  cursor: pointer;
}

@-webkit-keyframes spin {
  from {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }

  to {
    -webkit-transform: rotateY(360deg);
    transform: rotateY(360deg);
  }
}

@keyframes spin {
  from {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }

  to {
    -webkit-transform: rotateY(360deg);
    transform: rotateY(360deg);
  }
}

@-webkit-keyframes spinRevert {
  from {
    -webkit-transform: rotateY(360deg);
    transform: rotateY(360deg);
  }

  to {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
}

@keyframes spinRevert {
  from {
    -webkit-transform: rotateY(360deg);
    transform: rotateY(360deg);
  }

  to {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
}

@keyframes spinMusicLogo {
  from {
    -webkit-transform: rotateZ(0deg);
    transform: rotateZ(0deg);
  }

  to {
    -webkit-transform: rotateZ(360deg);
    transform: rotateZ(360deg);
  }
}

.github-corner:hover .octo-arm {
  animation: octocat-wave 560ms ease-in-out;
}

@keyframes octocat-wave {
  0%,
  100% {
    transform: rotate(0);
  }

  20%,
  60% {
    transform: rotate(-25deg);
  }

  40%,
  80% {
    transform: rotate(10deg);
  }
}

@media (max-width: 31.25rem) {
  .github-corner:hover .octo-arm {
    animation: none;
  }

  .github-corner .octo-arm {
    animation: octocat-wave 560ms ease-in-out;
  }
}