<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-height: 100vh;
    margin: 0;
    padding-top: 0vh; /* This pushes the content down from the top */
    background-color: #f0f0f0;
}

/* This styles the wave-container to be centered and responsive */
#wave-container {
    width: 100vw; /* 100% of the viewpoint width */
    height: 100vh; /* 100% of the viewpoint height */
    max-width: 1920px; /*Maximum wiidth */
    max-height: 1080px; /*Maximum height */
    background-color: #333; /* Dark gray background */
    margin-bottom: 20px; /* Space between the container and the controls */
    position: relative;
}

/* This is places the play button and the progress bar on the same line */
.player-center {
    display: flex;
    width: 80vw; /* Match the width of the wave-container */
    max-width: 800px; /* Maximum width to match the wave-container */
    align-items: center;
    position: absolute;
    top: 600px;
}

audio {
    width: 100%; /* Stretch audio controls to fill the container */
    opacity: 0.8; /* 80% opacity */
    /* You might need additional vendor prefixes for the below property */
    background: transparent; /* Attempt to make the background of the controls transparent */
}

audio::-webkit-media-controls-panel {
        background-color: rgba(
            255,
            255,
            255,
            0.8
        ); /* Semi-transparent background for webkit browsers */
    /* other styles */
}

audio::-moz-focus-inner {
        border: 0; /* Remove inner border in Firefox */
}</pre></body></html>