.gradient-background {
  background: linear-gradient(300deg, #000000, #216d84, #7E1891, #2a8482, #1a2e53);
  background-size: 180% 180%;
  animation: gradient-animation 18s ease infinite;
}

@keyframes gradient-animation {
  0% {
    background-position: 0% 50%;
  }
  25% {
    background-position: 100% 50%;
  }
  50% {
    background-position: 0% 50%;
  }
  75%{
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}


.card1{
  background: linear-gradient(300deg, #000000, #216d84, #7E1891, #F72C5B);
  background-size: 180% 180%;
  animation: gradient-animation 18s ease infinite;
}

@keyframes gradient-animation {
  0% {
    background-position: 0% 50%;
  }
  25% {
    background-position: 100% 50%;
  }
  50% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }

}

.icon-square {
  width: 3rem;
  height: 3rem;
  border-radius: 0.75rem;
}

.profile-img {
  height: 100px;
  border-radius: 50%;
}

/* *{
  font-family: "Caveat", serif;
  font-optical-sizing: auto;
} */
nav{
  background-color:#2E073F ;
}
.row{
  font-size: large;
  
}

.popular-artist{
  margin-bottom: 10px;
  font-size: xx-large;
}

.all-artists{
  display: flex;
  justify-content: center;
  align-items: center;
}

.artist-img{
  height: 12rem;
  width: 12rem;
  border-radius: 50%;
}

.artist{
  margin-left: 6px;
  margin-right: 6px;          
}

.artist-name{
  display: flex;
  justify-content: center;
  align-items: center;
}

h3{
  padding-top: 0.5rem;
  font-size: 1.5rem;
}

.popular-albums{
  margin-bottom: 10px;
  font-size: xx-large;
}

.all-albums{
  display: flex;
  justify-content: center;
  align-items: center;
}

.album-img{
  height: 15rem;
  width: 15rem;
  border-radius: 0;
}

.album{
  margin-left: 6px;
  margin-right: 6px;          
}

.album-name{
  display: flex;
  justify-content: center;
  align-items: center;
}
.artist-img {
  border-radius: 50%; 
  transition: box-shadow 0.3s ease; 
}

.artist:hover .artist-img {
  box-shadow: 0 0 10px 4px rgba(255, 255, 255, 0.5);

}

.album-img {
  transition: box-shadow 0.3s ease; 
}

.album:hover .album-img {
  box-shadow: 0 0 10px 4px rgba(255, 255, 255, 0.5);

}

#section8{
  width: 100vw;
}

.PLAYLIST-KA-SECTION{
  display: flex;
  justify-content: flex-start;
  gap: 0;
}

.one-playlist{
  position: relative;
  display: flex;
  align-items: center;
  height: 6rem;
  width: 40vw;
  margin: 0.5rem;
}

.one-playlist img{
  margin: 0.5rem;
}

#playlists{
  font-size: 3rem;
}

.playlist{
  height: 5rem;
  width: 5rem;
}

.playlist-name h4{
  font-size: 1rem;
  margin-top: 1rem;
  margin-bottom: 0;
  margin-left: 1rem;
}

.one-playlist:hover{
  cursor: pointer;
  border: 3px solid #acabab;
}

.playlist-name .likes{
  margin-left: 1rem;
  top: 0.8rem;
}

.one-playlist .seemore{
  color: #3a3a3a;
  position: absolute;
  bottom: 1rem;
  right: 1rem;
}

.section-8-1{
  width: 10vw;
}


.playlist-name p {
  margin: 0.3rem 0;
  font-size: 0.9rem;
  color: #555;
}

.playlist-duration, .playlist-plays {
  font-size: 0.8rem;
  color: #777;
}

.playlist-duration {
  margin-top: 0.2rem;
}

.playlist-plays {
  margin-top: 0.2rem;
}

/* .one-playlist:hover {
  cursor: pointer;
  border: 3px solid #acabab;
  background-color: #f0f0f0;
} */

.seemore {
  color: #3a3a3a;
  position: absolute;
  bottom: 1rem;
  right: 1rem;
}

.playlist-name .likes {
  margin-left: 1rem;
  top: 0.8rem;
}