.index-background {
    background-color: #0f0f0f;
    width: 90%; /* Changed from 55vw to a percentage for flexibility */
    max-width: 1000px; /* Max width to prevent it from becoming too wide on large screens */
    margin-left: auto;
    margin-right: auto;
    min-height: 100vh; /* Use min-height to ensure it takes at least full viewport height */
    box-shadow: 0px 0px 1000px 100px #1f1f1f; /* Adjusted shadow for responsiveness */
    display: flex; /* Added for flexbox layout */
    flex-direction: column; /* Stack children vertically */
}

.index-header { /* Added a container for banner and kasukedo image for better control */
    position: relative; /* For positioning kasukedo image */
    width: 100%;
}

.index-banner {
    width: 100%; /* Make banner responsive */
    height: auto; /* Maintain aspect ratio */
    max-height: 300px; /* Optional: constrain max height */
    object-fit: cover;
}

.index-kasukedo {
    width: 30%; /* Relative width */
    max-width: 150px; /* Max width for the image */
    position: absolute; /* Position over the banner */
    bottom: -20px; /* Adjust as needed */
    left: 50%;
    transform: translateX(-50%); /* Center the image */
    margin-top: 0; /* Removed margin-top as it's positioned */
}

.index-panels {
    margin-top: 50px; /* Increased margin to account for positioned kasukedo image */
    display: flex; /* Changed from inline-flex to flex for better control */
    flex-wrap: wrap; /* Allow panels to wrap on smaller screens */
    justify-content: space-around; /* Distribute space between panels */
    width: 100%;
    padding: 1rem; /* Add padding */
}

.index-panel {
    margin: 1rem; /* Use rem for margins */
    width: calc(33.333% - 2rem); /* Distribute width among 3 panels, accounting for margin */
    min-width: 280px; /* Minimum width before wrapping or becoming too small */
    height: auto; /* Auto height based on content */
    min-height: 300px; /* Minimum height for consistency */
    background-color: #00000070;
    display: flex; /* Use flexbox for panel content */
    flex-direction: column; /* Stack panel content vertically */
    padding: 1rem; /* Add padding inside panels */
}

.index-panel-title {
    margin-top: 1vh;
    margin-bottom: 1rem; /* Add bottom margin */
}

.index-music {
    justify-content: space-between;
}

.index-music-current-links {
    margin-top: 0.5rem; /* Adjusted margin */
    margin-bottom: 0.5rem; /* Adjusted margin */
}

.index-music-current-link {
    margin: 0.5rem; /* Adjusted margin */
    font-size: 1.5rem; /* Increase icon size slightly */
}

.index-music-current {
    text-align: left;
    display: flex; /* Changed to flex for better alignment */
    align-items: center; /* Vertically align items */
    background-color: #000000;
    width: 100%; /* Full width of parent */
    padding: 0.5rem; /* Add padding */
    margin-bottom: 1rem; /* Space below current music */
}

.index-music-current-cover {
    margin-left: 1vw;
    width: 80px; /* Fixed width for cover */
    height: 80px; /* Fixed height for cover */
    object-fit: cover;
    margin-right: 1rem; /* Space between cover and title */
}

.index-music-current-title {
    margin: 0; /* Remove auto margin, flex will handle alignment */
    flex-grow: 1; /* Allow title to take remaining space */
}

.index-music-current-title h2 {
    font-size: 1.2rem; /* Adjust font size */
}

.index-music-current-genre {
    font-style: italic;
    font-size: 0.9rem; /* Adjust font size */
    color: #363636;
}

.index-music-update {
    cursor: pointer;
    text-align: left;
    user-select: none;
    margin-top: 1rem; /* Adjusted margin */
    padding: 1rem; /* Adjusted padding */
    background-color: #000000;
    width: 100%; /* Full width of parent */
}

.index-music-update-upnext {
    margin-left: 0; /* Remove fixed margin */
    display: flex; /* Use flex for alignment */
    align-items: center;
}

.index-music-update-upnext p {
    font-size: 1.1rem; /* Adjust font size */
    margin-left: 0.5rem;
}

.index-music-update-artist {
    margin-left: 0; /* Remove fixed margin */
    text-align: left;
    font-size: 0.8rem; /* Adjust font size */
    margin-top: 0.5rem; /* Add some top margin */
}

