:root {
  --border: 2px solid;
  --border-highlight: white;
  --border-shadow: black;
}
html {background-color: darkcyan;}
body {
  max-width: 600px;
  padding: .3rem;
  font-family: var(--font-w95f);
  background: lightgray;
  border-top: var(--border) var(--border-highlight);
  border-left: var(--border) var(--border-highlight);
  border-bottom: var(--border) var(--border-shadow);
  border-right: var(--border) var(--border-shadow);
}
::selection {color: white;background: dodgerblue;}
::-webkit-scrollbar {width: 1rem;}
::-webkit-scrollbar-track {background-color:gainsboro;}
::-webkit-scrollbar-thumb,::-webkit-scrollbar-button {
  cursor: grab;
  background: lightgray;
  border-top: var(--border) var(--border-highlight);
  border-left: var(--border) var(--border-highlight);
  border-bottom: var(--border) var(--border-shadow);
  border-right: var(--border) var(--border-shadow);
}
::-webkit-scrollbar-button:hover {
  background: gray;
  border-top: var(--border) var(--border-shadow);
  border-left: var(--border) var(--border-shadow);
  border-bottom: var(--border) var(--border-highlight);
  border-right: var(--border) var(--border-highlight);
}

body > header {
  display: flex;
  align-items: center;
  gap: .2rem;
  padding-block: .2rem;
  padding-inline: .2rem;
  background: blue linear-gradient(to right, navy, dodgerblue);
  span {
    flex: 1;
    margin: 0;
    font-weight: normal;
    font-size: 1rem;
    color: white;
  }
  div {
    display: flex;
    justify-content: center;
    align-content: center;
    --l: 20px;
    width: var(--l);
    height: var(--l);
    font-weight: bold;
    background: lightgray;
    border-top: var(--border) var(--border-highlight);
    border-left: var(--border) var(--border-highlight);
    border-bottom: var(--border) var(--border-shadow);
    border-right: var(--border) var(--border-shadow);
    &:hover {
      cursor: not-allowed;
      background: gray;
      border-top: var(--border) var(--border-shadow);
      border-left: var(--border) var(--border-shadow);
      border-bottom: var(--border) var(--border-highlight);
      border-right: var(--border) var(--border-highlight);
    }
  }
}
nav {
  display: flex;
  padding-block: .2rem;
  a {
    display: block;
    margin-inline-start: .5rem;
    padding-inline: .2rem;
    color: black;
    text-decoration: none;
    border: 2px solid transparent;
    &::first-letter {
      text-decoration: underline solid currentColor;
    }
    &:hover {
      text-decoration: underline solid currentColor;
      color: white;
      background: gray;
      border-top: var(--border) var(--border-shadow);
      border-left: var(--border) var(--border-shadow);
      border-bottom: var(--border) var(--border-highlight);
      border-right: var(--border) var(--border-highlight);
    }
  }
}
main {
  overflow: auto;
  max-height: calc(100vh - 75px);
  padding: .2rem;
  background: white;
  border-top: var(--border) var(--border-shadow);
  border-left: var(--border) var(--border-shadow);
  border-bottom: var(--border) var(--border-highlight);
  border-right: var(--border) var(--border-highlight);
}
h1, h2 {
  font-size: 1.1rem;
}
h1::before {content: "# ";}
h2::before {content: "## ";}
h1, h2, p, fieldset {margin-block-end: 1lh;}
dl {
  margin-block-end: 2lh;
  dt {
    display: list-item;
    list-style: inside "+ ";
    a::after {content: none !important;}
  }
  dd {
    display: list-item;
    list-style: inside ": ";
    margin-inline-start: 2rem;
  }
}
fieldset {
  border: none;
  margin: 0;
  padding: 0;
  label {display: block;}
}
main:has(#collapsed-view:checked) {
dt {display: inline;}
dd {display: none;}
}
a:not(dt a, nav a) {color: navy;}