*,
*::before,
*::after {
  box-sizing: border-box;
}

/*fancy page transition not all browsers support this*/
@view-transition {
  navigation: auto;
}

:focus {
  outline: 3px solid var(--second-bg-color) !important;
  outline-offset: 2px !important;
  border-bottom: 3px solid var(--main-color);
}

:root,
:root.light-mode {
  --ff-body: "roboto", "Helvetica Neue", Helvetica, sans-serif;
  --fw-body: 300;
  --fw-bold: 800;
  --fw-title: 400;
  --fw-number: 800;
  --fs-body: clamp(1rem, 1vw, 1rem + 0.2vw);
  --fs-h1: clamp(2rem, 1.5vw, 3rem + 0.2vw);
  --fs-h2: clamp(1.8rem, 1.4vw, 2.1rem + 0.2vw);
  --fs-h3: clamp(1.6rem, 1.3vw, 1.9rem + 0.2vw);
  --fs-h4: clamp(1.4rem, 1.2vw, 1.3rem + 0.2vw);
  --fs-h5: clamp(1.2rem, 1.1vw, 1.25rem + 0.2vw);
  --fs-h6: clamp(1.1rem, 1.15vw, 1.2rem + 0.2vw);

  --fs-bq: clamp(7rem, 5.5vw, 8rem + 0.2vw);

  --bg-transparency: 0.9;

  --main-bg-color-base: 255, 255, 255;
  --main-bg-color: rgb(var(--main-bg-color-base));

  --main-color-base: 68, 68, 68;
  --main-color: rgb(var(--main-color-base));

  --main-link-color-base: 25, 60, 184;/*185, 175, 223*/
  --main-link-color: rgb(var(--main-link-color-base));

  --second-bg-color-base: 25, 60, 184;/*8, 7, 70*/;
  --second-bg-color: rgb(var(--second-bg-color-base));

  --second-color-base: 60, 60, 180;
  --second-color: rgb(var(--second-color-base));

  --second-link-color-base: 144, 161, 185;/*185, 175, 223*/
  --second-link-color: rgb(var(--second-link-color-base));

  --third-bg-color-base: 243, 244, 250;
  --third-bg-color: rgb(var(--third-bg-color-base));

  --third-color-base: 25, 60, 184;
  --third-color: rgb(var(--third-color-base));

  --third-link-color-base: 21, 93, 252;/*135, 218, 232*/;
  --third-link-color: rgb(var(--third-link-color-base));

  --fourth-bg-color-base: 205, 154, 102;
  --fourth-bg-color: rgb(var(--fourth-bg-color-base));
  --fourth-color: rgb(255, 255, 255);

  --fifth-bg-color-base: 20, 154, 154;
  --fifth-bg-color: rgb(var(--fifth-bg-color-base));
  --fifth-color: rgb(255, 255, 255);

  --sixth-bg-color-base: 255, 242, 0;
  --sixth-bg-color: rgb(var(--sixth-bg-color-base));
  --sixth-color: rgb(255, 255, 255);

  --seventh-bg-color-base: 89, 190, 208;
  --seventh-bg-color: rgb(var(--seventh-bg-color-base));
  --seventh-color: rgb(255, 255, 255);

  --eight-bg-color-base: 31, 191, 222;
  --eight-bg-color: rgb(var(--eight-bg-color-base));
  --eight-color: rgb(255, 255, 255);

  --ninth-bg-color-base: 241, 241, 241;
  --ninth-bg-color: rgb(var(--ninth-bg-color-base));
  --ninth-color: rgb(var(--main-color-base));

  --gradient-bg-color: linear-gradient(
    45deg,
    var(--second-bg-color),
    var(--main-bg-color)
  );

  --light-color-base: 204, 204, 204;
  --light-color: rgb(var(--light-color-base));

  --dark-color-base: 68, 68, 68;
  --dark-color: rgb(var(--dark-color-base));

  --footer-color-base: 255, 255, 255;
  --footer-color: rgb(var(--footer-color-base));

  --accent-color-base: 25, 60, 184;
  --accent-color: rgb(var(--accent-color-base));
}

:root.dark-mode {
  --main-bg-color-base: 61, 67, 81;
  --main-color-base: 208, 205, 213;
  --main-link-color-base: 9, 200, 200;/*140, 140, 140;*/

  --second-bg-color-base: 86, 92, 132;
  --second-color-base: 255, 123, 0;
  --second-link-color-base: 140, 140, 140;/*9, 200, 200;*/

  --third-bg-color-base: 0, 98, 165;
  --third-color-base: 56, 205, 231;
  --third-link-color-base: 135, 218, 232;

  --fourth-bg-color-base: 170, 107, 44;
  --fifth-bg-color-base: 16, 115, 115;
  --sixth-bg-color-base: 181, 146, 41;
  --seventh-bg-color-base: 30, 99, 111;
  --eight-bg-color-base: 16, 102, 119;
  --ninth-bg-color-base: 37, 37, 37;
}

