style.css

:root {
  color-scheme: light dark;
  supported-color-schemes: light dark;
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

body {
  width: 960px;
  margin: 0px auto 40px;
  font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-y: scroll;
}

a {
  text-decoration: none;
  color: rgb(0, 0, 255);
}

a:hover {
  text-decoration: underline;
}

a:visited {
  color: rgb(0, 0, 255);
}

#github {
  position: fixed;
  bottom: 10px;
  right: 10px;
  z-index: 10;
}

#github img {
  width: 20px;
  opacity: 0.4;
}

#github a:hover img {
  opacity: 0.6;
}

#search {
  visibility: hidden;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 5%;
}

#search form {
  border: 2px solid hsl(210, 100%, 80%);
  border-radius: 10px;
  padding: 15px 20px;
  margin-left: 50px;
}

#search input {
  font-size: 16pt;
  width: 600px;
  border: 0;
  margin-left: 8px;
}

#search input:focus {
  outline: none;
}

#account {
  position: fixed;
  top: 10px;
  left: 10px;
  line-height: 24px;
  z-index: 20;
  user-select: none;
  -webkit-user-select: none;
}

#account i {
  opacity: 0.4;
}

#account i:hover {
  cursor: pointer;
  opacity: 0.6;
}

#account img.avatar {
  width: 24px;
  height: 24px;
  border-radius: 13px;
  box-shadow: 0px 0px 2px black;
}

#account_menu {
  position: fixed;
  visibility: hidden;
  top: 5px;
  left: 5px;
  padding-top: 30px;
  z-index: 15;
  background: hsl(210, 33.33%, 94.0%);
  border: 1px solid #ccc;
  border-radius: 5px;
  user-select: none;
  -webkit-user-select: none;
}

#account_menu ul {
  list-style-type: none;
  margin: 0px 0px 10px;
  padding: 6px 11px;
}

#account_menu li a {
  display: inline-block;
  color: #333;
  font-size: 11pt;
  border: 1px solid #bbb;
  padding: 3px 5px;
  margin-top: 8px;
  border-radius: 5px;
  background-color: hsla(210, 100%, 4%, 0.12);
}

#account_menu li a:hover {
  background-color: hsla(210, 100%, 4%, 0.2);
  text-decoration: none;
}

#login {
  visibility: hidden;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 5%;
  z-index: 10;
  background-color: rgba(240, 240, 240, 0.4);
}

#login.expanded {
  padding-bottom: 0;
}

#login form {
  position: relative;
  border: 2px solid hsl(210, 100%, 85%);
  background-color: hsl(210, 100%, 98%);
  border-radius: 10px;
  padding: 15px 25px;
}

#login .close {
  position: absolute;
  top: 5px;
  right: 5px;
  color: hsl(210, 100%, 75%);
  opacity: 0.6;
}

#login .close:hover {
  color: hsl(210, 100%, 65%);
  opacity: 1.0;
}

#login p {
  text-align: center;
}

#login h2 {
  font-size: 13pt;
  font-weight: 600;
  text-align: center;
  margin-bottom: 25px;
  padding-right: 10px;
}

#login p.submit {
  margin-top: 25px;
}

#login p.info {
  font-size: 9pt;
}

#login p.info a {
  color: #666;
}

#login input[type="text"], #login input[type="password"] {
  width: 200px;
  font-size: 11pt;
  border: 1px solid #d6d6d6;
  border-radius: 4px;
  padding: 5px 6px;
  margin: 0px 15px;
}

#login input[type="submit"] {
  width: 150px;
  font-size: 11pt;
  border: 1px solid hsl(210, 90%, 85%);
  background-color: hsl(210, 100%, 92%);
  border-radius: 4px;
  padding: 5px 6px;
}

#login input[type="submit"]:active {
  background-color: hsl(210, 100%, 90%);
}

#login #cloudy {
  color: hsl(210, 60%, 75%);
  margin: 14px 0px;
  display: none;
}

#login .info-box {
  display: none;
  border: 1px solid hsl(45, 100%, 60%);
  background-color: hsl(50, 100%, 96%);
  width: 360px;
  font-size: 11pt;
  border-radius: 6px;
}

#login.expanded .info-box {
  display: block;
}

#login .info-box p {
  margin: 15px 15px;
  line-height: 125%;
  text-align: left;
}

#loader {
  display: none;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 36px;
  height: 36px;
}

#loader img {
  width: 36px;
  animation: rotation 3s infinite linear;
}

#thread {
  padding-top: 1px;
}

#thread.overlay {
  filter: blur(8px);
}

#thread header h2 {
  margin-left: 20px;
  margin-top: 40px;
  margin-bottom: 50px;
  font-size: 18pt;
}

