*{margin:0;padding:0;box-sizing:border-box;font-family:consolas!important}* .body{position:relative;width:100%;height:100vh;background-color:#19172e;display:flex;justify-content:center;align-items:center}* .body:before{top:10%;right:20%;width:300px;height:300px;background:linear-gradient(#f9d924,#ff2c24)}* .body:after,* .body:before{content:"";position:absolute;border-radius:10px;-webkit-animation:animate 5s ease-in-out infinite;animation:animate 5s ease-in-out infinite}* .body:after{bottom:10%;left:20%;width:250px;height:250px;background:linear-gradient(#01d6ff,#0f24f9);-webkit-animation-delay:-2.5s;animation-delay:-2.5s}@-webkit-keyframes animate{0%,to{transform:translateY(20px)}50%{transform:translateY(-20px)}}@keyframes animate{0%,to{transform:translateY(20px)}50%{transform:translateY(-20px)}}* .body .clock{position:relative;width:700px;height:250px;background-color:hsla(0,0%,100%,.05);box-shadow:0 15px 25px rgba(0,0,0,.1);z-index:1000;border-radius:20px;border:1px solid hsla(0,0%,100%,.1);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}* .body .clock .container{display:flex;justify-content:center;align-items:center;height:100%}* .body .clock .container h2{font-size:6em;color:#fff}* .body .clock .container h2:nth-child(odd){padding:5px 15px;border-radius:10px;background-color:hsla(0,0%,100%,.05);box-shadow:0 15px 25px rgba(0,0,0,.2);margin:0 10px;border-bottom:1px solid hsla(0,0%,100%,.1);border-right:1px solid hsla(0,0%,100%,.1)}* .body .clock .container #seconds{color:#f9d524}* .body .clock .container #ampm{position:relative;top:-50px;font-size:2em;color:#fff;font-weight:700}