style.css

html {
    background: radial-gradient(circle, #000000 0%, #242424 100%);
    font-family: 'helvetica neue';
    text-align: center;
    font-size: 10px;
  }
  body {
    margin: 0;
    font-size: 2rem;
    display: flex;
    flex: 1;
    min-height: 100vh;
    align-items: center;
    perspective: 1000px; /* Add perspective for 3D effect */
  }
  
  .clock {
    width: 30rem;
    height: 30rem;
    border-radius: 50%;
    margin: 50px auto;
    position: relative;
    padding: 2rem;
    box-shadow:
      0 0 0 4px rgba(0, 0, 0, 0.1),
      inset 0 0 0 3px #EFEFEF,
      inset 0 0 10px black,
      0 0 10px rgba(0, 0, 0, 0.2),
      0 0 20px rgba(0, 0, 0, 0.2); /* Add 3D shadow effect */
    transform-style: preserve-3d; /* Enable 3D transformations */
  }
  
  .clock:before,
  .clock:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 50%;
    transform-style: preserve-3d;
  }
  
  .clock:before {
    transform: translateZ(-20px); /* Move the pseudo-element behind the clock */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Add depth effect */
  }
  
  .clock:after {
    transform: translateZ(20px); /* Move the pseudo-element in front of the clock */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Add depth effect */
  }
  
  .clock-face {
    position: relative;
    width: 100%;
    height: 100%;
    transform: translateY(-3px); /* Account for the height of the clock hands */
  }
  
  .hand {
    width: 50%;
    height: 6px;
    background: goldenrod;
    position: absolute;
    top: 50%;
    transform-origin: 100%;
    transform: rotate(90deg);
    transition: all 0.4s;
  }
  
  .second-hand {
    background-color: red;
    transition: 0.4s;
    transform-style: preserve-3d; /* Enable 3D transformations */
    transform-origin: bottom center;
    box-shadow: 0 0 5px rgba(255, 0, 0, 0.5); /* Add shadow effect */
  }
  
  .hour-hand {
    transition: 0.4s;
    transform-style: preserve-3d; /* Enable 3D transformations */
    transform-origin: bottom center;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); /* Add shadow effect */
  }
  
  .min-hand {
    transition: 0.4s;
    transform-style: preserve-3d; /* Enable 3D transformations */
    transform-origin: bottom center;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); /* Add shadow effect */
  }