.clock {
    border-radius: 50%;
    background:rgba(251, 253, 253, 0.267) url(/images/posts/clocks/ios_clock.svg) no-repeat center;
    background-size: 88%;
    height: 1em;
    padding-bottom: 30%;
    position: relative;
    width: 35em;
    box-shadow: 15px 15px 8px #c211f869;
    border: 10px solid rgb(29, 108, 255);
    
    border: 7px solid rgba(253, 6, 6, 0.76);
      }
  
  .hours {
    background: rgba(223, 207, 207, 0.959);
    height: 30%;
    left: 50%;
    position: absolute;
    top: 20%;
    transform-origin: 50% 80%;
    width: 1%;
    z-index: 8;
    box-shadow: 3px 3px 6px rgb(17, 1, 1);
  }
  .minutes-container, .hours-container, .seconds-container {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

  }
  .minutes {
    background: rgba(0, 0, 0, 0.849);
    height: 40%;
    left: 50%;
    position: absolute;
    top: 10%;
    transform-origin: 50% 100%;
    width: 1%;
    box-shadow: 3px 3px 6px rgb(17, 1, 1);
  }
  .seconds {
    background: rgba(253, 6, 6, 0.76);
    display: flex;
    height: 45%;
    left: 50%;
    position: absolute;
    top: 14%;
    transform-origin: 50% 80%;
    width: 1%;
    z-index: 8;
    box-shadow: 5px 5px 7px rgb(17, 1, 1);
  }
  @keyframes rotate {
    100% {
      transform: rotateZ(360deg);
    }
  }.hours-container {
    animation: rotate 43200s infinite linear;
  }
  .minutes-container {
    animation: rotate 3600s infinite linear;
  }
  .seconds-container {
    animation: rotate 60s infinite linear;
        
    }
  

  body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
  
  }