* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}

body {
 font-family: Arial, sans-serif;
 background-color: #121212;
 color: #fff;
 min-height: 100vh;
 display: flex;
 flex-direction: column;
 justify-content: flex-start;
}
nav {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 10px 0;
  
 }
 
/* Back button style */
#back-btn {
  position: absolute;
  left: 20px;
  color: #fff;
  cursor: pointer;
  font-size: 16px;
  padding: 10px;
 }
 
#back-btn:hover {
color: #121212;
}

.nav-text {
  color: #fff;
  font-size: 20px;
  font-weight: bold;
 }
/* Header styles */
header {
  
  text-align-last: left;
  padding: 10px 0;
  background-color: #1db954; /* Spotify green */
  color: white;
  position: relative;
  bottom: 0;
  width: 100%;
 
}

h1 {
 font-size: 24px;
 margin-top: 10px;
}

.Your-Playlists {

 top: 20px;
 left: 20px;
 background-color: #33c80a; /* Dark background for button */
 color: #fff;
 font-size: 22px;
 padding: 10px 15px;
 border: none;
 border-radius: 5px;
  transition: background-color 0.3s ease;
  margin: left 50px ;
}

/* Container for the playlists */
#playlists-container {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* Create responsive grid with 200px items */
 gap: 20px; /* Space between items */
 padding: 20px;
 justify-items: center; /* Center items horizontally */
}

/* Style for each individual playlist item */
.playlist-item {
 background-color: #2d2d2d; /* Dark background for playlist item */
 border-radius: 8px; /* Rounded corners */
 overflow: hidden; /* Prevent content from overflowing */
 text-align: center;
 color: #ffffff;
 cursor: pointer;
 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Shadow effect for better appearance */
 transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Playlist item hover effect */
.playlist-item:hover {
 transform: translateY(-5px); /* Slight lift effect on hover */
 box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5); /* Increase shadow on hover */
}

/* Image for each playlist item */
.playlist-item img {
 width: 100%; /* Ensure image covers the entire width of the item */
 height: 200px; /* Fixed height for images */
 object-fit: cover; /* Ensures image covers the area without distortion */
 border-bottom: 2px solid #fff; /* Border between image and name */
}

/* Playlist name below the image */
.playlist-item p {
 padding: 10px;
 font-size: 16px;
 font-weight: bold;
 text-overflow: ellipsis;
 white-space: nowrap;
 overflow: hidden; /* Hide long text */
}

/* Optional: Style the loader when data is being fetched */
#loader {
 text-align: center;
 font-size: 18px;
 color: #fff;
 margin-top: 50px;
}