@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

/* style.css */

:root {
    /* Header */
    --header-height:           200px;
    --header-bg:               #fff;  /* #8cb0ea heel lichtblauw */
  
    /* Ruimte tussen header en knoppen */
    /* --header-button-spacing:   20px; */
    --header-button-spacing:   0px;
  
    /* Verloop-kleuren per knop voor index.html*/
    --icw-start: #1100d9 ;  --icw-end:   #0a0080;
    --adb-start: #f8d1b2;  --adb-end:   #914d1a;
    --cm-start:  #b4d5db ;  --cm-end:    #3d6b70;

   /* Verloop-kleuren per knop voor ICW.html*/
   /* --icw1-start: #8cb0ea;  --icw1-end:   #0b0f7b;
   --icw2-start: #e19a93;  --icw2-end:   #5b1009;
   --icw3-start: #78c297;  --icw3-end:   #0d4b27;
   --icw4-start: #cf9fcf;  --icw4-end:   #400764; */

   --icw1-start: #070066;  --icw1-end:   #0a0080;
   --icw2-start: #0a0080 ;  --icw2-end:   #0e00a8;
   --icw3-start: #0e00a8;  --icw3-end:   #1100d9 ;
   --icw4-start: #1100d9 ;  --icw4-end:   #4b3fff;
   
   /* Verloop-kleuren per knop voor ADB.html*/
   /* --adb1-start: #8cb0ea;  --adb1-end:   #0b0f7b;
   --adb2-start: #e19a93;  --adb2-end:   #5b1009;
   --adb3-start: #78c297;  --adb3-end:   #0d4b27;
   --adb4-start: #cf9fcf;  --adb4-end:   #400764; */

   --adb1-start: #a3563c ;  --adb1-end:   #d27a5e;
   --adb2-start: #d27a5e;  --adb2-end:   #f8d1b2;
   --adb3-start: #f8d1b2;  --adb3-end:   #f1bfa4;
   --adb4-start: #f8d1b2;  --adb4-end:   #f1bfa4;

   /* Verloop-kleuren per knop voor CM.html*/
   /* --cm1-start: #8cb0ea;  --cm1-end:   #0b0f7b;
   --cm2-start: #e19a93;  --cm2-end:   #5b1009;
   --cm3-start: #78c297;  --cm3-end:   #0d4b27;
   --cm4-start: #cf9fcf;  --cm4-end:   #400764; */

   --cm1-start: #3d5c67;  --cm1-end:   #4a6b75;
   --cm2-start: #4a6b75 ;  --cm2-end:   #6a8c98;
   --cm3-start: #6a8c98;  --cm3-end:   #8aacc4;
   --cm4-start: #8aacc4;  --cm4-end:   #b4d5db;

  }
  
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
  }
  
  html, body {
    /* width: 100vw; */
    width: 100%;
    height: 100vh;
  }
  
  body {
    display: flex;
    flex-direction: column;
  }

  h1 {
    font-size: 220%;
    font-family: Montserrat;
  }

  h1+h1{
    margin-top:-18px; /*ruimte in header tussen 2 titels*/
  }

  h1.webdesign{
    white-space: pre;
  }

  h2 {
    font-size: 150%;
  }

  h3 {
    font-size: 130%;
  }

  ul {
    list-style: circle;    
    margin-left: 3%;
  }
  
  ul li {
    font-size: 120%;
    text-align: left;
  }

  ul ul li{
    font-size: 100%;
  }

  
  .indent {
    list-style: disc;
    margin-left: 10%;
  }

  /* --------- HEADER --------- */
  .header-link {
    display: block;        /* zorgt dat de <a> de hele header vult */
    text-decoration: none; /* geen onderstreep */
    color: inherit;        /* neem de kleur aan van de .hoofding e.d. */
  }
  .header-link:hover,
  .header-link:focus {
    text-decoration: none; /* voorkomen dat hover-underline terugkomt */
  }

  .header {
    height: var(--header-height);
    width: 100%;
    background-color: var(--header-bg);
    display: grid;
    grid-template-columns: 15% auto 15%;
    align-items: center;
    justify-content: space-between;
    /* padding: 0 20px; */
  }
  
  .header-logo,
  .header-corner {
    /* Zorg dat de afbeeldingen niet te groot worden */
    max-height: calc(var(--header-height) * 0.8);
    max-width: 270px;
    align-self: flex-start;
  }

  header div + div {
    /* Zorg dat de afbeeldingen niet te groot worden */
    align-self: flex-start;
    text-align: right;
  }

