#player,body,html,ul.playlist{height:100%}.panel,ul.playlist li.footer{text-align:center}:root{--blue:#c76e00}*{-webkit-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;line-height:1}body{background-color:#fff;font-family:Helvetica}audio{display:none}@media only screen and (min-width:420px) and (max-width:768px){body #player{display:-webkit-box;display:-ms-flexbox;display:flex}body #player,body .panel,body .playlist{width:100%}body ul.playlist{padding-bottom:0;border-left:1px solid #046ad8}}svg polygon{stroke-linejoin:round;fill:transparent;stroke:#fff;stroke-width:5}#player{background-color:#f5f5f5;width:300px;left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);-webkit-box-shadow:0 0 5px #c3c3c3;box-shadow:0 0 5px #c3c3c3;position:fixed}.panel{background-color:var(--blue);color:#fff;overflow:hidden;position:relative}h1{font-size:1.5rem}.control{padding:3.5rem}.control button{color:#fff;background-color:transparent;border:0;display:inline-block}.control button:disabled,.control button[disabled]{color:#c0bfbf;opacity:.5}button:focus{outline:0}.information>div{margin-bottom:20px}ul.playlist{overflow-y:scroll;padding-bottom:285px}ul.playlist li:first-child{border-top:0}ul.playlist li:last-child{border-bottom:0}ul.playlist li{padding:20px 10px;border-bottom:1px solid rgba(203,203,203,.55);border-top:1px solid #fff}ul.playlist li.active{background-color:var(--blue);color:#fff;border-top:0}ul.playlist li span.id{background-color:var(--blue);color:#fff;width:28px;display:inline-block;padding:.25em .4em;font-size:14px;font-weight:700;line-height:1;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.25rem;margin-right:5px}ul.playlist li.active span.id{color:var(--blue);background-color:#fff}#wave{position:absolute;bottom:0;pointer-events:none;-webkit-transition:all .5s ease;-o-transition:all .5s ease;transition:all .5s ease}.waving{-webkit-animation:waving 2s infinite alternate;animation:waving 2s infinite alternate}#wave.not-waving{bottom:-100px}@-webkit-keyframes waving{0%{-webkit-transform:translateX(-300px);transform:translateX(-300px)}100%{-webkit-transform:translateX(calc(-100% + 300px));transform:translateX(calc(-100% + 300px))}}@keyframes waving{0%{-webkit-transform:translateX(-300px);transform:translateX(-300px)}100%{-webkit-transform:translateX(calc(-100% + 300px));transform:translateX(calc(-100% + 300px))}}