.primary-color {
  color: #33DD3D; }

#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 #a259d9;
  margin-left: 0;
  padding-left: 1.5em; }

.muted {
  color: #888fa6; }

.light-background {
  background: #115817; }

body {
  font-family: Helvetica, sans-serif;
  font-size: 20px;
  line-height: 32px;
  background: #041704;
  color: #8f8f8f;
  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 {
  margin-left: 20px;
  margin-top: 30px;
  margin-bottom: -20px; }
  .shared-header strong {
    color: #33DD3D; }
  .shared-header span {
    color: #888fa6; }

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

.box {
  padding: 0 20px; }

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

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

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

header {
  padding: 0 20px; }
  header .title {
    font-size: 1.3em;
    text-decoration: none; }
    header .title .handle {
      font-size: 0.85em;
      color: #888fa6; }
  header .counter {
    color: #888fa6; }
  header .summary a:hover {
    text-decoration: underline; }

a {
  color: #33DD3D; }
  a:hover {
    color: #a259d9; }

#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: #888fa6; }
  footer p {
    margin: 0; }

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

.actor-box {
  display: flex;
  column-gap: 20px;
  margin: 10px 0; }
  .actor-box .icon-box {
    flex: 0 0 50px; }
  .actor-box .actor-handle {
    font-size: 0.85em;
    line-height: 1em;
    color: #888fa6; }
  .actor-box .actor-icon {
    max-width: 50px; }

#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 {
  font-size: 20px;
  line-height: 32px;
  font-family: Helvetica, sans-serif;
  background: #23262f;
  color: #e6e6e6;
  border: 1px solid #041704;
  padding: 8px 10px 5px 10px;
  cursor: pointer;
  padding: 10px 5px;
  margin: 20px 0; }
  .show-sensitive-btn:hover, .show-more-btn:hover, .label-btn:hover {
    border: 1px solid #e6e6e6; }

.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: #a259d9;
        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: 15px 0; }

nav input[type=submit], nav button {
  font-size: 20px;
  line-height: 32px;
  font-family: Helvetica, sans-serif;
  background: #23262f;
  color: #e6e6e6;
  border: 1px solid #041704;
  padding: 8px 10px 5px 10px;
  cursor: pointer; }
  nav input[type=submit]:hover, nav button:hover {
    border: 1px solid #e6e6e6; }

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: 20px; }
  nav.flexbox ul li:last-child {
    margin-right: 0px; }

nav.flexbox a:not(.label-btn) {
  color: #33DD3D;
  text-decoration: none; }
  nav.flexbox a:not(.label-btn):hover, nav.flexbox a:not(.label-btn):active {
    color: #a259d9;
    text-decoration: underline; }

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

a.label-btn {
  color: #e6e6e6; }
  a.label-btn:hover {
    text-decoration: none;
    color: #e6e6e6; }

.ap-object {
  margin: 15px 0;
  padding: 20px; }
  .ap-object nav {
    color: #888fa6; }
  .ap-object .in-reply-to {
    display: inline;
    color: #888fa6; }
  .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 #a259d9; }

.error-box, .scolor {
  color: #a259d9; }

.actor-action {
  margin-top: 20px;
  margin-bottom: -20px;
  padding: 0 20px; }
  .actor-action span {
    color: #888fa6; }
  .actor-action span.new {
    color: #a259d9; }

.actor-metadata {
  color: #888fa6; }

.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; }