body {
    margin: 0;
    font-family: Arial, sans-serif;
}

.hero {
    height: 75vh;              
    width: 100%;
    display: flex;
    justify-content: center;   
    align-items: center;       
    color: white;
    font-size: 40px;
    text-align: center;
    background-size: cover;
    background-position: center;
}

.index .hero {
    background-image: url("../images/webbanner.jpg");
}

.eten .hero {
    background-image: url("../images/webbanner4.jpg");
}

.eilanden .hero {
    background-image: url("../images/webbanner3.jpg");
}

.inloggen .hero {
    background-image: url("../images/webbanner5.jpg");
}

.ons .hero {
    background-image: url("../images/webbanner6.jpg");
}

header {
    background-color: #cbe9f3;
    padding: 15px 30px;
    display: flex;
    justify-content: space-between; 
    align-items: center;
}

#logo img {
    width: 120px;
}

nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;              
    gap: 20px;                  
}

nav ul li a {
    text-decoration: none;
    color: black;
    font-weight: normal;
    font-size: 16px;
    position: relative;
}

nav ul li a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -3px; 
    width: 0%;    
    height: 2px;  
    background-color: #54acdb;
    transition: width 0.3s ease;
}

nav ul li a:hover::after {
    width: 100%;
}

main {
    max-width: 1000px;
    margin: 40px auto;
    text-align: center;
}

/* deze code zorgt dat de boxes in een raster worden weergegeven */
.boxgrid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}
/* deze code zorgt dat de boxes een vaste breedte hebben en netjes worden weergegeven */
.box {
    border: 1px solid #ccc;
    padding: 15px;
    text-align: center;
    width: 350px;
}
/* deze code zorgt voor ronde hoeken in de afbeeldingen*/ 
.box img {
    border-radius: 8px;
}
/* rechtstreeks uit w3schools gepakt maar zorgt voor dat de contents uberhaupt in een tabel staan */ 
  table {
    border-collapse: collapse;
    width: 100%;
  }
  th, td {
    border: 1px solid black;
    padding: 8px;
    text-align: center;
  }

  .login-form {
    width: 350px;
    margin: 40px auto;
    padding: 25px;
    border: 1px solid #ccc;
    border-radius: 8px;
    background-color: #f9f9f9;
}
/* css gepakt van chatgpt voor de login
maar begin gaat over de lengte van de input boxes
button gaat over hoe de knop eruit ziet, hover is wanneer de muis op de knop is wordt het een donker blauw
kleur en forgot is zodat het in het midden staat  */
.login-form input {
    width: 100%;
    padding: 8px;
    margin-top: 5px;
}

.login-form button {
    width: 100%;
    padding: 10px;
    background-color: #2481c3;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.login-form button:hover {
    background-color: #1e5fa3;
}

.forgot {
    text-align: center;
    margin-top: 10px;
}

footer {
    background-color: #cbe9f3;
    text-align: center;
    padding: 20px;
    margin-top: 40px;
    border-top: 2px solid #54acdb;
}

.footer-links {
    margin-bottom: 10px;
}

.footer-links a {
    text-decoration: none;
    color: black;
    margin: 0 10px;
    font-size: 14px;
    position: relative;
}

/* dit zorgt voor dat de footer knopjes dezelfde animatie hebben als de header */
.footer-links a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 0%;
    height: 2px;
    background-color: #54acdb;
    transition: width 0.3s ease;
}

.footer-links a:hover::after {
    width: 100%;
}