@import url('https://fonts.googleapis.com/css2?family=Mystery+Quest&family=Spicy+Rice&display=swap');

/* TABLE OF CONTENTS
  I. Animation Keyframes
  II. Base Styles
  III. Forms
  IV. Main Nav
  V. Homepage
  VI. User
  VII.Comments
  VIII. Dashboard
  IX. Works
  X. Prefs
  XI. News
  XII. Tag Sets
  XIII. Skins
  XIV. Footer
  XV. Widgets
  XVI. Indices
  XVII. Tags Index
  XVIII. Searches
  XIX. Docs
  XX. Icons
*/

/* I. ANIMATION KEYFRAMES */

@keyframes blinkie {
  0% {
    opacity: 1;
  }


  49% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

@keyframes flippy {
  0% {
    transform: rotateY(0);
  }

  100% {
    transform: rotateY(1turn);
  }
}

@keyframes spinny {
  0% {
    transform: rotateX(0);
  }

  100% {
    transform: rotateX(1turn);
  }
}

@keyframes reversy {
  0% {
    transform: rotateY(0);
  }

  49.9999% {
    transform: rotateY(0);
  }

  50% {
    transform: rotateY(.5turn);
  }

  100% { 
    transform: rotateY(1turn);
  }
}

@keyframes jump {
  from,
  20%,
  53%,
  80%,
  to {
      animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
      transform: translate3d(0, 0, 0);
  }

  40%,
  43% {
      animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
      transform: translate3d(0, -15px, 0);
  }

  70% {
      animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
      transform: translate3d(0, -5px, 0);
  }

  90% {
      transform: translate3d(0, -4px, 0);
  }
}

/* II. BASE STYLES */

:root {
  --cfaa-gradient: linear-gradient(to right, #ef5350, #f48fb1, #7e57c2, #2196f3, #26c6da, #43a047, #eeff41, #f9a825, #ff5722);
  --sunset-gradient: linear-gradient(90deg,rgba(255, 140, 0, 1) 0%, rgba(197, 185, 92, 1) 25%, rgba(199, 87, 171, 1) 50%, rgba(0, 0, 105, 1) 100%);
  --hrbg: url(https://smallbirdpics.b-cdn.net/rentlowering/barnacles.gif);
}

* {
  image-rendering: pixelated;
  box-sizing: border-box;
}

body {
  font-family: 'Comic Sans MS', 'Comic Sans', sans-serif;
  font-size: 16px;
  background-image: url(https://smallbirdpics.b-cdn.net/rentlowering/hearts%203.gif);
  margin: 0;
  padding: 20px;
}

a {
  color: mediumvioletred;
  text-decoration: underline dotted;
}

hr {
  width: 240px;
  height: 26px;
  background-image: var(--hrbg);
  border: none;
}

h1 {
  font-family: 'Mystery Quest', sans-serif;
  font-size: 4rem;
}

h1 sup {
  animation: blinkie 1s forwards infinite;
}

h1 a {
  text-decoration: none;
  color: mediumvioletred;
}

h1 a sup {
  color: deeppink;
}

h2, h3 {
  font-weight: normal;
  font-family: 'Spicy Rice', sans-serif;
  letter-spacing: 1px;
}

h2 {
  text-align: center;
  font-size: 2rem;
  color: deeppink;
}

h2 .help.symbol.question {
  display: inline-flex;
  vertical-align: middle;
}

h3 {
  color: deeppink;
}

kbd, pre {
  background-color: rgba(255, 255, 255, .5);
  border: 1px deeppink solid;
  padding: 1px;
}

.logo {
  animation: flippy 2s infinite forwards ease-in-out;
  backface-visibility: visible;
  vertical-align: middle;
  margin-left: 12px;
}

#header {
  text-align: center;
}

#skiplinks {
  list-style: none;
  margin: 0;
  padding: 0;
}

.landmark, #skiplinks {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  text-indent: -999px;
}

.tip {
  display: block;
  font-size: .8rem;
  margin: .5rem 0;
}

.icon a {
  display: inline-block;
  position: relative;
}

.icon a:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  background-image: url(https://smallbirdpics.b-cdn.net/rentlowering/02d1f250748028e83d8e5f3ea636f581.gif);
  background-size: 100px 100px;
  mix-blend-mode: overlay;
}

.icon a:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  box-shadow: inset 0 0 20px hotpink, inset 0 0 10px deeppink, inset 0 0 5px pink;
}

.icon a img {
  display: block;
}

span.symbol.question {
  background-color: mediumvioletred;
  width: 20px;
  height: 20px;
  display: inline-block;
  border-radius: 100%;
  text-align: center;
  color: white;
  font-size: .9rem;
  text-decoration: none;
}

.group {
  list-style: none;
  margin: 0;
  padding: 0;
}

.group .heading {
  font-size: 1.2rem;
  margin: 0;
}

.group .heading a {
  color: inherit;
  text-decoration: none;
}

.group .datetime {
  font-size: .8rem;
  margin: 0;
}

.required-tags {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 25px);
  grid-template-rows: auto repeat(2, 25px) 1fr;
  grid-template-areas: "medium medium"
    "rating warnings"
    "pairing complete";
  gap: 3px;
}

.required-tags li {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  text-indent: -999px;
  border: 1px mediumvioletred solid;
}

.required-tags li:nth-child(1) {
  grid-area: rating;
}

.required-tags li:nth-child(2) {
  grid-area: warnings;
}

.required-tags li:nth-child(3) {
  grid-area: pairing;
}

.required-tags li:nth-child(4) {
  grid-area: medium;
  padding: 2px;
  background-color: mediumvioletred;
  color: white;
  font-size: .6rem;
  aspect-ratio: auto;
  text-indent: 0;
  text-align: center;
  text-transform: lowercase;
}

.required-tags li:nth-child(4) a {
  color: white;
  text-decoration: none;
}

.required-tags li:nth-child(5) {
  grid-area: complete;
}

.required-tags span {
  width: 100%;
  height: 100%;
  display: block;
}

