*,*::after,*::before{box-sizing:border-box}body{margin:0;width:100vw;height:100vh;background:radial-gradient(circle at 50% 50%,#eee 0,#333 100%);font-family:'PT Mono'}h1{margin:0;font-family:'Montserrat';position:absolute;top:50%;left:50%;height:200px;width:200px;text-align:center;line-height:200px;font-size:200px;font-weight:400;color:rgba(230,230,230,1);text-shadow:0 0 50px rgba(255,255,255,.75),0 0 150px rgba(255,255,255,0.5),0 0 200px rgba(255,255,255,0);transform:translate(-55%,-50%);transform-origin:50%;cursor:pointer;z-index:100;transition:all .25s}h1.off{color:transparent;text-shadow:0 1px 1px rgba(255,255,255,0.35),0 -1px 1px rgba(0,0,0,0.15)}h1 span{font-size:30px;display:block;position:absolute;top:0;left:120px}#clock{position:absolute;top:50%;left:50%;width:460px;height:460px;border-radius:50%;transform:translate(-50%,-50%);z-index:1}h1.off+#clock{background-image:linear-gradient(60deg,rgba(255,255,255,.05) 0,rgba(255,255,255,0.7) 40%,rgba(255,255,255,0.5) 45%,rgba(255,255,255,.25) 55%,rgba(255,255,255,.35) 55.5%,rgba(255,255,255,0.3) 60%,rgba(255,255,255,0.2) 68%,rgba(255,255,255,0.1) 72%,rgba(255,255,255,0.25) 75%,rgba(255,255,255,0) 100%),radial-gradient(circle at 50% 10%,rgba(180,180,180,1) 0,rgba(140,140,140,1) 80%);box-shadow:inset 0 10px 10px 0 rgba(0,0,0,0.35),inset 0 -3px 1px rgba(222,220,210,1),0 1px 0 1px rgba(255,255,255,0.5),0 0 0 10px rgba(222,98,0,.3),0 0 0 11px rgba(255,255,255,0.5),0 30px 50px 20px rgba(0,0,0,0.5)}#clock::after{content:'';position:absolute;border:1px solid #000;width:100px;height:30px;transition-origin:50%;top:50%;left:50%;box-shadow:inset 0 0 20px 0 rgba(255,255,255,1),0 0 100px 1000px rgba(0,0,0,0.75);transition:all .5s;transform:translate(120px,-50%)}#clock::before{content:'';position:absolute;border:1px dashed #000;border-top:0;border-bottom:0;width:30px;height:10px;right:0;top:50%;margin:-5px 44px 0 0;animation:pulse 1s infinite}h1.off+#clock::after{box-shadow:0 0 100px 1000px rgba(0,0,0,0),0 0 1px rgba(0,0,0,0.25);background:linear-gradient(to bottom,rgba(255,255,255,0.65) 0,rgba(255,255,255,0) 40%,rgba(255,255,255,0) 60%,rgba(255,255,255,.15) 100%);border:1px solid rgba(0,0,0,0);border-bottom:1px solid rgba(0,0,0,0.15);border-radius:4px}h1.off+#clock::before{border:1px dashed rgba(80,80,80,1);border-top:0;border-bottom:0;opacity:1;animation:none}ul{position:absolute;margin:0;padding:0;top:50%;left:50%;width:20px;height:20px;list-style:none;margin:-10px 0 0 -10px}#s,#m,#h{transform:rotateZ(0deg);transition:all .5s cubic-bezier(0.5,-0.5,0.500,1.5)}li{position:absolute;transition:all .25s;width:20px;height:20px;line-height:20px;text-align:right;opacity:.2;transform-origin:50%;transition:all .25s linear .25s}li.active{color:#424242;opacity:1;font-weight:700;font-size:18px}@keyframes pulse{0%,50%{opacity:1}51%,100%{opacity:0}}