body {
    font-family: 'univers', sans-serif;
margin: 0%;
padding: 0;
    background-color: #a8b1ae;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: default;
    overflow: hidden; /* Prevent scrollbars */
  }

.heading { font-family: 'Universe Light', sans-serif; 
/* color: #565c5a; */
color: white;
font-size: 19vw;
    font-weight: 300;
    padding: none;
    margin: 0%;
    white-space: wrap;
    line-height: 80%;
    width: min-content;
    letter-spacing: -1px; /* Adjusted letter spacing */
}

.maintitle {
    display: none;
    padding-top: 30vh;
    gap: 16px;
    flex-direction: row;
    z-index: 1;
    position: fixed;
    left: 50%; /* Center horizontally */
    transform: translateX(-50%); /* Adjust to center the element */
}




.searchbig{
  background-color: rgb(0, 0, 0);
  width: 40px;
  height: 40px;
  border-radius: 40px;
  min-width: 40px; /* Prevents squishing */
  min-height: 40px; /* Prevents squishing */
  backdrop-filter: blur(5px);
  position: absolute;
  left: calc(50% - 30px);
  top: calc(30% - 30px);
  cursor: pointer;
z-index: 4;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.45); /* Adjust values as needed */


}

.searchbig-query{
      font-family: 'Universe Light', sans-serif; 
      top: 300px;
      font-size: 32px;
      font-weight: 200;
      white-space: nowrap;
      border: none;
      background: rgba(0, 0, 0, 0);
      color: #fff;
      outline: none;
      position: absolute;
      top: 50%;
      left: 40px;
      transform: translateY(-50%);
      z-index: 2000; /* Ensure it's above other elements */
      width: 480px;
      display: none;
      /* caret-color:transparent;  */
      caret-shape:underscore;
      font-style: normal;
      font-weight: 500;
      height: 40px;
      line-height: 40px;
}

.searchbig-query::placeholder {
  font-style: italic;
  font-weight: 100;
  color: #ccc;
  font-family: 'Universe Light', sans-serif;
  font-size: 24px;
}

.album_graphic{
   display: flex;
   flex-direction: row;
   width: auto;
   color: #ffffff;
   min-width: 400px; /* Ensure minimum width for consistent spacing */
   height: 64px;

}

.album_cover {
/* background-color: black; */
margin-right: 10px;
margin-top: 10px;


width: 50px;
height: 50px;
/* border-radius: 6px; */
object-fit: contain; /* Ensures the image scales down to fit */
will-change: transform;
backface-visibility: hidden;


}


.album_title {
    font-family: 'Libre Caslon Text', serif;
    font-size: 4rem;
    font-weight: lighter;
    color: #a8b1ae;
    height: 60px;
    justify-content: space-between;
    gap: 10px;
    text-transform: capitalize;
    box-shadow: inset 0 -50px 0 0px white; /* Replaces underline decoration with a box shadow */
 
    
}

.album_text {
    gap:10px;
    display: flex;
    flex-direction: row;
}

.album_instrument {
   font-family: 'Libre Caslon Text', serif; color: white; font-size: 4rem; display: flex; 
    gap: 10px;   /* Allow the divs to wrap to a new line */
font-style: italic;
font-weight: lighter;}

.album_artist {
    font-family: 'Libre Caslon Text', serif; color: white; font-size: 4rem; display: flex; 
    gap: 10px;   /* Allow the divs to wrap to a new line */
    text-transform: uppercase;
font-weight: bold;}





.searchbig:hover{  background: rgba(149, 149, 149, 0.273);
}


.searchbig.focused {
  width: 600px;
  padding: 0px 0px;
  text-align: left;
  left: calc(50% - 300px); /* Adjusted to position left by half of its width */
}



.searchbig.focused:hover{  background-color: rgb(0, 0, 0);
}



/* Grid */
.grid-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100vh;
  position: relative;
  margin: 0;
  overflow: hidden; /* Prevent scrollbars */
  z-index: 2;
  justify-content: flex-start;
  contain: layout style paint;
}

/* Search Results Styling */
.search-container {
  text-align: left;
  z-index: 4000;
  position: absolute;
  right: 0px;
  top: 48px;
}

.search-results {
  list-style: none;
  padding: 0;
  width: 600px;
  margin: 0 auto;
}

.search-results li {
  cursor: pointer;
  display: flex;
  padding: 9px;
  margin-bottom: 10px;
  background-color: rgb(0, 0, 0);
  backdrop-filter: blur(4px);
  border-radius: 40px;
  color: whitesmoke;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
  overflow: hidden; /* Add this to prevent text from extending past the container */
  border: 1px solid rgb(0, 0, 0);
}

.search-results li:hover {
  border: 1px solid rgb(255, 255, 255);
}

.search-results img {
  width: 60px;
  height: 60px;
  margin-right: 10px;
  border-radius: 60px;
  flex-shrink: 0; /* Prevent image from shrinking */
}

.search-results .song-info {
  flex: 1;
  align-content: center;
  overflow: hidden; /* Add this to contain the text */
  min-width: 0; /* Allow flex item to shrink below content size */
}

.search-song-title {
  font-weight: bold;
  font-size: 24px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
  width: 100%;
  display: block;
  padding-right: 8px;
}


