.body{display:flex;justify-content:center;align-items:center;min-height:100vh}.body .container{position:relative}.body .container .box{position:relative;z-index:1;width:400px;height:400px;-webkit-animation:animate 5s ease-in-out infinite;animation:animate 5s ease-in-out infinite;-webkit-animation-delay:-2.5s;animation-delay:-2.5s}.body .container .box,.body .container .box .clock{-webkit-backdrop-filter:blur(25px);backdrop-filter:blur(25px);border-radius:50%;border:1px solid hsla(0,0%,100%,.5)}.body .container .box .clock{position:absolute;top:10px;left:10px;right:10px;bottom:10px;display:flex;justify-content:center;align-items:center;background:radial-gradient(transparent,hsla(0,0%,100%,.2)),url(../../assets/img/clock.png);background-size:cover;border-bottom:none;border-right:none;box-shadow:-10px -10px 20px hsla(0,0%,100%,.1),10px 10px 20px rgba(0,0,0,.1),0 40px 50px rgba(0,0,0,.2)}.body .container .box .clock .hour,.body .container .box .clock .min,.body .container .box .clock .sec{position:absolute}.body .container .box .clock .hour .hr,.body .container .box .clock .min .hr,.body .container .box .clock .sec .hr{width:160px;height:160px}.body .container .box .clock .hour .mn,.body .container .box .clock .min .mn,.body .container .box .clock .sec .mn{width:190px;height:190px}.body .container .box .clock .hour .sc,.body .container .box .clock .min .sc,.body .container .box .clock .sec .sc{width:230px;height:230px}.body .container .box .clock .hour .hr,.body .container .box .clock .hour .mn,.body .container .box .clock .hour .sc,.body .container .box .clock .min .hr,.body .container .box .clock .min .mn,.body .container .box .clock .min .sc,.body .container .box .clock .sec .hr,.body .container .box .clock .sec .mn,.body .container .box .clock .sec .sc{display:flex;justify-content:center;border-radius:50%}.body .container .box .clock .hour .hr:before,.body .container .box .clock .min .hr:before,.body .container .box .clock .sec .hr:before{content:"";position:absolute;width:8px;height:80px;background:#ff105e;z-index:11;border-radius:6px}.body .container .box .clock .hour .mn:before,.body .container .box .clock .min .mn:before,.body .container .box .clock .sec .mn:before{content:"";position:absolute;width:4px;height:90px;background:#fff;z-index:12;border-radius:6px}.body .container .box .clock .hour .sc:before,.body .container .box .clock .min .sc:before,.body .container .box .clock .sec .sc:before{content:"";position:absolute;width:2px;height:150px;background:#fff;z-index:13;border-radius:6px}.body .container .box .clock:before{content:"";position:absolute;width:15px;height:15px;background:#fff;border-radius:50%;z-index:10000}.body .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:before{top:0;background:linear-gradient(45deg,#e91e63,#e91e63 50%,#ffc107 0,#ffc107)}.body:after,.body:before{content:"";position:absolute;left:0;width:100%;height:100%}.body:after{top:-20px;background:linear-gradient(160deg,#03a9f4,#03a9f4 50%,transparent 0,transparent);-webkit-animation:animate 5s ease-in-out infinite;animation:animate 5s ease-in-out infinite}@-webkit-keyframes animate{0%,to{transform:translateY(10px)}50%{transform:translateY(-10px)}}@keyframes animate{0%,to{transform:translateY(10px)}50%{transform:translateY(-10px)}}