/*===========================
 HOME PAGE
 =============================*/


 body {
  background-color: #00543D  
  
 }

 .heroimage { /*background image*/
  background-image: url("achtergrondfotohome.png"); 
  background-color: #00543D;
  height: 600px; 
  background-position: center; 
  background-repeat: no-repeat; 
  background-size: cover;
 }

 

 
 div img {   /*dit is het logo*/
 display: flex;
 margin-left: auto;
 margin-right: auto;
 }




.navigation { /*navigation bar boven aan de website*/
  display: flex;
  background-color:#A3C9A8; 
  align-items: center;
  justify-content: left;
}

.navigation a { /*de linkjes in de navigation bar die leiden naar andere webpagina's*/
  color: white;
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  text-decoration: none;
  padding: 15px 20px;
  text-align: center;
}

.navigation a:hover { /*verandering bij hovering met muis*/
  background-color: white;
  color: #00543D 
}


.leftcentered { /*linker knop school projecten*/
  position: absolute;
  top: 60%;
  left: 25%;
  transform: translate(-50%, -50%);
  text-align: center;
}


.rightcentered { /*rechterknop persoonlijke projecten*/
  position: absolute;
  top: 60%;
  left: 75%;
  transform: translate(-50%, -50%);
  text-align: center;
}



a {
text-decoration: none;
color: white;
}



.projectlinks:hover{ /*verandering bij hovering met muis*/
background-color: #A3C9A8;
}

.button { /*het ronde cirkeltje met de links naar schoolprojecten en persoonlijke projecten*/
display: flex;
background-color:#A3C9A8;
height: 150px;
width: 150px; 
border-radius: 50%;
text-align: center;
justify-content: center;
align-items: center;
font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
font-size: xx-large;

}

.button:hover { /*verandering bij hovering met muis*/
color:  white;
background-color: #fe0089;
}



/*==========================
FOOTER
============================*/
.footertext {
  color: white;
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}

.underline { /*linkjes die onderstreept worden voor duidelijkheid dat het een link is*/
  text-decoration: underline;
}

.underline:hover {
  color: #fe0089;
}

footer {
  position: relative;
  bottom: 0;
  height: 100%;
  width: 100%;
  background-color:#A3C9A8;
  text-align: center;
  padding: 10px 0;
}

/* Container voor de icoontjes */
.footer-container {
  display: flex;
  justify-content: center;
  gap: 20px;
}

/* Stijl voor de icoontjes */
.footer-icon {
  color: white;
  font-size: 30px;
  text-decoration: none;
  transition: transform 0.3s ease;
}

.footer-icon:hover { /*verandering bij hovering met muis*/
  transform: scale(1.2);
}


.footer-icon i {
  transition: color 0.3s ease;
}

.footer-icon:hover i { /*verandering bij hovering met muis*/
  color: #fe0089;
}

/*=========================================
ABOUT ME PAGE
===========================================*/

.kopaboutme {
    color: white;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-size: 100pt;
    
}

.aboutbody {
    background-color: #00543D;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 8px;
}

.heroimageaboutme { /*background image*/
    background-image: url("achtergrondme.png"); 
    background-color: #00543D;
    height: 2000px; 
    background-position: center; 
    background-repeat: no-repeat; 
    background-size: cover;
    
}

.mijndoel { 
  position: relative;
  top: -10%;
  left: 40%;
}

.highlight { 
  color:#fe0089; 
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; 
}

.aboutmeh2 {
  color:white; 
  font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; 
  font-size: 30pt;
}

.aboutmep {
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  font-size: 20pt;
  color: white; 
  position: relative;
  top: -23%;
}

.contact {
  color:  #00543D;
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  font-size: 40pt;
}

.highlighth2 {
  color:#fe0089;  
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; 
}

.contactp { 
  color:#00543D;
  font-size: 15pt;
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}

.vak {
  position: relative;
  left: 3%;
  top: -5%;
}

.foto1{ /*positie en vorm foto1*/
  border-radius: 50%;
  position: relative;
  left: 60%;
  top: -17%;
}

.foto2{ /*positie en vorm foto2*/
  border-radius: 50%;
  position: relative;
  left: 7%;
  top: -25%;
}

.foto3{ /*positie en vorm foto3*/
  border-radius: 50%;
  position: relative;
  left: 60%;
  top: -20%;
}
/*=============================================
PERSONAL PROJECTS PAGE EN SCHOOL PROJECTS PAGE
===============================================*/ 


