body{
    width:100%;
    height: 100%;
    font-size: 95%;
  }
  h1 {
    color:white;
    font-weight: 1000;
    line-height: 26px;
    font-size: 200%;
  
  }

  #testfont{
    font-family: 'Monocraft';
  }
  
  aside h3 {
    color:#400401;
    font-size: 24px;
    line-height: 26px;
    font-weight: 600;

  }
  
  @font-face{
    font-family: 'Monocraft';
    src: url('Monocraft.otf') format('truetype');
    src: url('Monocraft.ttf') format('truetype');
    
    font-weight: normal;
    font-style: normal;
  }
  
  
  a {
    float: inline-start;
  }
  * {
    box-sizing: border-box;
  }
  *,
  *:before,
  *:after {
    box-sizing: inherit;
  }
  
  footer {
    grid-area: footer; /* display in footer grid area */
    margin-top: 1.25rem;
    margin-bottom: 0%;
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 1vw;
  }
  
  
  
  main {
    grid-area: main; /* display in main grid area */
    width: 100%;
    margin-top: 0,5vw;
    padding: 1.25rem;
  }
  aside {
    grid-area: aside; /* display in aside grid area */
    margin-top: 0rem;
    padding: 3rem;
    border-right: 0.125rem solid #e2e2e2;
    background-color: lightseagreen;
  }
  header {
    grid-area: header; /* display in header grid area */ ; 
    padding: 0,5%;
    margin-bottom: 0 auto;
    height: 100%;
    background-color: #2b2929;
    
  }
  header nav ol li {
    display: inline-block;
    margin-right: 3vw;
    margin-top: 0,5% !important;
    font-family: 'Monocraft';
  }
  .pageheader{
    text-align: center;
  }
  
  .pageheader,
  .pagefooter {
    box-shadow: inset;
    background-size: cover;
    width: 100%;
    height: 100%;
    
  }
  .pagefooter{
    text-align: left;
  }

  #begin{
    display: flex; /* Zet de header in flexbox-modus */
    align-items: center; /* Centreert de items verticaal */
    width: 100%;
    flex-direction: column; /* Plaats h1 en p onder elkaar */
    color: white;
    
  }
  
  
  .container {
    display: grid;
    grid-template-areas:
        "header header" /* header neemt de volledige breedte in */
        "aside main" /* aside naast main */
        "footer footer"; /* footer neemt de volledige breedte in */
    grid-template-columns: 25% 75%; /* eerste kolom is smaller dan de tweede */
    grid-template-rows: auto; /* rijen passen zich aan de inhoud aan */
    max-width: 100%; /* of een andere waarde naar keuze */ /* centreer de container */
    background-color: hsla(0, 12%, 96%, 0.8);
    min-height: 100%;
  }
  @media (max-width: 768px) {
    .container {
        grid-template-areas:
            "header"
            "main"
            "aside"
            "footer"; /* Alle elementen onder elkaar op kleine schermen */
        grid-template-columns: 1fr; /* Eén kolom */
    }
}
#testfont{
  font-family: 'Monocraft';
}




html{
  background-color: #202A44;
}
.card {
  width: 190px;
  height: 254px;
  background: #f3f3;
  border-radius: 15px;
  box-shadow: 1px 5px 60px 0px #100a;
}

.card .card-border-top {
  width: 60%;
  height: 3%;
  background: #f5f5;
  margin: auto;
  border-radius: 0px 0px 15px 15px;
}

.card span {
  font-weight: 600;
  color: white;
  text-align: center;
  display: block;
  padding-top: 10px;
  font-size: 16px;
}

.card .job {
  font-weight: 400;
  color: white;
  display: block;
  text-align: center;
  padding-top: 3px;
  font-size: 12px;
}

.card .img {
  width: 125px;
  height: 125px;
  background: #f5f5;
  border-radius: 15px;
  margin: auto;
  margin-top: 0%;
}


.card button {
  padding: 8px 25px;
  display: block;
  margin: auto;
  border: none;
  margin-top: 30px;
  
  color: white;
  font-weight: 600;
  border-radius: 10px;
}

.card button:hover {
  background: #f9f9;
}
.img{
  display: block; /* Zorg ervoor dat de afbeelding als block-element wordt behandeld */
  margin-left: auto; /* Automatische linker marge */
  margin-right: auto; /* Automatische rechter marge */
}
.card{
  margin: 0 auto;
  text-align: center;
}
aside{
  text-align: center;
}
.pageheader h1, p, nav ul li{
  margin:10px 10px 2px 10px;
  height:5%;
}
.pagefooter nav ol li{
  height:5%;
  margin: 10px 10px 10px 10px;
}
.pagefooter{
  height:fit-content;
  margin-bottom: 0%;
  margin-top: 0%;
  width: 98vw;
}
html{
  width: 100%;
}
a{
  color: #3EB489;
  text-decoration: none;
}
a:hover{
  color: #274C77;
}

footer{
  margin-top: 0%;
}
aside h3{
  margin-top: 5px;
}
body{
  background-color: #6a5e5e;
}
main{
  width: 80%;
}
main h2, h3{
  font-size: 20px;
}
aside h3{
  font-size: 20px;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}