/* 
Geel: #ffd400;
Zwart: #1d1d1b;
*/

* {
  font-family: fieldwork-hum, sans-serif;
  font-weight: 600;
  font-style: normal;
}

h1, h2, h3, h4, h5, h6 {
  font-family: fieldwork-hum, sans-serif;
  font-weight: 600;
  font-style: normal;
}

html {
  color: #ffffff;
  background-color: #1d1d1b;
  font-size: 1em;
  line-height: 1.4;
}

a,
a:visited {
  color: #ffd400;
  text-underline-offset: 2px;
}

a:hover,
a:focus {
  color: #ffffff;
}

.l-container {
  margin: 0 auto;
  width: 90%;
  max-width: 1180px;
}

.l-container,
.l-container--small,
.l-container--wide {
  padding: 2em 0;
}

.l-container--small {
  margin: 0 auto;
  width: 90%;
  max-width: 720px;
}

/* ==========================================================================
   Header
   ========================================================================== */

header .logo {
  width: 200px;
  height: 200px;
  margin-left: auto;
  margin-right: auto;
}

/* ==========================================================================
   Main
   ========================================================================== */

.l-main p {
  font-size: 24px;
  text-align: center;
}

/* Intro */

.l-main p.intro {
  font-size: 30px;
}

/* Cartoons */

.l-main .cartoons {
  margin: 0 auto;
  text-align: center;
}

.l-main .cartoons img {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  max-width: 100%;
  height: auto;
}

/* Gallery */

.l-main .gallery {
  margin: 0 auto;
  text-align: center;
}

.l-main .gallery {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  flex-direction: column;
  text-align: center;
}

.l-main .gallery img {
  margin-bottom: 2em;
  width: 90%;
  height: auto;
  max-width: 720px;
  border-radius: 30px;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 12px 28px 0px, rgba(0, 0, 0, 0.1) 0px 2px 4px 0px, rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset;
}

@media (min-width: 1240px) {
  .l-main .gallery {
    flex-direction: row;
  }
  .l-main .gallery img {
    max-width: 600px;
    margin-bottom: 0; /* reset */
  }
}

/* ==========================================================================
   Footer
   ========================================================================== */

.l-footer {
  padding-bottom: 50px;
}

.l-footer .logo {
  width: 100px;
  height: 100px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 25px;
}

.l-footer .logo a {
  display: block;
}