* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #f9f9f9;
}

/* BACKGROUND GFX */

/* Wrapper that sits behind everything */
.background-gfx {
  position: absolute;
  /* stays in place as user scrolls */
  inset: 0;
  pointer-events: none;
  /* allows clicks through it */
}

.top-of-background-gfx {
  position: absolute;
  /* stays in place while scrolling */
  top: 0;
  /* stick to top */
  right: 0;
  /* stick to right */
  width: 30rem;
  /* adjust as needed */
  height: auto;
  z-index: 0;
}

/* Bottom section container */
.bottom-sections {
  position: absolute;
  top: 20rem;
  /* adjust based on where you want the pattern to start */
  left: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  /* stick to right side */
  z-index: -1;
}

/* Each bottom section */
.bottom-of-background-gfx {
  width: 45rem;
  height: auto;
  pointer-events: none;
}

/* Flip every other image */
.bottom-of-background-gfx.flipped {
  transform: scaleY(-1);
  /* correct way to flip horizontally */
  align-self: flex-end;
  /* flip to the left side */
}


/* INTRODUCTION */
.introduction {
  background-image: linear-gradient(to bottom, #f9f9f9, #E0FFFF);
  border-style: none none outset none;
  display: flex;
  justify-content: center;
  gap: 2rem;
  padding: 2rem;
  align-items: center;
  z-index: 1;
}

.introduction-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.25rem;
  max-width: 25rem;
  grid-area: text;
  z-index: 1;
  width: auto;
}

.introduction-text h1 {
  margin: 0;
  line-height: 1.2;
}

.introduction-text h4 {
  margin: 0;
  line-height: 1.2;
}

.introduction-text p {
  margin-top: 0.5rem;
  line-height: 1.3;
  margin-bottom: 0;
}

.header-image-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: min-content;
  width: min-content;
  box-shadow: 0 8px 8px 0 rgba(0,0,0,0.2);
  grid-area: image;
  z-index: 1;
  margin: 0 auto;
}

.header-image-container img {
  max-width: 20rem;
  max-height: 20rem;
  width: auto;
  height: auto;
  display: block;
  border-radius: .5rem;
  border-style: solid;
  border-width: 3px;
}

.contact-info-container {
  padding: 1rem;
  background-color: rgb(0, 0, 0, 0.1);
  border-radius: 10px;
  backdrop-filter: blur(18px);
  box-shadow: 0 8px 8px 0 rgba(0,0,0,0.2);
  border-style: solid;
  border-width: 3px;
  max-height: 20rem;
  max-width: 20rem;
  height: auto;
  width: auto;
  grid-area: contact;
  z-index: 1;
}

.contact-info-container h2 {
  text-align: center;
}

.contact-info-item {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  padding: 1%;
}

.contact-info-item p {
  justify-content: left;
  align-items: center;
  display: flex;
}

.contact-button-container {
  justify-content: center;
  align-items: center;
  display: flex;
}

.contact-button {
  background-color: #E0FFFF;
  padding: 1rem;
  border-radius: 10px;
  box-shadow: 0 4px 4px 0 rgba(0,0,0,0.2);
  align-self: center;
}

.contact-button:hover {
  background-color: #a3ffff;
  padding: 1rem;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 6px 6px 0 rgba(0,0,0,0.1);
}

/* PORTFOLIO GALLERY */
header {
  background-color: rgb(0, 0, 0, 0.1);
  text-align: center;
}

.portfolio {
  display: flex;
  flex-direction: column;
}

/* Each portfolio item (image + text block) */
.portfolio-item {
  display: grid;
  grid-template-columns: 1fr 2fr;
  align-items: center;
  gap: 1rem;
  padding: 2rem;
  grid-template-areas: "portfolio-item-image portfolio-item-text";
}

/* Reversed item (text left, image right) */
.portfolio-item.reverse {
  grid-template-columns: 2fr 1fr;
  grid-template-areas: "portfolio-item-text portfolio-item-image";
}

.portfolio-item.reverse .portfolio-text {
  grid-area: portfolio-item-text;
}

.portfolio-item.reverse .portfolio-image {
  grid-area: portfolio-item-image;
}

.portfolio-image {
  grid-area: portfolio-item-image;
  width: 30rem;
  height: 100%;
  object-fit: scale-down;
  border-radius: 10px;
  border-style: solid;
  border-width: 3px;
  max-height: 30rem;
  box-shadow: 4px 16px 16px 4px rgba(0,0,0,0.2);
}

.portfolio-text {
  padding: 1rem;
  background-color: #a3ffff22;
  border-radius: 10px;
  backdrop-filter: blur(18px);
  box-shadow: 0 8px 8px 0 rgba(0,0,0,0.2);
  grid-area: portfolio-item-text;
}

.portfolio-text h3 {
  margin-top: 0;
}


.view_project_btn {
  background-color: #E0FFFF;
  padding: 1rem;
  border-radius: 10px;
  box-shadow: 0 4px 4px 0 rgba(0,0,0,0.2);
}

.view_project_btn:hover {
  background-color: #a3ffff;
  padding: 1rem;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 6px 6px 0 rgba(0,0,0,0.1);
}

/* Slideshow container */

.slideshow-and-dots-container {
  grid-area: portfolio-item-image;
}

.slideshow-container {
  width: fit-content;
  position: relative;
  margin: auto;
}

/* Hide the images by default */
.mySlides {
  display: none;
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 0;
  width: 100%;
  text-align: center;
  background-image: linear-gradient(to bottom, #00000022, #000000cc);
  background-clip: border-box;
  border-radius: 10px;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

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

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {
    opacity: .4
  }

  to {
    opacity: 1
  }
}

@media only screen and (max-width: 1200px) { /* vanaf hier wordt het portfoliodeel te dun voor 2 items naast elkaar*/
  .portfolio-item {
    display: grid;
    grid-template-areas: 
    "portfolio-item-image"
    "portfolio-item-text";
    grid-template-columns: 1fr;
  }

  .portfolio-item.reverse {
    display: grid;
    grid-template-areas: 
    "portfolio-item-image"
    "portfolio-item-text";
    grid-template-columns: 1fr;
  }

  .slideshow-and-dots-container {
    margin: 0 auto 1rem;
    width: 100%;
    max-width: 100%;
  }

  .portfolio-image {
    margin: 0 auto 1rem;
    width: 100%;
    max-width: 100%;
    object-fit: contain;
  }

  .portfolio-text {
    width: 100%;
  }
}

@media only screen and (max-width: 1138px) { /* vanaf hier wordt introductiedeel te dun voor 3 items naast elkaar*/
  .introduction {
    display: grid;
    grid-template-areas: 
      "text text"
      "image contact";
  }

  .introduction-text {
    max-width: 50rem;
  }
}

@media only screen and (max-width: 770px) { /* vanaf hier wordt introductiedeel te dun voor 2 items naast elkaar*/
  .introduction {
    display: grid;
    grid-template-areas: 
      "text"
      "image"
      "contact";
  }
  
}