.sometype-mono-websiteFont {
  font-family: "Sometype Mono", monospace;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}

/*
KLEUREN

#0A090C Night (zwart)
#F0EDEE Anti-flash white (wit)
#07393C Midnight green (groen)
*/

/*
GRID INDELING | FR'S

|web|
column4 			                251.25px 	1fr

row1	nav 			              60px		0.06fr 
row2	foto, beschrijving	    235px		0.24fr
row3	naam, beschrijving	    200px		0.20fr
row4	socials, content1 2 3	  125px		0.13fr
row5	socials, content1 2 3	  125px		0.13fr
row6	socials, content1 2 3	  125px		0.13fr
row7	footer			            90px		0.09fr


|mobile|
column3					            340px		1fr

row1	nav				            150px		0.62fr
row2	foto, naam, socials		100px		0.41fr
row3	foto, naam, socials		100px		0.41fr
row4	foto, naam, socials		100px		0.41fr
row5	beschrijving			    600px		2.49fr
row6	content1			        300px		1.24fr
row7	content2			        300px		1.24fr
row8	content3			        300px		1.24fr
row9	footer				        220px		0.91fr
*/

/*----------------body---------------*/
body {
  background-color: #f0edee;
  font-family: "Sometype Mono", monospace;
  font-weight: 800;

  display: grid;
  height: 100vh;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 0.06fr 0.24fr 0.2fr 0.13fr 0.13fr 0.13fr 0.09fr;
  grid-template-areas:
    "nav nav nav nav"
    "foto beschrijving beschrijving beschrijving"
    "naam beschrijving beschrijving beschrijving"
    "socials1 content1 content2 content3"
    "socials2 content1 content2 content3"
    "socials3 content1 content2 content3"
    "footer footer footer footer";
  grid-gap: 0.15rem;
}

/*-----------------nav-------------*/
#navigatiebalk {
  background-color: #07393c;
  border-radius: 20px;
  grid-area: nav;
  text-align: center;
  padding-left: 5rem;
  padding-right: 5rem;
  padding-top: 2rem;
  padding-bottom: 2rem;
}
#navigatiebalkItem1 {
  padding: 2rem;
  color: #f0edee;
}
#navigatiebalkItem2 {
  padding: 2rem;
  color: #f0edee;
}
#navigatiebalkItem3 {
  padding: 2rem;
  color: #f0edee;
}
#navigatiebalkItem4 {
  padding: 2rem;
  color: #f0edee;
}

/*-----------------sidebar-------------*/
#homepaginaProfielFoto {
  grid-area: foto;
  max-height: 25vh;
}
#homepaginaNaam {
  grid-area: naam;
  font-weight: 800;
  max-width: 20vw;
  align-self: start;
  padding-bottom: 3.5rem;
}
#homepaginaStudie {
  grid-area: naam;
  font-weight: 200;
  font-style: italic;
  max-width: 20vw;
  align-self: end;
}

/*-----------------socials-------------*/
#contactLink1 {
  grid-area: socials1;
  padding: 1rem;
  color: #f0edee;
  background-color: #07393c;
  border-radius: 20px;
  text-align: center;
}
#contactLink2 {
  grid-area: socials2;
  padding: 1rem;
  color: #f0edee;
  background-color: #07393c;
  border-radius: 20px;
  text-align: center;
}
#contactLink3 {
  grid-area: socials3;
  padding: 1rem;
  color: #f0edee;
  background-color: #07393c;
  border-radius: 20px;
  text-align: center;
}

/*-----------------beschrijving-------------*/
#homepaginaBeschrijving {
  grid-area: beschrijving;
  text-align: left;
  font-weight: 500;
  padding-top: 2rem;
}

/*-----------------content-------------*/
#homepaginaContent1 {
  grid-area: content1;
  background-color: #07393c;
}
#homepaginaContent2 {
  grid-area: content2;
  background-color: #07393c;
}
#homepaginaContent3 {
  grid-area: content3;
  background-color: #07393c;
}

/*-----------------footer-------------*/
footer {
  grid-area: footer;
  text-align: center;
  background-color: #07393c;
  border-radius: 20px;
  color: #f0edee;
}

/*mobile*/
@media only screen and (max-width: 1080px) {
  body {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 0.62fr 0.41fr 0.41fr 0.41fr 2.49fr 1.24fr 1.24fr 1.24fr 0.91fr;
    grid-template-areas:
      "nav nav nav"
      "foto naam socials1"
      "foto naam socials2"
      "foto naam socials3"
      "beschrijving beschrijving beschrijving"
      "content1 content1 content1"
      "content2 content2 content2"
      "content3 content3 content3"
      "footer footer footer";
    grid-gap: 0.15rem;
  }
  #homepaginaProfielFoto {
    max-height: 15vh;
  }
}