@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&family=Roboto+Slab:wght@100..900&display=swap');

:root {
    --background-color: #fff;
    --text-color: #000;
    --link-color: #000; /* Default link color */
    --link-background-color: #fff; /* Default link background color */
}

body {
    background-color: var(--background-color);
    color: var(--text-color);
}

.list-group-item {
    background-color: var(--link-background-color);
    color: var(--link-color);
}

@media (prefers-color-scheme: dark) {
    :root {
        --background-color: #121212;
        --text-color: #ffffff;
        --link-color: #b0b0b0; /* Grey color for links in dark mode */
        --link-background-color: #121212; /* Background color for links in dark mode */
    }
}

.dark-mode {
    --background-color: #121212;
    --text-color: #ffffff;
    --link-color: #ffffff; /* Grey color for links in dark mode */
    --link-background-color: rgb(70, 70, 70); /* Background color for links in dark mode */
}

.audio-player {
    width: 75%;
    margin: 0 auto;
}

audio {
    width: 100%;
}

#subtitle-box {
    background-color: rgb(43, 50, 61);
    border: 1px solid #ccc;
    border-radius: 10px;
    padding: 10px;
    margin-top: 10px;
    min-height: 75px;
    width: 100%;
    box-sizing: border-box;
    color: white;
    font-family: "Merriweather", serif;
    font-weight: 700;
    font-size: 22px;
    
 /* Flexbox properties for centering */
display: flex;
justify-content: center;
align-items: center;

/* In case of multi-line text */
text-align: center;
}

.audio-container {
    text-align: center;
    margin: 0 auto;
    width: 75%;
}

.audio-top {
    display: flex;
    align-items: center; /* Center items vertically */
    justify-content: center;
    margin-bottom: 20px;
}

.audio-image {
    max-width: 15%;
    margin-right: 30px;
}

.audio-player {
    width: 100%; /* Ensure the audio player takes up the full width */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

header h2 {
    margin-bottom: 5px;
    text-align: left;
}

header h4.trackNum {
    margin-bottom: 10px;
    text-align: left;
    font-weight: 500;
    font-style: italic;
}

#audio {
    width: 100%; /* Ensure the audio element takes up the full width */
}

#subtitle-box {
    width: 100%;
}

.audio-controls {
    margin-top: 10px;
    display: flex;
    justify-content: center; /* Center the buttons horizontally */
}

.control-button {
    padding: 10px 20px;
    margin: 5px;
    border-radius: 10px;
    border: none;
    background-color: #009959;
    color: white;
    cursor: pointer;
    width: 150px; /* Set a fixed width for the buttons */
    text-align: center; /* Center the text inside the buttons */
}

.control-button.disabled {
    background-color: #cccccc;
    border-radius: 10px;
    cursor: not-allowed;
}


/* Media query for smaller screens */
@media screen and (max-width: 768px) {
    .audio-container {
        width: 100%;
    }

    .audio-top {
        flex-direction: column;
        align-items: center;
    }

    .audio-image {
        max-width: 50%;
        margin-right: 0;
        margin-bottom: 20px;
    }

    .audio-player {
        width: 90%;
        align-items: center;
    }

    header h2 {
        text-align: center;
    }

    header h4.trackNum {
        text-align: center;
    }

    #audio {
        margin-top: 10px;
    }

    #subtitle-box {
        font-size: 18px;
        min-height: 60px;
        width: 90%;
        margin: 0 auto; /* Center align the subtitle box */
    }

    .control-button {
        width: 44%; /* Make buttons full width on smaller screens */
    }
    
}

/* Rotation animation */
@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.rotate {
    animation: rotate 10s linear infinite;
    animation-play-state: paused; /* Start with the animation paused */
}