*{box-sizing:border-box}html,body{height:100%;width:100%;padding:0;margin:0 auto;background:#e7e5e5;font-family:Helvetica Neue,arial,sans-serif;font-weight:400;color:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;aspect-ratio:16 / 9;position:relative}#app{margin:0 auto;height:100%;position:relative}#app p{margin:0}.location,.date{margin:0;font-size:22px;font-weight:500;text-shadow:1px 1px rgba(0,0,0,.3)}.date.date{margin-bottom:5px!important}.time p{margin:0;font-size:60px;font-weight:500;text-shadow:1px 1px rgba(0,0,0,.3);font-variant-numeric:tabular-nums}.info{width:100%;position:absolute;bottom:0;right:0;padding:14px 16px;background-color:rgba(255,255,255,.1);backdrop-filter:blur(5px);display:flex;justify-content:space-between;gap:16px;align-items:flex-end}.forecast{display:flex;justify-content:space-between;font-size:17px;font-weight:500}@media (520px >= width){.forecast{display:none}.date,.location{margin:0;font-size:16px}.time p{font-size:16px}.info>div:not(.forecast){width:100%;display:flex;justify-content:space-between}}.forecast svg{fill:#fff;margin-bottom:10px;filter:drop-shadow(0 1px 1px rgba(0,0,0,.3))}.weather{width:175px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;text-shadow:1px 1px rgba(0,0,0,.3)}.weather svg{width:65px;height:auto}.canvasContainer{width:100%;height:100%;height:100svh}.loader__container{display:flex;align-items:center;justify-content:center;width:175px;height:110px}.loader{width:48px;height:48px;border-radius:50%;display:inline-block;border-top:3px solid #fff;border-right:3px solid transparent;box-sizing:border-box;animation:rotation 1s linear infinite}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}