body {
  
  background-color: black;
  background-attachment: fixed;
 }
 html, body {
  height: 100%; 
  margin: 0; 
 }
 a {
  cursor: pointer;
  text-decoration: none;
 }

 *{ 
  margin: 0;
  padding: 0;
 }


 /* ------ ICONS ----> */ 

 .back {
  width: 50px;
  height: 60px;
  background-image: url(/images/undo\ wit.svg);
  background-repeat: no-repeat;
   margin: 50px 30px;
 }
 .back:hover {
 
  background-image: url(/images/undo\ blauw.svg);
 
 }

 /* back to top */

 html { 
  scroll-behavior: smooth;
 }
 .back-to-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 255, 0);
  border-radius: 0.5rem;
  padding: 0.5rem;
  text-decoration: none;
  transition: 0.2s ease-out;
 }

 .back-to-top span {
  color: white;
  font-size: 5rem;
  transition: 0.2 ease-out;
 }

 .back-to-top :hover{
  background-color: rgb(255, 255, 255);
  border-radius: 0.5rem;
  color: blue;
 }

 .back-to-top:hover span {
  transform: translateY(-4px);
 }


/* <------------- HOMEPAGE-----------> */

  

/* header style */

.header-main {
  width: 100% ;
  height: 120px;
  display: flex;
  justify-content: space-between;
  

  /* header style main P */
  
}
.header-main-p {
  width: 120px;
  height: 100%;
  padding-right:300px ;
}

 /* header style main logo */

.header-main-logo {
  width: 120px;
  height: 120px;
}

.header-main-logo img {
  height: 120px; ;
  
}

/* header style main nav */

.header-main-nav {
  width: fit-content;
  height: 100%;
  display: flex;
  padding-right: 10px;
}
.header-main-nav ul {
  list-style: none;
  
}

.header-main-nav ul li  {
  display: inline;
  float: left;
  
}

.header-main-nav ul li a { 
  padding: 0 10px;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 100px;
  color: white;
  display: block ;
  height: 100%;
  font-size: 22px;
  font-weight: bold;
 
}

.header-main-nav ul li a:hover {
  color: blue;
}


.body-main {
  background-image: url(/images/background.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: scroll;
  justify-content: center;
  align-items: center;
}

/*  Section 1 */
#H1main { 
  font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-size: 8.13em ;
  font-weight: 100;
  color: blue;
  text-align:left;
  padding-left: 50px;
}

.container-main { 
  display: flex;
  justify-content: flex-end;
}

.H2-main { 
  font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif ;
  font-size: 9.38em ;
  font-weight: 400;
  color: white;
  padding-right: 100px;
  padding-top: 450px;
}

.p-main1 {
  font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif ;
  font-size: 3.56em ;
  font-weight: 200;
  color: white;
  padding-right: 100px;
  
}

/* section 2 */ 

.H3-main { 

  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-size: 3.13em;
  font-weight: 300;
  color: white;
  padding-left: 50px;
  padding-top: 300px;
  margin: auto;
}

.container-main2 {
  display: flex;
  justify-content: center;

}

.card-main {
  
  width: 900px;
  height: 500px;
  margin: 100px;
}

.card-image {

  height: 450px;
  margin-bottom: 15px;
  background-size: cover;
}

.car-1 { 
  background-image: url(/images/car-1.jpg);
}

.car-2 { 
  background-image: url(/images/car\ 2.jpg);
}

.card-main a {

  color: white;
  display: block;
  text-align: center;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-size: 30px;
}

.card-main  :hover{ 
  color:blue
}

.card-main2 {
  
  width: 900px;
  height: 500px;
  margin: 100px;
}

.card-image2 {
background-color: azure;
  height: 550px;
  margin-bottom: 15px;
  background-size: cover;
}

.car-3 {
  background-image: url(/images/magezine.png);
}


.car-3:hover{ 
  background-image: url(/images/magezine-hover.png);
}


