/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

/* Import Nunito font */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700;800&display=swap');

body {
  background-color: #08031A; /* Deep navy background instead of white */
  color: #fceaff; /* Light lavender text instead of black */
  font-family: 'Nunito', Verdana, sans-serif; /* Added Nunito as primary font */
  background-image: url('https://sadhost.neocities.org/images/tiles/aquagalaxy_small.gif');
  background-size: 65px;
  margin: 0;
  padding-bottom: 20px; /* Reduced space since player is hidden by default */
}

/* Global Audio Player Styles - Hidden by default */
#global-player {
  position: fixed;
  bottom: -100px; /* Start off-screen */
  left: 0;
  width: 100%;
  background-color: #0D2914; /* Dark green background */
  border-top: 3px solid #2b8744;
  padding: 15px;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: bottom 0.5s ease-in-out;
}

#global-player.visible {
  bottom: 0; /* Slide up into view */
}

.player-controls {
  display: flex;
  align-items: center;
  width: 30%;
}

.player-info {
  width: 40%;
  text-align: center;
}

.player-extra {
  width: 30%;
  text-align: right;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.control-btn {
  background-color: #2b8744;
  border: none;
  color: white;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin: 0 5px;
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s;
}

.control-btn:hover {
  background-color: #33c45a;
}

.play-btn {
  width: 50px;
  height: 50px;
  font-size: 20px;
}

.player-track-info {
  margin: 0 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.player-album-cover {
  width: 50px;
  height: 50px;
  border-radius: 5px;
  margin-right: 15px;
  object-fit: cover;
}

.track-title {
  font-weight: bold;
  color: #e3fce9;
}

.album-name {
  font-size: 0.9em;
  color: #a3f59f;
}

.progress-container {
  width: 100%;
  background-color: #041c0b;
  height: 5px;
  border-radius: 5px;
  margin-top: 5px;
  cursor: pointer;
}

.progress-bar {
  height: 100%;
  background-color: #33c45a;
  border-radius: 5px;
  width: 0%;
}

.volume-control {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.volume-slider {
  width: 100px;
  margin: 0 10px;
}

.close-player {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: white;
  font-size: 18px;
  cursor: pointer;
  margin-left: 15px;
  padding: 8px 12px;
  border-radius: 50%;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
}

.close-player:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.1);
}

/* Album and Track Styles */
.album-list {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.album-item {
  padding: 12px 15px;
  margin-bottom: 10px;
  background-color: #1c6b32;
  cursor: pointer;
  transition: all 0.3s;
  display: flex;
  align-items: center;
}

.album-item:hover {
  background-color: #33c45a;
  transform: translateX(5px);
}

.album-item.active {
  background-color: #041c0b;
  border-left: 4px solid #fceaff;
}

.track-list {
  list-style-type: none;
  padding: 0;
  margin: 20px 0;
}

.track-item {
  padding: 10px 15px;
  margin-bottom: 8px;
  background-color: #0D2914;
  border-radius: 4px;
  display: flex;
  justify-content: space-between;
  cursor: pointer;
  transition: background-color 0.2s;
}

.track-item:hover {
  background-color: #1c3a24;
}

.track-item.playing {
  background-color: #2b8744;
  border-left: 4px solid #fceaff;
}

/* Responsive Design */
@media only screen and (max-width: 800px) {
  #global-player {
    flex-direction: column;
    padding: 10px;
  }
  
  .player-controls, .player-info, .player-extra {
    width: 100%;
    margin-bottom: 10px;
    justify-content: center;
  }
  
  .volume-control {
    justify-content: center;
  }
  
  .player-track-info {
    flex-direction: column;
    text-align: center;
  }
  
  .player-album-cover {
    margin-right: 0;
    margin-bottom: 10px;
  }
  
  .player-extra {
    justify-content: center;
  }
}

/* Link Styles */
a {
  color: #29c251;
  font-weight: bold;
  text-decoration: none;
}

a:hover {
  color: #33c45a;
  text-decoration: underline;
}

/* Heading Styles */
h1, h2, h3 {
  color: #e3fce9;
  text-align: center; /* Center align headings */
}

/* Container Styles */
#container {
  max-width: 900px;
  margin: 0 auto;
}