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

body {
 font-family: Arial, sans-serif;
 background-color: #121212; /* Dark theme background */
 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;
  }
  

/* Style for the "Category" text */
.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;
}

/* Categories grid container */
.categories-grid {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* Responsive grid with 200px items */
 gap: 20px; /* Space between items */
 padding: 20px;
 justify-items: center; /* Center items horizontally */
}

/* Category item styles */
.category-item {
 background-color: #2d2d2d; /* Dark background for items */
 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 for better appearance */
 transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Hover effect on category items */
.category-item:hover {
 transform: translateY(-5px); /* Lift effect */
 box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5); /* Enhanced shadow on hover */
}

/* Category item image */
.category-item img {
 width: 100%; /* Full width */
 height: 200px; /* Fixed height */
 object-fit: cover; /* Maintain aspect ratio */
 border-bottom: 2px solid #fff; /* Border between image and name */
}

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

/* Loader styles */
#loader {
 text-align: center;
 font-size: 18px;
 color: #fff;
 margin-top: 50px;
}

/* Footer styles */
footer {
 text-align: center;
 padding: 10px 0;
 background-color: #1db954; /* Spotify green */
 color: white;
 position: relative;
 bottom: 0;
 width: 100%;
 
}