body, html {
    margin: 0;
    padding: 0;
}

.header-container {
    display: grid;
    grid-template-columns: 1fr 1fr; 
    grid-template-rows: auto auto; 
    grid-template-areas:
        "header-top-left header-top-right"
        "left-column right-column";
    max-width: 1280px;
    margin: 0 auto;
    padding: 20px;
}

.header-top {
    grid-area: header-top;
    padding: 10px;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;  /* Vertically center the items in their grid cells */
    column-gap: 20px;     /* Optional space between columns */
}

.tagline {
    margin: 0.1em 0 0;  /* small top margin, no bottom margin */
    font-style: italic; 
    font-weight: 300;   /* “light-ish” weight; adjust as desired */
    color: #333;        /* choose your color */
    margin-bottom: 75px;
}


.menu-links {
    text-align: right;

}

.xlogo {
    width: 15px;
    height: auto;
    margin-top: 10px;
    border: 1px solid #3e3e3e;
    padding: 4px;
    border-radius: 5px;

}
.menu-links a {
    margin-left: 20px; /* Space between links */
    text-decoration: none; /* Remove underline */
    color: #602743; /* Match the title color */
    font-size: 1.1rem;
    font-weight: bold;
    justify-self: end;
    text-align: right;
}

/* Remove left margin from the first link */
.menu-links a:first-child {
    margin-left: 0;
}

/* Hover effect for links */
.menu-links a:hover {
    text-decoration: underline;
}

/* Second Row Styles */
.search-box {
    grid-area: left-column;
    margin-left: 10px;
}

.header-right {
    grid-area: right-column;
    position: relative; /* For positioning .contacts */
}

/* Positioning .contacts */
.contacts {
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 10px;
    font-size: 0.9rem;
}

/* Search Box Styles */
.search-box input[type="text"] {
    width: 60%; /* Adjust input width */
    padding: 5px;
    font-size: 1.1rem;
    border: none; /* No border */
    outline: none;
    border-bottom: 1px solid #ccc; /* Optional: underline for input */
}

.search-box button {
    padding: 5px 10px;
    font-size: 1.1rem;
    border: none; /* No border */
    background: #200d16; /* Button background color */
    cursor: pointer;
    color: white; /* Button text color */
    border-radius: 20px;
}

/* Examples Text */
.examples-text {
    margin-top: 0;
    font-size: 0.9rem;
    color: #5c5c5c;
}

.keyword-example {
    color:  #602743 ;
    
}

.menu-links a.active {
    font-weight: bold;
}

/* Media Query for Viewport Widths 758px and Below */
@media screen and (max-width: 758px) {

    /* Adjust header-top to stack elements vertically */
    .header-top {
        flex-direction: column;
        align-items: center; /* Center items horizontally */
    }

    .header-top h1 {
        margin-bottom: 10px; /* Add some space below the h1 */
        text-align: center;
        font-size: 1.2rem; /* Optional: Adjust font size */
    }

    .menu-links {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        max-width: 400px; /* Optional: limit width */
    }

    .menu-links a {
        margin: 5px 10px; /* Adjust margins for better spacing */
        width: 45%; /* Each link takes up about half the container */
        box-sizing: border-box;
        text-align: center;
        font-size: 0.9rem; /* Optional: Adjust font size */
    }

    /* Adjust the grid layout */
    .header-container {
        grid-template-columns: 1fr; /* Single column */
        grid-template-rows: auto auto auto; /* Three rows */
        grid-template-areas:
            "header-top"
            "left-column"
            "right-column";
        height: auto; /* Let the height adjust automatically */
    }

    /* Adjust search-box and header-right */
    .search-box {
        grid-area: left-column;
        margin: 20px auto; /* Center the search box */
    }

    .header-right {
        grid-area: right-column;
        margin: 20px auto; /* Center the header-right section */
        position: relative; /* Ensure positioning context */
    }

    /* Adjust .contacts positioning */
    .contacts {
        position: static; /* Remove absolute positioning */
        margin-top: 10px; /* Add some space above */
        text-align: center; /* Center the content */
    }
    .tagline {
        margin-bottom: 10px;
    }
}
.custom-radio {
    display: none;
  }
  
  /* This label is our clickable box */
  .box-label {
    display: inline-block;
    padding: 6px 12px;
    margin-right: 10px;
    margin-bottom: 10px;
    border: 2px solid #3e3e3e;
    color: #3e3e3e;
    /* Grey background */
          /* White text by default */
    cursor: pointer;
    user-select: none;          /* Prevent text selection on click */
  }
  
  /* When the associated radio is checked, style the label differently */
  .custom-radio:checked + .box-label {
    background-color: #3e3e3e;    /* Turn black when checked */
    color: white;               /* White text */
  }

  #album-selection {
    background-color: #b4ff69;
    margin-top: 20px;
  }
  select {
    height: 30px;
  }

