/* body {
  background-color: #1c1422;
  background-image: url(/Images/Achtergrond\ 2.png);
  background-size: cover;
  image-resolution: 1440px / 6770.48px;
  margin: 0%;
  align-self: center;
  width: 1440px;
  height: 6770.48px;
} */

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: auto;
  background-color: #1c1422;
  background-image: url(/Images/Achtergrond\ 2.png);
  background-size: cover;
}

.scaling-wrapper {
  width: 100%;
  max-width: 1440px; /* Original design width */
  aspect-ratio: 1440 / 6770.48; /* Original aspect ratio */
  /* transform-origin: top left; */
  height: auto;
}

.scaling-content {
  width: 100%;
  height: 100%;
  font-size: calc(-0.4px + 1vw);
}

.grid-container {
  display: grid;
  width: 100%; /* Make it fill the scaling-content width */
  height: 100%; /* Make it fill the scaling-content height */
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: repeat(69, 1fr);
  /* grid-template-columns: repeat(10, 10%); 
  grid-template-rows: repeat(69, calc(100vw * 98 / 1440)); */

  /* grid-row-gap: 14.29px; 
  grid-column-gap: 19.05px; */
  grid-gap: calc(100vw * 14.29 / 1440) calc(100vw * 19.05 / 1440);
}

.image-container {
  justify-content: center;
  align-items: center;
  grid-row: span 2 / span 2;
  cursor: pointer;
  z-index: 2;
  filter: brightness(70%);
}

.grid-item {
  border: 1px solid aqua; /* Border for visualization */
  color: rgb(255, 0, 140);
  opacity: 0%;
}

.nr1 {
  background-image: url(/Images/Buizen\ cijfers_Tekengebied\ 1.svg);
  background-repeat: no-repeat;
}

.nr2 {
  background-image: url(/Images/Buizen\ cijfers-02.svg);
  background-repeat: no-repeat;
  background-position: right;
}

.nr3 {
  background-image: url(/Images/Buizen\ cijfers-03.svg);
  background-repeat: no-repeat;
}

.nr4 {
  background-image: url(/Images/Buizen\ cijfers-04.svg);
  background-repeat: no-repeat;
  background-position: right;
}

.nr5 {
  background-image: url(/Images/Buizen\ cijfers-05.svg);
  background-repeat: no-repeat;
}

.image1 {
  grid-column: span 8 / span 8; /* Image spans 6 columns starting from the 3rd column */
  grid-row: span 2 / span 2; /* Image spans 8 rows starting from the 3rd row */
  background-image: url(Images/typo.svg); /* Replace 'your-image-url.jpg' with the URL or path to your image */
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 100%;
}

.image2 {
  grid-column: span 6 / span 6;
  grid-row: span 8 / span 8;
  background-image: url(Images/Samen_foto.jpg);
  background-size: contain;
  background-position: center;
  width: 100%;
  height: 100%;
  background-position-y: -10px;
  background-repeat: no-repeat;
  position: relative;
  overflow: hidden;
}

.image2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  height: 94.9%;
  background-color: rgba(3, 0, 6, 0.7);
  transition: opacity 0.5s ease;
  opacity: 1;
}

.image2:hover::before {
  opacity: 0;
}

.image3 {
  grid-column: span 3 / span 3; /* Image spans 6 columns starting from the 3rd column */
  grid-row: span 6 / span 6; /* Image spans 8 rows starting from the 3rd row */
  background-image: url(Images/Kastje\ foto.jpg); /* Replace 'your-image-url.jpg' with the URL or path to your image */
  width: 100%;
  height: 100%;
  background-position: left;
  background-position-x: 29px;
  background-size: contain;
  background-repeat: no-repeat;
  position: relative;
  overflow: hidden;
}

.image3::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 88.9%;
  height: 100%;
  margin-left: 29px;
  background-color: rgba(3, 0, 6, 0.7);
  transition: opacity 0.5s ease;
  opacity: 1;
}

.image3:hover::before {
  opacity: 0;
}

.image4 {
  grid-column: span 3 / span 3; /* Image spans 6 columns starting from the 3rd column */
  grid-row: span 6 / span 6; /* Image spans 8 rows starting from the 3rd row */
  background-image: url(Images/Stoel\ foto.jpg); /* Replace 'your-image-url.jpg' with the URL or path to your image */
  background-size: cover;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  position: relative;
  overflow: hidden;
}

.image4::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(3, 0, 6, 0.7);
  transition: opacity 0.5s ease;
  opacity: 1;
}

.image4:hover::before {
  opacity: 0;
}

.image5 {
  grid-column: span 3 / span 3; /* Image spans 6 columns starting from the 3rd column */
  grid-row: span 6 / span 6; /* Image spans 8 rows starting from the 3rd row */
  background-image: url(Images/Tafel\ foto.jpg); /* Replace 'your-image-url.jpg' with the URL or path to your image */
  background-size: cover;
  width: 100%;
  height: 100%;
  background-position: center;
  position: relative;
  overflow: hidden;
}

.image5::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(3, 0, 6, 0.7);
  transition: opacity 0.5s ease;
  opacity: 1;
}

.image5:hover::before {
  opacity: 0;
}

.image6 {
  grid-column: span 2 / span 2; /* Image spans 6 columns starting from the 3rd column */
  grid-row: span 8 / span 8; /* Image spans 8 rows starting from the 3rd row */
  background-image: url(Images/Tafeltje\ foto.jpg); /* Replace 'your-image-url.jpg' with the URL or path to your image */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.image6::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(3, 0, 6, 0.7);
  transition: opacity 0.5s ease;
  opacity: 1;
}

.image6:hover::before {
  opacity: 0;
}

.image7 {
  grid-column: span 3 / span 3; /* Image spans 6 columns starting from the 3rd column */
  grid-row: span 6 / span 6; /* Image spans 8 rows starting from the 3rd row */
  background-image: url(Images/Stoel\ spanriemen\ foto.jpg); /* Replace 'your-image-url.jpg' with the URL or path to your image */
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.image7::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(3, 0, 6, 0.7);
  transition: opacity 0.5s ease;
  opacity: 1;
}

.image7:hover::before {
  opacity: 0;
}

.Name {
  color: white;
  font-family: "Helvetica", sans-serif;
  /* font-size: 10px; */
  font-size: 0.72em;
}

.Info {
  color: white;
  font-family: "Helvetica", sans-serif;
  /* font-size: 10px; */
  font-size: 0.72em;
}

.Titel {
  font-family: "Helvetica", sans-serif;
  /* font-size: 24px; */
  font-size: 1.7em;
  color: #aca4a6;
  grid-column: span 2 / span 2;
  display: flex; /* Use flexbox for alignment */
  align-items: flex-end; /* Center vertically */
}

.Text {
  font-family: "Helvetica", sans-serif;
  font-size: inherit;
  color: white;
  /* line-height: 16px; */
  line-height: 1.135em;
  word-wrap: break-word;
  /* font-size: 14px; */
}

.TitelV {
  font-family: "Helvetica", sans-serif;
  /* font-size: 24px; */
  font-size: 1.7em;
  /* line-height: 25px; */
  line-height: 1.05em;
  color: #aca4a6;
  text-align: center;
  grid-row: span 3 / span 3;
  display: flex; /* Use flexbox for alignment */
  justify-content: center; /* Center horizontally */
}

.Text1 {
  grid-row: span 3 / span 3;
  grid-column: span 4 / span 4;
}

.Voetnoot2 {
  grid-column: span 2 / span 2;
  color: #aca4a6;
  /* height: 100%; */
  display: flex;
  align-items: top;
  word-wrap: break-word;
  /* margin-top: 17pt; */
  margin-top: 2.4em;
  margin-right: 10pt;
}

.Text2 {
  grid-row: span 2 / span 2;
  grid-column: span 3 / span 3;
}

.Text2::first-line {
  font-weight: bolder;
  font-style: italic;
}

.Voetnoot {
  color: #aca4a6;
  /* font-size: 10px; */
  font-size: 0.72em;
  line-height: 3.5em;
}

.Text3 {
  grid-row: span 2 / span 2;
  grid-column: span 3 / span 3;
}

.Text4 {
  grid-row: span 3 / span 3;
  grid-column: span 2 / span 2;
}

.Text5 {
  grid-row: span 5 / span 5;
  grid-column: span 1 / span 1;
}

.Text6 {
  grid-row: span 3 / span 3;
  grid-column: span 2 / span 2;
}

.End1 {
  font-family: "Helvetica", sans-serif;
  /* font-size: 44px; */
  font-size: 3.15em;
  font-weight: bold;
  color: #aca4a6;
  grid-column: span 2 / span 2;
  grid-row: span 1 / span 1;
  display: flex; /* Use flexbox for alignment */
  align-items: flex-end; /* Center vertically */
}

.End2 {
  font-family: "Helvetica", sans-serif;
  /* font-size: 44px; */
  font-size: 3.15em;
  font-weight: bold;
  color: #aca4a6;
  grid-column: span 3 / span 3;
  grid-row: span 1 / span 1;
  display: flex; /* Use flexbox for alignment */
  align-items: flex-start; /* Center vertically */
}

#Pijl {
  max-width: 100%;
  max-height: 100%;
  overflow: hidden;
  cursor: pointer;
}

#Pijl img {
  max-width: auto;
  height: 100%;
  display: none;
  margin: auto;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: -6770.48px;
  left: 0;
  right: 0;
  background-repeat: repeat;
  background: black;
  opacity: 92%;
  pointer-events: none;
  display: block;
}