/* 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." */

body {
  background-image:url('maybe2.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top 15%;
  background-attachment: fixed;
  margin: 0;
  padding: 0;
  background-color: #FEC6DF;
  color: #333333;
  font-family: 'DotGothic16', sans-serif;
  cursor: url('cursor.png'), auto;
}
  
  .popup-size-music .small-photo {
    width: 400px;
    height: auto;
  }
  
  
  .song-list {
    height: 100px; /* ✅ Only show about 4–5 songs depending on spacing */
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 8px;
    
    
  }
  
  .custom-scroll::-webkit-scrollbar {
    width: 10px;
  }
  
  .custom-scroll::-webkit-scrollbar-track {
    background: url('track1.png') repeat-y; /* Or a soft color like #fce4ec */
  }
  
  .custom-scroll::-webkit-scrollbar-thumb {
    background: url('thumb1.png') no-repeat center;
    background-size: contain;
  }
  
  .custom-scroll::-webkit-scrollbar-thumb:hover {
    filter: brightness(1.2);
  }

  .close {
    position: absolute;
    top: 3px;       /* adjust this to move vertically */
    right: -118px;     /* adjust this to move horizontally */
    width: 20px;
    height: 20px;      /* grey */
    color: white;
    font-size: 16px;
    cursor: pointer;
    user-select: none;
    z-index: 1000;
  }
  
  .close:hover {
    transform: scale(1.2); /* darker on hover */
  }
  
  
  .photo-container {
    position: relative;
    width: fit-content;
  }
    
  
  #now-playing {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Optional: lets clicks pass through */
    z-index: 10;
  }
  
    #track-label {
    position: absolute;
    top: 59px;
    left: 230px;
    font-size: 15px;
    font-weight: bold;
    color: white;
    white-space: nowrap;
    letter-spacing: 2px;
  }
  
  #artist-label {
    position: absolute;
    top: 82px;
    left: 240px;
    font-size: 10px;
    color: #666;
    white-space: nowrap;
  }

  #progress-container {
    position: absolute;
    top: 100px;           /* adjust to fit your layout */
    left: 215px;
    width: 150px;
    height: 6px;
    background-color: white;   /* darker background like iPod */
    border-radius: 999px;     /* rounded ends */
    overflow: hidden;
    z-index: 20;
  }
  
  #progress-bar {
    height: 100%;
    width: 0%;
    background-color: #e48bbd; /* or try a pastel color like #ff77c4 */
    border-radius: 999px;
    transition: width 0.1s linear;
  }

  
  #play-pause-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    position: absolute;
    top: 60px;  /* keep your positioning */
    left: 20px;
  }
  
  #play-pause-btn img {
    display: block;
    width: 30px;  /* adjust size */
    height: 30px;
    user-select: none;
    pointer-events: none; /* so clicks go to button */
  }
  
  #play-pause-controls button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0; /* space between buttons */
  }
  
  #play-pause-controls button img {
    display: block;
    width: 30px;
    height: 30px;
    user-select: none;
    pointer-events: none;
    margin: 0;
    
  }
  
  /* Optional: highlight the active button */
  #play-pause-controls button.active {
    filter: none;
  }


  #music-player {
    /* You may or may not need this, depending on your layout */
    position: absolute;  /* so child elements inside #music-player are normal flow */
    width: 260px;
    left: 300px;
  }
  /* position playlist absolutely inside the popup */
  #playlist {
    position: absolute;
    top: 245px;    /* adjust this to put playlist below play button */
    left: 45px;
    width: 300px;  /* adjust width to fit inside popup */
    max-height: 70px;
    overflow-y: auto;
    border-top: 1px solid #ccc;
    background: transparent;
    z-index: 300;  /* ensure playlist is above image */
    padding-right: 8px;
    box-sizing: border-box;
  }
  
  #play-pause-controls {
    display: flex;               /* arrange buttons side-by-side */
    align-items: center;         /* vertically center buttons */
    gap: 3px;                    /* control spacing between buttons */
    position: absolute;
    top: 140px;
    left: 27px;
  }
  
  #pause-btn {
  transform: translate(0.5px, -0.5px);
  }
  
  #play-pause-controls button:hover {
  transform: translateY(-1px);
  filter: brightness(1);
  }
  #play-pause-controls button:active {
  transform: translateY(1px);
  filter: brightness(0.9);
  }
  
  #play-pause-controls button {
  transition: transform 0.1s ease, filter 0.1s ease;
  }


  
  #visualizer {
    display: flex;
    gap: 4px;
    position: absolute;
    top: 70px;  /* adjust as needed */
    left: 35px; /* adjust as needed */
    height: 40px;  /* height of the visualizer container */
    width: 160px;  /* total width you can adjust */
    align-items: flex-end;
  }
  
  #visualizer .bar {
    flex: 1;                 /* equally sized bars */
    background: white;
    height: 5px;             /* starting height */
    border-radius: 0;        /* sharp edges */
    transition: height 0.15s ease;
  }
  
    

  
  .photo-container.draggable-popup {
    position: absolute;
    z-index: 100;
  }
    
  .small-photo {
    display: block;
    height: auto;
    width: 100%;
    pointer-events: none;
  }
  
  .photo-text {
    font-family: 'DotGothic16', sans-serif;
    font-size: 12px;
    color: #22BED9;
    margin-top: 0;
    text-align: center;
  }

  .site-footer {
    width: 100%;
    height: 45px;
    background-image: url('taskbar3.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;/* Or any color you like */
    color: white;
    text-align: center;
    font-family: 'DotGothic16', sans-serif;
    font-size: 10px;
    margin-top: 5px;
    position: fixed;
    bottom: 0;
    left: 0;
    border-top: 1px solid white;

  }
  
    /*photos on the side*/
  .sidebar {
    position: fixed;
    top: 10px;
    left: 1px;
    width: 140px;
    height: calc(100% - 160px);
    overflow-y: auto;
    z-index: 10000;
    background: transparent;
    display: flex;
    flex-direction: column;
  }
  
  .sidebar .photo-container {
    width: 100px;
    text-align: center;
  }
  
  .photo-container {
    margin-bottom: 10px;
    width: 125px;
    text-align: center;
  }

  /* Forward and Back buttons only */
  #back-btn,
  #forward-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    transition: transform 0.1s ease, filter 0.1s ease;
  }
  
  #back-btn img,
  #forward-btn img {
    width: 30px;
    height: 30px;
    user-select: none;
    pointer-events: none;
    display: block;
  }
  
  /* Hover effect */
  #back-btn:hover,
  #forward-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.2);
  }
  
  /* Active button style */
  #back-btn.active,
  #forward-btn.active {
    filter: brightness(1);
  }
  
  /* Pressed effect */
  #back-btn:active,
  #forward-btn:active {
    transform: translateY(1px);
    filter: brightness(0.9);
  }
  
  .popup-size-large .small-photo {
  width: 600px;  /* Adjust width */
  height: auto;
  }
  
  #website-popup .popup-inner-content {
    position: absolute;
    top: 30px; /* or however much space your frame leaves */
    left: 30px;
    width: 540px; /* adjust based on frame padding */
    height: 400px;
    overflow-y: auto;
    color: #333;
    font-size: 12px;
    padding: 10px;
    box-sizing: border-box;
    z-index: 200;
  }