/* Algemene stijlen voor de hele pagina */
body {
  font-family: "Quicksand", sans-serif;
  margin: 0;
  padding: 0;
  min-height: 100vh;
}

header {
  background-color: #ED89C5;
  text-align: left;
  padding: 10px; /* Voeg wat afstand toe aan de boven- en linkerkant */
}

header h1 {
  color: #fff;
  font-family: "Dancing Script", cursive;
  font-size: 24px;
  margin-left: 20px; /* Voeg wat afstand toe aan de linkerkant */
  margin-right: 20px;
}

.header-content {
  display: flex; /* Gebruik flexbox om de header-inhoud te rangschikken */
  align-items: center; /* Centreer de inhoud verticaal */
}

nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex; /* Gebruik flexbox om het menu horizontaal te plaatsen */
}

nav ul li {
  display: inline;
  margin-right: 20px;
}

nav ul li:last-child {
  margin-right: 0;
}

nav a {
  text-decoration: none;
  color: #FFFFFF; /* Gebruik de lichtere roze kleur */
  font-family: "Quicksand", sans-serif;
  font-size: 20px;
}

main {
  padding: 20px;
  min-height: 80vh;
}

/* Stijlen voor de menu-items */
nav ul li a:hover {
  color: #FFFFF1; /* Verander de tekstkleur naar lichtere kleur roze bij hover */
  text-decoration: none; /* Verwijder de onderstreping */
}

/* Stijlen voor de inhoudssekties */
section {
  display: none;
}

h3 {
  font-family: 'Quicksand', sans-serif;
}

.logintitle {
  margin-left: 20px;
  font-family: 'Quicksand', sans-serif;
}

/* Stijlen voor het inlogformulier */
form#login-form {
  width: 300px; /* Pas de breedte van het formulier aan zoals gewenst */
  margin-right: 20px; /* Voeg wat ruimte aan de rechterkant toe */
  margin-bottom: 20px; /* Voeg wat ruimte onder het formulier toe */
  margin-left: 20px;
}

/* Stijlen voor de label-elementen in het inlogformulier */
form#login-form label {
  font-family: 'Quicksand', sans-serif;
  font-size: 16px;
  display: block; /* Plaats de labels onder elkaar */
  margin-bottom: 5px; /* Voeg wat ruimte onder de labels toe */
}

/* Stijlen voor de inputvelden in het inlogformulier */
form#login-form input[type="email"],
form#login-form input[type="password"] {
  width: 100%;
  border: 1px solid #ED89C5;
  padding: 10px;
  margin-bottom: 10px; /* Voeg wat ruimte onder de inputvelden toe */
  border-radius: 10px; /* Afgeronde hoeken */
  font-family: 'Quicksand', sans-serif;
  font-size: 16px;
}

/* Stijlen voor de knop in het inlogformulier */
form#login-form button[type="submit"] {
  background-color: #FFFFFF; /* Witte achtergrondkleur */
  color: #ED89C5;
  cursor: pointer;
  transition: background-color 0.3s ease;
  border: 1px solid #ED89C5;
  padding: 12px 20px;
  font-weight: bold;
  border-radius: 10px; /* Afgeronde hoeken */
}

form#login-form button[type="submit"]:hover {
  background-color: #FFC0CB;
  color: #FFFFFF;
}

/* Stijlen voor het formulier */
form#vraagForm {
  margin-right: 20px; /* Voeg wat ruimte aan de rechterkant toe */
  margin-bottom: 20px; /* Voeg wat ruimte onder het formulier toe */
}

/* Stijlen voor de label-elementen */
form#vraagForm label {
  font-family: 'Quicksand', sans-serif;
  font-size: 16px;
  display: block; /* Plaats de labels onder elkaar */
  margin-bottom: 5px; /* Voeg wat ruimte onder de labels toe */
}

footer {
  background-color: #ED89C5;
  color: #FFFFFF;
  padding: 20px 0;
  font-family: 'Quicksand', sans-serif;
  margin-top: 20px;
  align-items: center;
  z-index: 1;
}

footer h3 {
  font-family: 'Dancing Script', semi-bold;
  position: relative;
}

.footer-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.contact-info {
  flex: 1;
}

.contact-info h3 {
  font-size: 20px;
  margin-bottom: 10px;
}

.quick-links {
  flex: 1;
}

.quick-links h3 {
  font-size: 20px;
  margin-bottom: 10px;
}

.quick-links ul {
  list-style: none;
  padding: 0;
}

.quick-links li {
  margin-bottom: 8px;
}

.quick-links a {
  text-decoration: none;
  color: #FFFFFF;
  transition: color 0.3s ease;
}

.quick-links a:hover {
  color: #FFC0CB;
}

.copyright {
  text-align: center;
  margin-top: 20px;
  font-size: 14px;
}

.navi a:hover {
  color: #FFC0CB;
  transition: color 0.3s ease;
}

.navi {
     position: relative;
}

.navit, navitul {
    list-style: none;
    padding: 0;
    text-align: center;
}

.navit, .navitul, .navitli {
    display: inline;
    margin-right: 20px;
}

.navit, .navitul, .navitli, .navita {
    text-decoration: none;
    color: #FFC0CB;
    font-weight: bold;
    font-size: 15px;
    position: relative;
    font-family: 'Quicksand', sans-serif;
}

.navit a:hover {
  color: #ED89C5;
  transition: color 0.3s ease;
}