/* <-------------ABOUT-----------> */

 
 .main-body-about {
   margin: 0;
   padding: 0;
   justify-content: center;
   background-image: url(/images/portret.jpg);
   background-color: black;
   background-attachment:scroll;
   background-repeat: no-repeat;
   background-position: right center;
   height: 100vh;
   width: 100%;
   
 }
 /* ------ underline navigatie bar------ */

 .underline {
  display: inline-block;
  border-bottom: 2px solid blue;
  padding-bottom: 2px;
 }
 /* header about */
 
 .header-about { 
  width: 100%;
  height: 120px;
  display: flex;
  justify-content: space-between;
 }
 
 
 /* header about dropdown */
 
 .header-about-nav-dd {
  width: fit-content;
  height: 100%;
  display: flex;
  padding-right: 300px;
  padding-left: 10px;
 }
 .header-about-nav-dd:hover {
  color: blue;
 }
 
 .header-about-nav-dd ul {
 color: white;
  list-style: none;
 }
 
 .header-about-nav-dd ul li {
 display: inline;
 float: left;
 position: relative; 
 }
 
 .header-about-nav-dd ul li a {
   text-decoration: none;
 display: block;
 font-family: Arial, Helvetica, sans-serif;
 color: white;
 font-weight: bold;
 font-size: 22px;
 padding: 10px  10px;
 line-height: 100px;
 }
 
 .header-about-nav-dd ul li ul {
  display: none;
  position: absolute;
  padding: 5px;
  background-color: #000;
  border-radius: 0px 0px 4px 4px;
  
 }
 
 .header-about-nav-dd ul li:hover ul {
 display: block;
  
 }
 
 .header-about-nav-dd ul li ul li {
  width: 280px;
  border-radius: 4px;
 
  }
 
 .header-about-nav-dd ul li ul li a {
  padding: 2px 1px ;
  font-size: 14;
 
  }
 
  
  .header-about-nav-dd ul li ul li a:hover {
   background-color: rgba(0, 0, 255, 0.247);
   }
 
 
 
 /* header about logo */
 
 .header-about-logo {
  width: 120px;
  height: 120px;
  background-image: url(/images/logo-wit.svg);
  background-repeat: no-repeat;
  background-size: cover;
 
 }
 .header-about-logo:hover {
 
  background-image: url(/images/Logo-blauw.svg);
 
 }
 
 
 /* header about nav */
 
 .header-about-nav {
  width: fit-content;
  height: 100%;
  padding-right: 10px;
  display: flex;
 }
 
 .header-about-nav ul {
 list-style: none;
 }
 
 .header-about-nav ul li {
  display: inline;
  float: left;
  
 }
 
 .header-about-nav ul li a {
 text-decoration: none;
  padding: 0 10px 0 10px;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 100px;
  color: rgb(0, 0, 0);
  font-weight: bold;
  display: block;
  font-size: 22px;
  height: 100%;
  
 }
 
 .header-about-nav ul li a:hover {
  color: blue;
 }
 
 
 /* body section-1 */
 
 
 
 .section-1 {
   display: flex;
   justify-content: space-between;
 }
  .section-1 h2 { 
 width: 100%;
 color: white;
 font-size: 44em;
 
 }
 
 .color1 { 
   color: blue;
 
 }
 
 .color2 {
   color: black;
 }
 
 .section-1 p {
   color: white;
   font-size: 2.15em;
   font-family: Arial, Helvetica, sans-serif;
   padding: 18px 100px;
   
 
 }
 
 /* body section-2 */
 
 .section-2 {
   display: flex;
   justify-content: space-between;
 }
 
 .section-2 img {
   height: 86.25em;
   margin: 10px 0;
 }
 
 .section-2 h2 {
   color: blue;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 100px;
   padding: 90px 100px 20px
   ;
 }
 
 
 .section-2 p {
   color: white;
   font-size: 2.15em;
   font-family: Arial, Helvetica, sans-serif;
   padding: 50px 100px 0 100px;
   
 
 }
 
 /* body section-3 */
 
 .section-3 { 
   display: flex ;
   justify-content: space-between;
 
 }
 
 .section-3 img {
   height: 900px;
   padding: 0 0 ;
   
 
 }
 
 .section-3 h2 {
   color: blue;
   margin: 0;
   font-size: 100px;
   font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
   padding: 30px 100px 20px;
 
 }
 
 .section-3 p {
   color: white;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 40px;
   padding: 50px 100px 0 100px;
 }

/* <-------------CONTACT-----------> */

/* header contact nav */
 
.header-contact-nav {
  width: fit-content;
  height: 100%;
  padding-right: 10px;
  display: flex;
 }
 
 .header-contact-nav ul {
 list-style: none;
 }
 
 .header-contact-nav ul li {
  display: inline;
  float: left;
  
 }
 
 .header-contact-nav ul li a {
 text-decoration: none;
  padding: 0 10px 0 10px;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 100px;
  color: white;
  font-weight: bold;
  display: block;
  font-size: 22px;
  height: 100%;
  
 }
 
 .header-contact-nav ul li a:hover {
  color: blue;
 }

 /* ------- GRID CONTAINER--------*/

.grid-container {
 
  display: grid;
  gap: 10px;
 padding: 10px;
}

.grid-container > div {
  
  text-align: left;
  padding: 10px;
  font-size: 30px; }



.grid-item-1 {
  grid-column: 3 / span 1;
  grid-row: 1;
  margin: 100px 0 ;
}

