.hour,.minute,.second{transform:translateX(-50%)}.popup,body{display:flex}.close-btn,.fullscreen-btn,body{font-family:'Cabin Sketch',cursive}body{justify-content:center;align-items:center;min-height:100vh;background:#02021f;margin:0}.clock-container{display:flex;gap:2rem;align-items:center;flex-wrap:wrap;justify-content:center;padding:20px}.clock{position:relative;width:min(80vw,80vh);height:min(80vw,80vh);max-width:500px;max-height:500px;min-width:200px;min-height:200px;background:#272b30;border-radius:50%;box-shadow:10px 50px 70px rgba(0,0,0,.25),inset 5px 5px 10px rgba(0,0,0,.5),inset -5px -5px 15px rgba(255,255,255,.1)}.center-dot,.hands,.hands div,.numbers,.numbers span{position:absolute}.hands,.numbers{width:100%;height:100%}.numbers span{transform-origin:50%;inset:8%;text-align:center;color:#fff;font-size:clamp(.8rem, 3vw, 1.5rem);transform:rotate(calc(30deg * var(--i)))}.hands div{left:50%;bottom:50%;transform-origin:bottom;border-radius:50px}.hour{width:clamp(3px,.8%,6px);height:30%;background:#ff3d7f}.minute{width:clamp(2px,.6%,4px);height:35%;background:#00a6ff}.second{width:clamp(1px,.4%,3px);height:40%;background:#fff}.center-dot{top:50%;left:50%;width:clamp(12px,2%,12px);height:clamp(12px,2%,12px);background:#000;border-radius:50%;transform:translate(-50%,-50%)}.digital-clock{background:rgba(255,255,255,.1);padding:20px;border-radius:10px;box-shadow:0 0 20px rgba(0,0,0,.3);text-align:center;min-width:250px}.fullscreen-btn,.info-btn{right:20px;background:rgba(255,255,255,0);position:fixed}.digital-clock .time{font-size:2.5rem;color:#fff;margin-bottom:10px}.digital-clock .day{font-size:1.5rem;color:#00a6ff}.fullscreen-btn{bottom:20px;color:#fff;border:none;padding:10px 20px;border-radius:5px;cursor:pointer;transition:opacity .3s,background .3s;opacity:0}.close-btn,.info-btn{color:#fff;cursor:pointer;transition:background .3s}.info-btn{top:20px;border:none;width:40px;height:40px;border-radius:50%;font-size:1.2rem;z-index:100}.info-btn:hover{background:rgba(255,255,255,.2)}.popup{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.5);justify-content:center;align-items:center;z-index:1000}.popup-content{background:#2f363e;padding:30px;border-radius:10px;max-width:500px;width:90%;color:#fff;box-shadow:0 0 20px rgba(0,0,0,.5)}.popup h2{margin-top:0;color:#00a6ff}.popup ul{margin:20px 0;padding-left:20px}.popup li{margin:10px 0}.close-btn{background:#00a6ff;border:none;padding:10px 20px;border-radius:5px}.close-btn:hover{background:#0085cc}.fullscreen-btn:hover{background:rgba(255,255,255,.3)}body:hover .fullscreen-btn:not(.hidden){opacity:1}.hidden{display:none}@media (max-width:768px){.clock-container{flex-direction:column}.clock{min-width:150px;min-height:150px}.numbers span{font-size:.7rem}.digital-clock .time{font-size:2rem}.digital-clock .day{font-size:1.2rem}}