body {
    font-family: "Rubik", sans-serif;
    color: #071739;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background: url(imgs/bg1.jpg);
}

body h1 {
    font-size: 36px;
    margin-bottom: 0;
}

body .card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-width: 371px;
    padding: 0 5px;
    margin-top: 40px;
    border-radius: 20px;
    color: #b3cde0;
    font-weight: 100;
    box-shadow: 0px 0px 70px 0px #274684;
    background: #011f4b;
    overflow: hidden;
}

body .card .current-song {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 20px 0px;
    border-radius: 20px;
    color: #011f4b;
    background: #b3cde0;
}

body .card .current-song audio {
    display: none;
}

body .card .current-song .img-wrap {
    position: relative;
    margin: 0 auto;
    width: 270px;
    height: 200px;
    overflow: hidden;
    border-radius: 20px;
    box-shadow: 0px 10px 40px 0px rgba(39, 70, 132, 0.7);
}

body .card .current-song .img-wrap img {
    width: auto;
    height: 100%;
}

body .card .current-song .song-name {
    margin-top: 30px;
    font-size: 22px;
}

body .card .current-song .song-autor {
    color: #03396c;
}

body .card .current-song .time {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    width: 240px;
}

body .card .current-song #timeline {
    position: relative;
    margin: 0 auto;
    width: 240px;
    height: 5px;
    background: #03396c;
    border-radius: 5px;
    cursor: pointer;
}

body .card .current-song #timeline:hover .hover-playhead {
    opacity: 1;
}

body .card .current-song #timeline:hover .hover-playhead::before {
    opacity: 1;
}

body .card .current-song #timeline:hover .hover-playhead::after {
    opacity: 1;
}

body .card .current-song #timeline #playhead {
    position: relative;
    z-index: 2;
    width: 0;
    height: 5px;
    border-radius: 5px;
    background: #011f4b;
}

body .card .current-song #timeline .hover-playhead {
    position: absolute;
    z-index: 1;
    top: 0;
    width: 0;
    height: 5px;
    opacity: 0;
    border-radius: 5px;
    background: #274684;
    transition: opacity 0.3s;
}

body .card .current-song #timeline .hover-playhead::before {
    opacity: 0;
    content: attr(data-content);
    display: block;
    position: absolute;
    top: -30px;
    right: -23px;
    width: 40px;
    padding: 3px;
    text-align: center;
    color: white;
    background: #274684;
    border-radius: calc(20px - 12px);
}

body .card .current-song #timeline .hover-playhead::after {
    opacity: 0;
    content: "";
    display: block;
    position: absolute;
    top: -8px;
    right: -8px;
    border-top: 8px solid #274684;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
}

body .card .current-song .controls {
    margin-top: 10px;
}

body .card .current-song .controls button {
    color: #071739;
    border-radius: 50%;
    margin: 15px;
    font-size: 18px;
    text-align: center;
    transition: 0.2s;
    cursor: pointer;
    border: none;
    background: 0;
}

body .card .current-song .controls button:focus {
    outline: none;
}

body .card .current-song .controls button.play {
    width: 50px;
    height: 50px;
    border: 1px solid #e2e2e2;
}

body .card .current-song .controls button.play:hover {
    left: 0;
    box-shadow: 0px 0px 15px 0px rgba(39, 70, 132, 0.7);
}

body .card .current-song .controls button.play .fa-play {
    transform: translateX(2px);
}

body .card .current-song .controls button.prev-next {
    width: 35px;
    height: 35px;
}

body .card .current-song .controls button.prev-next:hover {
    transform: scale(1.2);
}

body .card .play-list {
    display: flex;
    flex-direction: column;
    padding: 10px;
    height: 180px;
    overflow-y: scroll;
}

body .card .play-list .track {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    border-radius: calc(20px - 10px);
    border: 1px solid transparent;
    transition: 0.3s;
    cursor: pointer;
}

body .card .play-list .track:hover {
    background: #274684;
    border-color: #274684;
    position: relative;
}

body .card .play-list .track.current-audio {
    background: #274684;
    box-shadow: 0px 0px 15px 0px #274684;
}

body .card .play-list .track.play-now {
    background: #274684;
    box-shadow: 0px 0px 15px 0px #274684;
    position: relative;
}

body .card .play-list .track.play-now:after {
    content: "";
    display: block;
    position: absolute;
    left: 17px;
    width: 57px;
    height: 57px;
    border-radius: calc(20px - 10px);
    font-size: 16px;
    -webkit-animation: play 2s linear infinite;
    animation: play 2s linear infinite;
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='iso-8859-1'%3F%3E%3C!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 56 56' style='enable-background:new 0 0 56 56;' xml:space='preserve'%3E%3Cpath style='fill:%23071739;' d='M47.799,8.201c-10.935-10.935-28.663-10.935-39.598,0c-10.935,10.935-10.935,28.663,0,39.598 c10.935,10.935,28.663,10.935,39.598,0C58.734,36.864,58.734,19.136,47.799,8.201z M32.95,32.95c-2.734,2.734-7.166,2.734-9.899,0 c-2.734-2.734-2.734-7.166,0-9.899s7.166-2.734,9.899,0S35.683,30.216,32.95,32.95z'/%3E%3Cpath style='fill:%23E7ECED;' d='M35.778,20.222c-4.296-4.296-11.261-4.296-15.556,0c-4.296,4.296-4.296,11.261,0,15.556 c4.296,4.296,11.261,4.296,15.556,0C40.074,31.482,40.074,24.518,35.778,20.222z M30.121,30.121c-1.172,1.172-3.071,1.172-4.243,0 s-1.172-3.071,0-4.243s3.071-1.172,4.243,0S31.293,28.95,30.121,30.121z'/%3E%3Cg%3E%3Cpath style='fill:%23709fdc;' d='M35.778,35.778c-0.76,0.76-1.607,1.378-2.504,1.87l8.157,14.92c2.284-1.25,4.434-2.835,6.368-4.769 c1.934-1.934,3.519-4.084,4.769-6.368l-14.92-8.157C37.157,34.172,36.538,35.018,35.778,35.778z'/%3E%3Cpath style='fill:%23709fdc;' d='M20.222,20.222c0.76-0.76,1.607-1.378,2.504-1.87l-8.157-14.92c-2.284,1.25-4.434,2.835-6.368,4.769 s-3.519,4.084-4.769,6.368l14.92,8.157C18.843,21.828,19.462,20.982,20.222,20.222z'/%3E%3C/g%3E%3C/svg%3E");
}

body .card .play-list .track.play-now .track-img {
    filter: opacity(70%);
}

body .card .play-list .track .track-img {
    width: 90px;
    border-radius: calc(20px - 10px);
}

body .card .play-list .track .track-discr {
    margin-left: 15px;
    display: flex;
    flex-direction: column;
    min-width: 190px;
}

body .card .play-list .track .track-discr .track-name {
    font-size: 17px;
    margin-top: 8px;
}

body .card .play-list .track .track-discr .track-author {
    margin-top: 8px;
    font-weight: 300;
    color: #709fdc;
}

body .card .play-list .track .track-duration {
    min-width: 40px;
    margin-left: 10px;
    margin-right: 10px;
    font-weight: 500;
}

.play-list::-webkit-scrollbar {
    width: 5px;
}

.play-list::-webkit-scrollbar-thumb {
    background: #fff;
    border-radius: 5px;
}

.play-list::-webkit-scrollbar-track {
    background: #071739;
}

@-webkit-keyframes play {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes play {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}