.grid-item-2 {
  grid-column: 3 / span 1;
  grid-row: 2;
  margin: 100px 0px ;
}

.grid-item-3 {
  grid-column: 3 / span 1;
  grid-row: 3;
  margin: 100px 0 ;
}

.grid-item-4 {
  grid-column: 1 / span 2;
  grid-row:3;
}


.p-about {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 200px;
  font-weight: bold;
  text-align: left;
  color: white;
}

/*----- SOCIAL ICON----*/

.mail { 
  width: 200px;
  height: 160px;
  background-image: url(/images/mail\ blauw\ 1.svg);
  background-repeat: no-repeat;
  background-size: cover;
}

.mail:hover {
  background-image: url(/images/mail\ hover.svg);
}


.instagram { 
  width: 200px;
  height: 200px;
  background-image: url(/images/instagram.svg);
  background-repeat: no-repeat;
  background-size: cover;
}

.instagram:hover {
  background-image: url(/images/instagram\ hover.svg);
}


.LinkedIn { 
  width: 200px;
  height: 200px;
  background-image: url(/images/inkedin.svg);
  background-repeat: no-repeat;
  background-size: cover;
}

.LinkedIn:hover {
  background-image: url(/images/hover\ inkedin.svg);
}


.p-contact { 
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
  justify-content: left;
}


 /* <-----------SCHOOL PROJECTS----------> */ 

 .H2-school { 
  font-family:Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-size: 60px;
  color: white;
  margin-left: 50px;
  margin-top: 150px;
 }

 .H3-school { 
  font-family:Arial, Helvetica, sans-serif;
  font-weight:bold;
  font-size: 50px;
  color: white;
  margin-left: 50px;
  margin-top: 150px;
  margin-bottom: 150px;
 }

 .container-school { 
  display: flex;
  margin-bottom: 150px;

 }

 .card-school {
  background-color:blue;
  width: 700px;
  height: 600px;
  margin: 50px;
  border-radius: 15px;

 }

 .card-image-school { 
  
  height: 500px;
  margin-bottom: 15px;
  background-size: cover;
 }

 .car-4 { 
  background-image: url(/images/magezine.png);
  border-radius: 15px 15px 0 0 ;
 }

 .card-school:hover {
  background-color:rgba(0, 0, 255, 0.311);
  transform: scale(1.03);
  transition: all 1s ease;
 }
.card-school a {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 60px;
  font-weight: bolder;
  color: white;
  display: block;
  text-align: center;
}



/* <----------MAGAZINE SPREAD----->*/ 


 .H2-magazine { 
  font-family:Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-size: 60px;
  color: white;
  margin-left: 50px;
  margin-top: 80px;
 }

 .H3-magazine { 
  font-family:Arial, Helvetica, sans-serif;
  font-weight:bold;
  font-size: 50px;
  color: white;
  margin-left: 50px;
  margin-top: 80px;
  margin-bottom: 10px;
  
 }

 .p-magazine { 

  font-family:Arial, Helvetica, sans-serif;
  font-weight:100;
  font-size: 30px;
  color: white;
  margin-left: 50px;
  margin-bottom: 80px;

 }

 .image-magazine {
  margin: 50px 50px 150px;
 }

 .magazine-img {
  height: 1500px;}
 

/* <-------------FOOTER-----------> */

 /* FOOTER */ 

 
 .footer { 
  left: 0;
  bottom: 0;
  width: 100%;
  height: 120px;
  background-color: rgb(19, 19, 146);
  color: white;
  display: flex;
  justify-content: space-between;
 }
 
 /* FOOTER NAV */ 
 
 .footer-nav { 
  width: fit-content;
  height: 100%;
  
 
 }
 
 .footer-nav ul { 
 list-style: none;
 margin-left: 10px;
 
 }
 
 
 .footer-nav ul li { 
  display: inline;
  float: left;
 }  
 
 
 .footer-nav ul li a { 
  padding: 0 10px;
  font-family: Arial, Helvetica, sans-serif;
  color: white;
  line-height: 120px;
  text-decoration: none;
  
 }
 
 .footer-nav ul li a:hover {
  color: blue;
 }
 
 /* FOOTER LOGO */ 
 
 .footer-logo { 
  width: 60px;
  height: 60px;
  background-image: url(/images/logo-wit.svg);
  background-repeat: no-repeat;
  background-size: cover;
 
 }
 .footer-logo:hover {
 
  background-image: url(/images/Logo\ blauw.svg);
 
 
 }
 
 /* FOOTER P */ 
 
 .footer-p { 
  width: fit-content;
  height: 100%;
 font-family: Arial, Helvetica, sans-serif;
  padding-right: 10px;
  padding-left: 159px;
  line-height: 120px;
 }