*{box-sizing:border-box}body,html{height:100%;width:100%;padding:0;margin:0}#app{display:flex;align-items:center;justify-content:center;height:100dvh;width:100%;overflow:hidden}.analog-container{width:100%;display:flex;justify-content:center;gap:40px;padding-top:80%}.clock-container{position:relative;display:flex;gap:30px}.clock-item{border-radius:50px;height:fit-content;width:42px;background:#4d4b4b;box-shadow:2px 1px 3px 1px #17171780;transition:1s all}.time{height:40px;width:100%;display:flex;align-items:center;justify-content:center;color:#fff3;position:relative;transition:.3s;font-size:20px}@media screen and (max-height: 500px){.analog-container{padding-top:100%}}@media screen and (max-width: 1920px){.analog-container{scale:1.3}}@media screen and (max-width: 1600px){.analog-container{scale:1}}@media screen and (max-width: 430px){.analog-container{gap:30px}}@media screen and (max-width: 390px){.analog-container{gap:20px}}@media screen and (max-width: 300px){.analog-container{gap:10px}}.now[data-v-4ff20c41]{color:#fff;font-size:xx-large}.timecolon[data-v-3ad5f500]{width:15px;position:absolute;top:20px;left:50%;transform:translate(-50%) translateY(-50%);color:#ffffff54;font-size:33px;text-align:center;line-height:33px}.selected-time-circle[data-v-15e1f803]{height:40px;width:40px;position:absolute;top:20px;left:50%;transform:translate(-50%) translateY(-50%);background:transparent;border-radius:30px;border:1px solid #2b2b2b;box-shadow:0 0 10px 4px #ffffff80}@media (max-width: 768px){.hide-on-mobile[data-v-fc1c7bcf]{display:none}}