*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}body{touch-action:none;background:#000}.disableAnimation{transition:none}#canvas{display:flex;justify-content:center;align-items:center;min-height:100vh;min-height:100dvh;width:100%}#canvas.animate{transition:background-color .5s linear}#clock{font-size:calc(var(--clock-scale,10) * 1vw);display:flex;flex-direction:column;align-items:flex-end}#clock.animate{transition:font-size .2s linear}#time{font-family:-apple-system,BlinkMacSystemFont,segoe ui,Roboto,Helvetica,Arial,sans-serif;font-size:1em;line-height:1.1;font-weight:600;color:#fff;text-align:center;font-variant-numeric:tabular-nums;overflow:hidden;white-space:nowrap}#time-dayperiod{font-size:.4em;opacity:.5}#date{font-family:Georgia,serif;color:#fff;text-align:end;font-size:.25em;line-height:1.1;overflow:hidden;white-space:nowrap}#bo{display:flex;position:fixed;bottom:0;left:0;width:100%;height:56px;padding-left:15px;padding-right:12px;background:#333;font-family:-apple-system,BlinkMacSystemFont,segoe ui,Roboto,Helvetica,Arial,sans-serif;font-size:14px;line-height:56px;color:#fff;justify-content:start;overflow:hidden;white-space:nowrap;transition:opacity .1s ease-out;opacity:1}#bo.inactive{transition:opacity 1s ease-in;opacity:0;pointer-events:none}#bl{flex:1}a{color:#fff;text-decoration:underline}a.closer{font-weight:700;text-decoration:none;opacity:.7}#br{flex:none;align-items:center;display:flex}.mn{flex:1;margin-left:20px;display:flex;align-items:center;white-space:nowrap}.mn p{flex:1;margin-right:10px}.mn button{flex:1;margin-right:4px;width:32px;height:32px;padding:0;border:1px solid #fff;text-align:center;color:#fff;cursor:pointer}#button_font_smaller,#button_font_bigger{font-size:20px;font-weight:600;background-color:gray}.bg1{background-color:#000}.bg2{background-color:#aaa}.bg3{background-color:#ba2e44}.bg4{background-color:#cfa903}.bg5{background-color:#6397b5}.bg6{background-color:#81b95e}.bg7{background-color:#995d21}#button_reset{font-size:12px;width:auto;padding:0 10px;background-color:gray}@media screen and (max-width:768px){#clock{font-size:17vw}#br{display:none}#bl{text-align:center}.mobileHide{display:none}}