@import"https://fonts.googleapis.com/css2?family=Khula:wght@400;600;700&family=Public+Sans:wght@100;300;400;600&display=swap";body{background-color:#9344d3;background-image:linear-gradient(rgb(48,25,52),#ffffffce);font-family:Public Sans,sans-serif;color:#df7fd8;overflow:hidden;background-position:center;background-repeat:no-repeat;background-size:cover;background-attachment:fixed}.light{transition:1s;--background: #dbf3f3}.dark{transition:1s;--background: #121212}a{color:#7a92fe}a:hover{color:#fff}.container{display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.phone{background-color:var(--background);height:665px;width:324px;border-radius:25px;box-shadow:#0006 5px 10px 12px,#0000004d 5px 12px 18px -3px,#0003 2px -3px inset}#top-menu{width:90%;display:flex;justify-content:space-between;align-items:center;margin:5%;text-transform:uppercase;font-size:.7rem;letter-spacing:.1rem;color:#717b94}#top-menu i{font-size:1rem}.song-thumbnail{background-image:url(https://images.unsplash.com/photo-1557672172-298e090bd0f1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80s);background-size:cover;background-position:center center;height:100%;width:100%;border-radius:50%}.thumbnail-border{height:200px;width:200px;margin:20% auto 0;border-radius:50%;padding:.4rem;box-shadow:inset 6px 6px 20px #688bff33,#688bff1a 0 4px 20px,#688bff1a 0 8px 24px,#666f8066 0 16px 45px}.button{height:50px;width:50px;display:flex;align-items:center;justify-content:center;border-radius:50%;box-shadow:inset 3px 1px 5px #ffffff80,3px 2px 4px #c850c04d,7px 6px 6px #0000001a;-webkit-tap-highlight-color:transparent}.toggle:hover{box-shadow:inset 6px 6px 10px #0003;background-color:#c850c0;color:#444;cursor:pointer}.faPlay,.faForward,.toggleDark,.faArrowLeft,.faBars{margin-left:4px}#mode{background-color:var(--background);border:none;color:#6b728d}.song-details{margin-top:5%;display:flex;flex-direction:column;align-items:center}.song-title{font-size:1.4rem;cursor:default}.artist{font-size:.8rem;color:#abb3c7;cursor:default}#time-slider{margin:20% 5%}.slider-times{font-size:.6rem;margin-top:10px;padding-left:7px;padding-right:7px;display:flex;justify-content:space-between;color:#abb3c7}#myRange{background-color:#c850c0;width:95%;margin-left:8px}input[type=range]::-moz-range-progress{background-color:#779bff;cursor:pointer}.slider{-webkit-appearance:none;cursor:pointer;width:100%;height:5px;border-radius:5px;background:transparent;outline:none;box-shadow:inset 2px 2px 2px #688bff33,inset 3px 3px 2px #3232321a,inset -45px -45px 1px #ffffff1a,inset -1px -1px 1px #0000001a}.slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:25px;height:25px;outline:none;border-radius:50%;border:none;background:radial-gradient(circle at center,#c850c0 0,#c850c0 20%,#d2e1f8 30%,#d2e1f8 70%,#fff 100%);box-shadow:inset 2px 2px 2px #688bff1a,#0000001a 0 54px 55px,#0000001f 0 -12px 30px,#0000001f 0 4px 6px,#0000001a 0 12px 20px}.slider::-moz-range-thumb{width:25px;height:25px;border-radius:50%;outline:none;border:none;background:radial-gradient(circle at center,#779bff 0,#6381f9 20%,#d2e1f8 30%,#d2e1f8 50%,#fff 100%);box-shadow:inset 2px 2px 2px #688bff1a,#0000001a 0 54px 55px,#0000001f 0 -12px 30px,#0000001f 0 4px 6px,#0000001a 0 12px 20px}.song-controls{width:60%;margin:18% 20%;display:flex;justify-content:space-between;align-items:center;font-size:1rem;color:#717b94}.song-controls .button{height:50px;width:50px}#credit{margin:5% 0 0;font-size:.8em;line-height:2rem}@media (max-width: 768px){.container{flex-direction:column;align-items:center;padding:20px}.song-title,.artist{font-size:1.2rem}#top-menu{font-size:.6rem}#top-menu i{font-size:1.2rem}.thumbnail-border{margin:10% auto 0}#time-slider{margin:10% 5%}}@media (max-width: 480px){.phone{height:550px;width:280px}.thumbnail-border{height:150px;width:150px}.song-title,.artist{font-size:1rem}#top-menu{font-size:.5rem}.song-controls{width:80%;margin:10%}#myRange{width:96%;margin-left:5px}#credit{display:none}.faArrowLeft,.faBars{font-size:15px}}*{margin:0}button:hover,.button{cursor:pointer}