body {
  font-size: calc(18px + (22 - 18) * ((100vw - 320px) / (1600 - 320)));
  box-sizing: content-box;
  line-height: 1.5;
  -ms-scroll-snap-type: y proximity;
  scroll-snap-type: y proximity;
  margin: 0;
}

/* --- header --- */
header #logo {
  padding: 0;
  margin: 0;
  top: 1em;
  right: 1em;
  max-width: calc(70px + (120 - 70) * ((100vw - 320px) / (1600 - 320)));
  z-index: -10;
  position: absolute;
}

/* -------- navigation -----------*/
.menu-list {
  position: absolute;
  top: min(-13rem, -308px);
  left: 0;
  width: 100%;
  height: max(13rem, 308px);
  padding: 20px;
  margin: 0;
  overflow: hidden;
  box-sizing: border-box;
}

#toggle:checked ~ .menu-list {
  top: 0em;
}

#toggle {
  position: absolute;
  cursor: pointer;
  left: -100%;
  top: -100%;
}

#toggle + label {
  display: block;
  position: absolute;
  padding: 0 1em;
  background: royalblue;
  border-radius: 3px;
  color: #fff;
  cursor: pointer;
  margin: 1em;
  transition: all 500ms ease;
  min-height: 44px;
}
#toggle + label:hover {
  filter: saturate(2.2);
}
#toggle + label:after {
  content: "Menu";
  vertical-align: -0.4em;
}

#toggle:checked ~ .menu-list {
  top: 0;
}
#toggle:checked ~ h1 {
  margin-top: max(17rem, 308px);
}

#toggle:checked + label:after {
  content: "Close Menu";
}

/* navigation list */
.menu-list {
  padding: 1em;
  margin: 0;
  border-radius: 8px;
  font-family: sans-serif;
}
.menu-list li {
  background-color: inherit;
  list-style: none;
  width: 100%;
  min-height: 44px;
}

/* --- general --- */
h1 {
  text-align: center;
  margin: 0 auto 1em auto;
  padding: 2em 0 0 0;
  max-width: 70%;
  line-height: 1.25em;
}
h2 {
  text-align: center;
  margin: 1.5em auto 1em auto;
  max-width: 80%;
}
main {
  margin: auto 1em;
}

/* --- relevant for Benjamins instructions --- */
p,
figure {
  margin: 0;
}
.em p {
  margin: 1em;
}
.container {
  display: flex;
  flex-wrap: wrap;
  margin: 0 0 0 1em;
}
.container > * {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 30ch;
  margin: 0 1rem 1rem 0;
}
img {
  max-width: 100%;
  border-radius: 8px;
  margin: 0;
}

/* --- random item styling --- */
.red {
  color: red;
}
.center {
  text-align: center;
}

/* --- logo and text visibility --- */
a {
  text-decoration: none;
}
a:hover,
a:focus {
  text-decoration: underline;
}

/* --- table styling --- */

table {
  border-collapse: collapse;
  position: relative;
  margin: 0;
  border: none;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  border: 1px solid black;
}
table thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1;
  background: white;
}

table td {
  background: #fff;
  padding: 4px 5px;
}

table thead th:first-child {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 2;
}
table tbody th {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  background: white;
  z-index: 1;
}

td,
th {
  border: 1px solid black;
  padding-left: 0.5em;
  padding-right: 0.5em;
  text-align: left;
}
thead,
tr > td:first-child {
  font-weight: bold;
}

table thead th:first-child,
table tbody td:first-child {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 2;
}

/* --- hide and show images in table --- */
.hide-image {
  display: none;
  z-index: 100;
  position: absolute;
}
.preview:hover .hide-image {
  display: block;
}

/* --- scroll snap --- */
section {
  scroll-snap-align: start;
}

/* --- img in table --- */
table img {
  margin-left: 10%;
  margin-top: -350px;
  max-width: 85%;
}

/* --- margin on sides for wide screens --- */
@media screen and (min-width: 700px) {
  main {
    margin-left: calc(1% + (70 - 1) * ((100vw - 700px) / (3000 - 700)));
    margin-right: calc(1% + (70 - 1) * ((100vw - 700px) / (3000 - 700)));
  }
}

/* --- print media query --- */
@media print {
  body {
    font-size: 12px;
  }
  .no-print {
    display: none;
  }
  .container > * {
    flex-basis: 10ch;
  }
  section {
    page-break-inside: avoid;
  }
}

/* --- dark mode --- */
@media (prefers-color-scheme: dark) {
  body {
    background: #333;
    color: white;
  }
  a {
    color: #9cc0d9;
  }
  #toggle + label {
    background: #9cc0d9;
    color: #111;
  }
  .red {
    color: #f33;
  }

  table thead th {
    background-color: #333;
    color: white;
  }
  td,
  th {
    border: 1px solid white;
  }
  table td {
    background: #333;
  }
}