/* -- */


.page
{
  position: relative;
  width: min(100%, var(--window-max-width));
  width: 100%;
  height: auto;

  box-sizing: border-box;
  padding: var(--page-default-padding) var(--page-horizontal-padding);

  margin: 0 auto;

  background-color: var(--white-color);

  text-align: justify;
}


/* -- */


.dark_page
{
  position: relative;

  background:
    radial-gradient(circle at 35% 22%, rgba(255,255,255, 0.22), rgba(255,255,255, 0) 42%),
    radial-gradient(circle at 80% 70%, rgba(255,255,255, 0.08), transparent 45%),
    linear-gradient(145deg, #949EAB, #B8C0C9 45%, #8C97A3);
}

.dark_page::before
{
  position: absolute;
  inset: 0;
  content: "";

  background-image: url('../img/bg_wave.webp');
  background-size: auto;
  background-position: left top;
  background-repeat: repeat;

  opacity: 0.2;
  mix-blend-mode: multiply;
  pointer-events: none;
}

@supports (-webkit-hyphens: none)
{
  background-image: url('../img/bg_wave.jpg');
}


/* -- */


.page_header
{
  line-height: 140%;
  margin-left: -1.5px;
  margin-bottom: 10px;

  font-family: "Raleway";
  font-size: 250%;
  font-weight: 600;
  letter-spacing: 1px;
  text-align: left;
  text-transform: uppercase;

  color: var(--accent-color);
}

.page_subheader
{
  line-height: 140%;
  margin-bottom: 40px;

  font-family: "Open Sans";
  font-size: 150%;
  font-weight: 600;
  letter-spacing: 1px;
  text-align: left;

  color: var(--accent-color);
}


/* -- */


.page_content
{
  position: relative;
  float: left;
  width: 70%;
  z-index: 2;
}

.page_decoration
{
  position: absolute;
  z-index: 0;

  top: 0;
  right: 0;

  width: calc( (0.5 * (var(--window-width) - var(--page-width))) + (0.3 * var(--page-width)) );
  height: 100%;

  background-image: none;
  background-position: top;
  background-size: 70% auto;
  background-repeat: repeat-y;
}


/* -- */

#welkom .page
{
  padding-bottom: 6%;
}

#welkom img
{
  float: left;
  width: 150px;
  aspect-ratio: 1;
  margin-top: 18px;
}

#welkom .welkom_text
{
  float: left;
  width: calc(100% - 190px);
  margin-left: 40px;
}

#mijn-visie .page_content
{
  margin-left: 30%;
}

#kwalificaties
{
  text-align: left;
}

#kwalificaties .page_content
{
  width: 100% !important;
  z-index: 2;
}

#kwalificaties .page_subheader
{
  max-width: 60%;
}


/* -- */


#contact img
{
  display: block;
  width: min(60%, 300px);
  filter: var(--accent-color-filter);
}

@media (max-width: 849px)
{

  #contact .card_body
  {
    font-weight: 700;

    filter: invert(100%);
  }

  #contact .card_body a
  {
    color: black;
    font-weight: 900;
    letter-spacing: 1px;

    text-underline-offset: 5px;
    text-decoration-thickness: 2px;
  }

  #contact .card_body a:hover, #contact .card_body a:focus
  {
    color: #7FFFFF;
  }

  #contact .card_body a:active
  {
    color: #00FFFF;
  }

  #contact img
  {
    filter: none;
  }

}


/* -- */


#wie-ben-ik .page_decoration
{
  background-image: url("../img/bg_circles1.webp");
}

#mijn-visie .page_decoration
{
  left: 0;
  background-image: url("../img/bg_circles2.webp");
}

#kwalificaties .page_decoration
{
  background-image: url("../img/bg_circles3.webp");
  background-size: 60% auto;
}

@supports (-webkit-hyphens: none)
{
  #wie-ben-ik .page_decoration { background-image: url("../img/bg_circles1.jpg"); }
  #mijn-visie .page_decoration { background-image: url("../img/bg_circles2.jpg"); }
  #kwalificaties .page_decoration { background-image: url("../img/bg_circles3.jpg"); }
}


/* -- */