style.css

@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500&family=Roboto:wght@300&display=swap');

    body {
      display: flex;
      margin: 40px;
      flex-direction: column;
      align-items: center;
    }

    .start {
      background-color: #AB46D2;
      border: none;
      color: white;
      padding: 16px 48px;
      font-size: 16px;
      font-family: 'Roboto', sans-serif;
    }

    .stop {
      border: none;
      background-color: #AB46D2;
      color: white;
      padding: 16px 48px;
      font-size: 16px;
      font-family: 'Roboto', sans-serif;
    }

    button:hover {
      background-color: #8a0138;
      cursor: pointer;
    }

    h1 {
      font-size: 50px;
      color: white;
      font-family: 'Roboto', sans-serif;
    }
    h2 {
      font-size: 50px;
      color: white;
      font-family: 'Roboto', sans-serif;
    }

    input {
      padding: 16px 48px;
      font-family: 'Roboto', sans-serif;
    }

    .gradient {
      display: flex
      align-items: center;
      justify-content: center;
      height: 100vh;
      width: 100vw;
      background: linear-Gradient(45deg, #FF7700, #83BD75, #4E944F);
      background-size: 300% 300%;
      animation: colors 15s ease infinite;
    }

    @keyframes colors {
      0% {
        background-position: 0% 50%;
      }

      50% {
        background-position: 100% 50%;
      }

      100% {
        background-position: 0% 50%;
      }
    }