:root {
  /*
   * according to https://www.color-blindness.com/color-name-hue/
   *
   * amber
   * chartreuse
   * free-speech-green (lime)
   * aqua
   * blue
   * electric-indigo
   * hot-magenta
   */
  --red: var(--base08);
  --orange: var(--base09);
  --yellow: var(--base0A);
  --green: var(--base0B);
  --cyan: var(--base0C);
  --blue: var(--base0D);
  --violet: var(--base0E);
  --magenta: var(--base0F);

  /* convenience */
  --bg: var(--base00);
  --bg-status: var(--base01);
  --bg-selection: var(--base02);
  --fg-alt: var(--base03);
  --fg-status: var(--base04);
  --fg: var(--base05);
  --fg-light: var(--base06);
  --bg-light: var(--base07);

  /* line */

  --peta: 32rem;
  --tera: 16rem;
  --giga: 8rem;
  --mega: 4rem;
  --kilo: 2rem;
  --whole: 1rem;
  --milli: 0.5rem;
  --micro: 0.25rem;
  --nano: 0.125rem;
  --pico: 0.0625rem;

  /* size */
  --common-radius: var(--micro);
  --measure: calc(var(--peta) + var(--mega));
  --line: 1.5rem;
}

* {
  scrollbar-color: var(--fg-status) var(--bg);
}

::selection {
  background-color: var(--bg-selection);
  color: var(--fg-light);
}

html {
  display: flex;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
    "Helvetica Neue", sans-serif;
  justify-content: center;
  font-size: 12pt;
  line-height: 1.5;
  margin: 0;
  padding: 0;
}

main {
  margin: 0;
  margin-bottom: var(--whole);
}

/* https://www.desmos.com/calculator/3elcf5cwhn */
h1 {
  font-size: 133%;
} /*     4 / 3 */
h2 {
  font-size: 115%;
} /*     8 / 7 */
h3 {
  font-size: 105%;
} /*   16 / 15 */
h4 {
  font-size: 103%;
} /*   32 / 31 */
h5 {
  font-size: 101%;
} /*   64 / 63 */
h6 {
  font-size: 100%;
} /* 128 / 127 */

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--bg-light);
  margin: var(--whole) 0;
}

ul,
ol {
  padding-left: var(--whole);
}

a {
  color: var(--fg-light);
}

button {
  cursor: pointer;
  background: var(--fg);
  color: var(--bg);
  border: var(--pico) solid var(--fg);
  padding: var(--milli) var(--whole);
  border-radius: var(--common-radius);
}

section > footer > a,
section > footer > form > button {
  color: var(--fg-status);
  font-weight: bold;
}

section > footer > form > button {
  display: inline-block;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
}

select,
input {
  background: var(--bg);
  color: var(--fg);
  border: var(--pico) solid var(--bg-selection);
  padding: var(--milli);
  margin-right: var(--whole);
  -moz-appearance: none;
  appearance: none;
  border-radius: var(--common-radius);
}

textarea {
  background-color: var(--bg);
  box-sizing: border-box;
  display: block;
  font-size: var(--whole);
  padding: var(--whole);
  resize: vertical;
  width: 100%;
  margin: var(--whole) 0;
  height: 12rem;
  border: var(--pico) solid var(--bg-selection);
  border-radius: var(--common-radius);
  color: var(--fg);
}

button:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: var(--blue);
}

button:focus,
button:hover {
  background-color: var(--fg-light);
}

section > footer > form > button:hover,
section > footer > form > button:focus {
  background-color: transparent;
}

pre {
  overflow-x: auto;
  background-color: var(--bg);
  padding: var(--milli);
  font-size: 92%;
  border-radius: var(--common-radius);
  border: var(--pico) solid var(--bg-status);
}

section code {
  max-width: 100%;
  overflow-wrap: break-word;
  padding: 0.125em 0.25em;
  margin: 0;
  font-size: 85%;
  background-color: var(--bg);
  border-radius: var(--common-radius);
  border: var(--pico) solid var(--bg-status);
}

section pre code {
  color: inherit;
  padding: 0;
  margin: 0;
  font-size: 100%;
  background-color: initial;
  border: initial;
  border-radius: initial;
}

section blockquote {
  margin-left: 0;
  border-left: var(--milli) solid var(--bg-status);
  padding-left: var(--whole);
}

section img,
section video {
  max-width: 100%;
  max-height: 100vh;
  border: var(--pico) solid var(--bg-status);
  border-radius: var(--common-radius);
  box-sizing: border-box;
}