#thread.quotes .post {
  padding-bottom: 5px;
}

#thread.hashtag .post {
  padding-bottom: 10px;
  border-bottom: 1px solid #ddd;
}

#thread + p.note {
  margin-top: 30px;
  margin-left: 15px;
  font-size: 11pt;
  color: #666;
}

.back, .back a {
  font-size: 11pt;
  color: #666;
}

.back i {
  margin-right: 2px;
}

p.back i {
  font-size: 10pt;
  color: #888;
  margin-right: 5px;
}

.post {
  position: relative;
  padding-left: 21px;
  margin-top: 30px;
}

.post .edge {
  position: absolute;
  left: -2px;
  top: 30px;
  bottom: 0px;
  width: 6px;
}

.post .edge .line {
  position: absolute;
  left: 2px;
  top: 0px;
  bottom: 0px;
  border-left: 1px solid #aaa;
}

.post .edge:hover .line {
  border-left: 2px solid #888;
}

.post.collapsed .line {
  display: none;
}

.post.collapsed .content {
  display: none;
}

.post.flat {
  padding-left: 0px;
  margin-top: 25px;
}

.post.flat > .edge {
  display: none;
}

.post .avatar {
  width: 32px;
  height: 32px;
  border-radius: 16px;
  vertical-align: middle;
  margin-bottom: 3px;
  margin-right: 8px;
}

.post .missing {
  color: #aaa;
  background-color: #eee;
  border-radius: 16px;
  vertical-align: middle;
  margin-right: 8px;
}

.post.muted .missing {
  color: #bbb;
}

.post .plus {
  position: absolute;
  top: 8px;
  left: -6px;
  width: 14px;
}

.post.flat > .plus {
  display: none;
}

.post h2 {
  font-size: 12pt;
  margin-bottom: 0;
}

.post h2 .handle {
  color: #888;
  font-weight: normal;
  font-size: 11pt;
  vertical-align: text-top;
}

.post h2 .separator {
  color: #888;
  font-weight: normal;
  font-size: 11pt;
  vertical-align: text-top;
}

.post h2 .time {
  color: #666;
  font-weight: normal;
  font-size: 10pt;
  vertical-align: text-top;
}

.post h2 .action {
  color: #888;
  font-weight: normal;
  font-size: 10pt;
  vertical-align: text-top;
}

.post h2 img.mastodon {
  width: 15px;
  position: relative;
  top: 2px;
  margin-left: 3px;
}

.post p {
  margin-top: 10px;
}

.post div.body p + p {
  margin-top: 18px;
}

.post .quote-embed {
  border: 1px solid #ddd;
  border-radius: 8px;
  background-color: #fbfcfd;
  margin-top: 25px;
  margin-bottom: 15px;
  margin-left: 0px;
  max-width: 800px;
}

.post .quote-embed .post {
  margin-top: 16px;
  padding-left: 16px;
  padding-right: 16px;
  padding-bottom: 5px;
}

.post .quote-embed .placeholder {
  font-style: italic;
  font-size: 11pt;
  color: #888;
}

.post .image-alt {
  font-size: 11pt;
  color: #666;
  margin-bottom: 20px;
}

.post .image-alt summary {
  font-size: 11pt;
  color: #666;
  margin-bottom: 5px;
  user-select: none;
  -webkit-user-select: none;
  cursor: default;
}

.post.blocked p, .post.blocked a {
  font-size: 11pt;
  color: #666;
}

.post.blocked .blocked-header i {
  margin-right: 2px;
}

.post.muted > h2, .post.muted > .content > details > p, .post.muted > .content > details summary {
  opacity: 0.3;
}

.post.muted > h2 {
  font-weight: 600;
}

.post.muted details {
  margin-top: 12px;
  margin-bottom: 10px;
}

.post.muted details summary {
  font-size: 10pt;
  user-select: none;
  -webkit-user-select: none;
  cursor: default;
}

.post a.link-card {
  display: block;
  position: relative;
  max-width: 500px;
  margin-bottom: 12px;
}

.post a.link-card:hover {
  text-decoration: none;
}

.post a.link-card > div {
  background-color: #fcfcfd;
  border: 1px solid #d8d8d8;
  border-radius: 8px;
  padding: 11px 15px;
}

.post a.link-card:hover > div {
  background-color: #f6f7f8;
  border: 1px solid #c8c8c8;
}

.post a.link-card > div:not(:has(p.description)) {
  padding-bottom: 14px;
}

.post a.link-card p.domain {
  color: #888;
  font-size: 10pt;
  margin-top: 1px;
  margin-bottom: 5px;
}

