@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();