/** END HEADER STYLE **/


/** START SEARCH PAGE STYLE **/

.search-results-container {
    max-width: 800px;
    margin: 20px auto;
    padding: 20px;
}

.search-results {
    list-style-type: none;
    padding: 0;
}

.search-results li {
    margin: 10px 0;
    font-size: 1rem;
}

.search-results li strong {
    font-weight: bold;
}

.search-results li em {
    color: #666;
    font-size: 0.9rem;
}

.cover-image {
    width: 75px;
    border-radius: 5px;
    margin-right: 15px;
}

.song-details {
    flex: 1; /* Allow song details to take up the rest of the space */
}

.yt-embed {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%; /* This gives you that nice 16:9 aspect ratio */
  }
  
  .yt-embed iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
.results-notes {
    font-style: italic;
    font-size: 0.9rem;
    color: #5c5c5c;
}
.sorting-options {
    margin-bottom: 20px;
    margin-top: 5px;
}
.sorting-options a {
    text-decoration: none;
    color: #6969ff;
}
.sorting-options strong {
    color: #000;
}
.results-count {
    font-weight: bold;
    background-color: #3e3e3e;
    color: white;
    padding: 0 4px;
    border-radius: 5px;
    margin-bottom: 10px;
}
.back-button {
    display: inline-block;
    padding: 4px 10px;
    font-weight: 800;
    background-color: #3e3e3e;
    color: white;
    border-radius: 10px;
    text-decoration: none;
    font-size: small;
}

