@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;500;600&display=swap");

:root {
    --album-cover-width : 200px;
}

* {
    margin      : 0;
    padding     : 0;
    color       : white;
    font-family : "Nunito", sans-serif;
    user-select : none;
}

body {
    width           : 100vw;
    height          : 100vh;
    display         : flex;
    flex-direction  : column;
    align-items     : center;
    justify-content : center;
    background      : url(../assets/background.jpg) 200vw no-repeat;
    backdrop-filter : blur(10px);
    animation       : 60s linear alternate infinite background-sliding;
}

.album-covers-wrapper {
    width          : 90%;
    padding-bottom : 6em;
}

.swiper-slide {
    width        : var(--album-cover-width);
    aspect-ratio : 1 / 1;
}

.swiper-slide > img {
    width         : 100%;
    height        : 100%;
    border-radius : 10%;
}

.player-wrapper {
    display        : flex;
    flex-direction : column;
    align-items    : center;
}

.song-title, .author-name {
    width       : 100%;
    text-align  : center;
    user-select : text;
}

.song-progress-wrapper {
    margin-block-start : 2em;
    width              : 100%;
}

#song-progress {
    appearance    : none;
    width         : 100%;
    height        : 7px;
    background    : rgba(163, 162, 164, 0.4);
    border-radius : 4px;
    cursor        : pointer;
}

.song-time-wrapper {
    width           : 100%;
    display         : flex;
    justify-content : space-between;
    margin-block    : 0.5em 1em;
}

.remaining-song-time, .overall-song-duration {
    color          : rgba(128, 128, 128, 1);
    font-size      : 90%;
    padding-inline : 0.5em;
}

.remaining-song-time:hover {
    cursor : pointer;
    color  : rgba(128, 128, 128, 0.5);
}

.player-buttons {
    display         : flex;
    flex-direction  : row;
    justify-content : center;
}

.prev-song, .pause-play-btn, .next-song {
    display          : flex;
    justify-content  : center;
    align-items      : center;
    background-color : rgba(50, 50, 50, 0.6);
    box-sizing       : border-box;
    font-size        : 1.3rem;
    height           : 2.5em;
    width            : 2.5em;
    border           : 1px solid #666;
    border-radius    : 50%;
    margin-inline    : 1em;
}

.pause-play-btn {
    transform : scale(1.3);
}

:is(.prev-song, .pause-play-btn, .next-song):hover {
    background-color : #666;
    cursor           : pointer;
    transition       : 200ms scale;
    scale            : 0.95;
}

@keyframes background-sliding {
    0% {
        background-position : 0;
    }
    100% {
        background-position : 100%;
    }
}