.music-grid {
  display: grid;
  grid-template-columns: repeat(3, 300px);
  grid-gap: 20px;
  background-color: #1a1d23; /* Dark background */
  position: relative; /* Add relative positioning */
}

.vinyl-container {
  width: 300px;
  height: 300px;
  position: relative;
  background-color: transparent;
  overflow: hidden;
}

.vinyl-record {
  position: absolute;
  top: -10%;
  left: -10%;
  width: 120%;
  height: 120%;
  background-size: cover;
  background-position: center;
  background-image: url('/images/vinyl_PNG18-2327334362.png');
  border-radius: 50%;
  animation: spin 10s linear infinite;
  z-index: 0;
}


.image-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1; /* Bring the image container in front of the vinyl */
}

.vinyl-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.music-title {
  font-family: 'cool-font';
  font-size: 36px;
  text-align: center;
  margin-bottom: 20px;
  color: #fff; /* White text */
}

.vinyl-container {
  width: 300px;
  height: 300px;
  position: relative;
  opacity: 0;
  transform: scale(0.5) rotate(0deg);
  animation: fadeIn 0.5s forwards;
}

.vinyl-image {
  width: 80%;
  height: 80%;
  margin: 10%;
  object-fit: cover;
  border-radius: 50%;
  clip-path: circle(50% at 50% 50%);
  animation: spin 20s linear infinite 0.5s;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: scale(0.5) rotate(0deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.vinyl-container:nth-child(1).vinyl-image {
  animation: spin 25s linear infinite 0.5s;
}

.vinyl-container:nth-child(2).vinyl-image {
  animation: spin 30s linear infinite 0.5s;
}

.vinyl-container:nth-child(3).vinyl-image {
  animation: spin 20s linear infinite 0.5s;
}

.vinyl-container:nth-child(4).vinyl-image {
  animation: spin 22s linear infinite 0.5s;
}

.vinyl-container:nth-child(5).vinyl-image {
  animation: spin 28s linear infinite 0.5s;
}

.vinyl-container:nth-child(6).vinyl-image {
  animation: spin 24s linear infinite 0.5s;
}

.vinyl-container:nth-child(7).vinyl-image {
  animation: spin 26s linear infinite 0.5s;
}

.vinyl-container:nth-child(8).vinyl-image {
  animation: spin 29s linear infinite 0.5s;
}

/* Delay the animation for each vinyl container */
.vinyl-container:nth-child(1) { animation-delay: 0s; }
.vinyl-container:nth-child(2) { animation-delay: 0.1s; }
.vinyl-container:nth-child(3) { animation-delay: 0.2s; }
.vinyl-container:nth-child(4) { animation-delay: 0.3s; }
.vinyl-container:nth-child(5) { animation-delay: 0.4s; }
.vinyl-container:nth-child(6) { animation-delay: 0.5s; }
.vinyl-container:nth-child(7) { animation-delay: 0.6s; }
.vinyl-container:nth-child(8) { animation-delay: 0.7s; }

.music-header {
  display: block;
  margin: 0 auto; /* Center the image */
  max-width: 40%; /* Set a maximum width to make it 50% smaller */
  height: auto; /* Maintain aspect ratio */
  margin-bottom: 10px; /* Reduce space between header and grid */
  filter: invert(100%); /* Invert the image colors for dark mode */
}