*{margin:0;padding:0;box-sizing:border-box}.hand{position:absolute;left:50%;bottom:50%;transform:translate(-50%,-50%);width:2px}.hour-hand{height:50%;max-height:min(40vw,50vh)}.hour-hand,.minute-hand{position:absolute;background:linear-gradient(180deg,#07f7e6 50%,transparent 0);width:3px;z-index:10}.minute-hand,.second-hand{height:75%;max-height:min(60vw,70vh)}.second-hand{position:absolute;background:linear-gradient(180deg,#07f7e6 50%,transparent 0);width:1px;z-index:10}.hour-hand,.minute-hand,.second-hand{transition:all 1s linear;transition-timing-function:linear}.clock{justify-content:center;width:70%;height:70%;max-width:min(60vw,80vh);max-height:min(70vw,80vh);-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:.5}.clock,.hour-mark{position:absolute;display:flex;align-items:center}.hour-mark{width:2px;height:100%;max-height:max(70vh,80vw);justify-content:space-between;flex-direction:column}.hour-line{font-size:1.5rem;font-weight:400;color:#07f7e6;scale:2.5;pointer-events:none}.clock-content{position:absolute;text-align:center;color:#fff;padding:1.2rem;display:flex;justify-content:space-evenly;align-items:center;flex-direction:column;text-shadow:0 0 10px #000;z-index:9}.clock-content p{font-size:10px;letter-spacing:.2rem;line-height:normal}.clock-content h1{font-size:40px;font-weight:600;letter-spacing:1vh;line-height:normal}@media (min-width:425px) and (max-width:1024px){.clock-content h1{font-size:calc(40px + (96 - 40) * ((100vw - 425px) / (1024 - 425)))}.clock-content p{font-size:calc(10px + (24 - 10) * ((100vw - 425px) / (1024 - 425)))}}@media (min-width:1024px){.clock-content h1{font-size:96px}.clock-content p{font-size:24px}}.main{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:100vh}.main,.main:before{height:100%;width:100%}.main:before{content:" ";display:block;position:absolute;left:0;top:0}@media screen and (max-width:575px){.clock{margin-top:40%;opacity:1}.clock-content{margin-top:-80%}.hour-line{font-weight:300;font-size:.5rem}}