h3 {
  color: white;
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; 
  font-size: 20pt;
}

p {
  color: white;
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; 
  font-size: 12pt;
}

.underline2 { /*"lees meer" linkjes*/
  text-decoration: underline;
}

.underline2:hover { /*"lees meer" linkjes verandering bij hovering met muis*/
  color: #fe0089;
}

.titel {
  color: white;
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  font-size: 35pt;
  text-align: center;
}



.personalp{
  background-color: #00543D; 
}


.personal {
  color: #A3C9A8;
}

.personalbody {
  background-color: #00543D;
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 8px;
}

/*grid lay-out om mijn projecten netjes te ordenen in een grid*/
.container{
    
  max-width: 1000px;
  margin: 0 auto;

  display: grid;
  grid-gap: 16px;
}


/*
  #productArticle structure
 */
#productArticle{
  padding: 3rem 0;
}

#productArticle .container:nth-child(1){  /* eerste container */
  padding: 1rem;
  max-width: 1500px;
}

#productArticle .container:nth-child(2){ /* tweede container */
  padding: 1rem;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: 16px;
}

#productArticle .card:nth-child(1){ /* eerste card */
  grid-column-start: 1; 
  grid-column-end: 5; 
}


#productArticle .card:nth-child(2){ /* tweede card */
  grid-column-start: 5; 
  grid-column-end: 9; 
}

#productArticle .card:nth-child(3){ /* derde card */
  grid-column-start: 9; 
  grid-column-end: 13; 
}



/*#productArticle visual design*/
#productArticle{
  background-color:#A3C9A8; 
}

#productArticle .container{
  text-align: center;
}

#productArticle .container > h2{
  font-size: 2rem;
  font-weight: bold;
}

#productArticle .container > p{
  font-size: 0.85rem;
  line-height: 1.4;
}



/*#productArticle cards*/
#productArticle .card{
  border: 1px solid #00543D; 
  background-color:#00543D;
}

#productArticle .card img{
  display: block;                       
  width: 100%;
  height: 80%;
  object-fit: cover;
}

#productArticle .card h3{
  font-size: 1.25rem;
  margin: 1rem 0;
  padding: 0 1rem;
}

#productArticle .card p{
  font-size: 0.85rem;
  line-height: 1.4;
  padding: 0 1rem 1rem 1rem;
} 



div p { 
  border: 0px solid rgb(255, 255, 255);
background-color: rgb(148, 216, 175);
font-family: Arial, Helvetica, sans-serif;
font-size: 12pt;
padding: 10px;
text-align: justify;
width: 450px;
}

.personalp{
  background-color: #00543D;
}


.personal {
  color: #A3C9A8;
}

.personalbody {
  background-color:#00543D;
}




/*2e rij*/
#productArticle2{
  padding: 3rem 0;
}

#productArticle2 .container:nth-child(1){  /* eerste container */
  padding: 1rem;
  max-width: 1500px;
}

#productArticle2 .container:nth-child(2){ /* tweede container */
  padding: 1rem;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: 16px;
}

#productArticle2 .card:nth-child(1){ /* vierde card */
  grid-column-start: 1; 
  grid-column-end: 5; 
}


#productArticle2 .card:nth-child(2){ /* vijfde card */
  grid-column-start: 5; 
  grid-column-end: 9; 
}

#productArticle2 .card:nth-child(3){ /* zesde card */
  grid-column-start: 9; 
  grid-column-end: 13; 
}



/*#productArticle visual design*/
#productArticle2{
  background-color:#A3C9A8; 
}

#productArticle2 .container{
  text-align: center;
}

#productArticle2 .container > h2{
  font-size: 2rem;
  font-weight: bold;
}

#productArticle2 .container > p{
  font-size: 0.85rem;
  line-height: 1.4;
}



/*#productArticle cards*/
#productArticle2 .card{
  border: 1px solid #00543D; 
  background-color:#00543D;
  
}

#productArticle2 .card img{
  display: block;                       
  width: 100%;
  height: 80%;
  object-fit: cover;
}

#productArticle2 .card h3{
  font-size: 1.25rem;
  margin: 1rem 0;
  padding: 0 1rem;
}

#productArticle2 .card p{
  font-size: 0.85rem;
  line-height: 1.4;
  padding: 0 1rem 1rem 1rem;
}