style.min.css

.backbutton,a{text-decoration:none}root{--volumeTrack:0%;--currentPicture:url(https://images4.alphacoders.com/507/thumb-1920-5078.jpg)}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{box-shadow:inset 0 0 5px transparent;border-radius:0}::-webkit-scrollbar-thumb{background:grey;border-radius:10px}::-webkit-scrollbar-thumb:hover{background:#2f4f4f}a,html{font-size:1em}body{font-family:'Libre Baskerville',serif;font-weight:400;line-height:1.45;color:#333;margin:auto;background:url(assets/background.png) center center no-repeat fixed;background-size:cover;width:100%;height:100%}p{margin-bottom:1.3em}h1,h2,h3,h4{margin:1.414em 0 .5em;font-weight:inherit;line-height:1.2}h1{margin-top:0;font-size:5.063em}h2{font-size:3.375em}h3{font-size:2.25em}h4{font-size:1.5em}.font_small,small{font-size:.667em}.container{width:60vmin;margin:auto;padding:5vmin}.setlist{display:grid;grid-template-rows:14vmin 76vmin;grid-template-areas:"top" "bot";grid-template-columns:1fr;background-color:#eeeff5;border-radius:1em;margin:auto}.setlistTop{display:grid;grid-area:top;grid-template-columns:1fr 5fr 1fr;grid-template-areas:"back nameOfPlaylist currenttime"}.player,.top{grid-template-columns:1fr}.setlistTop>.back{grid-area:back;display:flex;justify-content:center;align-items:center;color:#000}.setlistTop>.nameOfPlaylist{grid-area:nameOfPlaylist;display:flex;justify-content:center;align-items:center;font-size:1.4em}.setlistTop>.currenttime{grid-area:currenttime;display:flex;justify-content:flex-start;align-items:center;color:#2f4f4f;font-size:.8em}.setlistBot{overflow-y:scroll;overflow-x:hidden;border:1em solid transparent}.setlistBot>#listOut{padding:1em}.setlistBot>#listOut:first-child{padding-top:0}.setlistBot>#listOut:last-child{padding-bottom:0}.setlistBot>#listOut>div{display:grid}.setlistBot>#listOut>div>div.artist{color:#2f4f4f;font-size:.8em;border-top:grey 1px solid;padding:1em 0 0}.container>.setlist>.playlist>li:first-child,.setlistBot>#listOut>div>div:first-child,.setlistBot>#listOut>div>div:last-child{border-top:transparent 1px solid}.setlistBot>#listOut>div>div.artist>span.maxtime{display:inline-block}.setlistBot>#listOut>div>div.title{display:flex;justify-items:flex-start;align-items:flex-start;color:#000;font-size:1.2em;padding:0 0 1em}.setlistBot>#listOut>div>div.title>span{margin:0 auto auto 0;display:flex;justify-items:flex-start;align-items:flex-start}.bot,.mid,.player,.top{display:grid}.backbutton{background:0 0;color:#fff;color:inherit}.container>.setlist>.playlist{list-style:none;margin:auto}.container>.setlist>.playlist>li:last-child{border-bottom:transparent 1px solid}.container>.setlist>.playlist>li{border-top:1px solid #000}.player{grid-template-areas:"top" "mid" "bot";grid-template-rows:62vmin 1vmin 27vmin;margin:auto}.top{grid-area:top;grid-template-rows:.4fr 1fr .4fr;grid-template-areas:"navigation" "pic" "name";background:url(https://images4.alphacoders.com/507/thumb-1920-5078.jpg) center center no-repeat fixed;background-size:cover;border-radius:1em 1em 0 0}.mid{background-color:#fff;grid-area:mid;grid-template-columns:repeat(1,1fr);grid-template-rows:repeat(1,1fr);grid-template-areas:"volume";z-index:1}.mid>#valBox{font-size:8px;color:grey;padding:1em;transition:visibility 0s,opacity .8s linear}.bot{grid-area:bot;grid-template-areas:"share . back play forth . fav";background-color:#eeeff5;border-radius:0 0 1em 1em}.player>.top>.navigation{display:grid;grid-area:navigation;grid-template-columns:repeat(7,1fr);grid-template-areas:". . loop shuffle repeat . menu";background-color:rgba(0,0,0,.4);border-radius:1em 1em 0 0}.player>.top>.navigation>.repeat{grid-area:repeat;margin:1em;display:flex;justify-content:flex-start;align-items:center}.player>.top>.navigation>.shuffle{grid-area:shuffle;margin:1em;display:flex;justify-content:center;align-items:center}.player>.top>.navigation>.loop{grid-area:loop;margin:1em;display:flex;justify-content:flex-end;align-items:center}.player>.top>.navigation>.menu{grid-area:menu;margin:1em;display:flex;justify-content:center;align-items:center}.player>.top>.pic{grid-area:pic}.player>.top>.name{grid-area:name;background-color:rgba(0,0,0,.4);color:#fff;display:grid;grid-template-rows:repeat(2,1fr)}.player>.top>.name>#title{display:flex;justify-content:center;align-items:center;font-size:18px;margin:auto}.player>.top>.name>#artist{display:flex;justify-content:center;align-items:flex-start;font-size:12px;margin:auto}.player>.mid>input[type=range].volume{-webkit-appearance:none;width:100%;margin:auto}.player>.mid>input[type=range].volume:focus{outline:0}.player>.mid>input[type=range].volume::-webkit-slider-runnable-track{width:var(--volumeTrack);height:1em;cursor:pointer;background:#fff;border-radius:0;border:0 solid #010101}.player>.mid>input[type=range].volume::-webkit-slider-thumb{box-shadow:0 0 10px rgba(0,0,0,.6),0 0 0 rgba(13,13,13,.6);border:10px solid #fff;height:22px;width:22px;border-radius:50px;background:#fff;cursor:pointer;-webkit-appearance:none;margin-top:-5px}.player>.mid>input[type=range].volume:focus::-webkit-slider-runnable-track{background:#fff}.player>.mid>input[type=range].volume::-moz-range-track{width:100%;height:12px;cursor:pointer;box-shadow:1.9px 1.9px 0 rgba(0,0,0,.21),0 0 1.9px rgba(13,13,13,.21);background:#fff;border-radius:0;border:0 solid #010101}.player>.mid>input[type=range].volume::-moz-range-thumb{box-shadow:0 0 10px rgba(0,0,0,.6),0 0 0 rgba(13,13,13,.6);border:10px solid #fff;height:22px;width:22px;border-radius:50px;background:#fff;cursor:pointer}.player>.mid>input[type=range].volume::-ms-track{width:100%;height:12px;cursor:pointer;background:0 0;border-color:transparent;color:transparent}.player>.mid>input[type=range].volume::-ms-fill-lower{background:#fff;border:0 solid #010101;border-radius:0;box-shadow:1.9px 1.9px 0 rgba(0,0,0,.21),0 0 1.9px rgba(13,13,13,.21)}.player>.mid>input[type=range].volume::-ms-fill-upper{background:#fff;border:0 solid #010101;border-radius:0;box-shadow:1.9px 1.9px 0 rgba(0,0,0,.21),0 0 1.9px rgba(13,13,13,.21)}.player>.mid>input[type=range].volume::-ms-thumb{box-shadow:0 0 10px rgba(0,0,0,.6),0 0 0 rgba(13,13,13,.6);border:10px solid #fff;width:22px;border-radius:50px;background:#fff;cursor:pointer;height:12px}.player>.mid>input[type=range].volume:focus::-ms-fill-lower{background:#fff}.player>.mid>input[type=range].volume:focus::-ms-fill-upper{background:#fff}.player>.bot>.share{grid-area:share;display:flex;justify-content:center;align-items:center}.player>.bot>.back{grid-area:back;display:flex;justify-content:flex-end;align-items:center}.player>.bot>.play{grid-area:play;display:flex;justify-content:center;align-items:center}.player>.bot>.forth{grid-area:forth;display:flex;justify-content:flex-start;align-items:center}.player>.bot>.fav{grid-area:fav;display:flex;justify-content:flex-start;align-items:center}.fas{border-radius:1em;text-align:center;padding:.5em;color:#fff}.fa-pause,.fa-play,.fa-step-backward,.fa-step-forward{border:1px solid rgba(255,255,255,0);background-color:#60558f}.fa-pause,.fa-play{font-size:24px}.fa-share-alt{background-color:#fff;color:#60558f}.fa-heart{background-color:#fff;color:red}.fa-bars,.fa-random,.fa-redo-alt,.fa-sync-alt{background:0 0;color:#fff}.fa-angle-left{color:#000}a{color:inherit}.hidden{display:none}