body {
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
    letter-spacing: -0.5px;
}
button {
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    outline: none;
    width: 100px;
    height: 40px;
    /*float: left;*/



}

.container {
    display: flex;
    justify-content: center;
    align-items: center;

}

.centered {
    display: flex;
    justify-content: center;
    align-items: center;

}

/* Add the following rule to style the play.png image */
.centered img {
    display: block; /* Ensure the image is treated as a block element */
    margin: auto; /* Center the image horizontally within the button */

}


#audio-player-container {
    /*--seek-before-width: 0%;*/
    /*--volume-before-width: 100%;*/
    /*--buffered-width: 0%;*/

    /*margin: 100px 2.5% auto 2.5%;*/

    position: relative;
    width: 95%;
    max-width: 500px;
    height: 132px;
    background: #fff;
}
#audio-player-container::before {
    position: absolute;
    content: '';
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    left: -2px;
    top: -2px;
    background: linear-gradient(to left, #007db5, #ff8a00);
    z-index: -1;

}
p {
    position: absolute;
    top: -18px;
    right: 5%;
    padding: 0 5px;
    margin: 0;
    font-size: 28px;
    background: #fff;



}
#play-icon {
    margin: 20px 2.5% 10px 2.5%;




}