@import"https://fonts.googleapis.com/css2?family=Kristi&display=swap";:root{--hue: 215;--saturation: 45%;--lightness: 79%;--reach: 0.3rem;--blur: 0.6rem;--alpha: 0.8;--dark: hsla( var(--hue), var(--saturation), calc(var(--lightness) - 15%), var(--alpha) );--light: hsla( var(--hue), var(--saturation), calc(var(--lightness) + 15%), var(--alpha) );--white: #ffffff;--greyLight-1: #e4ebf5;--greyLight-2: #c8d0e7;--greyLight-3: #bec8e4;--greyDark: #e9ac3b;--shadow: var(--reach) var(--reach) var(--blur) var(--dark), calc(-1 * var(--reach)) calc(-1 * var(--reach)) var(--blur) var(--light);--inner-shadow: inset var(--reach) var(--reach) var(--blur) var(--dark), inset calc(-1 * var(--reach)) calc(-1 * var(--reach)) var(--blur) var(--light);--primary-light: #8abdff;--primary: #6d5dfc;--primary-dark: #5b0eeb}body{margin:0;padding:0}*{margin:0;padding:0;box-sizing:border-box}#player{height:100vh;width:100%;background:var(--greyLight-2)}#player .container{width:80%;height:100%;margin:0 auto;display:flex;justify-content:center;align-items:center}#player .container .warper{width:100%;height:100%;display:flex;justify-content:center;align-items:center;border-radius:10px}#player .container .warper .card{width:350px;height:600px;width:350px;height:600px;box-shadow:var(--shadow);border-radius:10px;overflow:hidden;position:relative}#player .container .warper .card .header{position:relative;height:3.5rem;width:100%;padding:0 1rem;background:linear-gradient(90deg, #7605bb 0%, #3b0099 100%);display:flex;justify-content:space-between;align-items:center;border-radius:0px 0px 12px 12px;z-index:999}#player .container .warper .card .header .logo{color:#fff;font-family:"Kristi",cursive;font-size:2.5rem;letter-spacing:.1rem}#player .container .warper .card .header .nav{background:transparent;overflow:hidden;cursor:pointer}#player .container .warper .card .header .nav .nav_toggle{background:#fff;height:.2rem;width:2.2rem;margin:5px 0;border-radius:20px;transition:all .3s linear}#player .container .warper .card .header .nav .nav_toggle:nth-child(1){width:60%;position:relative}#player .container .warper .card .header .nav .nav_toggle:nth-child(2){position:relative;left:0}#player .container .warper .card .header .nav .nav_toggle:nth-child(3){width:85%;position:relative}#player .container .warper .card .header .nav.active{cursor:pointer}#player .container .warper .card .header .nav.active .nav_toggle{background:#fff;height:.2rem;width:2.2rem;margin:5px 0;border-radius:20px}#player .container .warper .card .header .nav.active .nav_toggle:nth-child(1){width:100%;transform:rotate(45deg);top:7px}#player .container .warper .card .header .nav.active .nav_toggle:nth-child(2){left:200%}#player .container .warper .card .header .nav.active .nav_toggle:nth-child(3){width:100%;transform:rotate(-45deg);top:-9px}#player .container .warper .card .song_img{height:300px;width:100%;display:flex;justify-content:center;align-items:center}#player .container .warper .card .song_img .img_warper{width:230px;height:230px;border-radius:100px;overflow:hidden}#player .container .warper .card .song_img .img_warper img{width:100%;height:100%}#player .container .warper .card .song_name{height:auto;width:100%;padding:.5rem 0;display:flex;justify-content:center;align-items:center}#player .container .warper .card .song_name .warper{width:70%;height:auto;display:flex;justify-content:center;align-items:center;flex-direction:column}#player .container .warper .card .song_name .warper .title marquee span{width:200px}#player .container .warper .card .song_name .warper .singer_name{margin-top:.5rem}#player .container .warper .card .progress_ber{height:auto;width:100%;padding:1rem 0;display:flex;justify-content:center;align-items:center}#player .container .warper .card .progress_ber .warper{width:70%;display:flex;justify-content:center;align-items:center;flex-direction:column}#player .container .warper .card .progress_ber .warper .duretion{width:100%;display:flex;justify-content:space-between;align-items:center}#player .container .warper .card .progress_ber .warper .progress{width:100%;height:1rem;position:relative;border-radius:100px;margin-top:.5rem;background-color:transparent}#player .container .warper .card .progress_ber .warper .progress .progressBer{overflow:hidden;width:100%;height:.5rem;position:absolute;box-shadow:var(--shadow);left:0%;top:50%;border-radius:100px;transform:translate(0%, -50%);background:linear-gradient(90deg, #7605bb 0%, #3b0099 100%);transition:all .3s linear}#player .container .warper .card .progress_ber .warper .progress .progressBer .style{height:100%;width:105%;background:var(--greyLight-2);position:absolute;left:0%;top:0%}#player .container .warper .card .progress_ber .warper .progress input[type=range]{position:absolute;overflow:hidden;cursor:pointer;width:100%;height:100%;-webkit-appearance:none;background-color:transparent;border-radius:50px;transform-origin:right;transition:.6s cubic-bezier(0.19, 0.18, 0.32, 1.32)}#player .container .warper .card .progress_ber .warper .progress input[type=range]::-webkit-slider-thumb{width:0px;-webkit-appearance:none;height:0px;background:#434343}#player .container .warper .card .player_bns{margin-top:1rem;height:auto;width:100%;display:flex;justify-content:space-around;align-items:center}#player .container .warper .card .player_bns .fa-solid{color:#5b0eeb;font-size:1.5rem}#player .container .warper .card .player_bns .play{cursor:pointer;position:relative;height:4rem;width:4rem;box-shadow:var(--shadow);border-radius:100px;display:flex;justify-content:center;align-items:center;background:var(--greyLight-2);z-index:3 !important}#player .container .warper .card .player_bns .play .fa-pause{display:block}#player .container .warper .card .player_bns .play::before,#player .container .warper .card .player_bns .play::after{content:"";display:none;position:absolute;width:100%;height:100%;top:0;left:0;border-radius:50%;box-shadow:var(--shadow);-webkit-animation:waves 3s infinite linear;animation:waves 3s infinite linear;z-index:-1}#player .container .warper .card .player_bns .play.active::before,#player .container .warper .card .player_bns .play.active::after{display:block}#player .container .warper .card .player_bns .next,#player .container .warper .card .player_bns .prv{cursor:pointer;height:3rem;width:3rem;box-shadow:var(--shadow);border-radius:100px;display:flex;justify-content:center;align-items:center}#player .container .warper .card .player_bns .next:hover,#player .container .warper .card .player_bns .prv:hover{box-shadow:var(--inner-shadow)}#player .container .warper .card .player_bns .total,#player .container .warper .card .player_bns .crows{cursor:pointer;height:2.5rem;width:2.5rem;box-shadow:var(--shadow);border-radius:100px;display:flex;justify-content:center;align-items:center}#player .container .warper .card .player_bns .total:hover,#player .container .warper .card .player_bns .crows:hover{box-shadow:var(--inner-shadow)}#player .container .warper .card .music_list{position:absolute;height:100%;width:100%;left:120%;background:var(--greyLight-2);z-index:100;padding-top:80px;transition:all .5s cubic-bezier(0.71, -0.3, 0, 1.29)}#player .container .warper .card .music_list .warper{height:100%;width:100%}#player .container .warper .card .music_list .warper .items{height:100%;width:100%;position:relative}#player .container .warper .card .music_list .warper .items .item{position:absolute;padding:1rem 2rem;height:100%;width:100%;border-radius:12px 12px 0px 0px;color:#000}#player .container .warper .card .music_list .warper .items .item .music_name{display:flex;justify-content:space-between;align-items:center}#player .container .warper .card .music_list .warper .items .item:nth-child(2){background:var(--greyLight-2);top:4rem}#player .container .warper .card .music_list .warper .items .item:nth-child(3){top:8rem;background:var(--greyLight-2)}#player .container .warper .card .music_list .warper .items .item:nth-child(4){top:12rem;background:var(--greyLight-2)}#player .container .warper .card .music_list .warper .items .item:nth-child(5){top:16rem;background:var(--greyLight-2)}#player .container .warper .card .music_list .warper .items .item:nth-child(6){top:20rem;background:var(--greyLight-2)}#player .container .warper .card .music_list .warper .items .item:nth-child(7){top:24rem;background:var(--greyLight-2)}#player .container .warper .card .music_list .warper .items .item:nth-child(8){top:28rem;background:var(--greyLight-2)}#player .container .warper .card .music_list .warper .items .item:hover{background:#5b0eeb;color:#fff}#player .container .warper .card .music_list.active{left:0%}#player .container .warper .card .sound{display:flex;justify-content:center;align-items:center;height:auto;width:160px;position:absolute;top:52%;left:-13%;transform:translate(0%, 30%) rotate(-90deg)}#player .container .warper .card .sound .icon{height:3rem;width:3rem;display:flex;justify-content:center;align-items:center;position:absolute;top:-8px;right:0px;transform:rotate(90deg);font-size:1.3rem;color:#7605bb;border-radius:100px;box-shadow:var(--shadow);cursor:pointer;z-index:3}#player .container .warper .card .sound input[type=range]{transform:scaleX(0);overflow:hidden;width:100%;height:2.2rem;-webkit-appearance:none;background-color:var(--greyLight-2);border-radius:50px;box-shadow:var(--shadow);transform-origin:right;opacity:0;transition:.6s cubic-bezier(0.19, 0.18, 0.32, 1.32)}#player .container .warper .card .sound input[type=range]::-webkit-slider-thumb{width:0px;-webkit-appearance:none;height:0px;background:#434343;box-shadow:-80px 0 0 80px var(--primary)}#player .container .warper .card .sound.active .icon{box-shadow:none;height:auto;width:auto;top:5px;right:5px}#player .container .warper .card .sound.active input[type=range]{transform:scaleX(1);opacity:1}@-webkit-keyframes waves{0%{transform:scale(1);opacity:1}50%{opacity:1}100%{transform:scale(1.4);opacity:0}}@keyframes waves{0%{transform:scale(1);opacity:1}50%{opacity:1}100%{transform:scale(1.4);opacity:0}}@media only screen and (max-width: 420px){#player{height:100vh;width:100vw}#player .container{width:95%;height:100vh}#player .container .warper{width:100%;height:100%}#player .container .warper .card{width:100%;height:98%}#player .container .warper .card .song_img{margin-top:4rem}#player .container .warper .card .song_name{margin-top:0rem}#player .container .warper .card .progress_ber{margin-top:4rem}#player .container .warper .card .player_bns{margin-top:5rem}}