.blurb {
  display: grid;
  grid-template-areas: "header header"
    "tags tags"
    "summary summary"
    "series series"
    "bookmark bookmark"
    "actions stats"
    "divider divider";
  gap: 10px;
  position: relative;
  grid-template-columns: auto 1fr;
}

@media only screen and (max-width: 768px) {
  .blurb {
    grid-template-areas: "header"
      "tags"
      "summary"
      "series"
      "bookmark"
      "actions"
      "stats"
      "divider";
  }

  .blurb .actions {
    justify-content: center;
  }

  .blurb dl.stats {
    justify-content: center;
  }
}

.blurb:after {
  content: "";
  width: 240px;
  height: 26px;
  background-image: var(--hrbg);
  margin: 2rem auto;
  grid-area: divider;
}

.blurb:last-of-type:after {
  display: none;
}

.blurb .header {
  display: grid;
  grid-template-areas: "icons title"
    "icons fandom"
    "icons date";
  grid-template-columns: auto 1fr;
  gap: 0 10px;
  grid-area: header;
}

.blurb .header h4 {
  grid-area: title;
  font-family: 'Spicy Rice', sans-serif;
  font-weight: normal;
}

.blurb .header h5 {
  grid-area: fandom;
  font-size: 1rem;
}

.blurb .tags {
  grid-area: tags;
}

.blurb .summary {
  margin: 0;
  grid-area: summary;
}

.blurb .series {
  grid-area: series;
  list-style: none;
  margin: 0;
  padding: 0;
}

.blurb .user.module {
  grid-area: bookmark;
  border: 1px deeppink dotted;
  padding: 10px;
}

.blurb .user.module > blockquote {
  margin-left: 0;
}

.blurb .user.module blockquote blockquote {
  border-left: 3px deeppink solid;
  padding-left: 10px;
  margin-left: 10px;
}

#main .blurb > .actions {
  grid-area: actions;
  margin: 0;
  justify-content: flex-start;
}

.blurb .stats {
  grid-area: stats;
  justify-content: right;
  flex-wrap: wrap;
}

.blurb .required-tags {
  grid-area: icons;
}

.work.blurb .summary {
  grid-area:summary;
}

#main .work.blurb .actions {
  grid-area: actions;
  justify-content: flex-start;
  flex-wrap: nowrap;
}

.tagset.blurb .header {
  grid-template-areas: "icon title date"
    "icon owners owners";
  gap: 5px 10px;
  border-bottom: 1px deeppink dotted;
  padding-bottom: 5px;
}

.tagset.blurb .header:has(.mods:nth-of-type(2)) {
  grid-template-areas: "icon title date"
    "icon owners owners"
    "icon mods mods";
}

.tagset.blurb .header .icon {
  grid-area: icon;
  aspect-ratio: 1 / 1;
  width: 50px;
  background-color: deeppink;
}

.tagset.blurb .header .icon:empty {
  display: flex;
  justify-content: center;
  align-items: center;
}

.tagset.blurb .header .icon:empty:before {
  content: "🏷️";
}

.tagset.blurb .header h4.heading {
  grid-area: title;
}

.tagset.blurb .header .datetime {
  margin: 0;
  grid-area: date;
}

.tagset.blurb .header .mods {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}

.tagset.blurb .header .mods li:after {
  content: ", ";
}

.tagset.blurb .header .mods li:last-of-type:after {
  display: none;
}

.tagset.blurb .header .mods:before {
  font-weight: bold;
  margin-right: 3px;
}

.tagset.blurb .header .mods:nth-of-type(1) {
  grid-area: owners;
}

.tagset.blurb .header .mods:nth-of-type(1):before {
  content: "Owners: ";
}

.tagset.blurb .header .mods:nth-of-type(2) {
  grid-area: mods;
}

.tagset.blurb .header .mods:nth-of-type(2):before {
  content: "Mods: ";
}

.tagset.blurb .summary p {
  margin-top: 0;
}

.tagset.blurb .summary p:last-of-type {
  margin-bottom: 0;
}

.series.blurb .actions {
  margin: 0;
  grid-area: actions;
}

.series.blurb .actions a {
  width: 88px;
  height: 31px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: .6rem;
  line-height: .6rem;
  color: mediumvioletred;
  background-color: white;
  border: 3px mediumvioletred outset;
  font-weight: bold;
  text-decoration: none;
  gap: 5px;
}

.series.blurb .actions a:before,
.series.blurb .actions a:after {
  content: "♥︎";
  font-size: .8rem;
}

.bookmark {
  display: grid;
  gap: 10px;
}

.bookmark .user.blurb {
  grid-template-areas:
      "header"
      "summary";
  grid-template-columns: auto;
  border: 1px deeppink dotted;
  padding: 10px;
}

.bookmark .user .header {
  display: grid;
  grid-template-areas: "status heading"
    "status datetime";
  position: relative;
}

.bookmark .user .header .byline {
  grid-area: heading;
}

.bookmark .user .header .datetime {
  grid-area: datetime;
}

.bookmark .user .header .status {
  grid-area: status;
  margin: 0;
}

.bookmark .user .summary blockquote {
  border-left: 3px mediumvioletred solid;
  padding-left: 20px;
  margin: .5rem 0 .5rem 20px;
}

.bookmark .user .summary p {
  margin-top: 0;
}

.bookmark .user .summary p:last-child {
  margin-bottom: 0;
}

.bookmark .blurb > .status {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  display: flex;
}

.bookmark .blurb > .status .count {
  text-align: center;
  font-size: .8rem;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
}

.bookmark .blurb > .status .count a {
  text-decoration: none;
}

.collection.blurb {
  grid-template-areas: "header header"
    "summary summary"
    "type type"
    "actions stats"
    "divider divider";
  gap: 10px;
}

.collection.blurb .header {
  grid-area: header;
  display: grid;
  grid-template-areas: "icon title"
    "icon datetime";
  gap: 0 10px;
  grid-template-rows: auto 1fr;
  grid-template-columns: auto 1fr;
}

