body {
  /* prevents the body from scrolling past the top
   * which causes the pull-to-refresh behavior to
   * be hard to trigger, because sometimes it's 
   * overscrolling and sometimes it's touch dragging.
   */
  overscroll-behavior: none;
}

.highlight {
  background-color: var(--amber-300);
}

p a {
  color: var(--signal);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.expanded {
  position: absolute;
  inset: 3.5rem 5% 2rem;
}

.expanded iframe {
  width: 100%;
  height: 99lvh;
  background-color: white;
  border: 1px solid var(--ink);
  padding: 0.5rem;
  z-index: 50;
}

.expanded #arrowbutton {
  position: sticky;
  bottom: 0;
}

.expanded #closebutton {
  inset: 0 5%;
  position: sticky 
}

.tabs .tab-content {
  display: none;
}

.tabs .tab-content.active {
  display: block;
}

mark {
  background-color: var(--amber-300);
  color: var(--ink);
  border-radius: 2px;
  padding-inline: 0.1em;
}

/* this creates a glitch when one line has two marks which are not next to each other */
mark + mark { padding-left: 0.4em; }