body {
    font-family: 'Press Start 2P', cursive;
    background-color: #101010;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    text-align: center;
    flex-direction: column;
    padding: 10px;
    box-sizing: border-box; /* Verhindert, dass der Inhalt über den Rand hinausragt */
  }

  h1 {
    font-size: 4rem;
    margin: 0;
    color: #4CAF50;
  }

  p {
    font-size: 1.2rem;
    margin-top: 10px;
    padding: 0 15px;
    color: #e0e0e0;
  }

  .cta-button {
    display: inline-block;
    margin-top: 20px;
    padding: 12px 25px;
    background-color: #4CAF50;
    color: #fff;
    font-size: 1rem;
    text-decoration: none;
    border-radius: 5px;
    text-transform: uppercase;
    letter-spacing: 2px;
    transition: background-color 0.3s ease;
  }

  .cta-button:hover {
    background-color: #388E3C;
  }

  .retro-box {
    border: 3px solid #4CAF50;
    padding: 25px;
    margin: 15px;
    border-radius: 10px;
    width: 100%;
    max-width: 400px;
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden; /* Verhindert, dass Inhalt aus der Box herausragt */
  }

  /* Mobile Anpassungen */
  @media (max-width: 480px) {
    h1 {
      font-size: 3rem; /* Kleinere Schrift für mobile Geräte */
    }
    p {
      font-size: 1rem; /* Kleinere Schrift für mobile Geräte */
    }
    .cta-button {
      font-size: 0.9rem; /* Kleinere Schriftgröße für den Button */
      padding: 10px 20px; /* Kleinere Button-Padding */
    }
    .retro-box {
      padding: 15px; /* Weniger Padding in der Box */
      max-width: 100%; /* Box passt sich der Bildschirmgröße an */
    }
  }