.collection.blurb .header .icon {
  grid-area: icon;
}

.collection.blurb .header h4.heading {
  grid-area: title;
}

.collection.blurb .header .datetime {
  grid-area: datetime;
}

.collection.blurb .summary {
  grid-area: summary
}

.collection.blurb .type {
  grid-area: type;
  margin: 0;
  font-size: .8rem;
}

.collection.blurb .actions {
  grid-area: actions;
}

.collection.blurb .stats {
  grid-area: stats;
  display: flex;
  justify-content: flex-end;
}

.listbox .index.group {
  list-style: none;
  margin: 0;
  padding: 0;
}

.listbox .index.group > li {
  margin-bottom: 1rem;
}

.listbox > ul.actions {
  width: 100%;
}

.listbox > ul.actions li {
  width: 100%;
}

.listbox > ul.actions a {
  font-size: 1.2rem;
  text-align: center;
  width: calc(100% + 40px);
  margin: 0 -20px -20px;
  height: auto;
  line-height: 1;
  padding: .5rem 0;
  background-color: deeppink;
  color: white;
  border: none;
}

.listbox > ul.actions a:before,
.listbox > ul.actions a:after {
  display: none;
}

#inner:before {
  content: "";
  width: 287px;
  height: 36px;
  background-image: url(https://smallbirdpics.b-cdn.net/rentlowering/heartbows.gif);
  background-size: contain;
  display: block;
  margin: 2rem auto;
}

#main ul.actions {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
  justify-content: center;
  align-items: flex-start;
  gap: 10px;
  grid-area: nav;
}

#main ul.actions a,
#main ul.actions form,
#main ul.actions .current,
.create ul.actions li {
  width: 88px;
  height: 31px;
  font-size: .7rem;
  border: 3px outset;
  line-height: .6rem;
  text-align: center;
  background: white;
  text-decoration: none;
  display: flex;
  justify-content: center;
  padding: 0 2px;
  align-items: center;
  border-color: mediumvioletred;
  gap: 2px;
}

#main ul.actions .current {
  background-color: mediumvioletred;
  color: white;
}

#main ul.actions input[type="submit"],
.create ul.actions input[type="submit"] {
  font-family: inherit;
  color: mediumvioletred;
  font-size: .7rem;
  line-height: .6rem;
  background-color: transparent;
  border: none;
  padding: 0;
  margin: 0;
  white-space: pre-wrap;
}

#main ul.actions a:before,
#main ul.actions form:before,
#main ul.actions .current:before,
#main ul.actions a:after,
#main ul.actions form:after,
#main ul.actions .current:after,
.create ul.actions li:before,
.create ul.actions li:after {
  content: "♥︎";
  color: mediumvioletred;
  font-size: .8rem;
  pointer-events: none;
}

#main ul.actions .current:before,
#main ul.actions .current:after {
  color: white;
}

/* III. FORMS */

input[type="text"],
input[type="number"] {
  border: 1px mediumvioletred solid;
  padding: .25rem;
  font-family: inherit;
  width: 100%;
  max-width: 300px;
}

textarea {
  border: 1px mediumvioletred solid;
  width: 100%;
  max-width: 800px;
}

textarea.comment_form {
  height: 200px;
}

textarea.large {
  height: 1000px;
}

[role="alert"].LV_invalid {
  display: block;
  border: 4px mediumvioletred double;
  margin: 0.5rem 0;
  background-color: white;
  padding: 5px;
  font-size: .8rem;
  max-width: 800px;
}

fieldset {
  border: 2px deeppink groove;
  margin-bottom: 1rem;
}

fieldset.group {
  padding: 10px
}

fieldset legend {
  font-size: 1.25rem;
  font-weight: normal;
  letter-spacing: 1px;
  font-family: 'Spicy Rice', sans-serif;
}

fieldset h4 {
  margin: 0;
}

fieldset ul {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
}

fieldset dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
}

fieldset dl dt {
  font-weight: bold;
}

.submit input[type="submit"] {
  padding: .25rem 1rem;
  border: none;
  font-family: inherit;
  background-color: mediumvioletred;
  border: 3px mediumvioletred outset;
  color: white;
  font-size: 1rem;
  font-weight: bold;
}

/* IV. MAIN NAV */

.primary.navigation.actions {
  list-style: none;
  margin: 2rem auto;
  padding: 0;
  columns: 2 200px;
  gap: 2rem;
  max-width: 1100px;
}

.primary.navigation.actions > li {
  margin-bottom: 1rem;
}

.primary.navigation.actions .dropdown-toggle {
  color: inherit;
  text-decoration: none;
  font-family: 'Spicy Rice';
  font-size: 2rem;
  letter-spacing: 2px;
}

.primary.navigation.actions ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
  justify-content: center;
  align-items: center;
}

.primary.navigation.actions [href="/menu/links"] + ul {
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: stretch;
}

.primary.navigation.actions [href="/menu/links"] + ul li a {
  border: 2px deeppink outset;
  background-color: white;
  font-family: 'Mystery Quest';
  font-size: 1.25rem;
  padding: 1rem;
  color: deeppink;
  text-decoration: none;
  width: 200px;
  height: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: .95rem;
  box-sizing: border-box;
}

.primary.navigation.actions [href="/menu/links"] + ul li a[href*="squidgeworld"] {
  background-image: url(https://smallbirdpics.b-cdn.net/rentlowering/plaid-gold.jpg);
  border-color: sandybrown;
  color: sienna;
}

.primary.navigation.actions [href="/menu/links"] + ul li a[href*="adastra"] {
  background-image: url(https://smallbirdpics.b-cdn.net/rentlowering/purple-glitter.gif);
  border-color: white;
  color: white;
  font-size: 1.5rem
}

.primary.navigation.actions [href="/menu/links"] + ul li a[href*="cfaarchive"] {
  background-image: var(--cfaa-gradient);
  border-color: black;
  color: black;
  box-shadow: inset 0 -10px 10px rgba(0,0,0,.5);
}

.primary.navigation.actions [href="/menu/links"] + ul li a[href*="sunset"] {
  background-image: var(--sunset-gradient);
  border-color: white;
  color: pink;
  font-size: 2rem
}

/* V. HOMEPAGE */

#greeting {
  display: inline-grid;
  grid-template-areas: "icon actions";
  max-width: 880px;
  margin: 0 auto;
  gap: 10px;
}

#greeting .icon {
  grid-area: icon;
}

