/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-image: url("pexels-darshan394-9613316.jpg");
  background-size: cover;
  color: white;
  font-family: 'Garamond', serif;
  margin: 0;
}

p {
  font-size: 20px}

h1 {
  font-size: 100px;
  font-weight: bold;
}

section {
  margin-bottom: 120px;
}

.introrow {
  display: flex;
  align-items: flex-start;
  margin-bottom: 120px;
  width: 100%;
  gap: 80px;
  }
  
.introrowkleur {
  display: flex;
  align-items: flex-start;
  margin-bottom: 120px;
  width: 100%;
  gap: 80px;
  background-color: rgba(50, 97, 54, 1);
  }
  
.imagelinks {
  max-width: 450px;   
  width: 100%;
  height: auto;
  flex-shrink: 0;
  margin: 5%;
  object-fit: cover;
  aspect-ratio: 0.8;
  clip-path: shape(from 99.86% 47.39%,curve to 99.86% 52.61% with 100.00% 50.00%,curve to 99.32% 57.81% with 99.73% 55.23%,curve to 98.23% 62.92% with 98.91% 60.40%,curve to 96.62% 67.89% with 97.55% 65.45%,curve to 94.49% 72.67% with 95.68% 70.34%,curve to 91.88% 77.19% with 93.30% 75.00%,curve to 88.80% 81.42% with 90.45% 79.39%,curve to 85.31% 85.31% with 87.16% 83.46%,curve to 81.42% 88.80% with 83.46% 87.16%,curve to 77.19% 91.88% with 79.39% 90.45%,curve to 72.67% 94.49% with 75.00% 93.30%,curve to 67.89% 96.62% with 70.34% 95.68%,curve to 62.92% 98.23% with 65.45% 97.55%,curve to 57.81% 99.32% with 60.40% 98.91%,curve to 52.61% 99.86% with 55.23% 99.73%,curve to 47.39% 99.86% with 50.00% 100.00%,curve to 42.19% 99.32% with 44.77% 99.73%,curve to 37.08% 98.23% with 39.60% 98.91%,curve to 32.11% 96.62% with 34.55% 97.55%,curve to 27.33% 94.49% with 29.66% 95.68%,curve to 22.81% 91.88% with 25.00% 93.30%,curve to 18.58% 88.80% with 20.61% 90.45%,curve to 14.69% 85.31% with 16.54% 87.16%,curve to 11.20% 81.42% with 12.84% 83.46%,curve to 8.12% 77.19% with 9.55% 79.39%,curve to 5.51% 72.67% with 6.70% 75.00%,curve to 3.38% 67.89% with 4.32% 70.34%,curve to 1.77% 62.92% with 2.45% 65.45%,curve to 0.68% 57.81% with 1.09% 60.40%,curve to 0.14% 52.61% with 0.27% 55.23%,curve to 0.14% 47.39% with 0.00% 50.00%,curve to 0.68% 42.19% with 0.27% 44.77%,curve to 1.77% 37.08% with 1.09% 39.60%,curve to 3.38% 32.11% with 2.45% 34.55%,curve to 5.51% 27.33% with 4.32% 29.66%,curve to 8.12% 22.81% with 6.70% 25.00%,curve to 11.20% 18.58% with 9.55% 20.61%,curve to 14.69% 14.69% with 12.84% 16.54%,curve to 18.58% 11.20% with 16.54% 12.84%,curve to 22.81% 8.12% with 20.61% 9.55%,curve to 27.33% 5.51% with 25.00% 6.70%,curve to 32.11% 3.38% with 29.66% 4.32%,curve to 37.08% 1.77% with 34.55% 2.45%,curve to 42.19% 0.68% with 39.60% 1.09%,curve to 47.39% 0.14% with 44.77% 0.27%,curve to 52.61% 0.14% with 50.00% 0.00%,curve to 57.81% 0.68% with 55.23% 0.27%,curve to 62.92% 1.77% with 60.40% 1.09%,curve to 67.89% 3.38% with 65.45% 2.45%,curve to 72.67% 5.51% with 70.34% 4.32%,curve to 77.19% 8.12% with 75.00% 6.70%,curve to 81.42% 11.20% with 79.39% 9.55%,curve to 85.31% 14.69% with 83.46% 12.84%,curve to 88.80% 18.58% with 87.16% 16.54%,curve to 91.88% 22.81% with 90.45% 20.61%,curve to 94.49% 27.33% with 93.30% 25.00%,curve to 96.62% 32.11% with 95.68% 29.66%,curve to 98.23% 37.08% with 97.55% 34.55%,curve to 99.32% 42.19% with 98.91% 39.60%,curve to 99.86% 47.39% with 99.73% 44.77%);
}



  
.tekstblokrechts {
  text-align: justify;
  width: 30%;
  margin-left: auto;
  margin-right: 10%

}

.tekstbloklinks {
  text-align: justify;
  width: 30%;
  margin-left: 10%;
  margin-right: auto;
}

.mooivlakofzo {
  background-color: rgba(0, 0, 0, 0.5);;
  width: 80%; 
  margin: 0 auto;
  padding: 60px 0;
  display: flex;
  flex-direction: column;
  
  }
  
.borderline {
  background-image: rgba(255,255,255,0);
  width: 95%;
  margin: 0 auto;
  padding: 60px 0;
  border-style: solid;
  border-color: white;
  border-width: 1px;
  }
  
ul {
  list-style: none;
  position: fixed;
  z-index: 1000;
  top: 40%;
  right: 4%;
  flex-direction: column;
  }
  
ul li a{
  color: white;
  font-size: 20px;
  transition: font-size 0.5s, transform 0.5s;
  text-decoration: none;
  }

ul li a::before {
  content: "✦";
  font-size: 25px;
  text-decoration: none;
  display: inline-block;
  }

ul li a:hover {
  font-size: 50px;
  transition: font-size 0.5s;
  transform: scale(1.1);
  text-decoration: none;
}

ul li a:focus::before {
  transform: rotate(360deg) scale(1.2);
  transition: transform 0.7s;
  text-decoration: none;
}


html {
  scroll-behavior: smooth;
}

@media (max-width:768px) {
  h1 {font-size:60px;}
  .introrow, .introrowkleur {
    flex-direction: column !important;
    align-items: center !important;
    gap: 40px !important;
    margin-bottom: 60px !important;
    }
  .imagelinks {
    max-width: 300px !important;
    margin: 0 auto 40px !important;
    }
  .mooivlakofzo {
    width: 95% !important;
    padding: 30px 0 !important;}
    
  .borderline {
    width: 100% !important;
    padding: 30px 10px !important;
  }

  ul {
    display: none !important;
  }
  
  section {
    margin-bottom: 60px !important;
  }
  
  p {
    font-size: 18px !important;
  }
  
  
  }
  
  
@media (max-width: 480px) {
  h1 {
    font-size: 40px !important;
  }
  
  h2 {
    font-size: 28px !important;
  }
  
  .introrow, .introrowkleur {
    gap: 30px !important;
    margin-bottom: 50px !important;
  }
  
  .imagelinks {
    max-width: 250px !important;
  }
  
  .tekstblokrechts, .tekstbloklinks {
    width: 90% !important;
  }
  
  p {
    font-size: 16px !important;
    line-height: 1.5 !important;
  }
  
  .mooivlakofzo {
    width: 100% !important;
    padding: 20px 0 !important;
  }
  
  .borderline {
    padding: 20px 5px !important;
  }
}

@media (min-width: 1200px) {
  .mooivlakofzo {
    max-width: 1200px !important;
  }
}