@keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}body{font-family:Arial,sans-serif;font-size:2em;text-align:center;margin-top:30px;background-color:#181818;-webkit-user-select:none;-moz-user-select:none;-o-user-select:none;user-select:none}body h1{font-weight:normal;color:white;font-size:.6em;text-transform:uppercase}body .hidden{display:none}body #loader{position:fixed;top:0;left:0;width:100%;height:100vh;background-color:rgba(255,255,255,0.5)}body #loader #loading-spinner{width:35px;margin:200px auto 20px auto;-webkit-animation:spin 2s infinite linear;-moz-animation:spin 2s infinite linear;-o-animation:spin 2s infinite linear;animation:spin 2s infinite linear}body #metronome-container{width:90%;padding:10px 6px 40px 6px;border-radius:12px;height:auto;background-color:#007aab;margin:20px auto 0 auto}body #metronome-container #display{width:300px;height:155px;margin:40px auto;position:relative;background-color:lightgreen;border-radius:8px;box-shadow:1px 1px 5px 0 #181818}body #metronome-container #display #bar{width:4px;height:130px;background:#181818;position:absolute;bottom:14px;left:calc(50% -  2px);transform-origin:bottom center;border-radius:2px}body #metronome-container #display #pin{width:16px;height:8px;background:#181818;border-radius:16px 16px 0 0;left:calc(50% -  8px);position:absolute;bottom:2px}body #metronome-container #display .dot{width:26px;height:26px;background:rgba(24,24,24,0.1);border-radius:50%;position:absolute;bottom:90px}body #metronome-container #display .dot#left-dot{left:30px}body #metronome-container #display .dot#right-dot{right:30px}body #metronome-container #display .dot.dot.active{background:#181818}body #metronome-container #display #bpm-container,body #metronome-container #display #beat-container{width:80px;color:#181818;position:absolute}body #metronome-container #display #bpm-container label,body #metronome-container #display #beat-container label{width:100%;font-size:12px;display:block}body #metronome-container #display #bpm-container #bpm,body #metronome-container #display #beat-container #bpm{font-size:36px}body #metronome-container #display #bpm-container #beat,body #metronome-container #display #beat-container #beat{font-size:30px}body #metronome-container #display #bpm-container.disabled,body #metronome-container #display #beat-container.disabled{color:rgba(24,24,24,0.1)}body #metronome-container #display #bpm-container{right:10px;text-align:right;bottom:0}body #metronome-container #display #beat-container{left:10px;text-align:left;bottom:4px}body #metronome-container .controls{margin-top:16px}body #metronome-container .controls button{line-height:0;color:#181818;font-size:50px;margin:12px 4px;border-radius:20px;width:60px;height:40px;border:none;box-shadow:1px 1px 5px 0 #181818;vertical-align:bottom}body #metronome-container .controls button:active{box-shadow:0 0 2px 0 #181818;border:1px solid #181818}body #metronome-container .controls button#power{margin-right:30px;font-size:12px;border:1px solid darkred}body #metronome-container .controls button#beats-decrease{margin-left:108px}body #metronome-container .controls button#tap-tempo{margin-left:30px}body #metronome-container .controls button#sound{margin-left:56px}body #metronome-container .controls .btn-title{color:white;font-size:14px;vertical-align:text-top;display:inline-block;width:36px;text-align:center;height:40px}body #metronome-container .controls .btn-title.sound-label{width:62px;vertical-align:super}body #metronome-container .controls .btn-title.sound-label #current-sound{font-size:12px}body .donate{position:fixed;right:8px;padding:8px;bottom:8px;text-align:right}body .donate #donation-links a.donation-link{text-decoration:none;display:block;margin:5px;border-radius:26px;box-shadow:0 0 4px rgba(24,24,24,0.8);width:180px;height:55px;color:#e3e3e3;text-align:center;line-height:1.8}body .donate #donation-links a.donation-link[data-target="paypal"]{background-color:#17447b}body .donate #donation-links a.donation-link[data-target="satispay"]{background-color:#d95044}body .donate #donate-btn{border-radius:50%;color:#181818;background-color:#e3e3e3;height:60px;width:60px;text-align:center;display:inline-block;border:none}body .donate #donate-btn .material-icons{font-size:42px;line-height:56px}body #update-banner{position:fixed;top:0;left:0;width:100%;padding:10px 8px;box-sizing:border-box;background-color:#a35900;color:white;font-size:14px;box-shadow:0 2px 6px rgba(24,24,24,0.6);z-index:10}body #update-banner #update-btn{margin-left:10px;padding:0 12px;height:28px;font-size:12px;color:#181818;background-color:#e3e3e3;border:none;border-radius:14px;vertical-align:middle}body .footer{position:fixed;bottom:8px;text-align:center;font-size:16px;width:100%}body .footer span{color:rgba(227,227,227,0.8)}body .footer span a{color:rgba(227,227,227,0.8);text-decoration:underline}@media only screen and (max-height:450px){body{margin-top:8px}body #metronome-container{margin-top:8px;padding-bottom:25px !important;max-width:770px}body #metronome-container h1{display:none}body #metronome-container #display{vertical-align:top !important;margin-left:0 !important;margin-right:50px !important;display:inline-block;vertical-align:middle}body #metronome-container .controls{max-width:300px;display:inline-block}}