#greeting .user.navigation.actions {
  grid-area: actions;
  display: block;
  text-align: left;
}

#greeting .user.navigation.actions li {
  margin-top: 0;
}

.splash {
  display: grid;
  grid-template-areas: "welcome welcome"
    "navigation navigation"
    "news messages";
  gap: 3rem 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

@media only screen and (max-width: 480px) {
  .splash {
    grid-template-areas: "welcome"
      "navigation"
      "news"
      "messages";
    gap: 2rem;
  }
}

.splash:before {
  content: "";
  width: 190px;
  height: 70px;
  background-image: url(https://smallbirdpics.b-cdn.net/rentlowering/welcome7.gif);
  margin: 1rem auto 2rem;
  display: block;
  grid-area: welcome
}

.splash .browse {
  text-align: center;
  grid-area: navigation;
}

.splash .browse .heading {
  animation: jump 1s infinite;
  font-size: 1.5rem;
  font-weight: normal;
  letter-spacing: 2px;
  margin-bottom: 0;
}

.splash .browse ul {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  max-width: 1100px;
}

.news.module {
  grid-area: news;
  max-width: 50rem;
}

.messages.module {
  grid-area: messages;
}

.news h3,
.messages.module h3 {
  font-size: 1.5rem;
  margin-bottom: 0;
  display: flex;
  justify-content: space-between;
}

.news.module h3 .link:after,
.messages.module h3 .link:after {
  content: " ➤";
  display: inline-block;
  animation: 1s spinny infinite;
  color: mediumvioletred;
  margin-left: 10px;
}

.news.module {
  grid-area: news;
}

.messages.module {
  grid-area: messages;
}

.news .meta {
  margin: 0;
  font-size: .8rem;
}

.news.group {
  background-color: white;
  padding: 20px;
}

.news.group li > blockquote {
  margin-left: 0;
}

.news.group .jump a {
  font-weight: bold;
}

.news.group .group li:after,
.news[role="article"]:after {
  content: "";
  display: block;
  width: 240px;
  height: 26px;
  margin: 2rem auto 0;
  background-image: var(--hrbg);
}

.news.group .group li:last-child:after,
.news[role="article"]:last-of-type:after {
  display: none;
}

/* VI. USER */

.user.navigation.actions {
  list-style: none;
  display: flex;
  margin: 1em 0;
  padding: 0;
  justify-content: center;
}

.user.navigation.actions > li {
  margin: 1em 0;
}

.user.navigation.actions .dropdown-toggle {
  font-weight: bold;
}

.user.navigation.actions ul {
  display: inline-flex;
  justify-content: center;
  flex-wrap: wrap;
  list-style: none;
  margin: 0 20px 0 0;
  padding: 0;
  gap: 10px;
}

.user.navigation.actions ul:before {
  content: " ✦ ";
  color: deeppink;
  display: inline-block;
  animation: reversy 1s forwards infinite;
}

.user.profile > .navigation.actions {
  grid-area: nav;
  justify-content: center;
}

.user.home {
  display: grid;
  grid-template-areas:
      "header header"
      "fandoms list"
      "fandoms series";
  max-width: 1100px;
  margin: 0 auto;
  gap: 2rem;
}

.user.profile {
  text-align: center;
  display: grid;
  margin: 2rem auto;
  grid-template-areas: "header header"
    "heading heading"
    "details bio"
    "nav nav";
  grid-template-columns: 300px 1fr;
  gap: 10px;
  max-width: 1100px;
}

@media only screen and (max-width: 768px) {
  .user.profile {
    grid-template-areas: "header"
      "heading"
      "details"
      "bio"
      "nav";
    grid-template-columns: auto;
  }
}

.user .fandom.listbox {
  grid-area: fandoms;
}

.user .fandom.listbox ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

#user-works,
#user-series {
  background-color: white;
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

#user-works {
  grid-area: list;
}

#user-series {
  grid-area: series;
}

#user-works > ul.actions {
  width: calc(100% + 40px);
}

#user-works > ul.actions a {
  display: block;
  padding: 10px;
  background-color: deeppink;
  color: white;
  text-align: center;
  border: none;
  width: 100%;
  height: auto;
  font-size: 1.2rem;
  font-weight: bold;
  line-height: 1;
}

.user .primary.header {
  display: inline-grid;
  grid-template-areas: "icon headline"
    "icon nav";
  grid-template-columns: 100px 1fr;
  grid-template-rows: auto 1fr;
  gap: 10px;
  margin: 2rem auto 0;
  text-align: left;
  grid-area: header;
}

.user .primary.header .icon {
  grid-area: icon;
}

.user .primary.header h2 {
  margin-bottom: 0;
  font-family: 'Spicy Rice', sans-serif;
  font-size: 2rem;
  font-weight: normal;
  letter-spacing: 1px;
}

.user h3.heading {
  font-size: 1.5rem;
  text-shadow: 1px 1px 0 white;
  grid-area: heading;
}

.user .wrapper {
  display: flex;
  text-align: left;
  margin: 0 auto;
  grid-area: details;
}

.user .wrapper dl {
  margin: 0;
}

.user .bio {
  text-align: left;
  padding: 20px;
  background-color: white;
}

.user .bio h3 {
  margin: 0;
}

.user .bio > blockquote.userstuff {
  margin: 0;
}

/* VII. COMMENTS */

li.comment.group {
  display: grid;
  grid-template-areas: "heading heading"
    "icon userstuff"
    "actions actions";
  margin-bottom: 2rem;
  padding-bottom: 2rem;
  gap: 0.25rem 1rem;
  position: relative;
  grid-template-columns: 100px 1fr;
}

