.content{width:100vw;height:100vh}.main,#upnext{width:calc(100vw - 220px);height:100vh;overflow:hidden}#upnext{position:absolute;top:0;left:0;overflow-y:auto;background-color:#fff}#upnext #player-now{height:60vh}#upnext #player-next{height:40vh}.sidebar{position:absolute;top:0;right:0;height:100vh;max-width:220px;background-color:#222;color:#fff;padding:1rem;display:flex;flex-direction:column;justify-content:space-between}#date-time span{font-weight:700;text-align:center;font-size:1.215em;display:block;color:#ff0}#date-time .time{font-size:3.3rem;color:#fff}.input-wrapper{display:flex;align-items:center;padding:4px .5rem;border-bottom:1px solid #ccc}.input-wrapper:has(input:focus){background-color:#fff9c4;transition:background-color .2s ease}.input-wrapper.played input,.input-wrapper.played span{opacity:.15}.input-wrapper span{margin-right:1rem;font-weight:700;color:#999;white-space:nowrap}.input-wrapper input{width:100%;height:100%;border:0;padding:0;color:#000;line-height:100%;background-color:transparent;font-size:2.25rem}.input-wrapper input:focus{outline:none}.main-left .input-wrapper{border-right:1px solid #eeeeee80}.header{text-align:right}.header h1{margin:0;font-size:1.5rem;text-align:center}.header .logo{margin:0 auto}.header p{margin:0;font-size:1rem}.footer{text-align:right;display:flex;flex-direction:column;gap:.5rem}.footer button{padding:1rem 0;font-size:1.4rem;background-color:#f90;border:2px solid #fff;border-radius:8px;cursor:pointer;position:relative;font-weight:700}.footer button.btn-shuffle{padding:3rem 2rem}.footer button.btn-upnext{padding:2rem}.footer button small{position:absolute;bottom:4px;right:8px;font-size:.7rem;color:#444}