.post a.link-card h2 {
  color: #333;
  margin-top: 8px;
}

.post a.link-card p.description {
  color: #666;
  font-size: 11pt;
  margin-top: 8px;
  margin-bottom: 4px;
  line-height: 135%;
}

.post a.link-card.record > div:has(.avatar) {
  padding-left: 65px;
}

.post a.link-card.record h2 {
  margin-top: 3px;
}

.post a.link-card.record .handle {
  color: #666;
  margin-left: 5px;
}

.post a.link-card.record .avatar {
  width: 36px;
  height: 36px;
  border: 1px solid #ddd;
  border-radius: 6px;
  position: absolute;
  top: 15px;
  left: 15px;
}

.post a.link-card.record .stats {
  margin-top: 9px;
  margin-bottom: 1px;
}

.post a.link-card.record .stats i.fa-heart:hover {
  color: #aaa;
}

.post .stats {
  font-size: 10pt;
  color: #666;
}

.post .stats a {
  color: #666;
  text-decoration: none;
}

.post .stats a:hover {
  text-decoration: underline;
}

.post .stats i {
  font-size: 9pt;
  color: #888;
}

.post .stats i.fa-heart {
  color: #aaa;
}

.post .stats i.fa-heart.liked {
  color: #e03030;
}

.post .stats i.fa-heart:hover {
  color: #888;
  cursor: pointer;
}

.post .stats i.fa-heart.liked:hover {
  color: #c02020;
}

.post .stats span {
  margin-right: 10px;
}

.post img.loader {
  width: 24px;
  animation: rotation 3s infinite linear;
  margin-top: 5px;
}

@media (prefers-color-scheme: dark) {
  body {
    background-color: rgb(39, 39, 37);
    color: #eee;
  }

  a {
    color: rgb(0, 133, 255);
  }

  a:visited {
    color: rgb(0, 133, 255);
  }

  #loader {
    filter: invert();
  }

  #search form {
    border-color: hsl(210, 40%, 60%);
  }

  #search form input {
    background-color: transparent;
  }

  #account_menu {
    background: hsl(210, 33.33%, 94.0%);
    border-color: #ccc;
  }

  #account_menu li a {
    color: #333;
    border-color: #bbb;
    background-color: hsla(210, 100%, 4%, 0.12);
  }

  #account_menu li a:hover {
    background-color: hsla(210, 100%, 4%, 0.2);
  }

  #login {
    background-color: rgba(240, 240, 240, 0.15);
  }

  #login form {
    border-color: hsl(210, 20%, 40%);
    background-color: hsl(210, 12%, 25%);
  }

  #login .close {
    color: hsl(210, 20%, 50%);
    opacity: 0.6;
  }

  #login .close:hover {
    color: hsl(210, 20%, 50%);
    opacity: 1.0;
  }

  #login p.info a {
    color: #888;
  }

  #login input[type="text"], #login input[type="password"] {
    border-color: #666;
  }

  #login input[type="submit"] {
    border-color: hsl(210, 15%, 40%);
    background-color: hsl(210, 12%, 35%);
  }

  #login input[type="submit"]:active {
    border-color: hsl(210, 15%, 35%);
    background-color: hsl(210, 12%, 30%);
  }

  #login #cloudy {
    color: hsl(210, 60%, 75%);
  }

  #login .info-box {
    border-color: hsl(45, 100%, 45%);
    background-color: hsl(50, 40%, 30%);
  }

  #login .info-box a {
    color: hsl(45, 100%, 50%);
  }

  #github {
    filter: invert();
  }

  .back, .back a {
    color: #888;
  }

  p.back i {
    color: #888;
  }

  .post h2 .handle {
    color: #888;
  }

  .post h2 .separator {
    color: #888;
  }

  .post h2 .time {
    color: #aaa;
  }

  .post h2 .action {
    color: #888;
  }

  .post .quote-embed {
    background-color: #303030;
    border-color: #606060;
  }

  .post .image-alt, .post .image-alt summary {
    color: #999;
  }

  .post.blocked p, .post.blocked a {
    color: #aaa;
  }

  .post .edge .line {
    border-left-color: #666;
  }

  .post .edge:hover .line {
    border-left-color: #888;
  }

  .post .plus {
    filter: invert();
  }

  .post .stats {
    color: #aaa;
  }

  .post .stats i {
    color: #888;
  }

  .post .stats i.fa-heart {
    color: #aaa;
  }

  .post .stats i.fa-heart.liked {
    color: #f04040;
  }

  .post .stats i.fa-heart:hover {
    color: #eee;
  }

  .post .stats i.fa-heart.liked:hover {
    color: #ff7070;
  }
}