/** END SEARCH PAGE STYLE **/



        body {
            background-color:   #f1f1f1;
            color:  #3e3e3e ;
        }
        p, li, .song-item-album {
            font-size: 1.1rem;
        }

        .grid-container {
            display: grid;
            grid-template-columns: 1fr;
            grid-gap: 20px;
            max-width: 1280px;
            margin: 20px auto;
        }
        .grid-header-container {
            max-width: 1280px;
            margin: 20px auto;
        }
        .grid-header-row {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            grid-gap: 20px;
            height: 400px;
            margin-bottom: 100px;
            
        }
        .grid-row {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-gap: 20px;
        }
          .grid-top-row img {
            opacity: 0.8;
            width: auto;
            height: 100%;
            object-fit: cover;
            border: 2px red solid;
        }
        .grid-item {
            position: relative;
            overflow: hidden;
            
        }

        .grid-item img {
            max-width: 100%;
            height: auto;
            width: 100%;
            object-fit: cover;
        }
        .grid-header-container img {
            max-width: 200px;
            float: left;
            margin-right: 20px;
        }
        .grid-item-album p {
            margin-top: 0px;
            padding-top: 0;
        }
        .grid-item-album {
            margin-top: 20px;
        }
        .album-text {
            background-color: #3e3e3e;
            color: white;
            border-radius: 8px;
            margin-right: 8px;
            padding: 0 4px;
        }
        .purchase-text {       
            display: inline-block;
            margin-top: 10px;
        }
        .grid-item a, .grid-item-album a {
            text-decoration-line: underline;
            text-decoration-thickness: 1.5px;
            text-decoration-color: hotpink;
            color: #3e3e3e;
        }

        .ribbon {
            position: absolute;
            bottom: 10px;
            right: 0;
            
            background-color:  #ffff69 ;
            padding: 3px 6px;
        }


        @media (max-width: 768px) {
            .grid-row {
                grid-template-columns: repeat(2, 1fr);
                padding: 10px;
            }
            .grid-header-row {
                grid-template-columns: 1fr;
            }
        }
        @media (max-width: 480px) {
            .grid-row {
                grid-template-columns: 1fr;
            }

        }
        .transition {
            background-color: yellow;
            height: 100%;
            width: 100%;
        }


        .index-intro-container {
            margin: 0 auto;
            max-width: 1280px;
            padding-left: 10px;
            padding-right: 10px;
            font-size: 1.1rem;
          }
          .index-intro-container a {
            color: #3e3e3e;
          }
          .index-subtitle {
            font-size: 1.6rem;
            font-weight: bold;
            color: #3e3e3e;
            border-bottom: 1px solid #3e3e3e;
            margin-top: 100px;
          }

          .grid-new-music {
            margin-top: 100px;
            display: grid;
            grid-template-rows: 1fr;
            grid-gap: 80px;
            height:auto;
            align-items: center;
            justify-items: center;
          }
        .new-date {
            font-weight: bold;
            text-align: right;
            margin-bottom: 25px;
        }
    


        .grid-new-music .box-text {
            border-top: 2px solid #3e3e3e;
            margin-bottom: 20px;
            font-size: 1.2rem;
            font-weight: 600;
           color: #3e3e3e;
           text-align: right;
        }

         .song-title {
            color: #3e3e3e;
            padding: 0 4px;
            font-size:1rem;
            max-width: fit-content;
          }
          .index-album-container {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-gap: 20px;
            margin-top: 100px;
            margin-bottom: 100px;
          }
          .index-album-container img {
            width: 100%;
            overflow: hidden;
                      }
          .index-album-text {
            text-align: right;
            font-size: 1.2rem;
            font-weight: 600;
            border-top: 2px solid black;
            margin-top: 40px;
            color: #3e3e3e;
            
          }
          
          @media (max-width: 768px) {
            .grid-new-music {
                grid-template-columns: 1fr;
            }
            .box3 img {
                width: 30%;
            }
            .index-album-text {
                font-size: 0.6rem;
                margin-top: 10px;
            }
          }
          
          
/**** START ALBUM/EP STYLING *****/

.album-cover {
    max-width: 100%;
    display: block; /* Ensures the image takes up its container width */
    margin-bottom: 10px; /* Add spacing below the album cover */
}

.grid-item-album {
    position: relative;
    overflow: hidden;
    margin-top: 0;
    padding: 0;
    margin-bottom: 0;
}

.grid-container-album-ep {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr); /* Default two-column layout */
    grid-gap: 20px;
    max-width: 1000px;
    margin: 20px auto;
}
.grid-container-search {
    display: grid;
    grid-template-columns: 1fr; /* Default two-column layout */
    grid-gap: 20px;
    max-width: 800px;
    margin: 20px auto;
}

.grid-item-album-ep {
    overflow: hidden;
}

.first-column {
    display: block; /* No need for grid here anymore since it's one row */
}

.second-column {
    grid-column: 2; /* Second column in the default layout */
}

 Styling for individual items 
.song-item-album {
    border-bottom: 1px solid #d8d8d8;
    padding: 20px 0;
}
.tester {
    border-bottom: 1px solid #d8d8d8;
    padding: 20px 0;
}

.song-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 20px;
    border-bottom: 1px solid #d8d8d8;
    padding-bottom: 20px;
    font-size: 1.1rem;
}

.album-title {
    font-size: 1rem;
    font-style: italic;
    color: rgb(117, 117, 117);
}
.album-title-by {
    font-size: 1rem;
    color: rgb(117, 117, 117);
}

.album-sources, .album-credits, .album-track-play {
    font-size: 1rem;
    color: rgb(117, 117, 117);
    cursor: pointer;
}

.album-credits, .album-track-play {
    margin-left: 15px;
}

.toggle-arrow, .play-icon {
    color: hotpink;
    cursor: pointer;
    font-weight: bold;
}

