.post,
.parent-post {
  border-radius: var(--border-radius);
  height: min-content;
  width: fit-content;
  display: flow-root;
}

.parent-post .post-body {
  border: none;
  padding: 0.4rem;
}

.parent-post .post-header {
  border-radius: var(--border-radius);
  width: min-content;
}

.post-media-video {
  width: auto !important;
}

.post {
  margin-block: 0.4rem;
  background-color: var(--primary-color);
  height: min-content;
}

.post.invert,
.parent-post.invert {
  background-color: var(--secondary-color);
  height: min-content;
}

.post-body {
  display: block;
  padding: 0.25rem;
  border-radius: 0 0 var(--border-radius) var(--border-radius);
  width: fit-content;
  width: 100%;
  border-left: var(--border-width) var(--border-type) var(--border-color);
  border-bottom: var(--border-width) var(--border-type) var(--border-color);
  border-right: var(--border-width) var(--border-type) var(--border-color);
  height: min-content;
  box-sizing: border-box;
}

.left-file {
  height: min-content !important;
  width: min-content;
  float: left;
  padding: 0.4rem;
  margin-right: 0.4rem;
  border: var(--border-width) var(--border-type) var(--border-color);
  border-radius: var(--border-radius);
}

.post-header {
  display: inline-flex;
  white-space: nowrap;
  flex-direction: row;
  border-radius: var(--border-radius) var(--border-radius) 0 0;
  border: var(--border-width) var(--border-type) var(--border-color);
  width: -moz-available;
  width: -webkit-fill-available;
  box-sizing: border-box;
}

.post-file * {
  max-width: 60vw;
  max-height: 60vh;
  display: grid;
  grid-row-start: 1;
  grid-row-end: 1;
  grid-column-start: 1;
  grid-column-end: 1;
  /*! width: min-content !important; */
  height: min-content !important;
  /*! z-index: 1; */
}

.post-file-contents {
  min-height: 2.5em;
}

.parent-post-file * {
  max-width: 60vw;
  max-height: 60vh;
  display: grid;
  grid-row-start: 1;
  grid-row-end: 1;
  grid-column-start: 1;
  grid-column-end: 1;
}


.post-file {
  padding-bottom: 0.1rem;
  height: min-content !important;
}

.parent-post-file {
  height: min-content !important;
  width: min-content;
  float: left;
}

.bluetext {
  color: var(--bluetext-color);
}

.peetext {
  color: var(--peetext-color);
}

.post-topic {
  color: var(--topic-color);
}

.post-media-container {
  width: min-content;
  grid-row-start: 1;
  grid-row-end: 1;
  grid-column-start: 1;
  grid-column-end: 1;
}

.post-file-container {
  width: min-content !important;
}

.post-hash {
  display: grid;
  grid-row-start: 1;
  grid-row-end: 1;
  grid-column-start: 1;
  grid-column-end: 1;
  margin: 0;
  margin-left: auto;
  margin-bottom: auto;
  width: min-content;
  height: min-content;
  /*! position: none; */
  z-index: 0;
  background: rgba(0, 0, 0, 0.5);
  color: var(--link-color);
  padding-inline: 0.1rem;
  border-radius: 0 0 0 var(--border-radius);
}

.post-share {
  display: grid;
  grid-row-start: 1;
  grid-row-end: 1;
  grid-column-start: 1;
  grid-column-end: 1;
  margin: 0;
  margin-right: auto;
  margin-top: auto;
  width: min-content;
  height: min-content;
  /*! position: none; */
  z-index: 0;
  background: rgba(0, 0, 0, 0.5);
  color: var(--link-color);
  padding-inline: 0.1rem;
  border-radius: 0 var(--border-radius) 0 0;
}

.might-have-sound-indicator {
  pointer-events: none;
  display: grid;
  grid-row-start: 1;
  grid-row-end: 1;
  grid-column-start: 1;
  grid-column-end: 1;
  margin: 0;
  margin-top: auto;
  margin-left: auto;
  width: min-content;
  height: min-content;
  z-index: 0;
  background: rgba(0, 0, 0, 0.5);
  color: var(--link-color);
  padding-inline: 0.1rem;
  border-radius: var(--border-radius) 0 0 0;
}

.post-expand {
  pointer-events: none;
  display: grid;
  grid-row-start: 1;
  grid-row-end: 1;
  grid-column-start: 1;
  grid-column-end: 1;
  margin: 0;
  margin-bottom: auto;
  margin-right: auto;
  z-index: 0;
  width: min-content;
  background: rgba(0, 0, 0, 0.5);
  color: var(--link-color);
  padding-inline: 0.1rem;
  border-radius: 0 0 var(--border-radius) 0;
}

