/* colors */

/* lighten or darken to headline */
/* text = 10%, border = 40%, box = 80 % */
/* lighten or darken to primary */
/* secondary = 20% */

:root {
  --background: #f7f7f7;
  --headline: #003f60;
  --text: #1a1a1a;

  --border: #808080;
  --box: #e6e6e6;

  --primary: #003f60;
  --secondary: #dff0f9;
}

/* fonts  */

h6 {
  font-size: 1rem;
  letter-spacing: -0.75%;
  line-height: 150%;
  font-weight: bold;
  margin: 1.25rem 0;
  text-wrap: balance;
}

h5 {
  font-size: 1.125rem;
  letter-spacing: -1%;
  line-height: 140%;
  font-weight: bold;
  margin: 1.25rem 0;
  text-wrap: balance;
  text-decoration: underline;
}

h4 {
  font-size: 1.25rem;
  letter-spacing: -1.25%;
  line-height: 130%;
  font-weight: bold;
  margin: 1.25rem 0;
  text-wrap: balance;
}

h3 {
  font-size: 1.56rem;
  letter-spacing: -1.5%;
  line-height: 120%;
  font-weight: bold;
  margin: 1.5rem 0;
  text-wrap: balance;
  text-decoration: underline;
}

h2 {
  font-size: 1.95rem;
  letter-spacing: -1.75%;
  line-height: 110%;
  font-weight: bold;
  margin: 1.5rem 0;
  text-wrap: balance;
}

h1 {
  font-size: 2.44rem;
  letter-spacing: -2%;
  line-height: 100%;
  font-weight: bold;
  margin: 0 0 2rem 0;
  text-wrap: balance;
}

a {
  overflow-wrap: break-word;
  word-wrap: break-word;
  -ms-word-break: break-all;
  word-break: break-all;
  word-break: break-word;
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}

/* mobile & tablet */

@media (0px <= width <= 1279px) {
  body {
    font-size: 14px;
    letter-spacing: normal;
    line-height: 150%;
    font-family: Verdana, sans-serif;
  }

  /* grid */

  html,
  body,
  .wrapper {
    background-color: var(--background);
    color: var(--text);
  }

  /* header */

  .wrapper > header .header-title,
  .wrapper > header .header-hamburger-icon {
    font-size: 1.56rem;
    color: var(--primary);
  }

  /* nav */

  .wrapper > nav .main-menu .menu-item {
    background-color: var(--box);
    color: var(--text);
    border-top: 1px solid var(--border);
  }

  .wrapper > nav .main-menu > .menu-item:first-of-type {
    border-top: 1px solid var(--primary);
  }

  /* main */

  .wrapper > main {
    border-top: 1px solid var(--primary);
  }

  .wrapper > main h1,
  .wrapper > main a {
    color: var(--primary);
  }
}

/* desktops & large desktops */

@media (width >=1280px) {
  body {
    font-size: 16px;
    letter-spacing: normal;
    line-height: 150%;
    font-family: Verdana, sans-serif;
  }

  /* grid */

  html,
  body,
  .wrapper {
    background-color: var(--background);
    color: var(--text);
  }

  /* nav */

  .wrapper > nav {
    background-color: var(--box);
    color: var(--text);
    border-right: 1px solid var(--border);
  }

  .wrapper > nav .nav-title {
    font-size: 1.56rem;
    color: var(--primary);
  }

  .wrapper > nav .main-menu .menu-item {
    border-top: 1px solid var(--border);
  }

  .wrapper > nav .main-menu > .menu-item:first-of-type {
    border-top: 0;
  }

  .wrapper > nav .main-menu .sub-menu {
    font-size: 0.83rem;
  }

  /* main */

  .wrapper > main h1,
  .wrapper > main a {
    color: var(--primary);
  }

  /* aside */

  .wrapper > aside {
    background-color: var(--box);
    color: var(--text);
    border-left: 1px solid var(--border);
  }
}

/* special items */

@media (0px <= width) {
  /* map */

  .wrapper > main .map {
    background-color: #aad3df;
    border: 1px solid var(--border);
  }

  /* map-legend */

  .wrapper > main .map-legend {
    background-color: var(--box);
    color: var(var(--text));
    border: 1px solid var(--border);
  }

  /* questionaire */

  .wrapper > main .example {
    background-color: var(--secondary);
    color: var(--text);
    border: 1px solid var(--border);
  }

  .wrapper > main .note,
  .wrapper > main .explanation,
  .wrapper > main .background {
    background-color: var(--box);
    color: var(--text);
    border: 1px solid var(--border);
  }

  .wrapper > main details {
    background-color: var(--box);
    color: var(--text);
    border: 1px solid var(--border);
  }

  .wrapper > main summary {
    background-color: var(--primary);
    color: var(--background);
  }

  .wrapper > main details > table tbody tr,
  .wrapper > main details:nth-of-type(2) > table tbody tr {
    border-bottom: 1px solid var(--border);
  }

  .wrapper > main details > table tbody tr:last-of-type,
  .wrapper > main details:nth-of-type(2) > table tbody tr:last-of-type {
    border-bottom: none;
  }

  /* question-details */

  .wrapper > main .question-details table .empty_row {
    background-color: var(--border);
  }

  .wrapper > main .question-details table .empty_row:last-of-type {
    display: none;
  }

  /* search & report */

  .wrapper > main .search .tab-button {
    background-color: var(--box);
    color: var(--text);

    border-top: 1px solid var(--border);
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
  }

  .wrapper > main .search .tab-button.active {
    background-color: var(--primary);
    color: var(--background);

    border-top: 1px solid var(--border);
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
  }

  .wrapper > main .search .container {
    background-color: var(--box);
    color: var(--text);
    border: 1px solid var(--border);
  }

  .wrapper > main .search .container fieldset,
  .wrapper > main .report fieldset {
    background-color: var(--background);
    color: var(--text);
  }

  .wrapper > main .search .container input[type="submit"],
  .wrapper > main .report input[type="submit"],
  .wrapper > main .search .container input[type="reset"],
  .wrapper > main .report input[type="reset"] {
    background-color: var(--primary);
    color: var(--background);
    border: 1px solid var(--border);
  }
}