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 rain-container to be centered and responsive */
#rain-container {
    width: 100vw; /* 100% of the viewport width */
    height: 100vh; /* 100% of the viewport height */
    max-width: 1920px; /* Maximum width */
    max-height: 1080px; /* Maximum height */
    background-color: #333; /* Dark gray background */
    margin-bottom: 20px; /* Space between the container and the controls */
    position: relative;
}

/* This places the play button and the progress bar on the same line */
.player-center {
    display: flex;
    width: 80vw; /* Match the width of the rain-container */
    max-width: 800px; /* Maximum width to match the rain-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 */
}

/* You can try to style the controls further, but it might not work in all browsers */
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 */
}