*{
   margin: 0;
   padding: 0;
   font-family:'Poppins', sans-serif;
}
html,body{
   display: grid;
   height: 100%;
   place-items: center;
   background: #000;
}
.bg{
   height: 100px;
   width: 400px;
   background: linear-gradient(135deg, #ffe714,#11eb35,#281cc5);
   border-radius: 10px;
   cursor: default;
   animation: animate 1.5s linear infinite;
}
.bg .clock
.bg span{
   position:absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);
}
.bg .clock{
   position:absolute;
   /* opacity: 0; */
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);
   z-index: 999;
   background: #020202;
   height: 85px;
   width: 345px;
   border-radius: 6px;
   text-align: center;
}
.bg .clock #time{
   line-height: 85px;
   font-size: 50px;
   font-weight: 600;
   letter-spacing: 1px;
   background: linear-gradient(135deg, #ffe714,#11eb35,#281cc5);
   background-clip: text;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   animation: animate 1.5s linear infinite;
}
/* css for adding hue rotate to the clock */
@keyframes animate{
   50%
{
   filter: hue-rotate(80deg);
}
}
.bg span{
   height: 100%;
   width: 100%;
   background: inherit;
   border-radius: 10px;
}