.search-song-artist {
  font-size: 16px;
  font-weight: lighter;
  text-transform: uppercase;
  padding-bottom: 4px;
  padding-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
  width: 100%;
  display: block;
  padding-right: 8px;
}



.search-album-name {
  font-weight: lighter;
  font-size: 16px;
  display: none;
}

.info{z-index: 1000;
  position:absolute;
  left:20px; 
  top:20px;
  background-color: transparent;
  display: flex;
  flex-direction: row;
  gap: 8px;
  margin-top: -5px;
  font-size: 16px;
  font-weight: bold;
  padding-top: 5px;

  
}




.aboutSection{
    cursor: pointer;
    display: flex;
    flex-direction: row;
    padding: 10px;
    /* gap:10px; */
    margin-bottom: 10px;
    background-color: rgb(0, 0, 0);
    backdrop-filter: blur(4px);
    border-radius: 42px;
    color: #7171fc;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
    height: 60px;
align-content: center;
border: 2px solid #7171fc;

    }

.aboutq{
  width: 40px;
  height: 40px;
  margin-left: 8px;
  margin-top: 8px;
  border-radius: 42px;
  border: 1px solid #7171fc;
  justify-content: center;
  align-items: center;
  display: flex;


}

.hidden{  display: block; /* Hide the element */
  height: 240px;
  width: 400px;

}

.abouttext {
  font-size: 1rem;
  font-family: 'Universe Light', sans-serif;
  font-weight: 100;
  font-size: 16px;
  text-transform: uppercase;
  color: #7171fc;
  text-align: left;
  margin: auto;

}

 .blacksolid{
    background-color: #ffffff; 
    width: 100%;
  height: 40px;
  z-index: 3;
padding-bottom: 10px;

} 


.album_unit{
    display: flex;
    flex-direction: row;
    gap:10px;
    height: 70px;

}

.row {
  display: flex;
  flex-direction: row;
  gap: 10px;
  white-space: nowrap;
  animation: scroll-horizontal infinite linear;
  width: max-content;
  align-items: center;
  will-change: transform;
  transform: translateZ(0);
}

/* All rows move at the same speed */
.row {
  animation-duration: 620s;
}

/* Keyframe Animation for horizontal scrolling (left to right) */
@keyframes scroll-horizontal {
  0% {
    transform: translateX(-100%) translateZ(0);
  }
  100% {
    transform: translateX(100vw) translateZ(0);
  }
}






@media (max-width: 640px) {
  .heading {
    font-size: 120px;
  }
  
  .blacksolid {
    height: 40px;
  }
  
  .info {
    font-size: 1rem;
    padding-top: env(safe-area-inset-top);
    top: calc(20px + env(safe-area-inset-top));
  
  }
  
  .lable {
    padding-top: 0px;
  }
  .circle{
    padding-top: 0px;
  }

  .searchbig.focused {
    width: calc(100vw - 12px);
    left: 6px;
    right: 6px;
    top: 86px;
  }
  
 
  .searchbig-query {
    width: calc(100vw - 62px);
    font-size: 18px;
    height: 100%;
    top: 0px;
    display: flex;
    align-items: center;
    line-height: 1;
    transform: translateY(-4px);
  }
  
  .searchbig-query::placeholder {
    font-size: 18px;
    line-height: 1;
  }
  
  .search-container {
    width: calc(100vw - 12px);
    left: 50%;
    transform: translateX(-50%);
    position: absolute;
  }
  
  .search-results {
    width: 100%;
  }
  
  .search-results li {
    padding: 6px;
    margin-bottom: 8px;
    text-overflow: ellipsis;
  }
  
  .search-song-title {
    font-size: 16px;
  }
  
  .search-song-artist {
    font-size: 16px;
    padding-bottom: 2px;
  }

  .search-results img {
    width: 48px;
    height: 48px;
    margin-right: 6px;
    border-radius: 48px;
    flex-shrink: 0;
  }

  .aboutSection {
    width: calc(100vw - 12px);
    height: auto;
    min-height: 32px;
    padding: 8px;
    display: flex;
    flex-direction: row;
    align-items: center;
    box-sizing: border-box;
    gap:12px;
    margin-bottom: 6px;
  }
  
  .abouttext::before {
    content: "Search for a song to view credits,\A then click an artist to see more tracks.";
    display: block;
    font-size: 12px;
    font-family: 'Universe Light', sans-serif;
    font-weight: 100;
    text-transform: uppercase;
    color: #7171fc;
    text-align: left;
    flex: 1;
    white-space: pre-line;
  }
  
  .abouttext {
    font-size: 0px; /* Hide the original text */
    flex: 1;
  }

  .aboutq {
    width: 24px;
    height: 24px;
    margin: 0px;
    font-size: 12px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .grid-container{
    background-color: #a8b1ae;
    gap: 6px;
    height: calc(100vh - 40px + env(safe-area-inset-bottom)); /* Add bottom safe area to extend beyond viewport */
    padding-bottom: 0; /* Remove any bottom padding */
    margin-bottom: 0; /* Remove any bottom margin */
    position: relative; /* Ensure proper positioning */

  }
  /* Ensure the body accounts for safe areas and prevents scrolling */
  body {
    padding-top: env(safe-area-inset-top);
    padding-bottom: 0; /* Remove bottom safe area padding */
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #ffffff; /* Change to white for seamless blend */
  }
}