:root {
    --color-primary: #369; /* Primaire kleur voor links en accenten */
    --color-secondary: #ff6f61; /* Secundaire kleur voor hover-effecten */
    --color-background: #f4f4f4; /* Achtergrondkleur voor kolommen */
    --color-text: #333; /* Standaard tekstkleur */
    --color-header-bg: #F7B748; /* Achtergrondkleur voor de header */
    --color-footer-bg: #444; /* Achtergrondkleur voor de footer */
    --color-border: #ddd; /* Randkleur voor elementen */
    --border-radius: 8px; /* Afgeronde hoeken */
  }
  
  html {
    height: 100%;
    padding: 0;
    margin: 0;
    background-color: #C8C8C8;
    overflow-y: scroll; /* Zorgt ervoor dat de pagina scrollbaar is */
    overflow:auto;
  }
  
  body {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--border-radius);
    width: 100%;
    background: #fff;
    min-width: unset;
    /*overflow: auto; */
    font-size: 1rem;
    min-height: 100%; /* Zorgt ervoor dat de body minstens de hoogte van het scherm heeft */
    color: var(--color-text);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Moderner font */
    line-height: 1.6;
    display: flex;
    flex-direction: column;
  }
  
  /* Container voor flexbox-layout */
  .container-fluid, .sidebar {
    display: flex;
    flex-direction: column;
    flex: 1; /* Zorgt ervoor dat de container de resterende ruimte inneemt */
    background: grey;
    border-radius: var(--border-radius);
    overflow: visible;
  }
  
  .topClass {
    flex: 1;
  }
  
  .bottomClass {
    border-top: 1px solid var(--color-border);
  }
  
  /* Links */
  a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color 0.3s ease, background 0.3s ease;
  }
  
  a:hover {
    color: #fff;
    background: var(--color-primary);
  }
  
  /* Headers */
  h1, h2, h3 {
    margin: 0.8em 0 0.2em 0;
    padding: 0;
  }
  
  p {
    margin: 0.4em 0 0.8em 0;
    padding: 0;
  }
  
  /* Afbeeldingen */
  img {
    margin: 10px 0 5px;
  }
  
  #ads img {
    display: block;
    padding-top: 10px;
  }
  
  /* Header */
  #header {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: var(--color-header-bg);
    border-bottom: 2px solid var(--color-border);
    padding: 10px 20px;
    justify-content: space-between; /* Links logo en titel, rechts navigatie */
    align-items: flex-start;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}

/* Logo en H1 onder elkaar, links uitgelijnd */
.header-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}

.logo {
    width: 140px;
    height: 120px;
}

h1 {
    font-size: 22px;
    font-weight: bold;
    margin: 0;
    color: var(--color-text-primary);
}

#header {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: var(--color-header-bg);
  border-bottom: 2px solid var(--color-border);
  padding: 5px 20px; /* Minder hoge header */
  display: flex;
  flex-direction: row; /* Zet de inhoud naast elkaar */
  justify-content: space-between; /* Verdeel de ruimte tussen items */
  align-items: center; /* Centreert verticaal */
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
  height: 60px; /* Lagere hoogte voor compactere header */
}

/* Logo aan de linkerkant */
.header-content {
  margin: 0;
  padding: 0;
}

/* Titel en menu in het midden */
.center-content {
  text-align: center;
  flex-grow: 1; /* Zorgt ervoor dat dit de beschikbare ruimte gebruikt */
  display: flex;
  flex-direction: column;
  align-items: center;
}

.title {
  margin: 0;
}

.menu {
  list-style: none;
  margin: 5px 0 0 0; /* Ruimte tussen titel en menu */
  padding: 0;
  display: flex;
  gap: 8px;
  justify-content: center; /* Centreert de knoppen horizontaal */
}

