@import url(https://fonts.googleapis.com/css2?family=Roboto&display=swap);
*{-webkit-tap-highlight-color:rgba(0,0,0,0);font-family:Roboto;margin:0;padding:0;box-sizing:border-box;user-select:none;-ms-overflow-style:none;scrollbar-width:none}*::-webkit-scrollbar{display:none}body{display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden;height:100vh;height:calc(var(--vh, 1vh) * 100);background-image:url(9e6bc0d2838cf9835ae5.jpg);background-size:cover;background-position:center center;background-repeat:no-repeat}.player__image img{max-width:200px}.player__image img.played{animation-name:animPlay;animation-duration:5s;animation-iteration-count:infinite;animation-timing-function:linear}.player__music{padding:30px 0;height:100%;width:100vw;background-color:white;justify-content:center;flex-direction:column;align-items:center;z-index:5;display:none;gap:10px}.player__image{background-color:gray;padding:100px;border-radius:50%}.player__music.active{display:flex}.player__name{font-size:40px;text-align:center}.player__body{overflow-y:scroll;flex:1 1 auto}.player__nav{z-index:10;width:100vw;display:flex;justify-content:space-between;flex-direction:column}.player__bottom{position:relative;padding:10px 0;background-color:#000000;display:flex;justify-content:center;align-items:center}.player__buttons{height:48px;width:48px;display:flex;justify-content:space-between;align-items:center;gap:25px;width:max-content}.player__prew{display:flex;align-items:center;justify-content:center}.player__next{display:flex;align-items:center;justify-content:center}.player__items{display:flex;justify-content:space-between;flex-direction:column;gap:10px}.player__right{align-items:center;height:100%;top:0;right:10px;position:absolute;display:flex;gap:10px}.player__full{border-radius:50%;display:flex;align-items:center;justify-content:center;height:max-content;background-color:white;padding:10px;cursor:pointer}.player__full img{width:17px}.item__plays{height:37px;width:37px}.item__play{transition:all 0.5s ease;fill:white}.player__item{cursor:pointer;color:white;padding:10px;display:flex;justify-content:space-between;transition:all 0.5s ease;background-color:rgba(0,0,0,0.4)}.player__item:hover{color:white;background-color:#6c6c6c}.volume__img-bg{cursor:pointer;display:flex;align-items:center;justify-content:center;background-color:white;padding:7px;border-radius:50%}.volume__img{width:20px}.player__volume{gap:10px;display:flex;align-items:center;justify-content:center}.volume__input{cursor:pointer;border-radius:10px;width:100px;appearance:none;outline:3px solid white;overflow:hidden}.volume__input::-webkit-slider-runnable-track{height:15px;background-color:white}.volume__input::-webkit-slider-thumb{background:black;width:0;height:0;-webkit-appearance:none;box-shadow:-150px 0 0 150px black}.volume__input::-moz-range-track{height:7px;background-color:blue}.volume__input::-moz-range-thumb{background:#ecf0f1;cursor:pointer;height:7px;border-radius:0px;box-shadow:-200px 0px 0px 200px #43e5f7;padding:0px;margin:0px}.player__item.played{color:black;background-color:white}.player__item.played .item__play{fill:black}.player__item.played .item__play.played{animation-name:animPlay;animation-duration:5s;animation-iteration-count:infinite;animation-timing-function:linear}.item__left{display:flex;justify-content:space-between;align-items:center}.player__prew,.player__next,.player__play{cursor:pointer}.play__name{display:flex;justify-content:left;align-items:center;gap:10px}.item__right{display:flex;align-items:center;justify-content:center}.player__top{cursor:pointer;width:100vw;height:20px;border-top:3px solid black;background-color:gray}.player__progress{background-color:white;height:100%;width:1%;border-radius:10px;position:relative;display:flex;align-items:center;justify-content:right}.player__modal{z-index:100;position:absolute;width:100vw;height:100vh;background-color:rgba(0,0,0,0.7);display:flex;align-items:center;justify-content:center}.modal__body{width:300px;text-align:center}.modal__text{font-size:30px;color:white}.modal__buttons{margin-top:30px;width:100%;display:flex;gap:20px}.modal__button{padding:20px;flex:1 1 auto;background-color:black;color:white;border:3px solid white;outline:none;font-size:20px;border-radius:20px;cursor:pointer}@keyframes animPlay{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@media (max-width: 768px){.player__volume{display:none}}@media (max-width: 425px){.player__image{padding:50px}.player__image img{max-width:100px}}@media (max-width: 320px){.modal__body{width:100%}.modal__text{font-size:16px}.modal__button{padding:5px}.player__buttons{gap:10px}.player__item{padding:5px}}@media (max-width: 210px){.modal__button{font-size:10px}.player__full{display:none}.player__item{font-size:12px}}