li.comment.group:after {
  content: "";
  width: 100%;
  height: 0;
  border-top: 2px deeppink groove;
  background-color: transparent;
  position: absolute;
  bottom: 0;
  left: 0;
}

li.comment.group:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
}

li.comment.group:last-child:after {
  display: none;
}

li.comment.group .heading {
  grid-area: heading;
}

li.comment.group .icon {
  grid-area: icon;
}

li.comment.group .userstuff {
  grid-area: userstuff;
  margin: 0;
}

li.comment.group .userstuff p {
  margin-top: 0;
}

li.comment.group ul.actions {
  grid-area: actions;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  justify-content: flex-end;
  font-size: .8rem;
  gap: 10px;
}

li.unread.comment.group .actions input[type="submit"] {
  border: none;
  background-color: transparent;
  padding: 0;
  margin: 0;
  font-family: inherit;
  color: inherit;
  color: mediumvioletred;
  text-decoration: underline dotted;
  cursor: pointer;
}

#feedback {
  max-width: 1100px;
  margin: 2rem auto;
}

#add_comment_placeholder {
  background-color: white;
  padding: 20px;
}

#comments_placeholder {
  padding: 20px;
  background-color: white;
  margin: 1em 0;
}

#comments_placeholder ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

#comments_placeholder ol ol {
  margin-left: 20px;
}

#comments_placeholder ol.thread li .actions {
  grid-area: actions;
}

/* VIII. DASHBOARD */

#dashboard {
  text-align: center;
}

#dashboard ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}

#dashboard ul .current {
  font-weight: bold;
}

#dashboard ul .current:before {
  content: "✦ ";
  color: deeppink;
}

#dashboard ul .current:after {
  content: " ✦";
  color: deeppink;
}

/* IX. WORKS */

.works-new {
  max-width: 1100px;
  margin: 2rem auto;
}

.work.actions,
.series.actions {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.work.actions input[type="submit"],
.series.actions input[type="submit"] {
  border: none;
  background-color: transparent;
  font-family: inherit;
  color: mediumvioletred;
  font-size: inherit;
  text-decoration: underline dotted;
  padding: 0;
  cursor: pointer;
}

.works-show .wrapper,
.series-show .wrapper {
  max-width: 1100px;
  margin: 2rem auto;
  text-shadow: 1px 1px 1px rgba(255,255,255,1);
}

.works-show h2.heading,
.series-show h2.heading {
  margin-bottom: 0;
  color: deeppink;
  font-size: 3rem;
  font-weight: normal;
}

.works-show h3.byline {
  text-align: center;
  font-family: 'Comic Sans MS', sans-serif;
  color: black;
  margin: 0;
}

.works-show h3.byline:before { 
  content: "by ";
}

.works-show .notes,
.works-show .summary {
  max-width: 800px;
  margin: 2rem auto;
  text-shadow: 1px 1px 1px rgba(255,255,255,1);
}

.works-show .notes h3,
.works-show .summary h3 {
  margin-bottom: 0;
}

.works-show .notes blockquote,
.works-show .summary blockquote,
.blurb .summary blockquote {
  margin-top: 0;
  border-left: 3px mediumvioletred solid;
  margin-left: 20px;
  padding-left: 20px;
}

.works-show .notes blockquote p:first-child,
.works-show .summary blockquote p:first-child {
  margin-top: 0;
}

#chapters {
  background-image: url(https://smallbirdpics.b-cdn.net/rentlowering/giphy.gif);
  padding: 20px;
  max-width: 1100px;
  margin: 1rem auto;
}

#chapters .userstuff {
  padding: 20px;
  background-color: white;
}

dl.meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
}

dl.meta dt {
  font-weight: bold;
}

dl.stats {
  display: flex;
}

dl.stats dt {
  font-weight: bold;
}

dl.stats dd {
  margin-left: 5px;
  margin-right: 1rem;
}

dl.stats dd:last-of-type {
  margin-right: 0;
}

.tags {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tags li {
  display: inline;
}

.tags li:after {
  content: ", ";
}

.tags li:last-child:after {
  content: "";
}

/* X. PREFS & BIG FORMS */

.edit_preference,
form.skin,
form.import,
form.post,
#new_tag_search,
#new_bookmark_search,
#new_people_search,
#new_work_search {
  background-color: white;
  padding: 20px;
  max-width: 1100px;
  margin: 2rem auto;
}

dt.restricted,
dt.restrict,
dt.moderated {
  text-align: right;
}

/* XI. NEWS */

#inner:has(.admin_posts-index) {
  display: grid;
  grid-template-areas: "divider divider"
    "dashboard news";
  grid-template-columns: 300px 1fr;
  gap: 2rem;
  max-width: 1100px;
  margin: 2rem auto;
}

@media only screen and (max-width: 768px) {
  #inner:has(.admin_posts-index) {
    grid-template-areas: "divider"
      "dashboard"
      "news";
    grid-template-columns: auto;
    gap: 1rem;
  }
}

#inner:has(.admin_posts-index):before {
  grid-area: divider;
  padding-bottom: 5rem;
  background-repeat: no-repeat;
}

#inner:has(.admin_posts-index) #dashboard {
  grid-area: dashboard;
  text-align: left;
}

#inner:has(.admin_posts-index) #dashboard ul {
  display: block;
}

#inner:has(.admin_posts-index) #dashboard ul li {
  margin-bottom: .5rem;
}

#inner:has(.admin_posts-index) #main {
  grid-area: news;
}

#inner:has(.admin_posts-index) #main h2 {
  margin-top: -3em;
}

#inner:has(.admin_posts-index) #main h2 a {
  color: inherit;
  text-decoration: none;
}

#inner:has(.admin_posts-index) #main .navigation.actions {
  align-items: center;
}

#inner:has(.admin_posts-index) #main .navigation.actions form[action="/admin_posts"] {
  width: auto;
  height: auto;
  border: none;
  padding: 0;
  background-color: transparent;
}

#inner:has(.admin_posts-index) #main .navigation.actions form[action="/admin_posts"] label {
  font-weight: bold;
}