header div p{
    padding-right: 25px;
  }
  
  .hoofding {
    /* color: #1f47b3; */
    color: #1100d9;
    font-weight: 600;
    
    flex: 1;                 /* neemt de ruimte tussen de afbeeldingen in */
    text-align: center;
    /* font-size: 5rem; */
    font-size: 4rem;
  }
  
    /*extra table-styling */
    .button-container button table {
      width: 100%;
      border-collapse: collapse;
    }
    .button-container button th,
    .button-container button td {
      border: 1px solid #333;
      padding: 6px;
      text-align: center;
      font-size: 1.1rem;
    }
    .button-container button thead th {
      background-color: #363434;
      font-weight: bold;
    }
    .button-container button tbody th {
      background-color: #363434;
      font-weight: bold;
    }
    .button-container button tbody tr:first-child td {
      /* optioneel: geen bovenborder onder eerste rij */
      border-top: none;
    }

  /* --------- KNOPPEN --------- */
  .button-container {
    display: flex;
    width: 100%;
    height: calc(100vh - var(--header-height) - var(--header-button-spacing));
    margin-top: var(--header-button-spacing);
  }
  
  button {
    flex: 1;
    height: 100%;
    border: none;
    outline: none;
    font-size: 1.2rem;
    color: #fff;
    cursor: pointer;
    transition: opacity 0.3s;
    text-align: center;

    display: flex;                 /* maak de knop een flex-container */
    flex-direction: column;        /* items (tekst) onder elkaar */
    justify-content: flex-start;   /* zet de inhoud écht helemaal bovenaan */
    /*align-items: center;   */        /* centreer de inhoud horizontaal */
    align-items:right;
   /* padding-top: 4%; */            /* optioneel: extra ruimte vanaf de bovenzijde */
    padding-top: 36px; 
    padding-bottom: 36px; 
    padding-left: 2%;
    padding-right: 2%;
  }
  
  button:hover {
    opacity: 0.8;
  }

  button h1{
    line-height: 1.1;
  }
  
  /* Verlopen per knop voor index.html */
  #btn-icw { background: linear-gradient(to bottom, var(--icw-start), var(--icw-end)); }
  #btn-adb { background: linear-gradient(to bottom, var(--adb-start), var(--adb-end)); }
  #btn-cm  { background: linear-gradient(to bottom, var(--cm-start),  var(--cm-end)); }
  /* Verlopen per knop voor ICW.html */
  #btn-icw1 { background: linear-gradient(to bottom, var(--icw1-start), var(--icw1-end)); }
  #btn-icw2 { background: linear-gradient(to bottom, var(--icw2-start), var(--icw2-end)); }
  #btn-icw3 { background: linear-gradient(to bottom, var(--icw3-start), var(--icw3-end)); }
  #btn-icw4 { background: linear-gradient(to bottom, var(--icw4-start), var(--icw4-end)); }
  /* Verlopen per knop voor ADB.html */
  #btn-adb1 { background: linear-gradient(to bottom, var(--adb1-start), var(--adb1-end)); }
  #btn-adb2 { background: linear-gradient(to bottom, var(--adb2-start), var(--adb2-end)); }
  #btn-adb3 { background: linear-gradient(to bottom, var(--adb3-start), var(--adb3-end)); }
  #btn-adb4 { background: linear-gradient(to bottom, var(--adb4-start), var(--adb4-end)); }
  /* Verlopen per knop voor CM.html */
  #btn-cm1 { background: linear-gradient(to bottom, var(--cm1-start), var(--cm1-end)); }
  #btn-cm2 { background: linear-gradient(to bottom, var(--cm2-start), var(--cm2-end)); }
  #btn-cm3 { background: linear-gradient(to bottom, var(--cm3-start), var(--cm3-end)); }
  #btn-cm4 { background: linear-gradient(to bottom, var(--cm4-start), var(--cm4-end)); }