a {
  text-decoration: underline;
  color: teal;
}

span {
  display: inline-flex;
  gap: 0.5em;
  align-items: center;
}

@media (prefers-color-scheme: dark) {
  :root {
    color: #f6f6f6;
    background-color: #2f2f2f;
  }

  a {
    color: lightgray;
  }

  a:hover {
    color: #24c8db;
  }

  input,
  button {
    color: #ffffff;
    background-color: #0f0f0f98;
  }
  button:active {
    background-color: #0f0f0f69;
  }
}

body {
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

html {
  height: 100vh;
  overflow-y: hidden;
}

html.dark .glossaries {
  span {
    word-break: keep-all;
  }

  img[src$=".svg"], img[src^="data:image/svg"] {
    filter: invert(1) hue-rotate(180deg);
  }

  rt {
    font-size: 50%;
  }
}