#inner:has(.admin_posts-index) #main .navigation.actions form[action="/admin_posts"]:before,
#inner:has(.admin_posts-index) #main .navigation.actions form[action="/admin_posts"]:after {
  display: none;
}

#inner:has(.admin_posts-index) #main .navigation.actions form[action="/admin_posts"] #tag {
  margin-right: 10px;
}

#inner:has(.admin_posts-index) #main .navigation.actions form[action="/admin_posts"] input[type="submit"] {
  background-color: mediumvioletred;
  border: 3px mediumvioletred outset;
  padding: 3px 5px;
  color: white;
}

#inner:has(.admin_posts-index) #main .news.module {
  max-width: none;
}

#inner:has(.admin_posts-index) #main hr.clear {
  display: none;
}

/* XII. TAG SETS */

.owned_tag_sets-show {
  max-width: 1100px;
  margin: 2rem auto;
}

.owned_tag_sets-show .index.group {
  background-color: white;
  padding: 20px;
}

.owned_tag_sets-show dl.meta .mods {
  list-style: none;
  margin: 0;
  padding: 0;
}

.owned_tag_sets-show dl.meta .mods li {
  display: inline;
}

.owned_tag_sets-show dl.meta .mods li:after {
  content: ", ";
}

.owned_tag_sets-show dl.meta .mods li:last-of-type:after {
  display: none;
}

.owned_tag_sets-show dl.meta dd p {
  margin-top: 0;
}

#list_for_unassociated_char_and_rel {
  padding: 20px;
}

/* XIII. SKINS */

.skins.home,
.skins-index {
  max-width: 1100px;
  margin: 2rem auto;
}

.skins.home .css.module {
  padding: 20px;
  background-color: white;
  margin-bottom: 2rem;
}

.skins.home .css.module h3 {
  margin-top: 0;
}

.skins.home .css.module blockquote {
  margin: 1rem 0 0;
}

.skins.home .css.module pre {
  white-space: pre-wrap;
  padding: 5px;
  background-color: #ffc0cb14;
}

.skin.index.group {
  background-color: white;
  padding: 20px;
  display: grid;
  gap: 10px;
  margin: 2rem auto;
}

.actions .edit_preference {
  margin: 0;
}

.skins.blurb {
  display: block;
  border: 1px deeppink dotted;
  padding: 10px;
}

.skins.blurb .header {
  display: grid;
  grid-template-areas: "image name"
    "image datetime";
  gap: 0 10px;
}

.skins.blurb .header:not(:has(.icon)) {
  grid-template-areas: "name"
    "datetime";
}

.skins.blurb .header .icon {
  grid-area: image;
}

.skins.blurb .header .heading {
  grid-area: name;
}

.skins.blurb .header .datetime {
  margin: 0;
  grid-area: datetime;
  font-size: .8rem;
}

.skins.blurb .summary {
  margin: 1rem 0;
}

#skin_css {
  height: 800px;
}

/* XIV. FOOTER */

#footer {
  margin-top: 2rem;
}

#footer .navigation.actions {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 2px mediumvioletred groove;
  padding: 0;
  margin: 0;
}

#footer .navigation.actions > li {
  border-right: 2px mediumvioletred groove;
  padding: 20px;
}

#footer .navigation.actions > li:nth-child(n+4) {
  border-right: none;
}

#footer .navigation.actions > li h4 {
  margin: 0 0 .5rem;
  font-family: 'Spicy Rice', sans-serif;
  font-size: 1.5rem;
  font-weight: normal;
  color: black;
  text-align: center;
  letter-spacing: 1px;
}

#footer .menu {
  list-style-image: url(https://smallbirdpics.b-cdn.net/rentlowering/bullet%2013.gif);
  padding: 0 0 0 15px;
}

#footer .module.group {
  padding: 10px;
  border-right: 2px mediumvioletred groove;
}

@media only screen and (max-width: 768px) {
  #footer .navigation.actions {
    grid-template-columns: repeat(2, 1fr);
  }

  #footer .navigation.actions > li {
    border-bottom: 2px mediumvioletred groove;
  }

  #footer .navigation.actions > li:nth-last-child(2),
  #footer .navigation.actions > li:last-child {
    border-bottom: none;
  }

  #footer .navigation.actions > li:nth-child(2n+2) {
    border-right: none;
  }
}

@media only screen and (max-width: 480px) {
  #footer .navigation.actions {
    grid-template-columns: auto;
  }

  #footer .navigation.actions > li:nth-child(2n+2),
  #footer .navigation.actions > li:nth-child(4n+4) {
    border-right: none;
  }

  #footer .navigation.actions > li {
    border-right: none;
    border-bottom: 2px mediumvioletred groove;
  }

  #footer .navigation.actions > li:nth-last-child(2) {
    border-bottom: 2px mediumvioletred groove;
  }

  #footer .navigation.actions > li:last-child {
    border-bottom: none;
  }
}

/* XV. WIDGETS */

#modal-bg, #modal-wrap {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

#modal-bg {
  z-index: 9;
  background-color: rgba(255,255,255,.5);
}

#modal-wrap {
  z-index: 10;
  top: 50% !important;
  left: 50%;
  position: fixed !important;
  transform: translate(-50%, -50%);
  max-height: calc(100vh - 40px);
  max-width: 600px;
}

#modal {
  display: inline-grid !important;
  grid-template-rows: 1fr 42px;
  max-height: 100%;
  background-image: url(https://smallbirdpics.b-cdn.net/rentlowering/giphy.gif);
  padding: 10px;
}

#modal h4 {
  margin-top: 0;
  text-align: center;
  font-family: 'Spicy Rice', sans-serif;
  font-weight: normal;
  font-size: 1.5rem;
  color: deeppink;
}

#modal .content {
  padding: 20px;
  position: relative;
  overflow: auto;
  background-color: white;
}

#modal .footer {
  background-color: deeppink;
  padding: 10px;
  width: 100%;
  color: white;
  display: flex;
  justify-content: space-between;
}

