html, body {
    padding: 0;
    margin: 0;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

button, .playPauseBtn {
    font-family: Arial, sans-serif;
    font-size: 20px; /* Set a uniform font size */
    padding: 10px 20px; /* Uniform padding for all buttons */
    background-color: #28a745; /* Set the same background color */
    color: white; /* White text color for all buttons */
    border: none;
    cursor: pointer;
    border-radius: 5px; /* Rounded corners for all buttons */
    margin: 5px; /* Add some margin for spacing */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2); /* Consistent shadow */
}

#controlBtns {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start; /* Align buttons to the left */
    align-items: top;
    position: absolute;
    top: 1%; /* Move buttons to the top */
    //bottom: 5%; /* Position at the bottom */
    width: 100%;
    height: 5%;
}

@media (max-width: 600px) {
    button, .playPauseBtn {
        width: 80%; /* Full width on smaller screens */
        margin: 10px 0; /* Adjust margin for mobile */
    }
}