:root {
  --foreground: #222;
  --background: #f9f9f9;
  --extreme-background: #fff;
  --mid: #ccc;
}

@media (prefers-color-scheme: dark) {
  :root {
    --foreground: #f9f9f9;
    --background: #222;
    --extreme-background: #000;
    --mid: #555;
  }
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font: 18px / 1.2 Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif;
}

body {
  color: var(--foreground) ;
  background: var(--background);

  &:before {
    content: " ";
    position: fixed;
    pointer-events: none;
    left: 0;
    top: 0;
    height: 3rem;
    width: 100%;
    z-index: 2;
    background: linear-gradient(to bottom, var(--background), oklch(from var(--background) l c h / 0));
  }
}

h1 {
  position: fixed;
  left: .5rem;
  top: .5rem;
  font-size: 1rem;
  background: var(--extreme-background);
  line-height: 2rem;
  padding-inline: .5rem;
  border-radius: .5lh;
  z-index: 3;
  transition-duration: 1s;
}

body:has(form:not([hidden])) h1 {
  background: var(--mid);
  padding-inline: 1rem;
  top: 1.5rem;
  left: max(1rem, calc(50vw - 14rem));
  transition-duration: 0s;
}

a {
  color: inherit;
}

.feed > div {
  padding: 3rem 1rem;
  border-bottom: 1px solid var(--mid);

  > * {
    max-width: 30rem;
    margin-inline: auto;
  }
}

.feed.loading {
  * {
    display: none;
  }

  &:before {
    content: "Loading…";
    display: block;
    position: fixed;
    pointer-events: none;
    left: 0;
    width: 100%;
    text-align: center;
    line-height: 2rem;
    top: calc(50dvh - 1rem);
    font-style: italic;
  }
}

div tt {
  color: red;
}

figure {
  margin-block: 1rem;

  img, video {
    display: block;
    width: 100%;
    height: auto;
    transition: .25s opacity;

    &:not(.clicked) {
      @media (prefers-color-scheme: dark) {
        opacity: .7;
      }
    }
  }
}

blockquote {
  margin-block: 1rem;
  position: relative;

  &:before {
    content: " ";
    position: absolute;
    background: var(--mid);
    width: .25rem;
    border-radius: .125rem;
    left: -1rem;
    top: 0;
    bottom: 0;
  }

  blockquote {
    margin-inline-start: .5rem;
  }
}

.author {
  a {
    text-decoration: none;
    color: inherit;
    display: grid;
    height: 3rem;
    grid-template-columns: 3rem 1fr;
    grid-template-rows: .5rem 1rem 1rem .5rem;
    grid-column-gap: .625rem;
    margin-block: 1rem .5rem;
    margin-inline-start: -.25rem;
    position: relative;
  }

  img,
  .no-avatar {
    display: block;
    grid-column: 1;
    grid-row: 1 / span 4;
    border-radius: 50%;
    width: 3rem;
    height: 3rem;
    background: var(--mid);
    position: relative;
  }

  b, span {
    display: block;
    width: 100%;
    height: 1lh;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  b {
    grid-row: 2;
  }

  span {
    grid-row: 3;
  }
}

.permalink {
  margin-block: 0;
  font-size: .875rem;

  a {
    text-decoration: none;
    color: oklch(from currentColor l c h / 50%);
  }
}

.repost {
  font-size: .875rem;
  white-space: nowrap;
  width: 100%;
  line-height: 1rem;
  height: 1.2rem;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: .5;
  margin: 0;

  i {
    font-style: normal;
  }

  span {
    display: inline-block;
    overflow: hidden;
    text-indent: -200vw;
    vertical-align: middle;
    margin-inline-end: .25rem;
    width: 1lh;
    height: 1lh;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'%3E%3Cpath d='M8.5 15S5 17.578 5 18.5 8.5 22 8.5 22'/%3E%3Cpath d='M5.5 18.5h8c3.288 0 4.931 0 6.038-.908q.304-.25.554-.554C21 15.93 21 14.288 21 11m-5.5-2S19 6.422 19 5.5 15.5 2 15.5 2'/%3E%3Cpath d='M18.5 5.5h-8c-3.287 0-4.931 0-6.038.908a4 4 0 0 0-.554.554C3 8.07 3 9.712 3 13'/%3E%3C/g%3E%3C/svg%3E");
    background-size: contain;
    transform: translate(0, -.125rem);

    @media (prefers-color-scheme: dark) {
      filter: invert(100%);
    }
  }
}

.not-found {
  border: 1px solid var(--mid);
  background: var(--background);
  padding: .5rem;
  margin-block: 1rem;
}

.text {
  white-space: pre-wrap;
  padding-block: .25rem;
  margin-block: .25rem;
  overflow-x: hidden;

  a {
    text-underline-offset: .25rem;
    text-decoration-thickness: 1px;
    text-decoration-color: oklch(from currentColor l c h / 50%);

    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
  }
}

.external {
  margin-block: 1rem;
  border: 1px solid var(--mid);
  background: var(--extreme-background);
  overflow: hidden;

  a {
    display: block;
    text-decoration: none;
    padding: .5rem;
  }

  img {
    display: block;
    width: calc(100% + 1rem);
    height: auto;
    margin: -.5rem -.5rem .5rem;
    border-bottom: 1px solid var(--mid);

    @media (prefers-color-scheme: dark) {
      opacity: .7;
    }
  }

  .description {
    color: oklch(from currentColor l c h / 50%)
    white-space: nowrap;
    width: 100%;
    height: 1lh;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.error {
  color: #f00;

  pre {
    margin-block: 1rem;
    color: var(--foreground);
    font-size: .75rem;
    background: var(--background);
    padding: .5rem;
    width: 100%;
    max-height: 50dvh;
    overflow: auto;
  }
}

.refresh {
  min-height: 25dvh;
  display: grid;
  place-items: center;
  display: none;

  button {
    padding: 1rem;
    cursor: pointer;
    font: inherit;
    background: var(--background);
    border: 0;
    padding-block: 0;
    line-height: 3rem;
    padding-inline: 1lh;
    border-radius: .5lh;
  }
}

form:not([hidden]) {
  max-width: 30rem;
  margin: 3rem auto;
  padding: 1rem;

  div {
    margin-block: 1rem;
  }

  p {
    margin-block: 1rem;
    max-width: 40ch;
  }

  label {
    display: block;
    margin-block-end: .5rem;
  }

  input {
    font: inherit;
    width: 100%;
    padding: .5rem;
  }

  button {
    padding: 1rem;
    cursor: pointer;
    font: inherit;
    background: var(--foreground);
    color: var(--background);
    border: 0;
    padding-block: 0;
    line-height: 3rem;
    padding-inline: 1lh;
    border-radius: .5lh;

    &[disabled] {
      cursor: default;
      opacity: .5;
    }
  }

  ~ * {
    display: none;
  }
}