a {
  color: #0077cc;
  text-decoration: none;
  font-weight: 600;
}

a:hover {
  color: #005999;
  text-decoration: underline;
}

.header {
  height: 332px;
  background-image: url('../pictures/Header.png');
  width: 1200px;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #c8e4ed;
  margin: 0 auto;
  position: sticky;
  top: -180px; /* helft van 332px */
  z-index: 999;
}


.button {
  display: inline-block; /* zodat de <a> zich als knop gedraagt */
  text-decoration: none; /* verwijdert de standaard onderstreping */
  background-color: 4986fd;
  border: 2px solid #ffffff;
  color: #333;
  padding: 10px 20px;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: verdana;
}

.button:hover {
  background-color: #f0f9fb;
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
}

.button-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0px;
  padding: 2px;
  background-color: #f6c365;
  width: 1196px; /* neemt 80% van de pagina */
  margin: 0 auto;
    position: sticky;
  top: 151px;
  z-index: 1000;
}

.content {
  max-width: 1181px;
  margin: 5px auto;
  padding: 10px;
  background-color: #d3e8ff;       /* donkere achtergrond */
  border-radius: 1px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  font-family: 'Segoe UI', sans-serif;
  color: black;                  /* lichte tekstkleur voor contrast */
  line-height: 1.8;
  font-size: 18px;                 /* grotere tekst */
}
.center-wrapper {
display: flex;
justify-content: center;
max-width: 1181px;
margin: 5px auto;
padding: 10px;
background-color: #d3e8ff;
border-radius: 1px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
color: black;
line-height: 1.8;
font-size: 18px;

}

.center-topper {
  height: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #e6f3f7;
}

  .login-container {
	   	font-family: 'Segoe UI', sans-serif;
      background-color: white;
      padding: 40px;
      border-radius: 12px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      width: 100%;
      max-width: 350px;
      text-align: center;
    }

    .login-container h2 {
      margin-bottom: 20px;
      color: #333;
    }

    .login-container input[type="text"],
    .login-container input[type="password"] {
      width: 100%;
      padding: 12px;
      margin: 10px 0;
      border: 1px solid #ccc;
      border-radius: 8px;
      background-color: #f8fcfd;
    }

    .aanpassen-container button {
			font-family: 'Segoe UI', sans-serif;
      width: 100%;
      padding: 12px;
      background-color: #e6f3f7;
      border: none;
      border-radius: 8px;
      color: #333;
      font-weight: bold;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }


    .login-container button {
			font-family: 'Segoe UI', sans-serif;
      width: 100%;
      padding: 12px;
      background-color: #e6f3f7;
      border: none;
      border-radius: 8px;
      color: #333;
      font-weight: bold;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }

    .login-container button:hover {
      background-color: #d0e7ef;
    }

    .login-container p {
		font-family: 'Segoe UI', sans-serif;
      margin-top: 16px;
      font-size: 14px;
      color: #666;
    }

    .login-container a {
			font-family: 'Segoe UI', sans-serif;
      color: #0077aa;
      text-decoration: none;
    }

    .login-container a:hover {
      text-decoration: underline;
    }
	    table {
	  min-width: 1180px;
      border-collapse: collapse;
	  margin-top: 10px;
      background-color: white;
      box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    }

    th, td {
      border: 1px solid #ccc;
      padding: 5px;
      text-align: left;
    }

    th {
      background-color: #d9edf2;
      color: #333;
    }

/* Oneven rijen */
table tr:nth-child(odd) {
  background-color: #d9edf2;
}

/* Even rijen */
table tr:nth-child(even) {
  background-color: white; /* zwart */
}

	
	
/* ============================
   MOBIEL (tot 600px breed)
   ============================ */
@media (max-width: 600px) {

  .header {
    width: 100%;
	height: 200px;
       top: 0;
    z-index: 1; /* header blijft onder menu */
  }


  .button-container {
    width: 100%;
    top: 100px;              /* menu bovenaan */
    position: sticky;
    z-index: 200px;       /* menu overlapt header */
    flex-wrap: wrap;
    gap: 8px;
    padding: 2px;
  }


  .button {
	
    width: 50px;          /* full-width knoppen voor mobiel */
    text-align: center;
    font-size: 15px;
    padding: 12px;
	   top: -80px;
	 position: sticky;
  }

  .content {
    max-width: 95%;
    font-size: 15px;
    padding: 12px;
  }


  body {
      font-family: 'Segoe UI', sans-serif;
      background-color: #e6f3f7;
      padding: 5px;
    }

    h2 {
      margin-top: 20px;
      color: #333;
    }

    table {
      max-width: 600px;
	  min-width: 600px;
      border-collapse: collapse;
	  margin-top: 50px;
      background-color: white;
      box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    }

    th, td {
      border: 1px solid #ccc;
      padding: 5px;
      text-align: left;
    }

    th {
      background-color: #d9edf2;
      color: #333;
    }

    td {
      background-color: 3edbff;
    }
}