@import url('https://fonts.googleapis.com/css2?family=Amaranth&family=Mukta:wght@300&family=Pattaya&family=Roboto:wght@300&family=Source+Sans+Pro:wght@300&family=Squada+One&display=swap');

.song-name, .button-for-song h1 {
    font-family: 'Amaranth', sans-serif;
}
.song-makers, .song-current-time, .song-duration, .button-for-song {
    font-family: 'Roboto', sans-serif;
    font-weight:bold;
    letter-spacing:0.5px;
}

.bg-video {
    min-width:100%;
    min-height:100%;
    position:fixed;
    top:0;
    left:0;
    opacity:0.3;
    z-index:-1;
}

.main-container {
    display:flex;
    height:90vh;
    min-height:13cm;
}

.container {
    display:flex;
    flex-wrap:wrap;
    align-content:space-between;
    width:65%;
    height:90%;
    transition:all 250ms;
}
    .song-info {
        display:flex;
        flex-wrap:wrap;
        width:100%;
    }
        .thumbnail-cnt {
            padding:5% 0 0 5%;
            width:100%;
        }
            .thumbnail {
                width:25%;
                border-radius:50%;
                animation:disk 10s linear infinite;
                transition:all 250ms;
            }
        .song-details {
            padding:0 0 0 8%;
            width:100%;
        }
            .song-name {
                font-size:2rem;
            }
    .song-manager {
        display:flex;
        align-items:center;
        width:100%;
    }
        .song-controls {
            width:100%;
        }
            .song-time-cnt {
                display:flex;
                justify-content:center;
                align-items:center;
            }
                .song-current-time {
                    padding:10px;
                    width:1cm;
                    text-align:right;
                }
                .time-slider-cnt {
                    padding:10px;
                    width:calc(100% - 3cm);
                }
                    .time-slider {
                        width:100%;
                        -webkit-appearance:none;
                        outline:none;
                        border:none;
                    }
                    .time-slider::-webkit-slider-runnable-track {
                        background-color:#ccc;
                        height:8px;
                        transition:all 250ms;
                    }
                        .time-slider::-webkit-slider-runnable-track:hover {
                            background-color:#c1c1c1;
                            cursor:pointer;
                        }
                    .time-slider::-webkit-slider-thumb {
                        margin-top:-6px;
                        background-color:#000;
                        width:6px;
                        height:20px;
                        -webkit-appearance:none;
                    }
                .song-duration {
                    padding:10px;
                    width:1cm;
                    text-align:left;
                }
        .song-actions-cnt {
            display:flex;
            flex-wrap:nowrap;
            justify-content:center;
            align-items:center;
            padding:15px;
        }
            .song-actions {
                margin:0 10px;
                background:none;
                -webkit-tap-highlight-color:transparent;
                -moz-tap-highlight-color:transparent;
                -o-tap-highlight-color:transparent;
                outline:none;
                border:none;
                border-radius:5px;
                transition:all 200ms;
            }
            .song-actions:nth-child(1), .song-actions:nth-child(5) {
                font-size:25px;
            }
            .song-actions:nth-child(2), .song-actions:nth-child(4) {
                font-size:35px;
            }
            .song-actions:nth-child(3) {
                font-size:60px;
            }
            .song-actions:nth-child(5) {
                display:none;
            }

.anm-paused {
    -webkit-animation-play-state:paused !important; 
    -moz-animation-play-state:paused !important; 
    -o-animation-play-state:paused !important;
    animation-play-state:paused !important;
}

@keyframes disk {
    0% {
        transform:rotate(0deg);
    }
    100% {
        transform:rotate(360deg);
    }
}

.songs-list {
    padding:10px;
    background:none;
    width:35%;
    max-height:100%;
    overflow:auto;
    border-radius:10px;
    transform-origin:right;
    transition:all 250ms;
}
    .button-for-song {
        padding:10px;
        padding-top:0;
        margin-bottom:10px;
        background-color:#f1f1f14d;
        width:100%;
        text-align:left;
        -webkit-tap-highlight-color:transparent;
        -moz-tap-highlight-color:transparent;
        -o-tap-highlight-color:transparent;
        outline:none;
        border:none;
        border-radius:10px;
        transition:all 250ms;
    }
        .button-for-song:hover {
            background-color:#e2e2e2a9;
        }
        .active-color {
            background-color:rgba(0, 0, 0, 0.623) !important;
            color:#fff;
        }

.songs-list::scrollbar {height:0; width:10px;}
.songs-list::scrollbar-track {opacity:0;}
.songs-list::scrollbar-thumb {background:rgb(197, 197, 197); outline:none; border:none; border-radius:10px;}

.songs-list::-webkit-scrollbar {height:0; width:10px;}
.songs-list::-webkit-scrollbar-track {opacity:0;}
.songs-list::-webkit-scrollbar-thumb {background:rgb(197, 197, 197); outline:none; border:none; border-radius:10px;}

.songs-list::-moz-scrollbar {height:0; width:10px;}
.songs-list::-moz-scrollbar-track {opacity:0;}
.songs-list::-moz-scrollbar-thumb {background:rgb(197, 197, 197); outline:none; border:none; border-radius:10px;}

.songs-list::-o-scrollbar {height:0; width:10px;}
.songs-list::-o-scrollbar-track {opacity:0;}
.songs-list::-o-scrollbar-thumb {background:rgb(197, 197, 197); outline:none; border:none; border-radius:10px;}

.songs-list::scrollbar-thumb:hover {background:rgb(158, 158, 158);}
.songs-list::-webkit-scrollbar-thumb:hover {background:rgb(158, 158, 158);}
.songs-list::-moz-scrollbar-thumb:hover {background:rgb(158, 158, 158);}
.songs-list::-o-scrollbar-thumb:hover {background:rgb(158, 158, 158);}

@media only screen and (max-width:1000px) {
            .thumbnail {
                width:35%;
            }
}

@media only screen and (max-width:22cm) {
.main-container {
    min-height:15cm;
}

.container {
    width:100%;
}
            .thumbnail {
                width:25%;
            }
            .song-name {
                font-size:2rem;
            }
            .song-actions:nth-child(5) {
                display:block;
            }

.songs-list {
    display:none;
    width:50%;
    max-height:calc(100vh - 165px);
    position:fixed;
    top:2vh;
    right:2vh;
    z-index:2;
}
    .button-for-song {
        background-color:#f1f1f1e0;
    }
        .active-color {
            background-color:rgba(0, 0, 0, 0.801) !important;
        }
}

@media only screen and (max-width:700px) {
            .thumbnail {
                width:32%;
            }
}

@media only screen and (max-width:15cm) {
            .thumbnail {
                width:40%;
            }

.songs-list {
    width:60%;
}
}

@media only screen and (max-width:12cm) {
.main-container {
    min-height:13.5cm;
}

            .thumbnail {
                width:50%;
            }
}

@media only screen and (max-width:10cm) {
.main-container {
    min-height:11cm;
}

            .thumbnail {
                width:60%;
            }
        .song-actions-cnt {
            justify-content:space-evenly;
            padding:0;
        }
            .song-actions {
                margin:0;
            }
            .song-actions:nth-child(1), .song-actions:nth-child(5) {
                font-size:15px;
            }
            .song-actions:nth-child(2), .song-actions:nth-child(4) {
                font-size:25px;
            }
            .song-actions:nth-child(3) {
                font-size:40px;
            }

.songs-list {
    width:80%;
    max-height:calc(100vh - 115px);
}
}