.post-box {
  display: inline-flex;
  flex-direction: column;
  background-color: var(--primary-color);
  border: var(--border-width) var(--border-type) var(--border-color);
  max-width: 25rem;
  border-radius: var(--border-radius);
}

textarea,
input {
  font-family: "ArimoNF";
}

.post-box-centered {
  display: flex;
  justify-content: center;
  margin-bottom: 2rem;
}

.post-box-floating {
  position: fixed;
  right: 0.4rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1000;
}

.post-box-meta {
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
}

.post-box-centered .post-box .post-box-meta {
  flex-direction: column;
}

.post-box-meta a {
  text-align: center;
  padding: 0.2rem;
}

.post-box-meta-inputs {
  display: inline-flex;
  flex-direction: row;
  flex-basis: -moz-available;
  flex-basis: -webkit-fill-available;
  width: 100%;
}

.post-box-name {
  width: 50%;
  padding: 0.2rem;
  border-right: var(--border-width) var(--border-type) var(--border-color);
}

.post-box-name#sloppytoppy {
  border-top: var(--border-width) var(--border-type) var(--border-color);
}

.post-box-name#notop {
  width: 100%;
}

.post-box-moderator {
  padding: 0.2rem;
}

.post-box-moderator#sloppytoppy {
  border-top: var(--border-width) var(--border-type) var(--border-color);
}

.post-box-moderator#notop {
  border-right: var(--border-width) var(--border-type) var(--border-color);
}

.post-box-moderator input {
  font-family: "Code";
}

.post-box-topic {
  width: 50%;
  padding: 0.2rem;
  border-left: var(--border-width) var(--border-type) var(--border-color);
  border-top: var(--border-width) var(--border-type) var(--border-color);
}

.post-box-content {
  padding: 0.2rem;
  width: auto;
  height: 5rem;
  padding-bottom: 0.3rem;
  border-bottom: var(--border-width) var(--border-type) var(--border-color);
  border-top: var(--border-width) var(--border-type) var(--border-color);
}

.post-box-file {
  display: flex;
  flex-direction: row;
  border-bottom: var(--border-width) var(--border-type) var(--border-color);
}

.post-box-file input {
  width: 80%;
  border-left: var(--border-width) var(--border-type) var(--border-color);
  border-right: var(--border-width) var(--border-type) var(--border-color);
  font-size: inherit;
}

.post-box-file input::file-selector-button {
  border: var(--border-width) var(--border-type) var(--border-color);
  background-color: var(--secondary-color);
  color: var(--text-color);
}

.post-box-file * {
  padding: 0.2rem;
  white-space: nowrap;
}

.post-box-submit {
  width: 100%;
  display: inline-flex;
  padding: 0.2rem;
  justify-content: center;
}

.post-box-submit :not(a) {
  color: var(--error-color);
  pointer-events: none;
  position: absolute;
  transform: translateY(0.9em) translateX(-50%);
}

.post-box-submit * span {
  background-color: var(--border-color);
  border: var(--primary-color);
  padding-inline: 0.2rem;
  border-radius: var(--border-radius);
  width: min-content;
  white-space: nowrap;
}

.post-box-submit a {
  width: 100%;
  text-align: center;
  border-radius: 0 0 var(--border-radius) var(--border-radius);
}