.audio-player {
    background: radial-gradient(circle, #000000, #706f6f);
    height: 550px;
    width: 90%;
    max-width: 750px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 45px; /* Increased space at the top */
    margin: 0% auto;
    position: relative;
    clip-path: polygon(5px 0, calc(100% - 8px) 0, 100% 100%, 0 100%); /* Adjusted all corners */
}

.album-cover {
    width: 240px;
    height: 240px; /* Set both width and height to ensure it's a square */
    background-image: url("https://pedrogalindo.info/wp-content/uploads/2024/04/groundbreaking-further-500x500-100.jpg");
    background-size: cover;
    background-position: center;
    margin-bottom: 25px;
}

body {
    font-family: novecento-sans-condensed, houschka-pro, sans-serif;
}

.song-title {
    font-family: houschka-pro, sans-serif;
    font-weight: 600;
    font-style: normal;
    color: #f2f2f2;
    font-size: 22px;
    margin-top: 12px;
    margin-bottom: 20px;
}

.timeline {
    background-color: white;
    height: 1px;
    width: 80%;
    position: relative;
    border-radius: 50px; /* Round edges for the timeline */
}

.audio-player audio {
    /* Hide the default controls */
    width: 100%;
    opacity: 0;
}

.progress {
    position: absolute;
    left: 0; /* Align with the left edge of the timeline */
    top: 50%; /* Align vertically */
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background-color: #56b366;
    margin-left: 8%;
    border-radius: 50%;
    cursor: pointer;
    z-index: 1; /* Ensure the circle is above the line */
}

.timeline-container {
    display: flex;
    width: 100%;
    padding: 0;
    position: relative;
    justify-content: center;
    margin: 20px 20px 20px; /* Adjusted margin to create space below the song title */
    align-items: center; /* Align items vertically */
}

.timeline::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0; /* Ensure the line starts from the left edge of the timeline */
    transform: translateY(-50%);
    width: var(--progress-width, 0%);
    height: 8px;
    background-color: #56b366;
    z-index: 0;
    transition: width 0.1s ease;
    border-radius: 50px;
}

.time {
    font-family: novecento-sans-condensed, sans-serif;
    font-weight: 200;
    font-style: normal;
    font-size: 22px;
    color: white;
    margin-top: 15px; /* Adjusted margin to create space between timeline and time display */
    margin-bottom: 20px;
}

.rewind-btn,
.play-btn,
.pause-btn,
.fast-forward-btn,
.next-btn,
.previous-btn {
    background: none;
    border: none;
    padding: 0;
    width: 36px;
    height: 36px;
    cursor: pointer;
    margin: 1%; /* Adjusted margin to create space between buttons and timeline */
    margin-top: auto;
}

.buttons-container {
    display: flex;
    width: 78%;
    height: 12%;
    justify-content: space-between; /* Distribute buttons evenly */
    align-items: center;
}

.play-btn {
    background-image: url("images/pg-play-white.png");
    background-repeat: no-repeat;
    background-size: cover;
}

.pause-btn {
    background-image: url("images/pg-pause-white.png");
    background-repeat: no-repeat;
    background-size: cover;
    display: none;
}

.rewind-btn {
    background-image: url("images/pg-rew-white.png");
    background-repeat: no-repeat;
    background-size: cover;
}

.fast-forward-btn {
    background-image: url("images/pg-ff-white.png");
    background-repeat: no-repeat;
    background-size: cover;
}

.previous-btn {
    background-image: url("images/pg-previous-white.png");
    background-repeat: no-repeat;
    background-size: cover;
}

.next-btn {
    background-image: url("images/pg-next-white.png");
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0.3;
}

.play-btn:hover {
    background-image: url("images/pg-play-green.png");
}

.pause-btn:hover {
    background-image: url("images/pg-pause-green.png");
}

.rewind-btn:hover {
    background-image: url("images/pg-rew-green.png");
}

.fast-forward-btn:hover {
    background-image: url("images/pg-ff-green.png");
}

.previous-btn:hover {
    background-image: url("images/pg-previous-green.png");
}