.embed-container {
    display: none;
    margin-top: 15px;
    grid-column: 2 / span 1; /* Ensures it appears on the far right in the grid */
}

.embed-container.active {
    display: block; /* Show the container when it has content */
}

.source-container {
    display: none; /* Hide the sources list by default */
    margin-top: 10px; /* Add some spacing below the embed container */
    font-size: 0.9rem; /* Optional: make the text slightly smaller */
    
}

.source-container a {
    text-decoration: underline;
    text-decoration-style: dotted;
    text-decoration-color: hotpink;
    color: #3e3e3e;
    }

.credits-container {
    display: none; /* Hide the credits by default */
    margin-top: 10px; /* Add spacing for visibility */
    font-size: 0.9rem; /* Optional: slightly smaller font size */
    color: #3e3e3e;
    
}

.credits-container span {
    display: inline-block; /* Ensure proper alignment of roles and names */
}

.credit-role {
    font-weight: 600; /* Specific font weight for the credit role */
    color: #3e3e3e; /* Optional: Add a specific color */
}

.separator {
    color: hotpink; /* Hot pink for the commas */
    font-weight: bold; /* Optional: make it bold */
    font-size: 1.3rem;
    line-height: 0;
}
.grid-item-album .bitrate, .source-container .bitrate {
    color: #3e3e3e;
    background-color: #b4ff69;
    font-size: 0.7rem;
    padding: 0 2px;
    border-radius: 4px;
}

/* Media Query for Responsive Design */
@media (max-width: 758px) {
    .grid-container-album-ep {
        grid-template-columns: 1fr; /* Switch to a single-column layout */
        grid-gap: 10px; /* Reduce spacing between rows */
    }

    .first-column,
    .second-column {
        grid-column: 1; /* Make both columns span the full width */
        grid-row: auto; /* Reset any specific row settings */
        width: 100%; /* Ensure the content stretches to fit the viewport */
        padding: 10px; /* Optional: Add padding for better readability */
        box-sizing: border-box; /* Include padding in the width calculation */
    }

    .grid-item {
        margin-bottom: 15px; /* Add spacing between the album cover and quick links */
    }

    .grid-item-album {
        margin-bottom: 10px; /* Add spacing below quick links */
    }

    .grid-item-album-ep {
        overflow: visible; /* Ensure content expands as needed */
        align-items: start; /* Align content to the top */
        justify-items: start; /* Align content horizontally */
    }
}



/**** END ALBUM/EP STYLING *****/

/**** START ABOUT STYLING *****/


.about-container {
    max-width: 700px;
    margin: 0 auto;
    padding: 20px;
    
}

.contact-email {
    color: #3e3e3e;
}

/**** END ABOUT STYLING *****/


.radio-box {
    display: inline-block;
    cursor: pointer;
    user-select: none; /* Prevent text highlight on double-click */
    text-align: center;
}

.radio-box input[type="radio"] {
    /* Hide the original radio button */
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.radio-box span {
    display: inline-block;
    padding: 10px;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 4px;
}

/* Style when selected */
.radio-box input[type="radio"]:checked + span {
    background-color: #ddd;
    border-color: #999;
}



  


.bottom-bar {
    display: none;              /*  Hidden by default */
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 75px;
    background-color: #f1f1f1;  
    z-index: 9999;
  }

  /* Container that keeps things aligned horizontally */
  .bottom-bar-content {
    max-width: 1200px;
    margin: 0 auto;
    height: 100%;
    display: flex;
    align-items: center;
    /* optional horizontal padding */
    padding: 0 1rem;
  }

  /* Logo styling */
  .logo-left {
    font-weight: bold;
    font-size: 1.4rem;
    margin-right: auto; /* pushes the buttons to the right */
  }

  /* Button group styling */
  .button-group {
    display: flex;
    gap: 1rem; /* space between buttons */
  }

  .button-group button {
    background-color: #3e3e3e; 
    border: none;
    color: #fff; 
    font-weight: bold;
    font-size: 1rem;
    padding: 0.5rem 1rem;
    cursor: pointer;
    border-radius: 4px; 
  }

  .button-group button:hover {
    opacity: 0.8;
  }