body {
    background-color: #0f0f0f;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    color: #fff;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow: hidden; /* prevent scrolling */
  }
  
  .container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex: 1;
  }
  
  #output {
    font-size: 5rem;
    text-align: center;
    margin-top: 2rem;
    margin-bottom: 2rem;
    text-shadow: 2px 2px #000;
  }
  
  #output.fade-in {
    opacity: 0;
    animation: fadeIn 0.4s ease-in-out forwards;
  }
  
  #generate {
    display: block;
    margin: 0 auto;
    padding: 1rem 2rem;
    font-size: 1.5rem;
    color: #fff;
    background-color: #107c10;
    border: none;
    border-radius: 0.25rem;
    cursor: pointer;
    text-shadow: 1px 1px #000;
    transition: background-color 0.3s ease-in-out;
  }
  
  #generate:hover {
    background-color: #0c5f0c;
  }
  
  #generate:active {
    transform: translateY(2px);
  }
  
  footer {
    padding: 1rem;
    text-align: center;
  }
  
  footer p {
    margin: 0;
    font-size: 0.8rem;
  }
  
  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }