html {
  --text-color: black;
  --background-color: #e8e7e3;
}

@font-face {
  font-family: "bebas-neue";
  src: url("../type/BebasNeue-Regular.ttf");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "oswald";
  src: url("../type/Oswald-Regular.ttf");
  font-weight: 400;
  font-style: normal;
}

body {
  margin: 0;
  background-color: var(--background-color);
  background-image: url("/achtergond-light.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 100vh;
  display: flex;
  justify-content: center;
}

.trap {
  position:relative;
  width: 100%;
  aspect-ratio: 1/1;
  overflow: hidden;
  font-family: "oswald",sans-serif;
}


.trap a {
  color: inherit;
  text-decoration: none;
  font: inherit;
  cursor: pointer;
} 

.trap span {
  position: absolute;
  transition: color 0.3s ease, transform 0.2s ease;
}

.h {
  transform:translate(0,-50%);
}

.v {
  transform:translate(-50%,0) rotate(270deg);
}

/*traptreden h1*/
.gezondheid {
  left:4%;
  top:80%; 
  font-size:5vW; 
  font-weight: 600;
  font-family: "bebas-neue", sans-serif;
  color: var(--text-color);
}

.gezondheid:hover {
  color: #2979ff;
  transform: translate(0, -50%) scale(1.03);
}

.groene-appels {
  left:10%;
  top:86%; 
  font-size:1.4vW;
  color: var(--text-color);
}

.groene-appels:hover {
  color: #2979ff;
}

.water {
  left:10%;
  top:73%;
  font-size:1.2vW; 
  color: var(--text-color);
}

.water:hover {
  color: #2979ff;
}

/*traptreden v1*/
.ei {
  left:26%;
  top:74%;
  font-size:1.4vW;
  color: var(--text-color);
}

.ei:hover {
  color: #2979ff;
}

.kwark {
  left:23.5%;
  top:75%;
  font-size:2.3vW;
  color: var(--text-color);

}

.kwark:hover {
  color: #2979ff;
}
.spa {
  left:24.5%;
  top:67%;
  font-size:1.8vW;
  color: var(--text-color);
}

.spa:hover {
  color: #2979ff;
}

/*traptreden h2*/
.sporten{
  left:25%;
  top:62%;
  font-size:4.8vW; 
  font-weight: 600;
  font-family: "bebas-neue", sans-serif;
  color: var(--text-color);
}

.sporten:hover {
  color: #2979ff;
  transform: translate(0, -50%) scale(1.03);
}

.hardlopen{
  left:32%;
  top:68%;
  font-size:2vW; 
  color: var(--text-color);
}

.hardlopen:hover {
  color: #2979ff;
}

.racefietsen{
  left:38.7%;
  top:62%;
  font-size:1.0vW; 
  color: var(--text-color);
}

.racefietsen:hover {
  color: #2979ff;
} 

/*traptreden v2*/
.gym{
  left:44%;
  top:64%;
  font-size:1.4vW; 
  color: var(--text-color);
}

.gym:hover {
   color: #2979ff;
}

.padel{
  left:47.5%;
  top:53%;
  font-size:1.8vW; 
  color: var(--text-color);
}

.padel:hover {
  color: #2979ff;
}

.hockey{
  left:44.5%;
  top:50%;
  font-size:3vW; 
  color: var(--text-color);
}

.hockey:hover {
  color: #2979ff;
}

.focus {
 left: 45.9%;
 top: 43%;
 font-size: 5.1vW;
 font-weight: 600;
 font-family: "bebas-neue", sans-serif;
 color: var(--text-color);
}

.focus:hover {
  color: #2979ff;
  transform: translate(0, -50%) scale(1.03);
}

.leergierig {
  left: 56%;
  top: 43%;
  font-size: 1.4vW;
  color: var(--text-color);
}

.leergierig:hover {
  color: #2979ff;
}

.scherp{
  left: 51%;
  top: 49%;
  font-size: 1.1vW;
  color: var(--text-color);
}

.scherp:hover {
  color: #2979ff;
}

.discipline {
  left: 55%;
  top: 50%;
  font-size: 2.1vW;
  color: var(--text-color);
}

.discipline:hover {
  color: #2979ff;
}

.aardig {
  left: 64.6%;
  top: 36%;
  font-size: 1.1vW;
  color: var(--text-color);
}

.aardig:hover {
  color: #2979ff;
}

.eerlijk {
  left: 63%;
  top: 25%;
  font-size: 2.2vW;
  color: var(--text-color);
}

.eerlijk:hover {
  color: #2979ff;
}

.creatief {
  left: 62%;
  top: 38%;
  font-size: 2.1vW;
  color: var(--text-color);
}

.creatief:hover {
  color: #2979ff;
}

.Wessel-de-Wit {
  left: 65%;
  top: 20%;
  font-size: 6vW;
  color: var(--text-color);
  font-style: italic;
  font-weight: 600;
  font-family: "bebas-neue", sans-serif;
  transition: transform 0.3s ease;
}

.Wessel-de-Wit:hover {
  transform: translate(0, -50%) scale(1.03);
  color: #2979ff; 
}

.Amsterdam{
  left: 84.5%;
  top: 28%;
  font-size: 1.8vW;
  color: var(--text-color);
}

.Amsterdam:hover {
   color: #2979ff; 
}

.Heiloo {
  left: 76%;
  top: 13%;
  font-size: 1.3vW;
  color: var(--text-color);
}

.Heiloo:hover {
  color: #2979ff;
}

.Jan-Wessel-Cornelis{
  left: 70.3%;
  top: 28%;
  font-size: 1.4vW;
  color: var(--text-color);  
}

.Jan-Wessel-Cornelis:hover {
   color: #2979ff;
   transform: translate(0, -50%) scale(1.05);
}


.darklightknop-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.darklightknop {
  position: fixed;
  bottom: 10px;
  right: 20px;
  z-index: 10;
  cursor: pointer;
  font-family: "bebas-neue", sans-serif;
  color: var(--text-color);
  border: 1px solid var(--text-color);
  padding: 6px 12px;
  
}
.logowessel {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 10;
  width: 50px;
  height: auto;
}

footer {
  position: fixed;
  bottom: 10px;
  left: 20px;
  z-index: 10;
  font-family: "bebas-neue", sans-serif;
  font-size: 0.9rem;
  color: var(--text-color);
}

.mode-dark {
  display: none;
}

.logowessel-wit {
  display: none;
}

body:has(#darklightknop:checked) .logowessel-zwart {
  display: none;
}

body:has(#darklightknop:checked) .logowessel-wit {
  display: inline;
}

body:has(#darklightknop:checked) .mode-light {
  display: none;
}

body:has(#darklightknop:checked) .mode-dark {
  display: inline;
}

body:has(#darklightknop:checked) {
  --text-color: white;
  --background-color: black;
  background-image: url("/achtergond-dark.png");
}


@media (width < 45em) {
  body {
    height: auto;
    min-height: 100vh;
  }

 .trap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem 1.5rem;
  padding-top: 5rem;
  padding-inline: 1rem;
  aspect-ratio: auto;
  overflow: visible;
  grid-auto-flow: dense;
}

  .trap span {
    position: static;
    font-size: 1rem;
  }

  .h,
  .v {
    transform: none;
  }

  .trap span.gezondheid,
  .trap span.sporten,
  .trap span.focus,
  .trap span.Wessel-de-Wit {
    font-size: 2rem;
  }

  .gezondheid, .groene-appels, .water, .ei, .kwark, .spa {
  grid-column: 1;
}

.sporten, .hardlopen, .racefietsen, .gym, .padel, .hockey {
  grid-column: 2;
}

.focus, .leergierig, .scherp, .discipline, .aardig, .eerlijk, .creatief {
  grid-column: 1;
}

.Wessel-de-Wit, .Amsterdam, .Heiloo, .Jan-Wessel-Cornelis {
  grid-column: 2;
}


.focus,
.Wessel-de-Wit {
  margin-top: 1.5rem;
}
}

body.onderpagina {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
  box-sizing: border-box;
}

.terugknop {
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 10;
  font-family: "bebas-neue", sans-serif;
  color: var(--text-color);
  border: 1px solid var(--text-color);
  padding: 6px 12px;
  text-decoration: none;
}

.terugknop:hover {
  color: #2979ff;
  border-color: #2979ff;
}

.paginainhoud {
  max-width: 700px;
  width: 100%;
  padding: 1.5rem;
  text-align: center;
  box-sizing: border-box;
}

.paginainhoud h1 {
  font-family: "bebas-neue", sans-serif;
  font-size: 3.5rem;
  color: var(--text-color);
  margin: 0 0 1.5rem;
}

.paginafoto {
  max-width: 100%;
  max-height: 65vh;
  width: auto;
  height: auto;
  border-radius: 4px;
}