.dark-mode #header #logo {
  background-image: url("../images/marinesoundlib_dark.png?v=2025");
}

:root.contrast-mode {
  --main-bg-color-base: 255, 255, 255;
  --main-color-base: 0, 0, 0;
  --main-link-color-base: var(--main-color-base);

  --second-bg-color-base: var(--main-bg-color-base);
  --second-color-base: var(--main-color-base);
  --second-link-color-base: var(--main-color-base);

  --third-bg-color-base: var(--main-bg-color-base);
  --third-color-base: var(--main-color-base);
  --third-link-color-base: var(--main-color-base);

  --fourth-bg-color-base: var(--main-bg-color-base);
  --fifth-bg-color-base: var(--main-bg-color-base);
  --sixth-bg-color-base: var(--main-bg-color-base);
  --seventh-bg-color-base: var(--main-bg-color-base);
  --eight-bg-color-base: var(--main-bg-color-base);
  --ninth-bg-color-base: var(--main-bg-color-base);

  --gradient-bg-color: var(--main-bg-color);
  --bg-transparency: 1;
}

:root.contrast-mode.dark-mode {
  --main-bg-color-base: 0, 0, 0;
  --main-color-base: 255, 255, 255;
  --main-link-color-base: var(--main-color-base);

  --second-bg-color-base: var(--main-bg-color-base);
  --second-color-base: var(--main-color-base);
  --second-link-color-base: var(--main-color-base);

  --third-bg-color-base: var(--main-bg-color-base);
  --third-color-base: var(--main-color-base);
  --third-link-color-base: var(--main-color-base);

  --fourth-bg-color-base: var(--main-bg-color-base);
  --fifth-bg-color-base: var(--main-bg-color-base);
  --sixth-bg-color-base: var(--main-bg-color-base);
  --seventh-bg-color-base: var(--main-bg-color-base);
  --eight-bg-color-base: var(--main-bg-color-base);
  --ninth-bg-color-base: var(--main-bg-color-base);

  --gradient-bg-color: var(--main-bg-color);
  --bg-transparency: 1;
}

.contrast-mode.light-mode #header #logo {
  background-image: url("../images/marinesoundlib_black.webp?v=2025");
}

:root.contrast-mode.light-mode {
  --main-bg-color-base: 255, 255, 255;
  --main-color-base: 0, 0, 0;
  --main-link-color-base: var(--main-color-base);

  --second-bg-color-base: var(--main-bg-color-base);
  --second-color-base: var(--main-color-base);
  --second-link-color-base: var(--main-color-base);

  --third-bg-color-base: var(--main-bg-color-base);
  --third-color-base: var(--main-color-base);
  --third-link-color-base: var(--main-color-base);

  --fourth-bg-color-base: var(--main-bg-color-base);
  --fifth-bg-color-base: var(--main-bg-color-base);
  --sixth-bg-color-base: var(--main-bg-color-base);
  --seventh-bg-color-base: var(--main-bg-color-base);
  --eight-bg-color-base: var(--main-bg-color-base);
  --ninth-bg-color-base: var(--main-bg-color-base);

  --gradient-bg-color: var(--main-bg-color);
  --bg-transparency: 1;
}

.contrast-mode.dark-mode #header #logo {
  background-image: url("../images/marinesoundlib_white.webp?v=2025");
}

@media print {
  @page {
    margin-top: 0;
    margin-bottom: 0;
  }
  body {
    padding-top: 72px;
    padding-bottom: 72px;
    margin: 0 !important;
    color: #000 !important;
    background-color: #fff !important;
  }

  #page-wrapper {
    margin: 2rem !important;
  }

  header,
  footer,
  nav,
  video,
  iframe,
  .accessibility-container,
  #block-vlizbase-primary-local-tasks,
  #sliding-popup,
  .share42init,
  .dspager,
  .pagerfilter {
    display: none;
  }

  .paragraph--type--layout-style .paragraph {
    max-width: 100% !important;
  }

  .pvh5,
  .pvh10,
  .pvh20 {
    padding: 0 !important;
  }
}

@media only screen and (max-width: 1200px) {
  #block-vlizbase-breadcrumbs-2,
  .text-long.field-summary,
  #block-vlizbase-page-title,
  .field-location,
  .field-date-range,
  .w1200,
  .field-volledige-tekst {
    padding: 0 10vw !important;
  }

  /* center the logo for small devices */
  #header .section {
    text-align: center;
  }
}

::selection {
  background: var(--main-color);
  color: var(--main-bg-color);
}