body{
  background-color: #170049;
}

.grid-container {  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 50px 50px 50px 50px 50px; /* 5 rijen van 50px */
  grid-template-areas:
    "navbar navbar navbar navbar navbar navbar navbar"
    "text text text text text text text text"
    "text text text text text text tex text"
    "text text text text text text text text"
    "text text text text text text text text"
    "text text text text text text text text"
    "footer footer footer footer footer footer footer";
}


.navbar {
  display: flex;
  justify-content:end; /* Verdeel de ruimte tussen de items */
  list-style-type: none;
  padding: 10px 20px;
  font-family:Verdana, Geneva, Tahoma, sans-serif;
  font-size:larger;

  
  
}


.navbar li {
  margin-right: 20px;  
 
      /* Voeg ruimte toe tussen de items */
}

.navbar li:last-child {
  margin-right: 0;  
          /* Geen ruimte na het laatste item */
}

ul{
  list-style-type: none;
  margin: 0;
  padding: 0;
  
}
li {
  float: left;
 
}

a {
  display:flex;
  padding: 1px;
  color: #e8dddd; 
  text-decoration-line: none;  
  
}


.verschoven-text{
  margin-left: 40px;
}
.title{
  margin-left: 290px;
}


.Portfolio {
  font-size:large;
  font-family:Verdana, Geneva, Tahoma, sans-serif;
  display: flex;
  margin: 1px;
  padding: 10px;
  top: 3px;
}



.Portfolio2{
font-size:large;
font-family: Verdana, Geneva, Tahoma, sans-serif;
display: flex;
position:absolute;
margin: 1px;
padding: 10px;

}

@media (max-width:768px) {
  .grid-container {
    grid-template-columns: 1fr;
    grid-template-areas:
      "navbar"
      "text"
      "footer";
  }

  .navbar {
    flex-direction: column;
    align-items: center;
  }

  .title {
    margin: 0;
    text-align: center;
  }

  .Portfolio,
  .Portfolio2 {
    font-size: large;
  }
}



grid-container.section-2 {  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 50px 50px 50px 50px 50px; /* 5 rijen van 50px */
  grid-template-areas:
    "navbar navbar navbar navbar navbar navbar navbar"
    "text text text text text text text text"
    "text text text text text text tex text"
    "text text text text text text text text"
    "text text text text text text text text"
    "text text text text text text text text"
    "footer footer footer footer footer footer footer";
}


