#dc-pfp.vinyl-plate {
  border-radius: 50%;
  border: 8px solid var(--img-border-color);
  background: radial-gradient(
    circle at center,
    var(--accent-color) 0%,
    #000000 70%
  );
  box-shadow: inset 0 0 10px 2px rgba(255, 255, 255, 0.1),
    0 0 15px 3px var(--accent-color);
  object-fit: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  position: relative;
  display: inline-block;
}

#dc-pfp.vinyl-plate::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 90%;
  height: 90%;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  background: repeating-radial-gradient(
    circle,
    rgba(255, 255, 255, 0.05),
    rgba(255, 255, 255, 0.05) 2px,
    transparent 3px,
    transparent 5px
  );
  z-index: 2;
}

@keyframes vinyl-rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

#dc-pfp.vinyl-plate.rotating {
  animation: vinyl-rotate 5s linear infinite;
}