main{
    display: flex;
    justify-content: center; /* horizontaal centreren */
    align-items: center; 
    width: 100vw;
    height: 100vh;
    background: 
       linear-gradient(
            to bottom,
            rgba(255,255,255,0.5) 0%,   /* boven weinig */
            rgba(255,255,255,0.9) 30%,  /* midden veel */
            rgba(255,255,255,0.9) 70%,  /* midden veel */
            rgba(255,255,255,0.5) 100%  /* onder weer weinig */
        ),  
        url("../afbeelding/hero.png");
    background-size: cover;
}

/* Basisstijl */
.knop {
  background-color: #3498db;   /* Blauwe achtergrond */
  color: white;                /* Witte tekst */
  padding: 10px 10px;          /* Binnenruimte */
  border: none;                /* Geen rand */
  border-radius: 5px;          /* Afgeronde hoeken */
  font-size: 16px;             /* Tekstgrootte */
  cursor: pointer;             /* Handje bij hover */
  width: 200px;
  margin-top: 10px;
}

/* Hover-effect */
.knop:hover {
  background-color: #2980b9;   /* Donkerder blauw bij hover */
  transition: background-color 0.3s ease;
}

/* Extra stijl: schaduw */
.knop:active {
  transform: scale(0.98);      /* Klein indruk-effect */
}

input{
    width: 200px;
    border-radius: 5px;
    padding: 5px 5px;
}