#modal .footer .title {
  font-weight: bold;
}

#modal .footer a {
  color: white;
}

dl#help dt {
  font-weight: bold;
}

dl#help dd {
  margin-bottom: 1rem;
}

[aria-haspopup="true"] {
  position: relative;
}

.expandable {
  position: absolute;
  top: 100%;
  left: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

.expander_parent {
  position: relative;
  display: flex;
  gap: 10px;
  align-items: center;
}

.expander_parent [role="button"] {
  display: inline-flex;
  padding: 3px 5px;
  line-height: 1em;
  font-size: .8rem;
  letter-spacing: 0;
  font-family: 'Comic Sans MS', sans-serif;
  font-weight: bold;
  width: 88px;
  height: 31px;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 5px;
  border: 3px mediumvioletred outset;
}

.expander_parent [role="button"]:before,
.expander_parent [role="button"]:after {
  content: "♥︎";
  font-size: .8rem;
}

.expander_parent .expand [role="button"],
.expander_parent .contract [role="button"],
.expander_parent .shuffle [role="button"] {
  margin: 0;
  padding: 0;
  border: 0;
  width: auto;
  height: auto;
  font-size: 1.2rem;
  font-weight: bold;
}

.expander_parent .expand [role="button"]:before,
.expander_parent .expand [role="button"]:after,
.expander_parent .contract [role="button"]:before,
.expander_parent .contract [role="button"]:after,
.expander_parent .shuffle [role="button"]:before,
.expander_parent .shuffle [role="button"]:after {
  display: none;
}

.hidden {
  display: none;
}

.flash.notice {
  border: 4px double mediumvioletred;
  background-color: white;
  padding: 10px;
  font-weight: bold;
  max-width: 1100px;
  margin: 2rem auto 0;
}

li.input {
  position: relative;
}

.added.tag {
  font-size: .8rem;
}

.autocomplete.dropdown p {
  margin: 0;
}

.autocomplete.dropdown {
  font-size: .8rem;
  background-color: white;
  padding: 3px 5px;
  border: 1px mediumvioletred dotted;
  width: 100%;
}

.pagination {
  list-style: none;
  margin: 1rem 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

/* XVI. INDICES */

.tags-index,
.works-index,
.readings-index,
.subscriptions-index,
.bookmarks-index,
.challenge_assignments-index,
.owned_tag_sets-index,
.challenge_claims-index,
.series-index,
.fandoms-index,
.media-index,
.works-search,
.collections-index {
  max-width: 1100px;
  margin: 2rem auto;
}

.tags-index h2,
.works-index h2,
.readings-index h2,
.subscriptions-index h2,
.bookmarks-index h2,
.challenge_assignments-index h2,
.owned_tag_sets-index h2,
.challenge_claims-index h2,
.series-index h2,
.fandoms-index h2,
.media-index h2,
.works-search h2,
.collections-index h2 {
  margin-top: 0;
}

.tags-index .index.group,
.works-index .index.group,
.readings-index .index.group,
.subscriptions-index .index.group,
.bookmarks-index .index.group,
.challenge_assignments-index .index.group,
.owned_tag_sets-index .index.group,
.challenge_claims-index .index.group,
.series-index .index.group,
.fandoms-index .alphabet.index.group,
.works-search .index.group,
.collections-index .index.group {
  background-color: white;
  padding: 20px;
  max-width: 1100px;
  margin: 2rem auto;
}

.media-index .media.fandom.index.group {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}

.media-index .listbox {
  padding: 20px;
  background-color: white;
  border: 2px deeppink groove;
}

.media-index .listbox .actions {
  margin: 0;
  display: flex;
  justify-content: flex-end;
}

.media-index .listbox .actions a {
  width: 88px;
  height: 31px;
  border: 3px mediumvioletred outset;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: .6rem;
  line-height: .6rem;
  font-weight: bold;
  text-decoration: none;
  text-align: center;
  padding: 3px 5px
}

.media-index .listbox .actions a:before,
.media-index .listbox .actions a:after {
  content: "♥︎";
  font-size: .8rem;
}

.fandoms-index .alphabet.index.group .tags {
  padding: 20px;
}

.filtered {
  display: grid;
  grid-template-areas:
    "flash flash"
    "heading heading"
    "subheading subheading"
    "navigation navigation"
    "pagination blank"
    "works filters"
    "pagination2 filters"
    "blank2 filters";
  grid-template-columns: 1fr 300px;
  gap: 1rem 2rem;
}

@media only screen and (max-width: 960px) {
  .filtered {
    grid-template-areas:
      "flash"
      "heading"
      "subheading"
      "navigation"
      "pagination"
      "filters"
      "works";
    grid-template-columns: auto;
  }
}

.filtered .flash {
  grid-area: flash;
}

.filtered h2.heading {
  grid-area: heading;
  margin: 0;
}

.filtered h3.heading {
  grid-area: subheading;
  text-align: center;
  margin: 0;
}

#main.filtered .navigation.actions {
  grid-area: navigation;
}

.filtered ol.pagination:nth-of-type(1) {
  grid-area: pagination;
}

.filtered ol.pagination:nth-of-type(2) {
  grid-area: pagination2;
}

.filtered .work.index.group,
.filtered .collection.index.group {
  grid-area: works;
  margin: 0;
}

.filtered .filters {
  grid-area: filters;
}

.filtered .filters dl {
  display: block;
}

.filtered .filters > fieldset > dl > dt,
.filtered .filters dl dt.search,
.filtered .filters dl dt.language {
  margin-top: 1rem;
}

.filtered .filters dl dd.language {
  margin-bottom: 1rem;
}

.filtered .filters dl dt.heading {
  display: flex;
  gap: 5px;
}

.filtered .filters dl dd {
  margin-left: 0;
}

.filtered .filters dl dd.submit {
  text-align: center;
}

.filtered .filters dl dt.filter-toggle button {
  background-color: transparent;
  border: none;
  font-family: inherit;
  font-size: inherit;
  color: mediumvioletred;
  cursor: pointer;
  padding: 0;
  display: flex;
  gap: 5px;
  align-items: center;
}

.filtered .filters dl dt.filter-toggle button:before {
  content: "➤";
  transform: rotate(0deg);
}

.filtered .filters dl dt.filter-toggle.expanded button:before {
  content: "➤";
  transform: rotate(90deg);
}

.filtered .filters dl dt.filter-toggle.expanded + dd.expandable {
  display: block;
  position: static;
}

.filtered .filters dl dt.filter-toggle.expanded + dd.expandable ul {
  display: block;
}

.filtered .filters dl dt.filter-toggle.expanded + dd.expandable ul li {
  display: block;
  text-indent: -1.6rem;
  margin-left: 1.6rem;
}

.filtered .filters dl dt.filter-toggle.expanded + dd.expandable ul li:after {
  display: none;
}

#main ul.actions li.search form {
  border: none;
  display: flex;
  background-color: transparent;
  padding: 0;
  width: auto;
  height: auto;
}