.menu a {
  display: inline-block;
  padding: 6px 12px; /* Kleinere padding voor compactere knoppen */
  background: var(--color-button-bg, #007bff);
  color: #fff;
  font-weight: 600;
  font-size: 14px; /* Iets kleinere tekst */
  border-radius: 6px;
  transition: all 0.3s ease-in-out;
  text-decoration: none;
  border: none;
  white-space: nowrap; /* Voorkomt dat tekst afbreekt */
}

.menu a:hover {
  background: var(--color-button-hover, #0056b3);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

/* Verwijder uppercase */
.menu a {
  text-transform: none;
}


/* Welkomstbericht aan de rechterkant */
#welcome-message {
  font-size: 14px;
  font-weight: bold;
  color: var(--color-text-secondary, #555);
  margin-left: auto; /* Schuift het helemaal naar rechts */
  white-space: nowrap; /* Voorkomt afbreken */
}


/* Titel in het midden */
.title {
  text-align: center;
  flex-grow: 1;
  margin: 0 20px;
}

h1 {
  font-size: 22px;
  font-weight: bold;
  margin: 0;
  color: var(--color-text-primary);
}

/* Welkomstbericht aan de rechterkant */
#welcome-message {
  font-size: 14px;
  font-weight: bold;
  color: var(--color-text-secondary, #555);
  margin-left: auto; /* Duwt het bericht naar rechts */
}

@media (max-width: 768px) {
    #header {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .header-content {
        align-items: center;
    }

    .nav-container {
        align-items: center;
    }

    .menu {
        flex-direction: column;
        align-items: center;
    }

    #welcome-message {
        text-align: center;
    }
}



  
  /* Kolommen */
  .colmask {
    display: flex;
    width: 100%;
    /*overflow: hidden; */
    flex: 1; /* Zorgt ervoor dat de kolommen de resterende ruimte innemen */
  }
  
  .colright,
  .colmid,
  .colleft {
    flex: 1;
    position: relative;
  }
  
  .col1,
  .col2,
  .col3 {
    padding: 0 0 1em 0;
    overflow: visible;
  }
  
  /* 2-kolommen layout (links menu) */
  .leftmenu {
    background: #fff;
    display: flex;
    flex: 1;
  }
  
  .leftmenu .colleft {
    background: var(--color-background);
    flex: 0 0 25%; /* Breedte van de linkerkolom */
    order: -1; /* Zorgt ervoor dat het linkermenu aan de linkerkant staat */
  }
  
  .leftmenu .col1 {
    flex: 1; /* Rechterkolom neemt resterende ruimte in */
    padding-left: 20px; /* Ruimte tussen kolommen */
  }
  
  .leftmenu .col2 {
    flex: 0 0 20%; /* Breedte van de linkerkolom */
    background: var(--color-background);
    padding: 0 10px;
  }
  
  /* Linkermenu specifieke stijlen */
  .leftmenu .col2 {
    margin-left: 0; /* Zorgt ervoor dat het menu niet naar links schuift */
    padding-bottom: 0; /* Voorkomt extra ruimte onder het menu */
  }
  
  /* Footer */
  #footer {
    background: var(--color-footer-bg);
    border-top: 1px solid var(--color-border);
    padding: 10px;
    text-align: right;
    font-family: Verdana, sans-serif;
    font-size: 0.8em;
    color: #fff;
  }
  
  #footer p {
    margin: 0;
    padding: 0;
  }
  
  /* Aanvullende stijlen */
  .p1 {
    margin-right: 10px;
  }
  
  .p2 {
    margin-top: 50px;
    margin-right: 10px;
  }
  
  #archive_margins {
    margin-left: 6%;
    margin-right: 3%;
  }
  
  .th_content {
    text-align: center;
    color: white;
    background-color: blue;
    font-size: 1.2em;
  }
  
  #gen_content {
    margin-left: 0%;
    margin-right: 4%;
  }
  
  #gen_content2 {
    margin-left: 3%;
    margin-right: 3%;
  }