@import"https://fonts.googleapis.com/css2?family=Bai+Jamjuree:wght@500&family=Barlow&family=Chakra+Petch:wght@600&display=swap";*{margin:0;padding:0;box-sizing:border-box}:root{--primary-color: #ffee08;--caption-color: rgba(255, 238, 8, .48);--background-color: #030816}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}button{position:relative;background:none;border:none;outline:none;cursor:pointer}.app{background:var(--background-color);height:100svh;display:flex;justify-content:center;align-items:flex-end}.layout{max-width:24.375rem;padding:2.5rem 0}.extraControls{margin-top:2.625rem;display:flex;justify-content:space-between;align-items:center}.dot{position:absolute;bottom:-2px;left:.675rem;width:.3125rem;height:.3125rem;border-radius:50%;background-color:var(--primary-color)}#canvasWrapper canvas{outline:2px solid var(--primary-color)}@media only screen and (min-width: 768px){.app{align-items:center}.layout{border:2px solid var(--primary-color);padding:2.5rem}}@media only screen and (max-height: 640px){.app{align-items:center}}.playerControls{margin-top:2.8125rem;display:flex;align-items:center;justify-content:space-between}.playerControls__main{display:flex;align-items:center}.playerControls__main>:not(:first-child){margin-left:1.4375rem}.shuffle .dot{left:.5625rem}.progress{margin-top:2.625rem}.progress__slider{-webkit-appearance:none;appearance:none;background:transparent;border:2px solid rgba(255,238,8,.5);width:100%;height:.5rem}.progress__slider:focus{outline:none}.progress__slider:focus::-webkit-slider-thumb{outline:2px solid var(--primary-color)}.progress__slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:.875rem;height:.875rem;outline:2px solid var(--primary-color);background:#f8ef00;cursor:pointer;position:relative}.progress__slider::-moz-range-thumb{width:.875rem;height:.875rem;outline:2px solid var(--primary-color);background:#f8ef00;cursor:pointer;position:relative}.progress__time{margin-top:.625rem;font-family:Bai Jamjuree;font-weight:500;font-size:.75rem;line-height:.9375rem;color:var(--primary-color);display:flex;justify-content:space-between;align-items:center;user-select:none;-webkit-user-select:none;-moz-user-select:none}.songDetails,.songDetails__info{display:flex;flex-direction:column;align-items:center}.songDetails__info{user-select:none;-webkit-user-select:none;-moz-user-select:none;margin-top:1.625rem}.songDetails__image{transition:opacity .25s ease-in}.songDetails__artistName,.songDetails__songName{text-align:center}.songDetails__songName{font-family:Chakra Petch;font-weight:600;font-size:1.5rem;line-height:1.9375rem;color:var(--primary-color)}.songDetails__artistName{margin-top:.375rem;font-family:Barlow;font-weight:400;font-size:1rem;line-height:1rem;letter-spacing:.1em;color:var(--caption-color)}.volumeContainer{position:relative}.volume{position:absolute;top:-10.375rem;left:-.75rem}.volume__sliderContainer{width:3.375rem;height:9.375rem}.volume__icon{cursor:pointer;width:1.875rem;height:1.875rem}.volume__iconBlocker{position:absolute;top:0;left:0;width:1.875rem;height:1.875rem;background-color:transparent;cursor:pointer}.volume__slider{-webkit-appearance:none;appearance:none;transform:rotate(-90deg);position:absolute;top:4.375rem;left:-2.5rem;background:transparent;border:2px solid var(--primary-color);width:8.5rem;height:.5rem}.volume__slider:focus{outline:none}.volume__slider:focus::-webkit-slider-thumb{outline:2px solid var(--primary-color)}.volume__slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:1.0625rem;height:1.6875rem;outline:2px solid var(--primary-color);border-radius:.3125rem;background:#f8ef00;cursor:pointer;position:relative}