@media (min-width: 1600px) {
  .center-circle {
    width: 360px;
    height: 360px;
  }
}
@media (max-width: 1024px) {
  .center-circle {
    width: min(280px, 60vmin);
    height: min(280px, 60vmin);
  }
}
@media (max-width: 768px) {
  .center-circle {
    width: min(240px, 55vmin);
    height: min(240px, 55vmin);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
}
@media (max-width: 480px) {
  .center-circle {
    width: min(200px, 50vmin);
    height: min(200px, 50vmin);
    border-width: 0.5px;
  }
  .overlay-text {
    letter-spacing: 0.3em;
  }
  .music-credit {
    bottom: 12px;
  }
}
@media (max-width: 360px) {
  .center-circle {
    width: min(170px, 48vmin);
    height: min(170px, 48vmin);
  }
  .center-name {
    letter-spacing: 0.2em;
  }
}
@media (prefers-reduced-motion: reduce) {
  .center-circle.is-active {
    animation: none;
    opacity: 1;
  }
  .center-name {
    animation: none;
  }
  .overlay-text {
    animation: none;
    opacity: 0.6;
  }
  .overlay {
    transition-duration: 0.3s;
  }
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .center-circle {
    border-width: 0.5px;
  }
}