:root{--gray-300: #d1d5db}*{margin:0;padding:0;box-sizing:border-box;color:#fff}button{all:unset;cursor:pointer}img{-webkit-user-select:none;user-select:none}body{width:100%;height:100vh;overflow-x:hidden}.container{width:50vh;position:relative;left:50%;transform:translate(-50%)}#music{width:96%;height:100vh;margin:auto;display:flex;flex-direction:column;justify-content:space-around}.top,.bottom{flex:1;display:flex}.top{align-items:end}.artist-box{display:flex;justify-content:space-around;align-items:center;width:100%;margin-bottom:2rem}.mid{display:flex;justify-content:space-around;align-items:center}.artist-img{width:80px;aspect-ratio:1/1;border-radius:50%;cursor:pointer;overflow:hidden;box-shadow:0 4px 8px #00000026,0 2px 4px #0000001a;box-sizing:content-box}.artist-img img{width:100%;height:100%;object-fit:cover;filter:grayscale(80%)}.artist-img.active img{filter:none}.img{height:50vh;aspect-ratio:1/1;overflow:hidden;border-radius:12px;box-shadow:0 10px 20px #00000059,0 4px 8px #00000040}.img img{width:100%;height:100%;object-fit:cover}.artist,.track{height:40vh;aspect-ratio:.8/1;display:flex;align-items:center;justify-content:center}.artist h2{writing-mode:vertical-lr;text-orientation:upright;font-size:4rem}.track{display:flex;justify-content:space-between;padding:1rem .5rem;border:2px solid var(--gray-300);border-radius:12px;gap:1rem}.track .left{height:100%;flex:1;display:flex;flex-direction:column;justify-content:space-around}.left-line{border-bottom:2px solid var(--gray-300);padding:.5rem;background-color:none}.left-line button{width:100%;height:100%}.left-line.active{border:none;color:#1f2937;border-radius:8px}.track .right{width:20%;height:100%;display:flex;flex-direction:column;justify-content:space-between;border-left:2px solid var(--gray-300);padding-left:.5rem;align-items:center}.track .right svg{height:2rem;width:auto}.control-box{display:flex;flex-direction:column;align-items:center;margin-top:2rem}.time{display:flex;align-items:center;width:100%;gap:1rem;margin:.5rem 0}.progress{width:80%;height:10px;border-radius:.5rem;background-color:var(--gray-300);display:flex;align-items:center;background:transparent}.progress input{flex:1;height:100%}.controls{width:100%;display:flex;justify-content:space-around}.controls button svg{height:2.5rem;width:auto}@media (max-width: 1199px){.img{height:35vh}.artist,.track{height:25vh}.artist h2{font-size:3rem}}@media (max-width: 767px){.img{height:30vh}.artist,.track{height:15vh;width:30vh}.mid{flex-direction:column;gap:1rem}.artist{display:none}}