body {

  background-color: black;
}




.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 0.8fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "email email email . . . . nav nav nav nav"
    ". . . . . . . . . . ."
    ". . . . . . . . . . ."
    "intro intro intro . foto foto foto . over-mij over-mij over-mij"
    "intro intro intro . foto foto foto . over-mij over-mij over-mij"
    "intro intro intro . foto foto foto . over-mij over-mij over-mij"
    "intro intro intro . foto foto foto . over-mij over-mij over-mij"
    "intro intro intro . foto foto foto . over-mij over-mij over-mij"
    ". . . . . . . . . . ."
    ". . . . . . . . . . ."
    "footer footer footer footer footer footer footer footer footer footer footer";
}

.email {
  grid-area: email;
  color: red;
  padding-left: 30px;
  margin-top: 20px;
}

.footer {
  grid-area: footer;
}

.intro {
  grid-area: intro;
  color: whitesmoke;
  font-size: 80px;
  padding-left: 30px;
}

.foto {
  grid-area: foto;
}

.over-mij {
  grid-area: over-mij;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-right: 50px;
}

.nav {
  grid-area: nav;
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-evenly;
  margin-left: 160px;
  margin-top: 20px;
  color: white;
}

.rood {
  color: red;
}

.Software {
  font-size: 30px;
  margin-top: 20px;
}

.CV {
  text-decoration: none;
  font-size: 30px;
  margin-right: 100px;
  margin-top: 30px;



}

.CV1 {

  background-color: red;
  text-decoration: none;
  padding: 5px 5px;
  color: black;
  border-radius: 10px;
  font-size: 20px;
}

.project {
  color: white;
  text-decoration: none;

}

.Home {
  display: flex;
  flex-direction: row-reverse;
  text-decoration: none;
  color: white;
}

.CVLINK {
  display: flex;
  flex-direction: row-reverse;
  text-decoration: none;
  color: white;

}

.over-mij1 {
  color: red;
  font-size: 20px;
  padding-bottom: 20px;


}

.over-mij2 {
  font-size: 30px;
  color: white;
  padding-right: 50px;



}

.over-mij3 {
  padding-top: 30px;
  font-size: 20px;
  color: white;


}

.link-contact {
  font-size: 20px;
  text-decoration: none;
  padding: 5px 5px;
  background-color: red;
  color: black;
  border-radius: 10px;

}

.Download-button {
  color: red;
  font-size: 20px;




}

.over-mij-contact {
  padding-top: 20px;

}


.downloadcv {
  padding-top: 20px;
}

.navbar{
  display: none;
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background-color: #333;
  color: white;
  position: relative;
  display: none;
}

/* Standaard verborgen menu */
.menu {
  display: flex;
  gap: 15px;
}

.menu a {
  text-decoration: none;
  color: white;
  font-size: 1rem;
}

/* Hamburger menu-knop */
.menu-toggle {
  display: none;
  background: none;
  border: none;
  color: white;
  font-size: 24px;
  cursor: pointer;
}



@media screen and (max-width:450px) {
  html, body {
    margin: 0;
    /* Verwijder ongewenste marges */
    width: 100%;
    height: 120%;
    overflow-y: scroll;
    /* Of gebruik 'auto' voor alleen scrollen als dat nodig is */
    overflow-x: hidden;
  }

  body{max-width: min-content;}
  .nav {
    display: none;
    flex-direction: row-reverse;
    
    margin-left: 0vw;
    position: relative;
    right: 13px;
    font-size: 3.5vw;
    margin-left: 39vw;
    
    
  }

  .email {
    padding-left: 1vh;
    font-size: 3.5vw;
    display: none;
  }

  .intro{
    margin-top: 30vw;
    max-width: 100%;
  }

  .container {  display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
    gap: 0px 0px;
    grid-auto-flow: row;
    width: 100vw;
  }
  .navbar {grid-area: 1 / 1 / 2 / 0;}
  .emial { grid-area: 1 / 1 / 2 / 4; }
  
  .nav { grid-area: 1 / 1 / 2 / 8; }
  
  .intro { grid-area: 1 / 1 / 4 / 8; 
  max-width: 100%;}
  
  .over-mij { grid-area: 4 / 6 / 6 / 8;
   width: 320px;
  display: block;
  display: flex;
  flex-direction: column;
  justify-content: center;

  }
  
  .foto { grid-area: 3 / 1 / 6 / 4;
    position: relative;
    top: 7%;
    padding-left: 10%;
   }
  
  .footer { grid-area: 6 / 1 / 7 / 8; }


  .over-mij1{
    position: relative;
    
  }

  .foto1{
  
  }
  img{
  height: 150px;
  position: relative;
  left: 6vh;
  }

  .navbar{
    display: flex;
    flex-direction: column;
    font-size: 100px;
    width: 100%;
    height: 30px;
    position: relative;
    right: 0.8vh;
    position: absolute;
        left: -3vh;
  }
  .menu {
    display: none ; /* Menu standaard verbergen op kleinere schermen */
    flex-direction: column;
    gap: 10px;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: #333;
    padding: 10px 0;
    z-index: 1000;
    transition: max-height 0.3s ease-in-out;

}

.menu.show {
    display: block; /* Toon menu wanneer de "show"-class is toegevoegd */
    display: flex;
        flex-direction: column;
        align-items: center;
}

.menu a {
    text-align: center;
    padding: 10px 0;
    
    font-size: 14px;
}

.menu-toggle {
    display: block; /* Toon de hamburger-knop op kleinere schermen */
}
}