.post-expand a {
  width: min-content;
  height: min-content;
  pointer-events: all;
}

.post-author {
  display: inline-flex;
  border-right: var(--border-width) var(--border-type) var(--border-color);
  padding-inline: 0.4rem;
  padding-block: 0.2rem;
}

.post-author-admin {
  color: var(--post-link-invalid-color);
}

.post-header-delete-button {
  display: inline-flex;
  border-right: var(--border-width) var(--border-type) var(--border-color);
  padding-inline: 0.2rem;
  padding-block: 0.15rem;
}

.post-watch-button {
  display: inline-flex;
  border-right: var(--border-width) var(--border-type) var(--border-color);
  padding-inline: 0.2rem;
  padding-block: 0.15rem;
}


.post-number {
  display: inline-flex;
  border-right: var(--border-width) var(--border-type) var(--border-color);
  padding-inline: 0.4rem;
  padding-block: 0.2rem;
  cursor: alias;
  color: var(--secondary-text-color);
}

.post-timestamp {
  display: inline-flex;
  padding-inline: 0.4rem;
  padding-block: 0.2rem;
}

.post-topic {
  display: inline-flex;
  border-left: var(--border-width) var(--border-type) var(--border-color);
  padding-inline: 0.4rem;
  padding-block: 0.2rem;
}

.post-header-reply {
  display: inline-flex;
  border-left: var(--border-width) var(--border-type) var(--border-color);
  padding-inline: 0.4rem;
  padding-block: 0.2rem;
}

.post-media-error {
  white-space: nowrap;
}

.floating-image {
  width: min-content;
  height: 100%;
  z-index: 1000;
}


.floating-image .post-media-error {
  position: fixed;
  animation: blurin 500ms;
  padding-inline: 0.2rem;
  border: var(--border-width) var(--border-type) var(--border-color);
  border-radius: var(--border-radius);
  right: 2rem;
  bottom: 0.2rem;
  background-color: var(--error-color);
}

@keyframes blurin {
  from {
    filter: blur(10px);
  }

  to {
    filter: blur(0px);
  }
}

.floating-image .post-media-error a:link,
.floating-image .post-media-error a:visited {
  color: var(--primary-color);
}

.spoiler {
  font-family: "Code";
  color: #fff;
  text-transform: uppercase;
  -webkit-animation: glow var(--speed) ease-in-out infinite alternate;
  -moz-animation: glow var(--speed) ease-in-out infinite alternate;
  animation: glow var(--speed) ease-in-out infinite alternate;
  cursor: help;
  overflow-wrap: anywhere;
}

.spoiler-shown {
  color: #000;
  -webkit-animation: glow calc(var(--speed) * 5) ease-in-out infinite alternate;
  -moz-animation: glow calc(var(--speed) * 5) ease-in-out infinite alternate;
  animation: glow calc(var(--speed) * 5) ease-in-out infinite alternate;
  cursor: help;
}

.glowing-text {
  -webkit-animation: glow var(--speed) ease-in-out infinite alternate;
  -moz-animation: glow var(--speed) ease-in-out infinite alternate;
  animation: glow var(--speed) ease-in-out infinite alternate;
}

@keyframes glow {
  from {
    text-shadow: 0 0 var(--default) #fff, 0 0 calc(var(--default) + var(--added)) #fff, 0 0 calc(var(--default) + calc(var(--added) * 2)) var(--link-color), 0 0 calc(var(--default) + calc(var(--added) * 3)) var(--link-color), 0 0 calc(var(--default) + calc(var(--added) * 4)) var(--link-color), 0 0 calc(var(--default) + calc(var(--added) * 5)) var(--link-color), 0 0 calc(var(--default) + calc(var(--added) * 6)) var(--link-color);
  }

  to {
    text-shadow: 0 0 calc(var(--default) + var(--added)) var(--link-color), 0 0 calc(var(--default) + calc(var(--added) * 2)) var(--link-color), 0 0 calc(var(--default) + calc(var(--added) * 3)) var(--link-color), 0 0 calc(var(--default) + calc(var(--added) * 4)) var(--link-color), 0 0 calc(var(--default) + calc(var(--added) * 5)) var(--link-color), 0 0 calc(var(--default) + calc(var(--added) * 6)) var(--link-color), 0 0 calc(var(--default) + calc(var(--added) * 7)) var(--link-color);
    filter: brightness(90%);
  }
}