body {
    background-color: #333;
    color: #eee;
    padding-bottom: 30px;
}
.container {
    background-color: #444;
    padding: 30px;
    border-radius: 10px;
    margin-top: 50px;
}
.logo {
    max-width: 250px;
    height: auto;
    margin-bottom: 20px;
}


/* Custom styles for the music footer */
.music-footer {
    position: fixed;
    bottom: 0;
    left: 50%; /* Position the left edge at the center of the viewport */
    transform: translateX(-50%); /* Shift the element back by half its own width */
    width: 100%;
    max-width: 250px;
    
    background-color: #212529;
    padding: 2px 0;
    z-index: 1030;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.5);
    
    /* Flexbox properties to align content */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
}

/* Style for the play/pause button */
#play-music-btn {
    width: 25px;
    height: 25px;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Style for the volume label to align with the slider */
.music-footer .form-label {
    margin-bottom: 0;
    font-size: 0.7rem;
}

/* Adjust slider width for better appearance */
.music-footer .form-range {
    width: 150px; /* INCREASED the width here */
    margin-top: 0;
}


#img-logo-top {
  height: 10px;
  width: 10px;
}

.header {
    background-color: #1a1a1a; 
}






/* Custom CSS to match the image's style */
.custom-offcanvas {
    /* Set the background color to the dark color shown in the image */
    background-color: #242424 !important; 
    /* Make the menu wide, taking up about 70-80% of the screen */
    width: 80vw !important; 
}

/* Style for the offcanvas body content (the menu links) */
.custom-offcanvas .offcanvas-body {
    /* Set text alignment for the whole body to right */
    text-align: right; 
    /* Use a dark color for the close button */
    --bs-btn-close-color: #fff;
    --bs-btn-close-opacity: 1;
}

/* Adjust the link styles to be large and white */
.custom-offcanvas .nav-link {
    font-size: 2rem; /* Larger font size */
    padding-right: 0; /* Remove default padding for clean right alignment */
}

/* Ensure the toggler icon is styled correctly for the dark header */
.navbar-toggler {
    color: #fff;
}