.text { 
  grid-area: text;
  border: 1px solid rgb(192, 153, 153);
  display:block;
  border-radius:15px;
  background-image: url(./images/background.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size:cover;
 

 }


 .eugenie {
  height: 350px;
  width: 300px;
  border-radius: 350px;
  position: absolute; /* of relative, fixed, sticky */
  bottom: 200px;    /* afstand vanaf de bovenkant */
  margin-left: 1000px;   /* afstand vanaf de linkerkant */

}  

.section-1 h1{
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}





.container .section-1 h2{

font-size: 5em;
writing-mode: vertical-rl;
text-orientation: sideways;
transform: rotate(180deg);
color: #f4f4f4;
margin-left: -1px;
text-decoration:double;
}

.container .section-1 h3{
font-family:Verdana, Geneva, Tahoma, sans-serif;
font-size: 50px;

margin: 10px;
position:relative;
margin-left: 800px;

}


.container .section-1 h5 {

  font-family:Verdana, Geneva, Tahoma, sans-serif;
  font-size: 30px;
  text-align: left;
  margin: 1px;
  height: 10vh; /* Adjust if not necessary */
}
 
.container .section-1 h5 {
  font-family: Verdana, Geneva, Tahoma, sans-serif ;
  font-size: 20pt;
  padding: 70px;
  width: 500px; }

  

.footer { grid-area: footer; 

 margin-bottom: 5px;
 width: 1099px;
 height: 40px;
 display: inline-block;
 border-radius: 15px;
}
.body{
  background-color: #463373;
}

.navbar.section-2{
  display: flex;
  justify-content: space-between; /* Verdeel de ruimte tussen de items */
  list-style-type: none;
  padding: 0;
}

.navbar li .section-2{
  margin-right: 20px;      /* Voeg ruimte toe tussen de items */
}

.navbar li:last-child .section-2{
  margin-right: 0;         /* Geen ruimte na het laatste item */
}

ul.section-2 {
list-style-type: none; /* Removes default bullets */
  
}

.section-2{ 
  grid-area: text;
  border: 1px solid rgb(192, 153, 153);
  font-family:Verdana, Geneva, Tahoma, sans-serif;
  display:block;
  border-radius:15px;
  background-image: url(/images/backgroundborder.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size:cover;
 

 }

.section-2 h1{
  font-family:Verdana, Geneva, Tahoma, sans-serif;
  margin-left: 80px;
}

 .container .section-2 h2{
  font-family:Verdana, Geneva, Tahoma, sans-serif;
  font-size: 20px;
  text-align: right;
  margin: 10px;
  position:relative;
  font-family: Arial, Helvetica, sans-serif;
  padding: 70px;
  text-align:justify;
  width: 800px; }
  
  
  
  
  .mySlides img {
    overflow: hidden;
    vertical-align: middle;
    border-radius: 30px;
    width: 155%;
    height: 250px;
    object-fit: cover;
    margin-top: -970px;
    margin-left: 800px;
    transform: scale(1.0); /* 80% van de oorspronkelijke grootte */
  }
  
  .slideshow-container1  {
    max-width: 200px;
    bottom: 10px;
    left: 260px;
    position:relative;
}
.slideshow-container2  {
    max-width: 200px;
    bottom: -280px;
    left: 260px;
    position:relative;

  
}




.mySlides {
    display: none;
    text-align: center;
}

img {
  width: 300px;  /* Zorgt ervoor dat de afbeelding altijd de container vult */
  height: 250px; /* Zorgt voor een consistente hoogte */
  object-fit: cover; /* Voorkomt vervorming en zorgt dat de afbeelding correct wordt weergegeven */
}

.prev, .next {
  position: absolute;
  top: -430px; /* Centreert de knoppen verticaal */
  left:1110px;
  transform: translateY(-200%); /* Nauwkeurige verticale uitlijning */
  font-size: 24px;
  cursor: pointer;
  color: white;
 
  border-radius: 50%;
}

.prev {
  left: 770px; /* Plaatst de knop dichtbij de linkerzijde */
  
}

.next {
  right: -100px; /* Plaatst de knop dichtbij de rechterzijde */
}
.dots-container1 {
  position: absolute;
  top: -340px; /* Zet de dots boven de slideshow */
  left: 50%;
  transform: translateX(970%); /* Centraal uitlijnen */
  text-align: center;
  z-index: 10; /* Zorgt dat de dots boven andere elementen blijven */
}

.dots-container2 {
  position: absolute;
  top: -340px; /* Zet de dots boven de slideshow */
  left: 50%;
  transform: translateX(970%); /* Centraal uitlijnen */
  text-align: center;
  z-index: 10; /* Zorgt dat de dots boven andere elementen blijven */
}

.dot {
    height: 15px;
    width: 15px;
    margin: 0 5px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    cursor: pointer;
}

.active, .dot:hover {
    background-color: #717171;
}

  
    .navbar{
      display: flex;
      justify-content: space-between; /* Verdeel de ruimte tussen de items */
      list-style-type: none;
      padding-top: 10px;
    margin-left: 1000px;
    }
    
    .navbar li .section-3{
      margin-right: 20px;      /* Voeg ruimte toe tussen de items */
    }
    
    .navbar li:last-child .section-3{
      margin-right: 0;         /* Geen ruimte na het laatste item */
    }
    
    ul.section- {
    list-style-type: none; /* Removes default bullets */
      
    }

    .section-3 h1{
      font-family: Verdana, Geneva, Tahoma, sans-serif;
      margin-left: 100px;
    }
    
    body .projects {
      font-family: Arial, sans-serif;

      padding: 80px;
  }
  
  .container2 {
      max-width: 1200px;
      margin: 0;
      text-align: left;
  }
  
  h1 {
      font-size: 2em;
      margin-bottom: 20px;
      text-align: left;
  }
  
  .projects {
      display: flex; /* Flexbox gebruiken */
      flex-wrap:nowrap; /* Kaarten in meerdere rijen laten komen */
      justify-content: space-between; /* Spreid de kaarten netjes uit */
      gap: 20px; /* Ruimte tussen de kaarten */
  }
  
  .card1 {
    background: url('/images/opkikker.png');
    flex: 1; /* Verdeelt de ruimte gelijkmatig */
    max-width: 250px; /* Voorkomt te brede kaarten */
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    height: 200px;
    background-size: cover;
   margin-top:-40px;
  }
  .card2 {
    background: url(/images/gamecraft.png);
    flex: 1; /* Verdeelt de ruimte gelijkmatig */
    max-width: 250px; /* Voorkomt te brede kaarten */
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    height: 200px;
    background-size: cover;
    margin-top:-100px;
  }
  
  
  .card3 {
    background: url('/images/Yard.png');
    flex: 1; /* Verdeelt de ruimte gelijkmatig */
    max-width: 250px; /* Voorkomt te brede kaarten */
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    height: 200px;
    background-size:300px;
    margin-top:-100px;
  }


  .card4 {
    background-color: #650561;
    flex: 1; /* Verdeelt de ruimte gelijkmatig */
    max-width: 250px; /* Voorkomt te brede kaarten */
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    height: 200px;
    background-size:300px;
    margin-top:-940px;
    margin-left: 350px;
  }


  .card5 {
   background-color: #650561;
    flex: 1; /* Verdeelt de ruimte gelijkmatig */
    max-width: 250px; /* Voorkomt te brede kaarten */
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    height: 200px;
   
    
    background-size: cover; /* Zorgt ervoor dat de afbeelding de hele card vult */
    background-position: center; /* Centreert de afbeelding netjes */
    background-repeat: no-repeat; /* Voorkomt herhaling van de afbeelding */;
    margin-top:-820px;
    margin-left: 350px;
  }

  .card6 {
    background-color: #650561;
    flex: 1; /* Verdeelt de ruimte gelijkmatig */
    max-width: 250px; /* Voorkomt te brede kaarten */
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    height: 200px;
    background-size:cover;
    margin-top:-700px;
    margin-left: 350px;
  }





  
  .card:hover {
    transform: scale(1.05);
  }
 
 
  
  .button {
      display: inline-block;
      padding: 10px 15px;
      background: #202120a0;
      color: rgb(235, 229, 229);
      text-decoration: none;
      border-radius: 5px;
      margin-top: 150px; /* Pas de waarde aan naar wens */
    }
   
  
  
  .button:hover {
      background: #0056b3;
  }














  .section-09 {  
    grid-area: text;
    font-family:Verdana, Geneva, Tahoma, sans-serif;
    background-image: url(/images/background.jpg) ;
    text-align:left;
    border: 1px solid rgb(192, 153, 153);
    display:block;
    background-size: 2000px;
    height: 800px;
    width: 590px;
    border-radius: 20px;
    position: absolute; /* of relative, fixed, sticky */
    top:250px;    /* afstand vanaf de bovenkant */
    left: 760px;   /* afstand vanaf de linkerkant */
    
    }
  .section-09 h1{
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    text-align:left;
    display:block;
    height: 830px;
    width: 590px;
    border-radius: 10px;
    position: absolute; /* of relative, fixed, sticky */
    bottom: none;    /* afstand vanaf de bovenkant */
    left: -70px;  
  }








.section-09 h2{
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
text-align:left;
display:block;
height: 830px;
width: 490px;
border-radius: 1px;
position: absolute; /* of relative, fixed, sticky */
top: 100px;    /* afstand vanaf de bovenkant */
left: 30px;   /* afstand van

}

     
      
 































  .body.section-4
  {
    background-color: #463373;
  }
  
  .navbar.section-4{
    display: flex;
    justify-content: space-between; /* Verdeel de ruimte tussen de items */
    list-style-type: none;
    padding: 0;
  }
  
  .navbar li .navbar.section-4{
    margin-right: 20px;      /* Voeg ruimte toe tussen de items */
  }
  
  .navbar li:last-child .body.section-4{
    margin-right: 0;         /* Geen ruimte na het laatste item */
  }
  
  ul.section-4 {
  list-style-type: none; /* Removes default bullets */
    
  }
  
  .section-4{ 
    grid-area: text;
    border: 1px solid rgb(192, 153, 153);
    font-family:Verdana, Geneva, Tahoma, sans-serif;
    display:block;
    border-radius:15px;
    background-image: url(/images/Scherm­afbeelding\ 2024-09-23\ om\ 05.36.38.png);
    opacity: 0.8;
    background-repeat: no-repeat;
    background-position: center;
    background-size:cover;
    background-attachment: fixed;
    background-attachment: fixed;
    height: 550px;
    width: 550px;
    border-radius: 20px;
    position: absolute; /* of relative, fixed, sticky */
    top: 250px;    /* afstand vanaf de bovenkant */
    left: 100px;   /* afstand vanaf de linkerkant */
    
    }  

     .section-4 h1{
      font-family: Verdana, Geneva, Tahoma, sans-serif;
     }
    body .section-4 {
      font-family: Arial, sans-serif;
      background-color: #f9f9f9;
      color: #f9f5f5ed;
      height: 550px;
    width: 550px;
    border-radius: 20px;
    position: absolute; /* of relative, fixed, sticky */
    top: 250px;    /* afstand vanaf de bovenkant */
    left: 100px;   /* afstand vanaf de linkerkant */
      
  }
 
  form {
      background-color:#ffffff27;
      padding: 30px;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(10, 10, 10, 0.1);
      max-width:400px;
      width: 100%;
      height: 350px;
    width: 450px;
    border-radius: 20px;
    position: absolute; /* of relative, fixed, sticky */
    top: 100px;    /* afstand vanaf de bovenkant */
    left: 20px;   /* afstand vanaf de linkerkant */
      
  }

  form .form-group {
      margin-bottom: 25px;
  }
  form .form-group label {
      display: block;
      margin-bottom: 5px;
  }
  form .form-group input,
  form .form-group textarea {
      width: 100%;
      padding: 10px;
      
      border: 1px solid #cfbaba;
      border-radius: 4px;
  }
  form .form-group textarea {
      resize: vertical;
  }
  form button {
      display: inline-block;
      background-color: #560664a3;
      color: #f9f7f7f5;
      padding: 10px 10px;
      border: none;
      border-radius: 8px;
      cursor: pointer;
  }
  form button:hover {
      background-color: #0504040f;
  }
  

    .section-5{ 
      grid-area: text;
      border: 1px solid rgb(192, 153, 153);
      font-family:Verdana, Geneva, Tahoma, sans-serif;
      display:block;
      border-radius:15px;
      background-color: #7a1359;
      background-repeat: no-repeat;
      background-position: center;
      background-size:cover;
      background-attachment: fixed;
      background: linear-gradient(#E67FE2, #de37d9, #9a1696, #650561);
      height: 550px;
      width: 550px;
      border-radius: 20px;
      position: absolute; /* of relative, fixed, sticky */
      bottom: 0px;    /* afstand vanaf de bovenkant */
      left: 700px;   /* afstand vanaf de linkerkant */
      
      }  
     
     body .section-5 {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f9;
            color: #333;
        }
        

        .contact-section-2{
          
        
          position: absolute; /* of relative, fixed, sticky */
          top: 60px;    /* afstand vanaf de bovenkant */
          left: 30px;   
        }

        .contact-section-3{
          position: absolute; /* of relative, fixed, sticky */
          top: 40px;    /* afstand vanaf de bovenkant */
          left: 0px;   
z-index: +1;
        }

        .contact-section h2 {
            text-align: center;
            color: #444;
            margin-bottom: 20px;
        }
        .contact-details {
            list-style: none;
            padding: 0;
            line-height: 1.8;
        }
        .contact-details li {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }
        .contact-details li svg {
            margin-right: 10px;
            fill: #555;
        }
        .contact-details a {
            text-decoration: none;
            color: #f8f9fb;
            transition: color 0.3s;
        }
        .contact-details a:hover {
            color: #f1f2f48b;
        }
     
  
        .contact-section {
          text-align: center;
          padding: 20px;  
          color: #fff; /* Optioneel: tekstkleur */
          border-radius: 8px; /* Voor een subtiele afronding */
          max-width: 400px;
          margin: 0 auto; /* Centraal uitlijnen */
      }
      
      
      
      .contact-details {
          
         
      list-style: none;
          padding: 0;
          
         
      margin: 20px 0 0 0;
      }
      
      .contact-details li {
          
         
      margin: 15px 0; /* Ruimte tussen items */
          font-size: 18px; /* Tekstgrootte */
      }
      
      .contact-details i {
          
         
      margin-right: 10px; /* Ruimte tussen het icoon en de tekst */
          color: #007bff; /* Kleur van het icoon */
      }
      
      
      
      .contact-details a {
          color: #f4f6f8; /* Linkkleur */
          text-decoration: none;
      }
      
     
      text{
      text-decoration: underline;
      }