@import url('https://fonts.googleapis.com/css2?family=Cabin:wght@600&display=swap');
  
  body{
    background-color: #252525;
    padding:0;
    margin: 0;
    user-select: none;
    overflow-x: hidden;
  }
  
  .clock{
    font-family: 'Cabin', sans-serif;
    color: #3c7dff;
    font-size: 80px;
    background: #333333;
    box-shadow: -5px 4px 0px,#1abc9c 2px -6px 0px;
    width: 240px;
    padding: 20px;
    border-radius: 20px 0px 0px 20px;
    transform: translate(500px, -250px);
  }
  
  #animation3{
  background: linear-gradient(#14CC49, #33C96A);
  width: 170px;
  height: 170px;
  border-radius: 100%;
  animation: blog1 infinte 2s towards ease;
  transform: translate(480px, -440px) rotate(40deg);
  }
  
  #animation2{
  background: linear-gradient(#EE8832, #EE5132);
  width: 170px;
  height: 170px;
  border-radius: 5px;
  animation: blog1 infinte 2s towards ease;
  transform: translate(-50px, 250px);
  }
  
  #animation1{
  background: linear-gradient(#3832EE, #264BAC);
  width: 170px;
  height: 170px;
  transform: translate(1250px, 210px);
  border-radius: 5px;
  animation: blog2 infinte 2s towards ease;
  }

function clockshow(){
    let date = new Date();
    const hour = date.getHours();
    var minutes = date.getMinutes();
    let seconds = date.getSeconds();
    
    var time = hour + "|:" + minutes + "|:" + seconds;
    const timeset = document.getElementById('mytime');
    setTimeout(clockshow,1000);
    
    timeset.innerText = time;
    timeset.innerContent = time;
  }
  clockshow();