@charset "utf-8";
/* CSS Document */

/* Basis en font */
* { box-sizing: border-box; }
html,body { height: 100%; margin: 0; font-family: "IBM Plex Mono", monospace; background:#181a20; color:#fff; }

/* Pagina layout */
.page-content {
  padding: 100px 24px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: center; /* centreert secties horizontaal */
}

/* Intro sectie */
.intro { text-align: center; max-width: 900px; }
.intro h1 { margin: 0 0 8px 0; color:#fff; }
.intro p { margin: 0; color:#cfcfcf; }

/* Form area: zorgt dat iframe netjes gecentreerd en responsive is */
.form-area { width: 100%; display:flex; justify-content:center; }
.form-wrapper {
  width: 100%;
  max-width: 820px;   /* verander dit als je breder wil */
  padding: 18px;
  background: rgba(255,255,255,0.03); /* licht vak achter formulier */
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.4);
}

/* iframe responsive: vult wrapper */
.form-wrapper iframe {
  width: 100% !important;    /* forceer vullen */
  min-height: 720px;         /* zorgt voor voldoende hoogte op desktop */
  height: auto;
  border: 0;
  display: block;
  border-radius: 6px;
  background: transparent;
}

/* Kleinere schermen: minder hoogte en padding */
@media (max-width: 520px) {
  .form-wrapper { padding: 12px; max-width: 95%; }
  .form-wrapper iframe { min-height: 640px; }
}