body {
      background: #f5f7fb;
      display: flex;
      flex-direction: column;
      min-height: 100vh;
    }
    .content {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 1rem;
    }
    .duck-card {
      max-width: 500px;
      width: 100%;
    }
    footer {
      text-align: center;
      padding: 1rem 0;
      font-size: 0.875rem;
      color: #6c757d;
    }
    .content {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 1rem;
    }
    .result-card {
      max-width: 600px;
      width: 100%;
    }

    .btn-primary {
        background-color: #000 !important;
        border-color: #000 !important;
    }
    .btn-primary:hover {
        background-color: #222 !important;
        border-color: #222 !important;
    }
    .hero h1 {
  font-size: 2rem;
    }
    @media (min-width: 768px) {
    .hero h1 {
        font-size: 2.5rem;
    }
}
    .hero {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 2rem;
    }