body {
      font-family: Arial, sans-serif;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
      background: linear-gradient(135deg, #1e3c72, #2a5298);
      color: #fff;
    }
    .stop{
        font-family: sans-serif;
        font-size: 30px;
        margin: 20px;
        font-weight: bold;
    }

    .stopwatch-container {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .stopwatch {
      width: 300px;
      height: 300px;
      border: 10px solid #fff;
      border-radius: 50%;
      background: radial-gradient(circle, #1e3c72 40%, #2a5298 100%);
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3);
    }

    .stopwatch:before {
      content: '';
      position: absolute;
      width: 15px;
      height: 15px;
      background: #fff;
      border-radius: 50%;
      z-index: 10;
    }

    .hand {
      width: 4px;
      height: 120px;
      background: #d9534f;
      position: absolute;
      bottom: 50%;
      transform-origin: bottom center;
      transition: transform 0.05s linear;
    }

    .time-display {
      margin-bottom: 20px;
      font-size: 1.5em;
      font-weight: bold;
      color: #fff;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    }

    .hour-mark {
      position: absolute;
      width: 8px;
      height: 8px;
      background: #fff;
      border-radius: 50%;
    }

    .stopwatch .hour-mark:nth-child(1) { top: 10px; left: 50%; transform: translateX(-50%); }
    .stopwatch .hour-mark:nth-child(2) { right: 10px; top: 50%; transform: translateY(-50%); }
    .stopwatch .hour-mark:nth-child(3) { bottom: 10px; left: 50%; transform: translateX(-50%); }
    .stopwatch .hour-mark:nth-child(4) { left: 10px; top: 50%; transform: translateY(-50%); }
    .stopwatch .hour-mark:nth-child(5) { left: 145px; top: 5%; transform: translateY(-50%); }


    .hour-label {
      position: absolute;
      color: #fff;
      font-size: 1.2em;
      font-weight: bold;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    }

    .stopwatch .hour-label:nth-child(6) { top: 20px; left: 50%; transform: translateX(-50%); content: "12"; }
    .stopwatch .hour-label:nth-child(7) { right: 20px; top: 50%; transform: translateY(-50%); content: "3"; }
    .stopwatch .hour-label:nth-child(8) { bottom: 20px; left: 50%; transform: translateX(-50%); content: "6"; }
    .stopwatch .hour-label:nth-child(9) { left: 20px; top: 50%; transform: translateY(-50%); content: "9"; }

    .buttons {
      margin-top: 20px;
      display: flex;
      gap: 10px;
    }

    button {
      background-color: #0078d4;
      color: #fff;
      border: none;
      padding: 10px 20px;
      border-radius: 5px;
      cursor: pointer;
      font-size: 1em;
      transition: background-color 0.3s;
    }

    button:hover {
      background-color: #005bb5;
    }

    .lap-times {
      margin-top: 20px;
      max-height: 150px;
      overflow-y: auto;
      padding: 10px;
      background: #f0f0f0;
      color: #333;
      border-radius: 5px;
      width: 80%;
      text-align: left;
    }