#main ul.actions li.search form:before,
#main ul.actions li.search form:after {
  display: none;
}

#main ul.actions li.search form fieldset {
  border: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 10px;
}

#main ul.actions li.search form input[type="submit"] {
  font-size: 1em;
  background-color: mediumvioletred;
  border: 3px mediumvioletred outset;
  color: white;
  font-weight: bold;
  padding: 5px 10px;
  line-height: 1;
}

.index.group:not(:has(li)) {
  display: none;
}

/* XVII. TAGS INDEX */

.cloud1 {
  font-size: 1rem;
}

.cloud2 {
  font-size: 1.2rem;
}

.cloud3 {
  font-size: 1.4rem;
}

.cloud4 {
  font-size: 1.6rem;
}

.cloud5 {
  font-size: 1.8rem;
}

.cloud6 {
  font-size: 2rem;
}

.cloud7 {
  font-size: 2.2rem;
}

.cloud8 {
  font-size: 2.4rem;
}

/* XVIII. SEARCHES */

.bookmarks-search,
.people-search {
  max-width: 1100px;
  margin: 2rem auto;
}

.bookmarks-search ol.bookmark {
  background-color: white;
  padding: 20px;
}

.tags-search h3.heading {
  text-align: center;
  margin-top: 2rem;
  margin-bottom: 1rem;
}

.tags-search .tag.index.group,
.people-search .pseud.index.group {
  padding: 20px;
  background-color: white;
  max-width: 1100px;
  margin: 0 auto 2rem;
  columns: 2 200px;
  gap: 20px;
}

.user.pseud.blurb {
  display: block;
  border: 1px deeppink dotted;
  padding: 5px;
  margin-bottom: 10px;
}

.user.pseud.blurb .header {
  display: grid;
  grid-template-areas: "icon username"
    "icon count";
  grid-template-rows: auto 1fr;
  gap: 10px;
}

.user.pseud.blurb h4.heading {
  grid-area: username;
}

.user.pseud.blurb h5.heading {
  font-family: 'Comic Sans MS', sans-serif;
  font-weight: normal;
  grid-area: count;
}

.user.pseud.blurb .header .icon {
  grid-area: icon;
}

/* XIX. DOCS PAGES */

.diversity,
.support,
.tos,
.site_map,
.dmca {
  background-color: white;
  padding: 20px;
  max-width: 1100px;
  margin: 2rem auto;
}

.diversity h2,
.support h2,
.tos h2,
.site_map h2,
.dmca h2 {
  margin-top: 0;
}

/* XX. ICONS */

.required-tags .rating-general-audience {
  background: url("/images/imageset.png") -50px -25px;
}

.required-tags .rating-explicit {
  background: url("/images/imageset.png") -25px -25px;
}

.required-tags .rating-mature {
  background: url("/images/imageset.png") -75px -25px;
}

.required-tags .rating-notrated, .required-tags .category-none, .required-tags .warning-no, .status .count {
  background: url("/images/imageset.png") -150px 0px;
}

.status .count {
  width: 25px;
  display: block;
  aspect-ratio: 1 / 1;
  background-image: none;
  border: 1px mediumvioletred solid;
}

.status .count a {
  color: mediumvioletred;
}

.required-tags .rating-teen {
  background: url("/images/imageset.png") 0px -25px;
}

.required-tags .category-femslash {
  background: url("/images/imageset.png") -25px 0px;
}

.required-tags .category-gen {
  background: url("/images/imageset.png") -50px 0px;
}

.required-tags .category-slash {
  background: url("/images/imageset.png") 0px 0px;
}

.required-tags .category-het {
  background: url("/images/imageset.png") -75px 0px;
}

.required-tags .category-multi {
  background: url("/images/imageset.png") -100px -0px;
}

.required-tags .category-other {
  background: url("/images/imageset.png") -125px 0px;
}

.required-tags .complete-no {
  background: url("/images/imageset.png") -100px -25px;
}

.required-tags .complete-yes {
  background: url("/images/imageset.png") -175px -25px;
}

.required-tags .warning-yes {
  background: url("/images/imageset.png") -150px -25px;
}

.required-tags .warning-choosenotto {
  background: url("/images/imageset.png") -125px -25px;
}

.required-tags .external-work {
  background: url("/images/imageset.png") -75px -50px;
}

.status .private .text {
  background: url("/images/imageset.png") -175px -50px;
}

.status .public {
  background: url("/images/imageset.png") -125px -50px;
  aspect-ratio: 1 / 1;
  display: block;
  text-indent: -999px;
  width: 25px;
  overflow: hidden;
  position: relative;
}

.status .hidden {
  background: url("/images/imageset.png") -150px -50px;
}

.status .rec {
  background: url("/images/imageset.png") -100px -50px;
  aspect-ratio: 1 / 1;
  display: block;
  text-indent: -999px;
  width: 25px;
  overflow: hidden;
  position: relative;
}

.status .rec:before,
.status .public:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: mediumvioletred;
  mix-blend-mode: hue;
  z-index: 0;
}