*{margin:0;padding:0;box-sizing:border-box}body{display:flex;justify-content:center;align-items:center;min-height:100vh;overflow:hidden}body.light{background:#d1dae3}body.dark{background:#091921}.clock{width:350px;height:350px;display:flex;justify-content:center;align-items:center;background:#091921 url(images/clock.png);background-size:cover;border:4px solid #091921;border-radius:50%;box-shadow:0 -15px 15px rgba(255,255,255,.05),inset 0 -15px 15px rgba(255,255,255,.05),0 15px 15px rgba(0,0,0,.3),inset 0 15px 15px rgba(0,0,0,.3)}body.light .clock{background:#d1dae3 url(images/clock-dark.png);background-size:cover;border:4px solid #cad3dc;box-shadow:-8px -8px 15px rgba(255,255,255,.5),10px 10px 10px rgba(0,0,0,.1),inset -8px -8px 15px rgba(255,255,255,.5),inset 10px 10px 10px rgba(0,0,0,.1)}.clock:before{content:'';position:absolute;width:15px;height:15px;background:#fff;border-radius:50%;z-index:100}body.light .clock:before{background:#008eff}.hour,.minutes,.second{position:absolute}.hour,.hr{width:150px;height:150px}.minutes,.mn{width:190px;height:190px}.sc,.second{width:230px;height:230px}.hr,.mn,.sc{display:flex;justify-content:center;position:absolute;border-radius:50%}.hr:before{content:'';position:absolute;width:8px;height:80px;background:#ff105e;z-index:10;border-radius:6px 6px 0 0}.mn:before{content:'';position:absolute;width:4px;height:90px;background:#fff;z-index:11;border-radius:6px 6px 0 0}body.light .mn:before{background:#091921}.sc:before{content:'';position:absolute;width:2px;height:150px;background:#008eff;z-index:12;border-radius:6px 6px 0 0}body.glass::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(45deg,#e91e63,#e91e63 50%,#ffc107 50%,#ffc107)}body.glass::after{content:'';position:absolute;top:-20px;left:0;width:100%;height:100%;background:linear-gradient(160deg,#03a9f4,#03a9f4 50%,transparent 50%,transparent);animation:animate 5s ease-in-out infinite}body.glass .container{position:relative}body.glass .container::before{content:'';position:absolute;bottom:-150px;width:100%;height:60px;background:radial-gradient(rgba(0,0,0,.2),transparent,transparent);border-radius:50%}body.glass .box{position:relative;z-index:1;width:370px;height:370px;backdrop-filter:blur(25px);border-radius:50%;border:1px solid rgba(255,255,255,.5);animation:animate 5s ease-in-out infinite;animation-delay:-2.5s}body.glass .clock{position:absolute;top:10px;left:10px;right:10px;bottom:10px;background:radial-gradient(transparent,rgba(255,255,255,.2)),url(images/clock.png);background-size:cover;backdrop-filter:blur(25px);border:1px solid rgba(255,255,255,.5);border-bottom:none;border-right:none;box-shadow:-10px -10px 20px rgba(255,255,255,.1),10px 10px 20px rgba(0,0,0,.1),0 40px 50px rgba(0,0,0,.2)}body.glass .mn:before{background:#091921}body.glass .sc:before{background:#fff}.toggleClass{position:absolute;top:30px;right:150px;width:20px;height:20px;font-size:18px;border-radius:50%;background:#d1dae3;color:#d1dae3;font-family:consolas,sans-serif;cursor:pointer;display:flex;align-items:center;z-index:10}.toggleClass:before{position:absolute;content:'Light Mode';white-space:nowrap;left:25px}body.light .toggleClass{background:#091921;color:#091921}body.light .toggleClass:before{content:'Dark Mode'}body.dark .toggleClass{color:#fff;background:linear-gradient(45deg,#e91e63,#e91e63 50%,#ffc107 50%,#ffc107)}body.dark .toggleClass:before{content:'Glass Mode'}body.glass .toggleClass{color:#fff;background:#fff}body.glass .toggleClass:before{content:'Light Mode'}@keyframes animate{0%,100%{transform:translateY(10px)}50%{transform:translateY(-10px)}}