.profile > img,
.profile > h1 {
  display: inline-block;
}

section > header.profile {
  height: auto;
  justify-content: left;
}

.profile > img {
  width: 4rem;
  height: 4rem;
  margin-right: var(--whole);
  border-radius: var(--common-radius);
}

.private {
  border-left: var(--milli) solid var(--violet);
  border-color: var(--violet);
}

section.thread-target {
  border: var(--pico) solid var(--blue);
  box-shadow: 0 0 var(--micro) var(--blue);
}

section.thread-target.private {
  border: var(--pico) solid var(--violet);
  border-left: var(--milli) solid var(--violet);
  border-color: var(--violet);
  box-shadow: 0 0 var(--micro) var(--violet);
}

section audio {
  width: 100%;
}

section > :first-child {
  margin-top: 0;
  padding-top: 0;
}

.content > :last-child {
  margin-bottom: 0;
}

@media screen {
  html {
    min-height: 100%;
    color: var(--fg);
    background-color: var(--bg-status);
  }

  body {
    width: 100%;
    max-width: var(--measure);
    margin: 0;
  }
}

nav {
  margin: var(--whole) 0;
}

section header a {
  display: flex;
  color: var(--fg-status);
  text-decoration: none;
  font-weight: bold;
  margin-right: var(--micro);
  margin-left: var(--micro);
}

nav > ul > li > a {
  color: var(--fg);
  text-decoration: none;
  font-weight: bold;
}

nav > ul > li > a.current {
  text-decoration: underline;
}

section {
  padding: var(--whole);
  border-radius: var(--common-radius);
  margin: var(--whole) 0;
  word-wrap: break-word;
  background: var(--bg);
}

section > header {
  height: var(--line);
  display: flex;
  margin-bottom: var(--whole);
  justify-content: space-between;
  color: var(--fg-status);
}

section header a > .avatar {
  width: var(--line);
  height: var(--line);
  border-radius: var(--common-radius);
  margin-right: var(--micro);
}

section header span {
  display: flex;
}

section header .author > a:first-child {
  margin-left: 0;
  color: var(--fg-light);
}

/*
 * HACK: centered-footer
 *
 * When someone likes a message we want to submit the form and then redirect
 * them back to the original page. Unfortunately when you link to anchor tags
 * that scrolls the browser so that they're at the *top* of the page, not the
 * center of the page. In our view we have an empty div with an appropriate
 * anchor tag, so here we use CSS to center it on the screen.
 *
 * The code below creates padding-top that takes up 50% of the height of the
 * viewport and then gets rid of it with negative margin. This has no effect
 * on the display of the item, but means that when we link to the anchor tag
 * it centers this empty element vertically on the screen.
 *
 * We also use `pointer-events: none` to ensure that this invisible div doesn't
 * capture cursor events (clicks, drags, etc) on surrounding elements, because
 * otherwise we could have a problem where someone clicks above the invisible
 * div but the browser picogs they're clicking the gigantic amount of padding.
 */
section > .centered-footer {
  padding-top: 50vh;
  margin-top: -50vh;
  pointer-events: none;
}

section > footer {
  display: flex;
  justify-content: space-between;
  margin-top: var(--whole);
  color: var(--fg-status);
}

section > footer > * {
  text-decoration: none;
}

section > footer > form > button.liked {
  color: var(--red);
}

label {
  display: block;
  margin: 0;
}

nav > ul {
  display: flex;
  justify-content: space-between;
  margin: 0;
  padding: 0;
}

nav > ul > li {
  list-style: none;
}

.profile {
  margin-top: var(--whole);
  display: flex;
  margin-bottom: var(--whole);
}

progress {
  display: block;
  width: 100%;
}

progress::-moz-progress-bar,
progress::-webkit-progress-value,
progress {
  background: var(--blue);
  border-color: var(--blue);
}

/* content warning! */
summary {
  padding: var(--milli);
  margin: 0;
  cursor: pointer;
  border: var(--pico) solid var(--bg-selection);
}

.md-mention {
  -moz-user-select: all;
  -ms-user-select: all;
  -webkit-user-select: all;
  user-select: all;
  background: none;
  font-size: 50%;
}

table {
  width: 100%;
  table-layout: fixed;
}

td,
th {
  padding: var(--milli);
  outline: var(--pico) solid var(--bg-status);
}

th {
  text-align: left;
  background-color: var(--bg-status);
}

input[type="search"] {
  width: 100%;
  margin: var(--whole) 0;
}

hr {
  border: var(--pico) solid var(--fg-alt);
}