.index-music-update, .index-music-update-upnext p, .index-music-update-upnext h2, .index-music-update-artist {
    transition: background-color 0.25s, color 0.25s;
}

.index-career-list, .index-voice-list {
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 200px; /* Adjusted max-height, can be relative e.g. 25vh */
    flex-grow: 1; /* Allow lists to take available space in panel */
}

.index-career-list::-webkit-scrollbar, .index-voice-list::-webkit-scrollbar {
    width: 5px;
}

.index-career-list::-webkit-scrollbar-track, .index-voice-list::-webkit-scrollbar-track {
    background: #00000000;
}

.index-career-list::-webkit-scrollbar-thumb, .index-voice-list::-webkit-scrollbar-thumb {
    background-color: #363636;
}

.index-career-team, .index-voice-role {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    padding: 0.5rem;
    background-color: #000000;
}

.index-career-team-wrapper {
    display: flex;
    align-items: center; /* Vertically align items */
    width: 100%; /* Take full width */
    min-height: 50px; /* Minimum height */
}

.index-career-team-logo {
    width: 40px; /* Fixed width for logo */
    height: 40px; /* Fixed height for logo */
    object-fit: scale-down;
    margin-right: 1rem; /* Space between logo and data */
}

.index-career-team-data {
    margin-top: auto;
    margin-bottom: auto;
    margin-left: 0; /* Remove fixed margin */
    flex-grow: 1; /* Allow data to take remaining space */
}

.index-career-team-name, .index-voice-role-for h3 {
    text-align: left;
    font-size: 1.1rem; /* Adjust font size */
}

.index-career-team-info, .index-voice-role-name {
    text-align: left;
    font-size: 0.8rem; /* Adjust font size */
}

.index-voice-role {
    display: flex;
    align-items: center; /* Vertically align items */
    width: 100%; /* Full width */
    min-height: 50px; /* Minimum height */
}

.index-voice-role-wrapper {
    margin-top: auto;
    margin-bottom: auto;
    margin-left: 0; /* Remove fixed margin */
    flex-grow: 1; /* Allow wrapper to take remaining space */
}

.index-voice-role-for i { /* Style for icons in links */
    margin-right: 0.5rem;
}

#imprint {
    font-size: 0.875rem; /* Adjusted font size */
    color: #363636;
    padding: 1rem; /* Add padding for better touch target */
    display: block; /* Make it a block for better spacing */
}

/* Media Queries for Responsiveness */

/* For tablets and smaller desktops */
@media (max-width: 992px) {
    .index-panels {
        flex-direction: column; /* Stack panels vertically */
        align-items: center; /* Center panels */
    }

    .index-panel {
        width: 80%; /* Panels take more width when stacked */
        max-width: 500px; /* Max width for stacked panels */
        margin-bottom: 2rem; /* Add more space between stacked panels */
    }

    .index-kasukedo {
        width: 25%;
        max-width: 120px;
        bottom: -15px;
    }

    h1 { font-size: 2.2rem; }
    h2 { font-size: 1.8rem; }
    h3 { font-size: 1.3rem; }
    p, a { font-size: 0.95rem; }
}

/* For mobile phones */
@media (max-width: 576px) {
    .index-background {
        width: 100%; /* Full width on small screens */
        box-shadow: none; /* Optional: remove shadow on mobile */
    }

    .index-panel {
        width: 95%; /* Panels take almost full width */
        min-height: auto; /* Allow height to shrink more */
    }
    
    .index-kasukedo {
        width: 35%;
        max-width: 100px;
        bottom: -10px;
    }
    
    .index-banner {
        max-height: 200px;
    }

    .index-music-current {
        flex-direction: column; /* Stack cover and title */
        align-items: flex-start; /* Align to start */
    }

    .index-music-current-cover {
        margin-bottom: 0.5rem; /* Space below cover when stacked */
    }
    
    .index-music-current-links a {
        font-size: 1.2rem; /* Slightly smaller icons for mobile */
    }

    h1 { font-size: 1.8rem; }
    h2 { font-size: 1.5rem; }
    h3 { font-size: 1.2rem; }
    p, a { font-size: 0.9rem; }

    .index-career-team-info, .index-voice-role-name {
        font-size: 0.75rem;
    }

    #imprint {
        font-size: 0.8rem;
    }
}