@font-face {
  font-family: "SofiaSans";
  font-style: normal;
  src: url("/static/fonts/SofiaSans-Light.woff2"); }

@font-face {
  font-family: "SofiaSans";
  font-weight: bold;
  src: url("/static/fonts/SofiaSans-Bold.woff2"); }

.p-author img {
  vertical-align: sub;
  box-shadow: 0px 0px 3px forestgreen;
  border-radius: 3px; }

a {
  text-underline-offset: 5pt; }

.hashtag, .mention {
  color: indigo; }

footer, .p-note {
  background-color: rgba(255, 255, 255, 0.25); }

.primary-color {
  color: #000000; }

#admin .admin-menu {
  margin-bottom: 30px;
  padding: 0 20px; }

.empty-state {
  padding: 20px; }

.public-top-menu {
  margin: 30px 0 0 0; }

.width-95 {
  width: 95%; }

.bold {
  font-weight: bold; }

.admin-new textarea {
  font-size: 1.2em;
  width: 95%; }

.show-more-wrapper .p-summary {
  display: inline-block; }

.show-more-wrapper .show-more-btn {
  margin-left: 5px; }

.show-more-wrapper summary {
  display: inline-block; }

.show-more-wrapper summary::-webkit-details-marker {
  display: none; }

.show-more-wrapper:not([open]) .show-more-btn::after {
  content: 'show more'; }

.show-more-wrapper[open] .show-more-btn::after {
  content: 'show less'; }

.sensitive-attachment {
  display: inline-block; }
  .sensitive-attachment .sensitive-attachment-state {
    display: none; }
  .sensitive-attachment .sensitive-attachment-state:checked ~ .sensitive-attachment-box div {
    display: none; }
  .sensitive-attachment .sensitive-attachment-box {
    position: relative; }
    .sensitive-attachment .sensitive-attachment-box div {
      position: absolute;
      width: 100%;
      height: 100%;
      z-index: 10;
      backdrop-filter: blur(2em); }

blockquote {
  border-left: 3px solid forestgreen;
  margin-left: 0;
  padding-left: 1.5em; }

.muted {
  color: crimson; }

.light-background {
  background: limegreen; }

body {
  font-family: "SofiaSans", sans-serif;
  font-size: 20px;
  line-height: 32px;
  background: limegreen;
  color: #000;
  margin: 0;
  padding: 0;
  display: flex;
  min-height: 100vh;
  flex-direction: column; }

a {
  text-decoration: none; }

dl {
  display: flex; }
  dl dt {
    width: 200px;
    flex: 0 0 auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; }
  dl dd {
    flex: 1 1 auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; }
    dl dd p {
      display: inline; }

.shared-header .actor-action {
  margin-left: 20px;
  margin-top: 30px;
  margin-bottom: -20px; }
  .shared-header .actor-action strong {
    color: #000000; }
  .shared-header .actor-action span {
    color: crimson; }
  .shared-header .actor-action span.new {
    color: forestgreen; }

div.highlight {
  background: #f0f0f0;
  padding: 0 10px;
  overflow: auto;
  display: block;
  margin: 20px 0; }

.box {
  padding: 0 20px; }

code, pre {
  color: forestgreen;
  font-family: monospace; }

.form input, .form select, .form textarea {
  font-size: 20px;
  border: 0;
  padding: 5px;
  background: forestgreen;
  color: #000; }
  .form input:focus, .form select:focus, .form textarea:focus {
    outline: 1px solid forestgreen; }

.form input[type=submit] {
  font-size: 20px;
  outline: none;
  background: #000000;
  color: #fff;
  padding: 5px 12px;
  cursor: pointer; }

header {
  padding: 0 20px; }
  header .title {
    font-size: 1.3em;
    text-decoration: none;
    color: lime;
    font-weight: bold; }
    header .title .handle {
      font-size: 0.85em;
      color: crimson; }
    header .title:hover {
      text-decoration: underline; }
  header .counter {
    color: crimson; }
  header .summary a:hover {
    text-decoration: underline; }

header .title .name, nav.flexbox a:not(.label-btn), footer a, a.u-url strong {
  text-shadow: 2px 2px 2px black, -1px -1px 1px lawngreen; }

a.u-url strong {
  color: lime; }

a {
  color: #000000; }
  a:hover {
    color: forestgreen; }

#main {
  display: flex;
  flex: 1; }

main {
  width: 100%;
  max-width: 1000px;
  margin: 30px auto; }

.main-flex {
  display: flex;
  flex: 1; }

.centered {
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center; }
  .centered div {
    display: block; }

footer {
  width: 100%;
  max-width: 1000px;
  margin: 20px auto;
  color: crimson; }
  footer p {
    margin: 0; }

.tiny-actor-icon {
  max-width: 24px;
  max-height: 24px;
  position: relative;
  top: 5px; }

.actor-box {
  display: flex;
  column-gap: 10px;
  margin: 10px 0; }
  .actor-box .icon-box {
    flex: 0 0 24px;
    line-height: 50px; }
  .actor-box .actor-handle {
    font-size: 0.85em;
    line-height: 1em;
    color: crimson; }
  .actor-box .actor-icon {
    max-width: 50px;
    vertical-align: middle; }

#articles {
  list-style-type: none;
  margin: 30px 0;
  padding: 0 20px; }
  #articles li {
    display: block; }
    #articles li span {
      padding-right: 10px; }

#notifications ul, #followers ul, #following ul {
  list-style-type: none;
  margin: 0;
  padding: 0; }

#notifications li, #followers li, #following li {
  display: block; }

.show-sensitive-btn, .show-more-btn, .label-btn, input[type=submit], button[type=submit] {
  font-size: 18px;
  font-family: "SofiaSans", sans-serif;
  background: transparent;
  color: lime;
  border: 0px;
  padding: 5px 20px 5px 20px;
  cursor: pointer;
  text-transform: uppercase;
  box-shadow: #777 0 2px 3px;
  text-shadow: 2px 2px 2px black, -1px -1px 1px lawngreen; }

.show-hide-sensitive-btn {
  display: inline-block; }

.no-margin-top {
  margin-top: 0; }

.float-right {
  float: right; }

ul.poll-items {
  list-style-type: none;
  padding: 0; }
  ul.poll-items li {
    display: block; }
    ul.poll-items li p {
      margin: 20px 0 10px 0; }
      ul.poll-items li p .poll-vote {
        padding-left: 20px; }
    ul.poll-items li .poll-bar {
      width: 100%;
      height: 20px; }
      ul.poll-items li .poll-bar line {
        stroke: forestgreen;
        stroke-width: 20px; }

.attachment-wrapper .attachment-item {
  margin-top: 20px; }

.attachment-wrapper img.attachment {
  margin: 0; }

.attachment-wrapper a.attachment {
  display: inline-block;
  margin-bottom: 15px; }

.attachment-wrapper audio.attachment {
  width: 480px; }

nav form {
  margin: 10px 0; }

nav.flexbox ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  list-style-type: none;
  margin: 0;
  padding: 0; }

nav.flexbox ul li {
  margin-right: 15px; }
  nav.flexbox ul li:last-child {
    margin-right: 0px; }

nav.flexbox a:not(.label-btn) {
  color: lime;
  text-decoration: none;
  font-weight: bold; }
  nav.flexbox a:not(.label-btn):hover, nav.flexbox a:not(.label-btn):active {
    color: lime;
    text-decoration: underline; }

nav.flexbox a.active:not(.label-btn) {
  color: lime;
  font-weight: bold; }

a.label-btn {
  border: 3px solid lime;
  box-shadow: 0px 0px 3px black;
  border-radius: 3px; }

.ap-object {
  margin: 15px 0;
  padding: 20px; }
  .ap-object nav {
    color: crimson; }
  .ap-object .in-reply-to {
    display: inline;
    color: crimson; }
  .ap-object .e-content a:hover, .ap-object .activity-og-meta a:hover {
    text-decoration: underline; }
  .ap-object .activity-attachment {
    margin: 30px 0 20px 0; }
    .ap-object .activity-attachment img, .ap-object .activity-attachment audio, .ap-object .activity-attachment video {
      max-width: calc(min(740px, 100%)); }
  .ap-object img.inline-img {
    display: block;
    max-width: 740px; }

.activity-og-meta {
  display: flex;
  column-gap: 20px;
  margin: 20px 0; }
  .activity-og-meta img {
    max-width: 200px;
    max-height: 100px; }
  .activity-og-meta small {
    display: block; }

.ap-object-expanded {
  border: 2px dashed forestgreen; }

.error-box, .scolor {
  color: forestgreen; }

.actor-metadata {
  color: crimson; }

.emoji, .custom-emoji {
  max-width: 25px; }

.indieauth-box {
  display: flex;
  column-gap: 20px; }
  .indieauth-box .indieauth-logo {
    flex: initial;
    width: 100px; }
    .indieauth-box .indieauth-logo img {
      max-width: 100px; }
  .indieauth-box .indieauth-details {
    flex: 1; }
    .indieauth-box .indieauth-details div {
      padding-left: 20px; }
      .indieauth-box .indieauth-details div a {
        font-size: 1.2em;
        font-weight: 600; }

.public-interactions {
  display: flex;
  column-gap: 20px;
  flex-wrap: wrap;
  margin-top: 20px; }
  .public-interactions .interactions-block {
    flex: 0 1 30%;
    max-width: 50%; }
    .public-interactions .interactions-block .facepile-wrapper {
      display: flex;
      column-gap: 20px;
      row-gap: 20px;
      flex-wrap: wrap;
      margin-top: 20px; }
      .public-interactions .interactions-block .facepile-wrapper a {
        height: 50px; }
        .public-interactions .interactions-block .facepile-wrapper a img {
          max-width: 50px; }
      .public-interactions .interactions-block .facepile-wrapper .and-x-more {
        display: inline-block;
        align-self: center; }

.error-title a {
  text-decoration: underline; }

.ap-place h3 {
  display: inline;
  font-weight: normal; }

.ap-place h3::after {
  content: ': '; }

.margin-top-20 {
  margin-top: 20px; }

.video-wrapper {
  position: relative; }

.video-gif-overlay {
  display: none; }

.video-gif-mode + .video-gif-overlay {
  display: block;
  position: absolute;
  top: 5px;
  left: 5px;
  padding: 0 3px;
  font-size: 0.8em;
  background: rgba(0, 0, 0, 0.5);
  color: #fff; }