@import url('https://fonts.googleapis.com/css2?family=Aladin&family=Almendra+Display&family=Almendra+SC&family=Amarante&family=Combo&family=Faculty+Glyphic&family=Glass+Antiqua&family=Macondo&family=Macondo+Swash+Caps&family=Sorts+Mill+Goudy:ital@0;1&family=Spectral:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Faculty+Glyphic&family=Fleur+De+Leah&family=Grey+Qo&family=Kings&family=Lovers+Quarrel&family=Macondo&family=Macondo+Swash+Caps&family=My+Soul&family=Niconne&family=Sorts+Mill+Goudy:ital@0;1&display=swap');

@font-face {
  font-family: 'Boecklins Universe';
  src: url('../fonts/Boecklins\ Universe.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}


:root {
  /* Images */
  --moulinrougebg: url('../img/TheMoulinRouge-Large.png');
  --paris-nuit: url('../img/Paris-Nuit.jpg');
  --damask: url('../img/Damask_Pattern_2000px.webp');
  --ratbg: url('../img/ratties_pattern.png');
  --ratbg2: url('../img/ratbg2.png');
  --paperoverlay: url('../img/paper_overlay.webp');
  --grainy: url('../img/grainy_vignette.png');
  --gardens-autumn: url('../img/gardenpaths_autumn.jpg');
  --croissantbg: url('../img/rats_et_croissant.jpg');
  --opera: url('../img/opera.jpg');
  --dancebg: url('../img/dancing_belle.jpg');
  --laveaux-panorama: url('../img/Laveaux_Panorama_Tower.webp');
  --almondblossomsbg: url('../img/AlmondBlossomBG.jpg');
  /* Colors */
  --richgreenblack: #000c0d;
  --richergreenblack: rgb(0, 8, 8);
  /* #000c0d */
  --darkgold: rgb(89, 70, 34);
  /* #594622 */
  --darkbluevelvet: rgb(22, 68, 105);
  /* #164469 */
  --medbluevelvet: rgb(21, 95, 155);
  /* #155f9b currently unused */
  --darkpatina85: rgba(3, 54, 58, 0.85);
  /* #03363a currently unused */
  --darkpatina: rgb(3, 54, 58);
  /* #03363a */
  --darkerpatina: rgb(1, 38, 38);
  /* #012626 unused */
  --darkbleu: #122743;
  /* #1c60b9 unused */
  --gilded: rgb(152, 123, 69);
  /* #987b45 */
  --gildedbright: rgb(177, 165, 110);
  /* #b1a56e */
  --gildedwhite: rgb(242, 232, 182);
  /* #f2e8b6 */
  --gildedwhite70: rgba(242, 232, 182, 0.702);
  --teal: #008080;
  --darkteal: #005757;
  --seafoam: rgb(109, 166, 150);
  /* #6da696 currently unused*/
  --seafoam69: rgba(109, 166, 150, .69);
  --seafoam42: rgba(109, 166, 150, .42);
  --softpatina: rgb(65, 127, 78);
  --softpatina69: rgba(65, 127, 78, .69);
  /* #417f4e unused */
  --crushedredvelvet: rgb(32, 13, 7);
  /* #200d07 */
  --roses: rgb(83, 28, 19);
  /* #531c13 unused */
  --roses50: rgba(83, 28, 19, .5);
  --rosesbright: rgb(117, 45, 29);
  /* #752d1d */
  --rosesdark: rgb(89, 28, 33);
  /* #591c21 unused */
  --roseslight: rgb(161, 62, 65);
  /* #a13e41 unused */
  --deepchestnut: rgb(182, 73, 75);
  /* #b6494b unused */
  --chestnut: rgb(157, 65, 42);
  /* #9d412a */
  --bleu-de-france: rgb(51, 128, 228);
  /* #3380e4 */
  --bleu-80: rgba(51, 128, 228, .8);
  --bleu-60: rgba(51, 128, 228, .6);
  --rouge-de-france: rgb(173, 32, 32);
  /* #ad2020 */
  --hotred: rgb(167, 56, 31);
  /* #a7381f */
  --darkvanilla: rgb(208, 190, 170);
  /* #d0beaa unused */
  --darkvanilla50: #d0beaa80;
  --darkvanilla70: rgba(208, 190, 170, .7);
  --greenfairy: rgb(135, 204, 135);
  /* #87cc87 unused */
  --greenfairy80: rgba(135, 204, 135, .8);
  --greenfairy60: rgba(135, 204, 135, .6);
  --flagwhite: rgb(185, 185, 185);
  --hotwhite: rgba(255, 254, 248, 0.69);
  --hotwhite-fade: rgba(255, 254, 248, .42);
  /* #b9b9b9 */
  /* Font Families */
  --amarante: "Amarante", serif;
  --aladin: "Aladin", system-ui;
  --almendra-display: "Almendra Display", serif;
  --almendra-sc: "Almendra SC", serif;
  --macondo: "Macondo", cursive;
  --macondo-swash: "Macondo Swash Caps", cursive;
  --combo: "Combo", system-ui;
  --glass: "Glass Antiqua", cursive;
  --faculty: "Faculty Glyphic", sans-serif;
  --fleur: "Fleur de Leah", cursive;
  --sorts: "Sorts Mill Goudy", serif;
  --spectral: "Spectral", serif;
  --merriserif: "Merriweather", serif;
  --rosella-deco: "rosella-deco", sans-serif;
  --rosella-engraved: "rosella-engraved", sans-serif;
  --rosella-flourish: "rosella-flourish", sans-serif;
  --rosella-hatched: "rosella-hatched", sans-serif;
  --rosella-inline: "rosella-inline", sans-serif;
  --rosella-solid: "rosella-solid", sans-serif;
  --loretta: "loretta-variable", sans-serif;
  --an-bistro: "p22-art-nouveau-bistro", sans-serif;
  --an-cafe: "p22-art-nouveau-cafe", sans-serif;
  --an-flourish: "p22-art-nouveau-extras", sans-serif;
  --ac-reg: "p22-arts-and-crafts", sans-serif;
  --ac-bold: "p22-arts-and-crafts", sans-serif;
  --ac-hunter: "p22-arts-and-crafts-hunter", sans-serif;
  --ac-tall: "p22-arts-and-crafts-tall", sans-serif;
  --boe: "Boecklins Universe", sans-serif;
  /* Gradients */
  --gradient1: linear-gradient(#010608, #270d0e, #010608);
  --gradient2: linear-gradient(180deg, var(--darkbluevelvet), var(--richgreenblack));
  /* Borders */
  --border-2px: 2px solid var(--darkpatina);
  --border-1px: 1px solid var(--darkpatina);
  --patina-vignette: radial-gradient(var(--darkpatina), rgba(0, 12, 13, 1));
  --teal-vignette: radial-gradient(rgba(21, 95, 155, 0.4), rgba(0, 12, 13, 1));
  --header-text-shadow: 1px 1px 2px var(--richgreenblack);
  --text-glow: 1px 1px 5px var(--gildedbright);
  --text-glow2: 1px 1px 3px var(--seafoam42);
  --bigboxglow: 0 0 69px var(--seafoam42);
  --group-color_noblesse: rgba(85, 107, 47, 1);
}

/* Reset-ish */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  scrollbar-width: thin;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  background-color: var(--richgreenblack);
}

::-webkit-scrollbar-track {
  scrollbar-width: thin;
  scrollbar-color: var(--darkpatina) var(--richgreenblack);
  background: var(--richgreenblack);
  border-radius: 1px;
}

::-webkit-scrollbar-thumb {
  background-color: var(--darkpatina);
  border-radius: 1px;
  border: 1px solid var(--darkgold);
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--seafoam);
}

::-webkit-scrollbar-button {
  background-color: var(--darkpatina);
  height: 10px;
  border: 1px solid var(--darkgold);
}

@supports not selector(::-webkit-scrollbar) {
  * {
    scrollbar-color: var(--darkpatina) var(--richgreenblack);
  }
}

html {
  font-size: 100%;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--merriserif);
  font-style: normal;
  font-size: .875rem;
  font-optical-sizing: auto;
  font-variation-settings: "wdth" 180;
  font-weight: 300;
  line-height: 1.6;
  letter-spacing: 1.5px;
  color: var(--hotwhite);
  background-color: var(--richgreenblack);
  background:
    radial-gradient(100% 50% at 50% 50%, rgb(14 159 193 / 72%), transparent 95%), var(--laveaux-panorama), var(--paperoverlay), linear-gradient(180deg, var(--darkpatina), var(--richgreenblack));
  background-blend-mode: overlay, overlay, overlay, normal;
  height: 100%;
  background-size: cover, auto, auto, cover;
  background-repeat: no-repeat, no-repeat, repeat, repeat;
  background-attachment: fixed, scroll, scroll, fixed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
legend {
  margin: 0;
  padding: 0;
  width: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  text-align: center;
}

a {
  color: var(--hotred);
  text-decoration: none;
  transition: all 0.3s ease;
}

button {
  color: var(--gilded);
  text-decoration: none;
  transition: all 0.3s ease;
}

button:hover {
  color: var(--gildedwhite);
  text-shadow: var(--text-glow);
}

a:hover {
  color: var(--gildedwhite);
  text-shadow: var(--text-glow);
}

a:hover .svg-inline--fa {
  color: var(--gildedwhite);
  filter: drop-shadow(1px 1px 5px var(--gildedbright));
  overflow: visible;
}

img {
  max-width: 100%;
  display: block;
  height: 100%;
  object-fit: cover;
}

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

.hotr1 {
  color: var(--bleu-de-france);
}

.hotr2 {
  color: var(--flagwhite);
}

.hotr3 {
  color: var(--rouge-de-france);
}


h1,
h2,
h3,
legend {
  text-shadow: 1px 1px 2px var(--richgreenblack);
}

legend {
  background-color: var(--richgreenblack);
  background-image: var(--patina-vignette);
  border: 1px solid var(--roses50);
  color: var(--gilded);
  text-align: center;
  font-size: 3.0rem;
  line-height: 1;
  padding: 12px;
}

h1,
h2,
h3,
h4,
h5,
h6,
legend {
  font-family: var(--ac-hunter);
  font-weight: 400;
  letter-spacing: 1px;
}

h1,
h2,
h3,
h4,
h5,
h6,
legend,
label {
  text-transform: uppercase;
}

h1 {
  font-size: 3.75rem;
  line-height: 1;
  color: var(--gildedbright);
}

h2 {
  font-size: 3rem;
  line-height: 1;
  color: var(--gilded);
}

h3 {
  font-size: 2.25rem;
  line-height: 1;
  color: var(--bleu-de-france);
}

h4 {
  font-size: 1.5rem;
  line-height: 1;
  color: var(--teal);

}

h5 {
  font-family: var(--faculty);
  font-size: 1rem;
  line-height: 1;
  color: var(--darkteal);
}

h6 {
  font-family: var(--faculty);
  font-size: .875rem;
  line-height: 1;
  color: var(--hotwhite-fade);
}

article h1,
article h2,
article h3,
article h4,
article h5,
article h6 {
  text-align: left;
}

br {
  line-height: 1;
}

.table-wrapper {
  overflow: auto;
  padding: 24px;
}

table {
  width: 100%;
  border-spacing: 0;
  background: var(--richgreenblack);
}

thead {
  border-width: 1px;
  width: 100%;
}

tr {
  text-align: center;
}

th {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  background: rgb(3 54 58 / 69%);
  padding: 6px;
  font-weight: 300;
  color: var(--gilded);
  border-bottom: 1px solid var(--darkgold);
  font-family: var(--faculty);
}

th .sort-up,
th .sort-down,
th .sort-neutral {
  display: none;
  vertical-align: middle;
  margin-left: .25rem;
}

th[aria-sort="none"] .sort-neutral {
  display: inline-block;
}

th[aria-sort="ascending"] .sort-up {
  display: inline-block;
}

th[aria-sort="descending"] .sort-down {
  display: inline-block;
}

tbody {
  font-size: .75rem;
}


td {
  text-align: center;
  padding: 6px;
  border-right: 1px solid var(--darkbleu);
  border-bottom: 1px solid var(--darkbleu);
}

td:first-of-type {
  border-left: 1px solid var(--darkbleu);
}

td .avatar-border img {
  width: 48px;
  height: 48px;
  border-width: 2px;
  border-radius: 50% 50% 0 0;
}

table a {
  font-weight: 600;
  line-height: 1;
}

article,
p {
  line-height: 1.6;
  letter-spacing: 1.5px;
  font-size: .875rem;
  font-weight: 300;
  font-variation-settings: "wdth" 180;
}

small {
  font-size: 0.75rem;
  line-height: 0.75rem;
}

small.smaller {
  font-size: 0.563rem;
  line-height: 0.563rem;
}

label {
  font-size: 0.8706rem;
  line-height: 1.25;
  letter-spacing: 1.5px;
  display: flex;
  font-family: var(--faculty);
  text-transform: uppercase;
  color: var(--gilded);
}

i.emphasis,
em {
  color: var(--seafoam69);
}

strong,
b {
  color: var(--seafoam69);
  font-weight: 700;
}

.buttonlink,
button.buttonlink {
  margin: 0;
  padding: 6px 8px;
  background-color: var(--richgreenblack);
  color: var(--gildedbright);
  background-image: var(--patina-vignette);
  border: 1px solid var(--darkgold);
  font-family: var(--faculty);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  corner-shape: scoop;
  border-radius: 8px;
}

.buttonlink-inline,
button.buttonlink-inline {
  margin: 0;
  color: var(--gildedbright);
  background: transparent;
  padding: 6px 0;
  border: 0;
}

.buttonlink-inline:hover,
button.buttonlink-inline:hover {
  color: var(--gildedwhite);
  text-shadow: var(--text-glow);
  cursor: pointer;
}

.buttonlink:hover,
button.buttonlink:hover {
  color: var(--gildedwhite);
  text-shadow: var(--text-glow);
  cursor: pointer;
}

button.button-secondary {
  background: transparent;
  border-width: 0 0 1px 0;
  border-color: var(--hotred);
  border-radius: 0;
  padding-bottom: 2px;
  border-style: dotted;
  padding: 0 0 2px 0;
}

button.button-secondary:hover {
  color: var(--hotred);
}

blockquote {
  margin: 24px;
  padding: 24px;
  border: 1px solid var(--seafoam42);
  border-radius: 18px;
  background-color: rgba(0, 12, 13, .69);
  position: relative;
  corner-shape: scoop;
}

.profile-main-wrapper blockquote {
  margin: 12px auto;
  padding: 12px;
  border-radius: 12px;
}

blockquote::before {
  content: "“";
  font-size: 8rem;
  color: var(--softpatina);
  position: absolute;
  top: -75px;
  left: 10px;
  opacity: .5;
}

blockquote::after {
  content: "”";
  font-size: 8rem;
  color: var(--softpatina);
  position: absolute;
  bottom: -150px;
  right: -10px;
  opacity: .5;
}

blockquote p {
  font-style: italic;
  color: var(--gilded);
}

.profile-main-wrapper blockquote footer cite {
  font-size: 0.8706rem;
}

blockquote footer {
  position: relative;
  text-align: right;
  font-style: normal;
  color: var(--darkgold);
  margin-top: 10px;
  border: none;
  background: transparent;
}

blockquote footer cite {
  font-style: normal;
  font-weight: bold;
  font-size: 1.3195rem;
  line-height: 1.15;
}

article {
  max-width: 69ch;
  margin: 0 auto;
}

section {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

nav ul {
  display: flex;
  justify-content: space-evenly;
  align-content: center;
  gap: 12px;
  width: 100%;
}

nav ul li {
  padding: 0;
  border: 0;
  width: 100%;
  height: 100%;
  flex: 1 0 0;
}

*:has(> .tip),
*:has(+ .tip) {
  overflow: visible !important;
  position: relative;
}

*:has(> *:hover)+.tip,
*:has(+ *:hover)+.tip,
*:has(> *:focus)+.tip,
*:has(> *:focus-visible)+.tip {
  opacity: 1;
}

*[aria-describedby]:hover+.tip,
*[aria-describedby]:focus+.tip,
*[aria-describedby]:focus-visible+.tip {
  opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {

  *:has(> *:hover)+.tip,
  *:has(> *:focus)+.tip,
  *:has(> *:focus-visible)+.tip {
    transform: translateY(-50%) translateX(0);
  }

  ;
}

.tip {
  position: fixed;
  padding: 8px;
  font-family: var(--faculty);
  font-size: .8706rem;
  line-height: .9;
  letter-spacing: .5px;
  color: var(--gildedwhite);
  white-space: nowrap;
  background:
    radial-gradient(900px 450px at 12% 0%, rgba(0, 0, 0, .35), transparent 55%),
    var(--damask),
    linear-gradient(180deg, var(--darkpatina), var(--richgreenblack));
  background-blend-mode: overlay, multiply, normal;
  border: 1px solid var(--darkgold);
  border-radius: 6px;
  corner-shape: scoop;
  box-shadow: 0 8px 12px rgba(0, 12, 13, .69);
  pointer-events: none;
  opacity: 0;
  z-index: 10000;
  max-width: 300px;
  text-wrap-mode: wrap;
}

.char-meta .tip {
  padding: 12px;
}

.tip::before {
  content: "";
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 12px;
  height: 12px;
  background: linear-gradient(180deg, var(--darkpatina), var(--richgreenblack));
  border-left: 1px solid var(--darkgold);
  border-top: 1px solid var(--darkgold);
  box-shadow: 0 4px 8px rgba(0, 12, 13, .42);
}

@media (prefers-reduced-motion: no-preference) {
  .tip {
    transition: opacity .12s ease-out, transform .12s ease-out;
  }

  ;

  *:hover+.tip,
  *:focus+.tip,
  *:focus-visible+.tip {
    transform: translateY(-50%) translateX(0);
  }

  ;
}

.avatar-border {
  height: 100%;
  width: 100%;
}

.avatar-border .directory-avatar {
  height: 100px;
  width: 100px;
  border-width: 2px;
}

.avatar-border img {
  height: 150px;
  width: 150px;
  object-fit: cover;
  border-radius: 100% 100% 0 0;
  box-shadow: var(--bigboxglow);
  border: 4px solid transparent;
  background: linear-gradient(var(--richgreenblack), var(--richgreenblack)) padding-box, linear-gradient(to bottom, var(--gilded), var(--darkgold)) border-box;
}

.topic-row .avatar-border img,
#profile-wrapper .avatar-border img {
  height: 100px;
  width: 100px;
  border-width: 2px;
}

.session-notice {
  font-size: 1rem;
  font-style: italic;
  display: flex;
  text-align: center;
  line-height: 1;
  font-family: var(--merriserif);
  font-weight: 300;
  letter-spacing: 1px;
  width: 100%;
  justify-content: center;
}

section#login-form-wrapper {
  justify-content: center;
}

.guest-wrapper {
  max-height: 40px;
}

.current-playas-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 12px;
}

nav.mini-playernav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  flex-wrap: wrap;
  width: 100%;
}

.guest-name a {
  color: var(--gildedbright);
}

.guest-name a:hover,
.player-name a:hover {
  color: var(--gildedwhite);
}

.player-name a {
  color: var(--seafoam);
}

.characters-grid {
  grid-template-columns: 1fr 1fr;
  padding: 12px;
  gap: 12px;
  grid-template-rows: 1fr 1fr;
}

.character-list-wrapper {
  overflow-y: auto;
  scroll-snap-type: y mandatory;
}

.character-card {
  display: flex;
  gap: 8px;
  background: radial-gradient(900px 450px at 12% 0%, var(--richgreenblack), transparent 45%), linear-gradient(180deg, var(--darkpatina), var(--richgreenblack));
  background-blend-mode: overlay, multiply, normal;
  background-size: contain;
  background-attachment: fixed;
  background-position: left center;
  padding: 8px;
  border-bottom: 1px solid var(--darkpatina);
  flex-wrap: wrap;
  align-items: center;
  scroll-snap-align: start;
  flex: 1 0 0;
  width: 100%;
  grid-template-areas: "avatar char-name char-name" "avatar char-status char-status" "char-meta char-meta char-meta" "char-form char-form char-form";
  grid-template-columns: auto 1fr 1fr;
  grid-template-rows: auto auto auto auto;
}

.character-group .character-card {
  height: fit-content;
  min-width: 200px;
  border: 1px solid var(--darkpatina);
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
}

.char-meta {
  display: flex;
  gap: 12px;
  grid-area: char-meta;
}

.character-card a {
  display: flex;
  gap: 4px;
}

.character-card .avatar-border img {
  height: 100px;
  width: 100px;
  border-width: 2px;
}

.character-card .char-name {
  font-weight: 500;
  letter-spacing: 1.5px;
  font-size: .875rem;
}

.char-name.group-Noblesse,
a.char-name.group-Noblesse {
  color: rgba(85, 107, 47, 1);
  /* #556b2f */
}

.char-name.group-Bohemians,
a.char-name.group-Bohemians {
  color: rgba(138, 43, 226, 1);
  /* #8a2be2 */
}

.char-name.group-Ouvriers,
a.char-name.group-Ouvriers {
  color: rgba(63, 83, 194, 1);
  /* #3f53c2; */
}

.char-name.group-Clergy,
a.char-name.group-clergy {
  color: rgba(173, 17, 17, 1);

}

.char-name.group-Bourgeoisie,
a.char-name.group-Bourgeoisie {
  color: rgb(199, 159, 27);
}

.char-name.group-Misérables,
a.char-name.group-Misérables {
  color: rgba(47, 79, 79, 1);
}

.char-name.group-Demimonde,
a.char-name.group-Demimonde {
  color: rgba(72, 14, 90, 1);
}

.char-name.group-Voyous,
a.char-name.group-Voyous {
  color: rgba(124, 72, 48, 1);
}

.character-statuses {
  font-family: var(--faculty);
  text-transform: uppercase;
  font-size: .75rem;
  letter-spacing: 1.5px;
  grid-area: char-status;
}

.character-status.char-active,
.char-active svg {
  color: var(--gilded);
}

.character-status.char-inprogress,
.char-inprogress svg {
  color: var(--darkgold);
}

.character-list form {
  padding: 0;
}

#player-meta.profileowner-meta,
.current-char-meta {
  display: flex;
  font-family: var(--faculty);
  font-size: .75rem;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: center;
  gap: 8px;
  padding: 12px;
}

.logo-home {
  border-bottom: 1px solid var(--darkgold);
  background-color: rgba(51, 128, 228, 0.1);
  width: 100%;
  padding: 4px 0;
  display: flex;
  justify-content: center;
  border-bottom-right-radius: 12px;
}

.logo-wrapper {
  height: 100px;
  width: 100px;
}

a.logolink:hover {
  background-image: url('/../static/img/HOTR_Icon_Hover.png');
}

.content {
  margin: 0 0 0 48px;
  min-width: 400px;
  height: calc(100vh - 48px);
  min-height: -moz-available;
  max-height: -moz-available;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-content: flex-start;
  position: relative;

}

#main {
  padding: 48px 48px 48px 300px;
  position: relative;
  height: 100%;
  overflow-y: auto;
  transition: all 0.3s ease;
}

#main.sidebar-collapsed {
  padding: 48px;
}

@media (max-width: 600px) {
  #main.sidebar-collapsed {
    padding: 8px;
  }

  ;
}

@media (max-width: 600px) {
  #main {
    padding: 8px;
  }

  ;
}

.hero {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-title img {
  width: 100%;
  height: fit-content;
}

.aesthetic-container {
  display: flex;
  gap: 1.5rem;
  padding: 3%;
  background-color: var(--richgreenblack);
  border-radius: 18px;
  corner-shape: scoop;
  border: 1px solid var(--darkgold);
  background: radial-gradient(900px 450px at 12% 0%, var(--richgreenblack), transparent 45%), var(--damask), linear-gradient(180deg, var(--darkpatina), var(--richgreenblack));
  background-blend-mode: overlay, multiply, normal;
  background-size: contain;
  background-attachment: fixed;
  background-position: left center;
}

.aesthetic-inner {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  gap: 1rem;
}

#portal.main-content {
  display: grid;
  grid-template-areas:
    "welcome welcome"
    "soon    soon   "
    "gazette dancing"
    "footer  footer ";
  grid-template-columns: auto auto;
  grid-template-rows: auto auto auto auto;
}

#welcome {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas:
    "intro intro intro online online"
    "intro intro intro online online"
    "posts posts posts posts  posts ";
  padding: 12px;
  gap: 12px;
  justify-content: start;
  align-items: start;
  height: fit-content;
  grid-area: welcome;
}

#hotr-intro.content-box-inner {
  grid-area: intro;
  padding: 24px;
  flex-wrap: nowrap;
  flex-direction: row;
  height: 100%;
}


#first-welcome {
  text-align: center;
  display: flex;
  font-family: var(--ac-hunter);
  -moz-font-feature-settings: "salt";
  -webkit-font-feature-settings: "salt";
  font-feature-settings: "salt";
  line-height: 1;
  font-size: 31px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

#first-welcome .line-1 {
  font-size: 1.5rem;
  line-height: 1;
  font-family: var(--ac-tall);
  text-transform: uppercase;
  color: var(--seafoam);
  width: 100%;
}

#first-welcome .line-2 {
  font-size: 4rem;
  color: #a7381f;
}


#coming-soon {
  grid-area: soon;
  gap: 0;
  min-width: 300px;
  flex: 1 0 0;
}

#coming-soon .subheading {
  width: 100%;
  display: flex;
  text-align: center;
  justify-content: center;
  font-family: var(--an-cafe);
  color: var(--bleu-de-france);
  font-size: 1.69rem;
  letter-spacing: 2px;
}

#gazette {
  grid-area: gazette;
  height: fit-content;
}

#gazette .content-box-inner {
  flex-direction: row;
  align-content: start;
}

#newsfeed {
  flex: 1 0 200px;
}

#newsfeed,
#updates-wrapper {
  gap: 0;
}

.newsfeed-wrapper {
  height: 348px;
  overflow-y: auto;
  border-bottom: 1px solid var(--darkgold);
  padding: 12px;
  gap: 12px;
  justify-content: start;
  align-content: start;
}

#updates-wrapper {
  flex: 1 0 200px;
}

#news {
  height: 348px;
}

.updates-feed {
  font-weight: 300;
  letter-spacing: 1px;
  padding: 12px;
  height: 100%;
  overflow-y: auto;
  border-bottom: 1px solid var(--darkgold);
}

.update {
  margin: 0;
}

.update-date {
  color: green;
  font-family: var(--rosella-solid);
}

.update:nth-child(2n+1) .update-date {
  color: red;
}

.update-note {
  font-size: .75rem;
  line-height: 1.8;
  letter-spacing: 1.5px;
  padding-bottom: .5rem;
}

#your-steps {
  gap: 24px;
}

.portal-block {
  gap: 12px;
}

#portal p.lead {
  font-size: 1.15rem;
  color: var(--bleu-de-france);
  font-style: italic;
  font-weight: 300;
  line-height: 1.1;
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
}

.setting-summary {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

#tagline p {
  width: 100%;
  text-align: center;
  font-size: 1.6rem;
  text-transform: uppercase;
  font-style: italic;
  display: flex;
  gap: 12px;
}

div#online-stats {
  grid-area: online;
  display: flex;
  width: 100%;
  gap: 0;
  height: 100%;
  flex-wrap: nowrap;
}

#portal h3,
.popup-box h3 {
  line-height: 1;
  background-color: rgba(51, 128, 228, 0.1);
  width: -moz-available;
  text-align: center;
  padding: 12px 24px 4px 24px;
  font-size: 1.5rem;
}

#portal h4 {
  line-height: 1;
  text-transform: uppercase;
}

.portal-welcome-aesthetic {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: auto;
}

.portal-welcome-aesthetic .avatar-border img {
  height: 150px;
  width: 150px;
  border-width: 2px;
}

.sitestats-block {
  max-height: 800px;
  display: flex;
  flex-direction: column;
  height: 100%;
}




.your-options p {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.otm-wrapper {
  padding: 12px;
  display: flex;
  justify-content: center;
  align-items: start;
  flex-wrap: wrap;
  width: 100%;
  gap: 20px;
}

.otm-item {
  flex: 1 0 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.otm-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 2px;
}

.otm-name {
  font-size: 0.7rem;
  font-style: italic;
  font-weight: 600;
  text-align: center;
  letter-spacing: 2px;
}

.otm-img {
  max-width: 50px;
  padding: 4px 0;
}

#portal-footer {
  grid-area: footer;
}

.header-banner {
  width: 100%;
}

.header-banner-container {
  width: 100%;
  display: flex;
  position: relative;
  box-sizing: border-box;
  align-items: center;
  flex-direction: row;
}

.header-banner-container img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

#tagline {
  margin: 0 auto;
}

.content-box-section {
  gap: 24px;
}

.content-box-footer nav ul li .buttonlink {
  display: flex;
  gap: 8px;
  width: auto;
  text-align: center;
  line-height: 1;
}

.content-box-footer nav ul li {
  width: auto;
  align-self: center;
  justify-self: center;
  flex: none;
}

.content-box-footer nav ul li a i.fi {
  width: auto;
}

.portal-collage-wrapper {
  padding-bottom: 48px;
}

.topic-desc {
  font-family: var(--merriserif);
  font-size: .75rem;
  font-style: italic;
}

.recentpost-wrapper .scene-meta {
  padding: 4px;
  font-size: .75rem;
  line-height: 1;
  border-radius: 8px;
}

.last-post-meta {
  line-height: 1.3;
}

#coming-soon .content-box-section {
  gap: 0;
}

#otm {
  gap: 0;
}

.contact-us {
  margin: 0;
  gap: 24px;
  justify-content: center;
  padding-bottom: 24px;
}

.contact-us p {
  max-width: 100ch;
  min-width: 30ch;
}

.header-main {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: start;
}

.header-main p {
  padding-bottom: 0;
}

.header-stats-container {
  width: 100%;
  display: flex;
  flex-direction: row;
  box-sizing: border-box;
  justify-content: start;
  align-items: start;
  text-align: center;
  justify-items: start;
  height: 100%;
}

.header-stats-container>* {
  align-items: center;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 100%;
  flex-grow: 1;
}


/* Main Content */

.main-content {
  display: flex;
  flex-direction: column;
  gap: 48px;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
}

.content-box {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 12px;
  gap: 12px;
  background-blend-mode: overlay, multiply, normal;
  background-size: cover;
  background-attachment: fixed;
  background-position: left center;
  background-color: rgba(0, 12, 13, .69);
  border-radius: 18px;
  border: var(--border-1px);
  corner-shape: scoop;
  max-width: 1400px;
  margin: 0 auto;
}

@media (max-width: 600px) {
  .content-box {
    padding: 12px;
    gap: 12px;
    border-radius: 12px;
  }
}

.content-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  width: 100%;
  max-width: calc(100% - 274px);
}

.content-wrapper>div {
  flex: 1 0 0;
}

#profile-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  gap: 12px;
}

.profile-main-wrapper {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  gap: 12px;
  flex: 1 0 0;
  width: 100%;
  min-width: 500px;
}

#profile-page .content-box-inner {
  gap: 0;
}

section.profile-meta {
  width: auto;
  line-height: 1;
  display: grid;
  grid-template-columns: auto auto;
  column-gap: 12px;
  text-align: center;
  justify-content: center;
  align-items: center;
}

.profile-meta-wrapper {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
}

.profile-meta-field {
  display: inline-flex;
  line-height: 1;
}

.profile-navbar {
  display: flex;
  border-radius: 12px;
  corner-shape: scoop;
  border: 1px solid var(--darkgold);
  background: radial-gradient(900px 450px at 12% 0%, var(--richgreenblack), transparent 45%), var(--damask), linear-gradient(180deg, var(--darkpatina), var(--richgreenblack));
  background-blend-mode: overlay, multiply, normal;
  background-size: contain;
  background-attachment: fixed;
  background-position: left center;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: stretch;
}

.profile-navbar a {
  border: 0;
  text-align: center;
  border-radius: 0;
  border-bottom: 1px solid var(--darkgold);
  flex: 1 0 50%;
  align-self: center;
  height: 36px;
}

a#intro-jumplink {
  border-top: 1px solid var(--darkgold);
}

a#summary-jumplink,
a#occupations-jumplink,
a#occupations-jumplink,
a#character-aesthetics {
  border-right: 1px solid var(--darkgold);
}

.profile-jump-label {
  line-height: 1;
  font-family: var(--ac-hunter);
  color: var(--gilded);
  font-size: 1rem;
  padding: 6px 12px;
  text-align: center;
  width: 100%;
}

.profile-tab-jump-label {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--gilded);
  font-family: var(--ac-hunter);
  font-size: 1rem;
  border-bottom: 1px solid var(--darkgold);
}

.category-container,
.content-box,
.topics-container {
  width: 100%;
}

.content-box-inner,
.post-row-inner,
.topics-details {
  width: 100%;
  display: flex;
  justify-content: start;
  align-items: start;
  border: var(--border-1px);
  border-radius: 12px;
  corner-shape: scoop;
  background-color: rgba(0, 12, 13, .69);
  flex-direction: column;
  flex-wrap: wrap;
}

.content-box-inner {
  border: 1px solid var(--darkgold);
  background: radial-gradient(900px 450px at 12% 0%, var(--richgreenblack), transparent 45%), var(--damask), linear-gradient(180deg, var(--darkpatina), var(--richgreenblack));
  background-blend-mode: overlay, multiply, normal;
  background-size: contain;
  background-attachment: fixed;
  background-position: left center;
}

.feature-wrapper {
  padding: 24px;
}

.grid {
  display: grid;
}

.pad-12 {
  padding: 12px;
}

.pad-24 {
  padding: 24px;
}

.pad-48 {
  padding: 48px;
}

.flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}

.grid-3 {
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  grid-template-rows: auto auto;
}

.feature-item h4 {
  text-align: left;
}

#status .status-details {
  display: flex;
  padding: 12px;
  flex-wrap: wrap;
  gap: 16px;
}

.site-status-details {
  padding: 12px;
  justify-content: center;
  align-content: center;
  gap: 12px;
  flex-wrap: nowrap;
}

.site-status-data {
  background: rgba(0, 12, 13, .69);
  padding: 13px;
  border: 1px solid var(--darkgold);
  justify-content: space-evenly;
  align-content: center;
  width: 100%;
  font-family: var(--faculty);
  text-transform: uppercase;
  border-radius: 8px;
  corner-shape: scoop;
  flex-direction: column;
  display: flex;
  text-align: center;
  gap: 8px;
}

.site-status-data strong {
  color: var(--darkgold);
}

.steps-wrapper {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

#dancing-img {
  grid-area: dancing;
}


#dancing-img img {
  border-radius: 18px;
  corner-shape: scoop;
  padding: 12px;
  max-width: 500px;
}

.category-header,
.topic-header,
.forum-header,
.content-box-header {
  width: 100%;
  background-color: var(--richgreenblack);
  border-bottom: 1px solid var(--roses50);
  text-shadow: var(--header-text-shadow);
  background: radial-gradient(100% 50% at 50% 50%, rgb(14 159 193 / 72%), transparent 95%), var(--laveaux-panorama), var(--paperoverlay), linear-gradient(180deg, var(--darkpatina), var(--richgreenblack));
  background-blend-mode: overlay, overlay, overlay, normal;
  background-position: center;
  background-size: cover, cover, 40%, cover;
  background-repeat: no-repeat, no-repeat, repeat, repeat;
  background-attachment: scroll, scroll, scroll, fixed;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  border-radius: 12px 12px 0 0;
  corner-shape: scoop;
  z-index: 10;
}

@media (max-width: 600px) {

  .category-header,
  .topic-header,
  .forum-header,
  .content-box-header {
    padding: 12px;
  }
}

.topic-header h1 {
  font-size: 3rem;
  text-align: left;
}

.topic-header a {
  line-height: 1;
  text-align: left;
}

header.topic-title.topic-header {
  gap: 0;
}

.posts-wrapper {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}


p#fight {
  text-align: center;
}

.scene-meta {
  color: var(--seafoam);
  padding: 8px 12px;
  display: flex;
  gap: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  border: 1px solid var(--darkgold);
  border-radius: 12px;
  corner-shape: scoop;
  background: rgba(0, 12, 13, .69);
  width: 100%;
  justify-content: space-evenly;
  align-content: center;
}

.profile-controls {
  width: 100%;
}

.profile-switcher {
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
  align-items: center;
  gap: 20px;
  padding: 12px;
  font-family: var(--faculty);
  width: 100%;
}

.switcher-label {
  text-transform: uppercase;
}

.linked-profiles-wrapper {
  padding: 12px;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  background: var(--richergreenblack);
  corner-shape: scoop;
  border-radius: 18px;
  border: 1px solid var(--seafoam42);
}

.player-wrapper {
  flex: 1 0 0;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  gap: 12px;
}

.profile-switcher .character-carousel {
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  flex: 1 0 0;
}

.avatar-wrapper {
  flex-direction: column;
  gap: 8px;
  justify-content: start;
  align-items: center;
  grid-area: avatar;
}

.avatar-wrapper a {
  line-height: 1.25;
  font-size: .875rem;
}

.linked-characters-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 12px;
}

.character-carousel .avatar-wrapper {
  align-self: start;
  justify-self: center;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  width: 150px;
  justify-content: center;
  align-items: center;
}

.character-carousel .avatar-border img {
  width: 100px;
  height: 100px;
}

.current-view {
  letter-spacing: 1px;
}

a.active:hover {
  opacity: 1;
}

.profile-controls .manage a {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background: var(--richgreenblack);
  padding: 12px;
  gap: 8px;
  line-height: 1.33rem;
  background:
    radial-gradient(900px 450px at 12% 0%, rgba(0, 0, 0, .35), transparent 55%),
    linear-gradient(180deg, var(--darkpatina), var(--richgreenblack));
  background-blend-mode: overlay, normal;
  border: 1px solid var(--darkgold);
  border-radius: 8px;
  box-shadow: 0 10px 18px rgba(0, 0, 0, .4);
  letter-spacing: 1px;
}

#forum-index {
  flex: 1 0 0;
  display: flex;
  gap: 12px;
  flex-wrap: nowrap;
  min-height: fit-content;
}

.english-name {
  font-weight: 300;
  font-style: italic;
  color: var(--seafoam);
}

.list-forums {
  width: 100%;
  padding: 12px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

aside,
aside.forum-toc {
  max-width: 300px;
  position: sticky;
  top: 0;
  height: min-content;
  padding: 12px;
  gap: 4px;
  text-align: left;
  font-family: var(--faculty);
  text-transform: uppercase;
  min-width: 200px;
  overflow: clip;
}

aside h2 {
  font-size: 1.5rem;
}

aside h3 {
  font-size: 1.25rem;
}

aside .stat-block {
  justify-content: space-evenly;
  align-content: center;
  width: 100%;
  text-align: center;
}

aside legend {
  font-size: 1.25rem;
  padding: 8px 12px 4px 12px;
}

.content-box-inner.aside__directory {
  gap: 12px;
  max-width: 244px;
}

.toc-category-section {
  padding-bottom: 12px;
}

.filter-control-container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: revert;
  column-gap: 16px;
}

.search-filters {
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.filter-control-container .buttonlink-inline.filter-option {
  padding: 2px 0;
  display: flex;
  width: max-content;
}

.filter-control-container subtitle {
  width: 100%;
}

#forum-legend {
  text-transform: none;
  font-family: var(--merriserif);
  text-align: center;
}

#forum-legend p {
  line-height: 1.3;
  text-transform: uppercase;
  font-family: var(--faculty);
  font-size: .6rem;
  text-align: center;
  letter-spacing: 2.5px;
  opacity: .8;
}


.toc-category-title {
  text-align: left;
  font-size: 1.25rem;
  border-bottom: 4px solid var(--darkpatina85);
  margin-bottom: 12px;
}

.toc-link.toc-catlink {
  color: var(--gilded);
}

#forum-legend .toc-link {
  font-weight: bold;
}

.toc-link.toc-forum-link {
  text-indent: -2rem;
  color: var(--seafoam69);
}

.toc-link.toc-subforum-link {
  color: var(--hotred);
}

.toc-forums-group {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  flex-direction: column;
}

.toc-forum-item {
  text-indent: -12px;
  padding-left: 12px;
  line-height: 1.3;
}

.toc-subforums-group {
  padding-left: 24px;
  flex-direction: column;
  display: flex;
  text-transform: none;
  padding-top: 4px;
}

.forums-label {
  color: var(--gilded);
}

.list-forums a {
  color: var(--hotred);
}

.list-forums a:hover {
  color: var(--gildedwhite);
  text-shadow: var(--text-glow);
}

.forum-row {
  border: 1px solid var(--darkpatina);
  display: grid;
  border-radius: 18px;
  background-size: cover;
  ---forum-color: var(--darkpatina);
  background-color: var(---forum-color);
  background-blend-mode: overlay;
  background-position: center;
  grid-template-areas:
    "header  header  header  header "
    "details details details details"
    "last    last    last    last   "
    "sub     sub     sub     sub    ";
  grid-template-rows: 80px 114px auto auto;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  position: relative;
  width: 100%;
}

.forum-row .forum-details {
  padding: 0;
  width: auto;
  display: flex;
  justify-content: start;
  padding: 0 24px;
}

.forum-main {
  display: flex;
  justify-content: start;
  border: 1px solid var(--darkgold);
  height: 114px;
  background-color: rgba(0, 12, 13, .69);
  font-size: .5rem;
  flex-wrap: wrap;
  width: 100%;
  min-width: 30px;
  max-width: 100ch;
}

.forum-row-header {
  justify-content: start;
  align-items: baseline;
  gap: 12px;
  grid-area: header;
  line-height: 1;
  display: flex;
  width: 100%;
  padding: 30px 24px 0px 24px;
  height: 100%;
  align-content: center;
  justify-content: start;
}

#forum-hub .content-box-inner {
  justify-content: center;
  align-items: center;
  gap: 12px;
  padding: 12px;
}

#forum-hub .page-header {
  width: 100%;
}

.forum-title {
  width: auto;
  font-family: var(--ac-hunter);
  line-height: 1;
  display: inline-flex;
}

.forum-details {
  grid-area: details;
}

.forum-description,
.demo-description {
  font-size: .75rem;
  line-height: 1.5;
  font-family: var(--merriserif);
  letter-spacing: 1.5px;
  vertical-align: middle;
  overflow-y: auto;
}

.forum-banner-container {
  display: none;
}

.forum-meta {
  justify-content: space-between;
  align-items: center;
}

.meta-edited {
  text-align: right;
}

.forum-aside {
  display: flex;
  gap: 10px;
  flex-direction: row;
}

.forum-row .forum-stats {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
  margin-right: -8px;
  z-index: 10;
  position: absolute;
  right: 0;
  top: -8px;
  gap: 4px;
}

.forum-stats>div {
  border: 1px solid var(--darkgold);
  color: var(--gilded);
  display: flex;
  width: auto;
  height: auto;
  padding: 8px;
  vertical-align: middle;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-family: var(--faculty);
  font-size: .875rem;
  line-height: 1;
  background: var(--richgreenblack);
  gap: 6px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

.forum-lastpost {
  padding: 12px;
  grid-area: last;
}

.forum-lastpost h4.topic-title {
  padding: 0;
  text-align: left;
  font-size: 1.4rem;
}

.last-by,
.last-none {
  width: 100%;
  display: flex;
  align-items: end;
  gap: 12px;
}

.last-by .avatar-border img {
  height: 75px;
  width: 75px;
  border-width: 2px;
}

.last-activity-wrapper {
  font-family: var(--faculty);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-width: 550px;
  min-width: 200px;
  width: fit-content;
}

.last-activity-wrapper .topic-people a {
  font-weight: 600;
  background-color: rgba(0, 12, 13, .42);
}

.last-topic {
  width: 100%;
}

.subforums {
  width: 100%;
}

.row-footer {
  width: 100%;
  background: var(--richgreenblack);
  padding: 8px 24px;
  line-height: 1;
  border-radius: 0 0 18px 18px;
  min-height: 34px;
  font-family: var(--faculty);
  grid-area: sub;
  font-size: .875rem;
}

#tab-container input,
#profile-tab-container input {
  visibility: hidden;
  width: 0;
  height: 0;
}

#tab-container label {
  cursor: pointer;
  display: block;
  float: left;
  font-family: var(--faculty);
  font-weight: 300;
  font-size: .75rem;
  text-transform: uppercase;
  padding: 8px 8px;
  letter-spacing: 1.5px;
  opacity: .42;
  font-style: italic;
  background-color: var(---forum-color);
  line-height: 1;
  height: 28px;
}

#profile-tab-container label {
  cursor: pointer;
  display: block;
  float: left;
  font-family: var(--ac-hunter);
  text-transform: uppercase;
  padding: 12px;
  opacity: .42;
  background-color: var(--richergreenblack);
  line-height: 1;
  height: 40px;
}

#tab-container input:hover+label {
  background: rgb(0, 128, 128);
  color: var(--gildedwhite);
  opacity: 1;
}

#profile-tab-container input:hover+label {
  background: var(--richgreenblack);
  color: var(--gildedwhite);
  opacity: 1;
}

#tab-container input:checked+label {
  background: rgb(0, 128, 128);
  position: relative;
  z-index: 6;
  opacity: 1;
  font-style: normal;
}

#profile-tab-container input:checked+label {
  background: var(--richgreenblack);
  position: relative;
  z-index: 6;
  opacity: 1;
}

.forum-tab-content {
  position: relative;
  width: 100%;
  z-index: 5;
  height: 84px;
}

.profile-section-tabs-content {
  position: relative;
  width: 100%;
  z-index: 5;
  height: 600px;
}

.forum-tab-content>* {
  opacity: 0;
  padding: 6px;
  position: absolute;
  z-index: -100;
  height: 84px;
  overflow-y: auto;
  display: none;
}

.profile-section-tabs-content>* {
  opacity: 0;
  padding: 12px;
  position: absolute;
  z-index: -100;
  height: 600px;
  overflow-y: auto;
  display: none;
}


#tab-container input[type="radio"]:nth-of-type(1):checked~.forum-tab-content>*:nth-child(1),
#tab-container input[type="radio"]:nth-of-type(2):checked~.forum-tab-content>*:nth-child(2),
#tab-container input[type="radio"]:nth-of-type(3):checked~.forum-tab-content>*:nth-child(3),
#tab-container input[type="radio"]:nth-of-type(4):checked~.forum-tab-content>*:nth-child(4),
#tab-container input[type="radio"]:nth-of-type(5):checked~.forum-tab-content>*:nth-child(5),
#tab-container input[type="radio"]:nth-of-type(6):checked~.forum-tab-content>*:nth-child(6),
#tab-container input[type="radio"]:nth-of-type(7):checked~.forum-tab-content>*:nth-child(7),
#tab-container input[type="radio"]:nth-of-type(8):checked~.forum-tab-content>*:nth-child(8),
#tab-container input[type="radio"]:nth-of-type(9):checked~.forum-tab-content>*:nth-child(9),
#tab-container input[type="radio"]:nth-of-type(10):checked~.forum-tab-content>*:nth-child(10) {
  opacity: 1;
  position: relative;
  z-index: 100;
  display: block;
}

#profile-tab-container input[type="radio"]:nth-of-type(1):checked~.profile-section-tabs-content>*:nth-child(1),
#profile-tab-container input[type="radio"]:nth-of-type(2):checked~.profile-section-tabs-content>*:nth-child(2),
#profile-tab-container input[type="radio"]:nth-of-type(3):checked~.profile-section-tabs-content>*:nth-child(3),
#profile-tab-container input[type="radio"]:nth-of-type(4):checked~.profile-section-tabs-content>*:nth-child(4),
#profile-tab-container input[type="radio"]:nth-of-type(5):checked~.profile-section-tabs-content>*:nth-child(5),
#profile-tab-container input[type="radio"]:nth-of-type(6):checked~.profile-section-tabs-content>*:nth-child(6),
#profile-tab-container input[type="radio"]:nth-of-type(7):checked~.profile-section-tabs-content>*:nth-child(7),
#profile-tab-container input[type="radio"]:nth-of-type(8):checked~.profile-section-tabs-content>*:nth-child(8),
#profile-tab-container input[type="radio"]:nth-of-type(9):checked~.profile-section-tabs-content>*:nth-child(9),
#profile-tab-container input[type="radio"]:nth-of-type(10):checked~.profile-section-tabs-content>*:nth-child(10) {
  opacity: 1;
  position: relative;
  z-index: 100;
  display: block;
}


input.visible {
  visibility: visible !important;
}

.forum-7 {
  min-width: 800px;
}

#page-footer {
  margin-top: 48px;
}

#page-footer .content-box-inner {
  padding: 12px;
  flex-direction: row;
  font-family: var(--faculty);
  font-weight: 100;
  letter-spacing: 1.5px;
  font-size: .75rem;
  flex-wrap: nowrap;
  justify-content: space-between;
}

@media (max-width: 600px) {
  #page-footer .content-box-inner {
    padding: 12px;
  }
}

#copyright {
  width: 500px;
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

footer#bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 666;
  width: 100%;
  max-width: 100vw;
  height: 48px;
  color: var(--gilded);
  background-color: var(--richgreenblack);
  border-top: 1px solid var(--darkgold);
  display: grid;
  align-items: center;
  padding-left: 12px;
  padding-right: 12px;
  font-family: var(--faculty);
  font-size: .875rem;
  grid-template-columns: auto 208px 50px 50px;
  grid-column-gap: 24px;
  grid-template-areas:
    "breadcrumbs access cookies jump";
}

#breadcrumbs {
  width: -moz-available;
  min-width: 100px;
  line-height: 1;
  grid-area: breadcrumbs;
  max-width: 33%;
}



#access-controls {
  grid-area: access;
}

#cookie-policy {
  display: inline-flex;
  align-content: center;
  justify-content: center;
  line-height: 1;
  gap: 12px;
  width: 50px;
  grid-area: cookies;
}

#footer-nav {
  grid-area: jump;
}

footer#bottom .footer-section>div {
  display: flex;
  flex-wrap: wrap;
}

footer#bottom a i,
footer#bottom form button {
  opacity: .69;
  color: var(--hotred);
}

footer#bottom a:hover i,
footer#bottom form button:hover {
  opacity: 1;
  color: var(--gildedwhite);
  text-shadow: var(--text-glow);
}

footer#bottom form {
  padding: 0;
}

#bottom #cookie-policy button {
  background: transparent;
  padding: 0;
  border: none;
}

/* Headers & Collages */

.main-page-header {
  border-radius: 18px;
  margin-bottom: 24px;
}

.profile-collage-main,
.portal-collage-wrapper {
  padding: 0;
  width: 100%;
}

.profile-collage-wrapper,
.portal-collage-wrapper {
  display: grid;
  grid-template-columns: auto auto auto auto auto auto;
  grid-template-rows: auto auto auto auto;
  grid-template-areas:
    "collage_1 collage_1 collage_3 collage_4 collage_7 collage_7"
    "collage_1 collage_1 main_img  main_img  collage_7 collage_7"
    "collage_1 collage_1 main_img  main_img  collage_7 collage_7"
    "collage_2 collage_2 collage_5 collage_6 collage_8 collage_8";
  margin: 0 auto;
  justify-content: center;
  align-content: center;
  column-gap: 12px;
  row-gap: 12px;
  width: 100%;
  justify-items: center;
  align-items: center;
}

@media (max-width: 600px) {

  .profile-collage-main,
  .portal-collage-wrapper {
    padding: 8px;
  }

  ;

}

#main_collage_1,
#portal_collage_1 {
  grid-area: collage_1;
  width: 100%;
  height: 100%;
  display: flex;
  max-width: 300px;
}

#main_collage_2,
#portal_collage_2 {
  grid-area: collage_2;
}

#main_collage_3,
#portal_collage_3 {
  grid-area: collage_3;
}

#main_collage_4,
#portal_collage_4 {
  grid-area: collage_4;
}

#main_collage_3,
#main_collage_4,
#portal_collage_3,
#portal_collage_4 {
  border-radius: 100% 100% 0 0;
}

#main_collage_5,
#portal_collage_5 {
  grid-area: collage_5;
}

#main_collage_6,
#portal_collage_6 {
  grid-area: collage_6;
}

#main_collage_7,
#portal_collage_7 {
  grid-area: collage_7;
}

#main_collage_8,
#portal_collage_8 {
  grid-area: collage_8;
}

#main_collage_main_img,
#portal_collage_main_img {
  grid-area: main_img;
  display: flex;
  align-content: center;
  justify-content: center;
}

.profile-collage-main img,
.portal-collage-wrapper img {
  object-fit: cover;
  height: 100%;
  display: flex;
  max-width: 300px;
  width: 204px;
  border: 4px solid transparent;
  background: linear-gradient(var(--richgreenblack), var(--richgreenblack)) padding-box, linear-gradient(to bottom, var(--gilded), var(--darkgold)) border-box;
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
  box-shadow: var(--bigboxglow);
  transition: all 0.3s ease;
}

@media (max-width: 600px) {
  .portal-collage-wrapper img {
    max-width: 96px;
    border-width: 2px;
  }

  ;
}

#main_collage_1 img,
#main_collage_7 img,
#portal_collage_1 img,
#portal_collage_7 img {
  width: 300px;
  border-top-left-radius: 150px;
  border-top-right-radius: 150px;
  height: 450px;
}

#main_collage_2 img,
#main_collage_8 img,
#portal_collage_2 img,
#portal_collage_8 img {
  border-radius: 12px;
  corner-shape: scoop;
  width: 300px;
  height: 150px;
}

.collage-frame-small-arch {
  width: 150px;
  height: 150px;
}

.collage-frame-small-arch img {
  width: 150px;
  height: 150px;
  border-radius: 74px 74px 0 0;
}

.collage-grid-left,
.collage-grid-right {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-evenly;
  width: 100%;
}

.collage-frame-circle img {
  height: 276px;
  width: 276px;
  border-radius: 100%;
}

#portal_collage_main_img.collage-frame-circle img {
  width: 100%;
  height: auto;
  border: 0;
  border-radius: 0;
  max-width: 100%;
  background: transparent;
  box-shadow: none;
}

.collage-frame-square img {
  width: 150px;
  height: 150px;
}

.collage-center {
  max-width: 50%;
}

.collage-box {
  height: 100px;
  width: 100px;
  border-radius: 50% 50% 0 0;
  border: 2px solid transparent;
  background: linear-gradient(var(--richgreenblack), var(--richgreenblack)) padding-box, linear-gradient(to bottom, var(--gilded), var(--darkgold)) border-box;
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
}

.collage-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50% 50% 0 0;
}

.collage-front {
  position: relative;
  transition: all 0.3s ease;
}

.collage-front {
  img {
    opacity: 1;
  }
}

.collage-front:hover {
  img {
    opacity: 0.25;
  }
}

.collage-back {
  opacity: 0;
  transition: all 0.3s ease;
  box-shadow: var(--bigboxglow);
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
  border: 4px solid transparent;
  background: linear-gradient(var(--richgreenblack), var(--richgreenblack)) padding-box, linear-gradient(to bottom, var(--gilded), var(--darkgold)) border-box;
}

.collage-front:hover {
  .collage-back {
    opacity: .88;
  }
}

.collage-frame-big-arch .collage-back {
  padding: 12px;
  border-radius: 150px 150px 0 0;
  padding-top: 96px;
}

.collage-back__header h2 {
  font-size: 2.25rem;
  line-height: normal;
}

.collage-back__details {
  display: flex;
  flex-direction: column;
  text-align: center;
  gap: 12px;
  height: 100%;
  justify-content: space-between;
}

subtitle {
  text-align: center;
  color: var(--gilded);
  font-family: var(--faculty);
  text-transform: uppercase;
}

.profile-header {
  flex-wrap: wrap;
}

header.profile-title {
  display: flex;
  background-color: rgba(0, 12, 13, .69);
  border-radius: 18px;
  corner-shape: scoop;
  border: 1px solid var(--darkpatina);
  background-blend-mode: overlay, multiply, normal;
  background-size: contain;
  background-attachment: fixed;
  background-position: left center;
  justify-content: center;
  align-items: center;
  padding: 12px;
}

#profile-page h1 {
  align-items: center;
  border-bottom: 0;
  border-radius: 18px;
  corner-shape: scoop;
  font-family: var(--ac-hunter);
  justify-content: center;
  width: 100%;
  display: flex;
  padding: 12px;
  flex-direction: column;
  height: 250px;
}

.profile-title h1 a {
  font-size: 6.9rem;
  font-family: var(--fleur);
  line-height: 1;
  z-index: 1;
  text-transform: none;
  color: var(--gildedwhite);
  letter-spacing: 0;
  opacity: .69;
}

.profile-title h1 a:hover {
  opacity: 1;
}


.profile-quotes {
  justify-content: center;
}

.at-a-glance-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
  align-items: center;
  gap: 20px;
  padding: 0 24px;
  letter-spacing: 1.5px;
  font-family: var(--faculty);
  text-transform: uppercase;
  font-size: .75rem;
}

.aag-item {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .5rem;
}

.aag-label {
  color: rgba(109, 166, 150, .69);
}

.aag-value {
  color: rgba(109, 166, 150, 1);
}

.stats-block {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: center;
  letter-spacing: 1px;
  padding: 12px;
  font-family: var(--faculty);
  color: var(--gilded);
  font-size: 1rem;
  gap: 12px;
}

.stat-block {
  display: flex;
  gap: 4px;
}

/* Forms */

form {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 1000px;
}

fieldset {
  display: flex;
  flex-direction: column;
  padding: 12px;
  flex-wrap: wrap;
  width: 100%;
  border: var(--border-1px);
  background: var(--richgreenblack);
  gap: 12px;
  border-radius: 18px;
  corner-shape: scoop;
}

.form-section {
  display: flex;
  justify-content: space-evenly;
  gap: 10px;
}

.form-buttons {
  display: flex;
  gap: 12px;
  flex-direction: column;
  align-items: center;
}

.form-buttons .remember-me-wrapper {
  display: flex;
  gap: 6px;
}

button#login-submit {
  padding: 12px 24px;
  font-size: 2rem;
}


form .form-details {
  color: var(--gilded);
  align-self: end;
}

input[type="text"],
textarea,
input[type="date"],
input[type="password"] {
  color: var(--hotwhite);
  letter-spacing: 1.5px;
  font-family: var(--merriserif);
  font-style: normal;
  font-size: .75rem;
  font-optical-sizing: auto;
  font-variation-settings: "wdth" 100;
  font-weight: 300;
  width: 100%;
  background: rgb(0 8 8 / 42%);
  padding: 6px;
  border: 1px solid var(--darkpatina);
}

input[type="date"] {
  width: 130px;
}

#birthplace_city input[type="text"],
#birthplace_country input[type="text"] {
  width: 230px;
}

input[type="text"]:focus,
textarea:focus {
  outline: none;
  border: 1px solid var(--darkgold);
  box-shadow: var(--bigboxglow);
}

textarea#post {
  min-height: 200px;
}

.bbcode-toolbar {
  display: flex;
  gap: 4px;
  justify-content: space-between;
}

.bbcode-toolbar button {
  padding: 4px 8px;
  background: var(--richergreenblack);
  border: 1px solid var(--darkgold);
}

#about-section .form-section>div {
  max-width: 100%;
}

ul,
ol {
  padding: 0;
  max-width: max-content;
}

li {
  padding: 8px 0;
}

ol {
  list-style-type: none;
}

ol li {
  counter-increment: index;
}


ol li::before {
  content: counters(index, ".", decimal-leading-zero);
  text-align: right;
  font-weight: bold;
  min-width: 24px;
  padding-right: 4px;
  font-variant-numeric: tabular-nums;
  align-self: flex-start;
  background-color: var(--bleu-de-france);
  background-attachment: fixed;
  background-clip: inherit;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

li+li {
  border-top: var(--border-1px);
}

/* Achievements */

.profile-content-box {
  background: var(--richergreenblack);
  max-width: 80ch;
  margin: 0 auto;
  padding: 24px;
  border-left: 1px solid var(--seafoam42);
  border-right: 1px solid var(--seafoam42);
  box-shadow: var(--bigboxglow);
}

#profile-achievements {
  background-image: radial-gradient(900px 450px at 12% 0%, rgba(0, 0, 0, .35), transparent 55%), var(--damask), linear-gradient(180deg, var(--darkpatina), var(--richgreenblack));
  background-blend-mode: overlay, multiply, normal;
  background-color: var(--richgreenblack);
}

.achieve-wrapper {
  width: 100%;
  padding: 12px;
}

.view-toggle {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 12px;
  margin: 0 auto;
  gap: 12px;
}

.achievements {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  transition: all 0.3s ease;
}

.achievements[data-view="list"] {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.achievement {
  display: flex;
  flex: 0 0 60px;
  border: 1px solid var(--darkgold);
  background: radial-gradient(900px 450px at 12% 0%, rgba(0, 0, 0, .35), transparent 55%), linear-gradient(180deg, var(--darkpatina), var(--richgreenblack));
  background-blend-mode: overlay, normal;
  border-radius: 12px;
  box-shadow: 0 10px 18px rgba(0, 0, 0, .4);
  corner-shape: scoop;
  max-width: 100%;
  height: 170px;
  flex-wrap: wrap;
}

header.achv-head {
  display: flex;
  justify-content: start;
  align-items: baseline;
}

.achv-name {
  background: transparent;
  line-height: 1;
  padding: 12px 24px 0 24px;
  display: flex;
  align-items: end;
  justify-content: start;
  text-transform: uppercase;
  width: fit-content;
}

.achv-icon {
  width: 50px;
}

time.achv-date {
  font-family: var(--faculty);
  color: var(--gilded);
}

.achv-meta {
  background-image: var(--patina-vignette);
  font-family: var(--faculty);
  padding: 4px 24px;
  width: 100%;
  border-radius: 0 0 12px 12px;
  corner-shape: scoop;
}

p.achv-desc {
  padding: 12px 24px;
  background: rgba(0, 12, 13, .69);
}

.big-scoops {
  mask: radial-gradient(12px at 25px 25px, transparent 98%, black) -20px -20px;
  overflow: hidden;
}

div#guidebook {
  max-width: 100vw;
  margin-left: 48px;
}

#wiki-page,
#forums-homepage {
  flex-wrap: nowrap;
  position: relative;
  min-height: 800px;
}

header.guidebook-mainheader {
  padding: 12px;
  text-align: center;
}

nav.wiki-tools {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  margin: 0 auto;
  gap: 12px;
}

#toc {
  max-width: 250px;
  gap: 0;
  position: sticky;
  top: 0;
  height: min-content;
}

#toc h2,
#toc h3,
#toc h4,
#toc h5 {
  font-family: var(--faculty);
  text-align: left;
}

#toc h2 {
  font-size: 1.5rem;
  text-align: start;
  padding: 12px;
  border-bottom: 1px solid var(--darkgold);
  font-family: var(--ac-hunter);
}

.toc-section {
  width: 100%;
  padding: 12px;
}

#toc h3 {
  font-size: 1rem;
  line-height: 1.5;
}

#toc h4 {
  font-size: 1rem;
  line-height: 1.5;
  padding-left: 6px;
}

#toc ul {
  font-family: var(--faculty);
}

div#wiki-page-content {
  gap: 0;
  flex-wrap: nowrap;
}

.page-title {
  padding: 12px;
  padding-bottom: 0;
}

nav.wiki-page-meta {
  width: -moz-available;
  background: var(--richergreenblack);
  padding: 4px 16px;
  font-family: var(--faculty);
  color: var(--gilded);
  font-size: .875rem;
  margin: 0 auto;
  border: 1px solid var(--darkgold);
  corner-shape: scoop;
  border-radius: 8px;
  text-transform: uppercase;
  display: flex;
  gap: 48px;
  z-index: 1;
  justify-content: space-evenly;
  margin: 0 24px;
}

.wiki-page-body-wrapper {
  width: 100%;
  height: -moz-available;
}

article.wiki-page-body.post-content {
  max-width: -moz-available;
  margin: 0 48px;
  display: flex;
}

section.wiki-page-content-block {
  display: block;
}

aside.wiki-page-sidebar {
  max-width: 420px;
  min-width: 250px;
  display: flex;
  position: relative;
  border: 1px solid var(--darkgold);
  background: radial-gradient(900px 450px at 12% 0%, var(--richgreenblack), transparent 45%), var(--damask), linear-gradient(180deg, var(--darkpatina), var(--richgreenblack));
  background-blend-mode: overlay, multiply, normal;
  background-size: contain;
  background-attachment: fixed;
  background-position: left center;
  corner-shape: scoop;
  border-radius: 12px;
}



.infobox-general td {
  width: 200px;
  text-transform: none;
}

.post-content {
  width: 100%;
  min-width: min-content;
  background: var(--richergreenblack);
  padding: 48px;
  border-color: var(--seafoam69);
  border-width: 1px;
  border-style: solid;
  border-top: 0;
  border-bottom: 0;
  box-shadow: var(--bigboxglow);
  word-break: auto-phrase;
  line-break: loose;
  line-height: 1.875;
  max-width: 100ch;
  min-height: min-content;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.post-content h1 {
  text-transform: uppercase;
  text-align: center;
  line-height: .75;
}

.post-content h2 {
  color: var(--seafoam);
  text-transform: uppercase;
}

.post-content h3 {
  text-transform: uppercase;
  font-size: 2rem;
  margin: 24px 0 12px 0;
}


#search-page .content-box {
  flex-wrap: nowrap;
}

#directory-page .content-box {
  flex-wrap: nowrap;
}

.directory-wrapper {
  gap: 12px;
  padding: 12px;
}

.directory-list,
.search-list {
  display: flex;
  /*! gap: 12px; */
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.directory-item,
.search-item {
  border: var(--border-1px);
  background-color: var(--richgreenblack);
  display: flex;
  height: 100%;
  min-width: 144px;
  max-width: 368px;
  width: 100%;
}

.directory-item-inner,
.search-item-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
  width: 100%;
  position: relative;
  z-index: 2;
  flex-direction: column;
  height: 100%;
  align-content: start;
}

.directory-item header,
.directory-item footer {
  background-color: var(--richergreenblack);
  min-height: 1rem;
  height: auto;
  /*! padding: 12px; */
  z-index: 3;
}

.directory-item header {
  border-bottom: 1px solid var(--darkgold);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
  position: relative;
  min-height: 144px;
}

.directory-item h3,
.search-item h3 {
  font-size: 1.5rem;
  line-height: 1;
  width: 100%;
  text-transform: revert;
  min-height: 64px;
}

.directory-item-mid {
  z-index: 2;
  padding: 8px;
  position: relative;
  height: fit-content;
  display: grid;
  grid-template-areas:
    "avatar meta " "blurb  blurb";
  grid-template-columns: 100px auto;
  gap: 8px;
  grid-template-rows: 100px auto;
}

.character-meta-wrapper {
  color: var(--gilded);
  font-family: var(--faculty);
  font-size: .75rem;
  gap: 8px;
  padding: 12px 0;
  grid-area: meta;
  line-height: .75;
  justify-content: start;
  align-content: start;
  max-width: 254px;
}

.character-meta {
  display: inline;
  gap: 4px;
  height: min-content;
  grid-template-columns: auto auto;
  line-height: 1.1;
}

.character-meta i {
  height: 16px;
  font-size: 12px;
  color: var(--gilded);
  width: 16px;
  padding-right: 4px;
  display: inline-block;
}

.character-blurb {
  height: min-content;
  grid-area: blurb;
  background: rgba(0, 8, 8, .69);
  border-radius: 10px;
  border: 1px solid var(--seafoam42);
  height: 196px;
  overflow-y: auto;
  scrollbar-width: thin;
}

.directory-item footer {
  border-top: 1px solid var(--darkgold);
  padding: 4px;
  text-align: center;
  font-size: .75rem;
}

footer p {
  font-size: inherit;
  font-family: var(--faculty);
}

.main-img-wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  background-position: center;
  opacity: .15;
  background-repeat: no-repeat;
  background-size: cover;
}

.directory-item .profile-body {
  padding: 12px;
  height: 100%;
  font-size: .75rem;
  line-height: 1.6;
  background: transparent;
  border: none;
  min-height: 100%;
}

.character-stats {
  display: flex;
  justify-content: space-evenly;
  color: var(--gilded);
  font-size: 14px;
  padding: 8px;
  background: rgba(21, 95, 155, 0.1);
}

.character-stats>div {
  display: flex;
  gap: 4px;
  font-family: var(--faculty);
  font-size: .75rem;
}

.player-meta {
  font-family: var(--faculty);
  letter-spacing: 1px;
  color: var(--gilded);
}

.directory-summary,
.search-summary {
  display: flex;
  width: 100%;
  padding: 12px;
  background: rgb(0 8 8 / 69%);
  border-top: 1px solid var(--roses50);
  justify-content: space-around;
  align-items: center;
}

.directory-summary>div,
.search-summary>div {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.directory-summary p,
.search-summary p {
  font-size: 1.15rem;
  font-family: var(--faculty);
  color: var(--bleu-de-france);
}

.directory-table,
.search-table {
  width: 100%;
  padding: 12px;
}

.results-wrapper {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 12px;
}

div#post-results {
  flex-direction: column;
}

.search-item.post-result {
  width: 100%;
}

.post-result .post-row-inner {
  display: grid;
  grid-template-areas:
    "author content content content"
    "meta content content content"
    "meta content content content";
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  padding: 0 24px;
  grid-gap: 12px;
}

section.post-meta {
  grid-area: meta;
}

#post-results article.post-content {
  min-height: 100px;
  max-height: 300px;
  overflow-y: auto;
  width: 100%;
  height: 100%;
  padding: 12px;
  margin: 0;
  max-width: -moz-available;
  grid-area: content;
}

.search-items-wrapper {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-gap: 12px;
}


.character-group {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  align-items: start;
  background: var(--richergreenblack);
  padding: 12px;
  border: 1px solid var(--seafoam42);
}

header,
footer,
section,
nav {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
}

.results-wrapper h3 {
  width: 100%;
  text-align: left;
  justify-content: start;
  display: flex;
  line-height: .85;
  align-items: center;
  padding-bottom: 0;
}

.player-results-wrapper {
  display: flex;
  flex-wrap: wrap;
  flex: 1 0 0;
  min-height: 150px;
  justify-content: space-between;
  align-items: start;
  flex-direction: column;
}


.post-row {
  border: 1px solid var(--darkgold);
  border-radius: 18px;
  padding: 0;
  flex: 1 0 250px;
  background: rgba(0, 12, 13, .69);
  max-width: 420px;
  gap: 0;
  background: radial-gradient(900px 450px at 12% 0%, var(--richgreenblack), transparent 45%), var(--damask), linear-gradient(180deg, var(--darkpatina), var(--richgreenblack));
  background-blend-mode: overlay, multiply, normal;
  background-size: contain;
  background-attachment: fixed;
  background-position: left center;
}

#view-topic-page .post-row {
  max-width: 100%;
}

.post-row .content-box-inner {
  gap: 0;
  flex-direction: row;
  width: 100%;
  flex-wrap: wrap;
  min-height: 600px;
}

.post-header {
  display: flex;
  width: 100%;
  border-bottom: 1px solid var(--roses);
  justify-content: center;
  align-items: center;
  min-height: 250px;
  background-position: center;
  background-blend-mode: overlay;
  max-height: 420px;
}

.post-author {
  width: 100%;
  height: 100%;
  grid-area: author;
}

.post-author-banner {
  height: 100%;
  display: grid;
  padding: 48px;
  justify-content: start;
  align-items: center;
  border-radius: 18px 18px 0 0;
  corner-shape: scoop;
  grid-template-areas:
    "avatar author"
    "avatar quote ";
}

.post-author-banner h2 {
  width: auto;
  grid-area: author;
  text-align: left;
  font-family: var(--fleur);
  text-transform: none;
  font-size: 5rem;
}

.post-author-banner h2 a {
  width: 100%;
  display: block;
}

.post-author {
  width: 100%;
  height: 100%;
}

.post-author-quote {
  grid-area: quote;
  width: 100%;
  margin: 0;
  padding: 9px;
  min-width: 30ch;
  max-width: 150ch;
  border-radius: 8px;
}

.post-author-quote blockquote::before {
  font-size: 4rem;
  top: -36px;
}

.post-author-quote blockquote::after {
  font-size: 4rem;
  bottom: -70px;
}

.post-author-quote blockquote p {
  font-size: .75rem;
  line-height: 1.3;
}

.post-middle {
  position: relative;
  min-height: 450px;
  display: flex;
  width: 100%;
  justify-content: space-evenly;
  flex-direction: row;
  align-items: flex-start;
}

.posts-wrapper .content-box:nth-of-type(even) .post-middle {
  flex-direction: row-reverse;
}

.post-sidebar {
  position: sticky;
  top: 0;
  max-height: none;
  align-self: flex-start;
  max-width: 300px;
  padding: 48px 0;
  gap: 12px;
  display: flex;
  flex-direction: column;
  width: 350px;
}

.post-sidebar .main_img-wrapper {
  max-width: 300px;
  width: 300px;
}

.post-sidebar .main_img-border {
  max-height: 450px;
  border-top-left-radius: 150px;
  border-top-right-radius: 150px;
}

.post-sidebar img.main_img {
  height: 442px;
  width: 292px;
  max-width: 300px;
  border-top-left-radius: 150px;
  border-top-right-radius: 150px;
}

#post-aesthetic-top {
  padding-bottom: 48px;
}

#post-aesthetic-bottom {
  padding-top: 48px;
}

.post-row-subheader {
  min-height: 48px;
  background: var(--richergreenblack), var(--damask);
  width: 100%;
  background-blend-mode: color, normal;
  background-color: var(--richgreenblack);
  border-bottom: 1px solid var(--roses50);
  z-index: 3;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
}

.post-row-subheader>section {
  width: auto;
  margin: 0;
  gap: 24px;
  font-size: .875rem;
  line-height: 1;
  font-family: var(--faculty);
  color: var(--gilded);
}

.post-buttons {
  align-self: end;
}

.post-buttons .button-icon-only {
  font-size: 20px;
}

.button-icon-only {
  padding: 0;
}

.post-meta {
  display: flex;
  gap: 7px;
  align-items: center;
  height: fit-content;
}

.post-meta-label-icon {
  display: inline-block;
  height: 14px;
  width: 14px;
}

.mini-profile {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: start;
  align-items: start;
  max-width: 300px;
}

.mini-profile-wrapper {
  flex: 1 0 150px;
  display: grid;
  justify-content: start;
  align-items: start;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
}

.mini-profile-wrapper label {
  line-height: 1.875;
  min-width: 0;
  color: var(--gilded);
  align-self: center;
}

.mini-profile-wrapper span {
  line-height: 1;
}



.post-row .mini-aesthetic-wrapper {
  height: fit-content;
  width: 100%;
  max-width: 69ch;
  margin: 0 auto;
}

.post-middle .collage-grid {
  gap: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: fit-content;
  width: 100%;
}

.post-footer {
  height: 69px;
  background: var(--richergreenblack), var(--damask);
  width: 100%;
  background-blend-mode: color, normal;
  background-color: var(--richgreenblack);
  border-bottom-left-radius: 18px;
  border-bottom-right-radius: 18px;
  corner-shape: scoop;
  padding: 12px;
  z-index: 1;
  color: var(--gilded);
  font-family: var(--faculty);
  text-transform: uppercase;
  border-top: 1px solid var(--roses50);
  text-align: center;
}

.ac-reg {
  font-weight: 400;
}

.ac-bold {
  font-weight: 700;
}

.ac-hunter {
  font-family: "p22-arts-and-crafts-hunter", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.ac-tall {
  font-family: "p22-arts-and-crafts-tall", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.content-box.admin-panel {
  flex-direction: row;
  flex-wrap: wrap;
}

.content-box.admin-panel>div {
  flex: 1 0 500px;
  gap: 0;
  padding-bottom: 24px;
  justify-content: start;
  align-items: center;
}

header.admin-dash-subheader {
  padding: 12px 24px 0 24px;
  background: var(--richergreenblack);
  border-radius: 18px 18px 0 0;
  corner-shape: scoop;
  background: var(--patina-vignette);
  border-bottom: 1px solid var(--roses50);
  text-transform: uppercase;
  line-height: 1;
}

.content-box-inner#character-ac-trackers {
  width: 100%;
  flex: 1 0 100%;
  padding: 12px;
}

#fontScale {
  display: flex;
  align-items: center;
  gap: 6px;
}

#fontScale button {
  font-family: var(--faculty);
  font-size: .75rem;
  padding: 6px 12px;
  line-height: 1;
  background: transparent;
  border: none;
  color: var(--hotred);
  opacity: .69;
  transition: all 0.3s ease;
}

#fontScale button:hover {
  opacity: 1;
  color: var(--gildedwhite);
  text-shadow: var(--text-glow);
}

#fontScaleOut {
  min-width: 3.5ch;
  text-align: center;
  font-family: var(--faculty);
  font-size: .75rem;
  color: var(--gildedwhite);
}

#fontScale [data-act="reset"] {
  padding: 2px 8px;
}

.pagination {
  display: flex;
  flex-wrap: wrap;
  width: min-content;
}

.pager-numbers {
  padding: 12px;
  display: flex;
  gap: 16px;
  width: 100%;
  justify-content: start;
  align-items: center;
}

.pager-numbers span,
.pager-numbers a {
  background-color: rgba(0, 12, 13, .69);
  padding: 4px 16px;
  border: 1px solid var(--darkgold);
  border-radius: 6px;
  corner-shape: scoop;
}

.topic-actions nav.pager-numbers {
  padding: 0;
}

span.disabled {
  opacity: .42;
}

.profile-sidebar {
  background: rgba(0, 12, 13, .69);
  border-radius: 18px;
  border: 1px solid var(--darkpatina);
  top: 24px;
  min-width: 300px;
  max-width: 300px;
  width: 300px;
  padding: 12px;
}

.visual-identity {
  padding-bottom: 24px;
  display: flex;
  justify-content: center;
}

.big-avatar-wrapper {
  height: 250px;
  width: 250px;
}

.character-meta-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px;
  flex-direction: column;
}

.mini-nav-icon {
  font-size: 12px;
  color: var(--gilded);
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-family: var(--faculty);
  border-radius: 100%;
  align-items: center;
  line-height: 1;
  width: 100%;
  height: 100%;
}

.big-avatar-border img {
  border: 4px solid transparent;
  background: linear-gradient(var(--richgreenblack), var(--richgreenblack)) padding-box, linear-gradient(to bottom, var(--gilded), var(--darkgold)) border-box;
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
  corner-shape: round;
  border-radius: 120px 120px 0 0;
  width: 240px;
  height: 240px;
  object-fit: cover;
  box-shadow: var(--bigboxglow);
}


.overview-block {
  width: min-content;
  flex: 2 0 0;
  height: min-content;
  gap: 12px;
  justify-content: space-around;
}

.char-intro-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: start;
  width: 100%;
  flex-wrap: wrap;
  gap: 12px;
}

nav.profile-action-bar {
  margin: 0;
  padding: 6px 12px;
  color: var(--gildedbright);
  font-family: var(--faculty);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  width: 100%;
  display: grid;
  justify-content: center;
  border-radius: 12px;
  corner-shape: scoop;
  border: 1px solid var(--darkgold);
  background: radial-gradient(900px 450px at 12% 0%, var(--richgreenblack), transparent 45%), var(--damask), linear-gradient(180deg, var(--darkpatina), var(--richgreenblack));
  background-blend-mode: overlay, multiply, normal;
  background-size: contain;
  background-attachment: fixed;
  background-position: left center;
  align-items: center;
  grid-template-columns: auto auto;
  column-gap: 12px;
}

.char-intro-summary {
  display: flex;
  flex-wrap: wrap;
  padding-top: 24px;
  width: 100%;
  gap: 12px;
}

.summary-section {
  display: flex;
  font-family: var(--faculty);
  font-size: .75rem;
  line-height: 1.25;
  letter-spacing: 1.5px;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  min-height: min-content;
  flex-direction: column;
  gap: 6px;
  width: auto;
}

.profile-row {
  width: 100%;
  display: flex;
  justify-content: start;
  align-content: start;
  gap: 12px;
  height: 100px;
  padding: 12px 0;
}

.profile-row-label {
  position: absolute;
  height: 100px;
  font-family: var(--fleur);
  font-size: 5rem;
  opacity: .22;
  z-index: 1;
  letter-spacing: 0;
  margin-top: -50px;
  text-align: right;
}

.profile-row-inner {
  display: grid;
  justify-content: start;
  align-items: start;
  width: 100%;
  z-index: 1;
  grid-gap: 12px;
}

#character-names .profile-row-inner {
  grid-template-columns: 2fr 2fr 2fr;
}

#character-labels .profile-row-inner {
  grid-template-columns: 144px 1fr 1fr;
}

#birth-details .profile-row-inner {
  grid-template-columns: 44px 3fr 2fr 2fr;
}

#social-details .profile-row-inner {
  grid-template-columns: 1fr 1fr 1fr 2fr;
}

#relationship-details .profile-row-inner {
  grid-template-columns: 2fr 4fr;
}

.profile-row>section {
  z-index: 2;
}

.field-wrapper {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  flex-direction: column;
}

.field-label-wrapper {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 8px;
  height: 28px;
}

section.field-value-wrapper {
  width: 100%;
  align-items: center;
  gap: 8px;
  height: 28px;
  flex-wrap: nowrap;
}

.field-label {
  color: var(--gilded);
  text-transform: uppercase;
}

.profile-hint-marker {
  color: var(--chestnut);
  padding: 0 2px;
}

.field-value {
  width: 100%;
  max-width: 100%;
  margin: 0;
}

button.editor-button {
  padding: 0;
  color: var(--darkgold);
}

span.inline-edit-wrapper {
  width: 100%;
}

.char-intro-summary input.inline-edit-control {
  font-family: var(--faculty);
}

.posneg-traits {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
  align-items: center;
  justify-content: center;
  font-family: var(--faculty);
  text-transform: uppercase;
  text-align: right;
  row-gap: 12px;
  column-gap: 8px;
  margin: 0 auto;
}

.profile-scrollable-list-wrapper {
  overflow-y: auto;
  background: rgb(64 224 208 / 8%);
  padding: 4px 20px;
  border: 1px solid var(--darkerpatina);
  width: 100%;
  height: 100px;
  border-radius: 12px 0 0 12px;
  corner-shape: scoop;
  font-family: var(--faculty);
  font-weight: 300;
  text-transform: uppercase;
  font-size: .6rem;
}

#occupations .profile-scrollable-list-wrapper {
  width: 100%;
}

#profile-wrapper .trait-label {
  color: var(--gilded);
  line-height: 1.15;
}

.positive-trait,
.negative-trait {
  width: 100%;
  height: 12px;
  display: flex;
  justify-content: start;
  align-items: center;
  border-radius: 12px;
  border: 1px solid var(--darkpatina);
}

.positive-trait {
  background: var(--richgreenblack);
}

.negative-trait {
  background: var(--richergreenblack);
}

.positive-bar,
.negative-bar {
  height: 8px;
  border-radius: 4px;
  margin-left: 2px;
}

.positive-bar {
  background-color: var(--gilded);
}

.negative-bar {
  background-color: var(--chestnut);
}

.profile-zone {
  width: 100%;
  min-height: 200px;
  background: rgba(135, 204, 135, .06);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  corner-shape: scoop;
  border-radius: 18px;
}

header.profile-zone-header {
  height: 144px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px 18px 0 0;
  corner-shape: scoop;
}

.profile-zone-padding {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  justify-content: space-between;
  gap: 12px;
  height: fit-content;
  padding: 12px;
}

#personality .profile-zone-padding {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr;
  grid-template-areas:
    "row row body body"
    "row row body body"
    "side side body body"
    "side side body body";
}

#summary .profile-body {
  max-height: 580px;
  overflow-y: auto;
}

#personality .profile-body {
  grid-area: body;
  max-height: 554px;
  display: grid;
  justify-content: center;
  align-items: start;
}

#personality .profile-body .profile-block {
  height: 168px;
  overflow-y: auto;
  display: block;
}

#personality .profile-row {
  height: fit-content;
  grid-area: row;
  padding: 0;
  align-self: center;
}

#occupations .profile-row {
  height: auto;
}

#personality .profile-side {
  width: auto;
  grid-area: side;
}

#likes ul,
#dislikes ul {
  width: 100%;
  max-width: 100%;
}

.profile-block-heading h4 {
  text-transform: uppercase;
  color: var(--gilded);
  font-size: 1.333rem;
  text-shadow: var(--header-text-shadow);
}

.profile-body {
  flex: 1 0 0;
  background: rgba(0, 8, 8, .69);
  padding: 12px;
  border-radius: 10px;
  border: 1px solid var(--seafoam42);
  min-height: 300px;
  height: -moz-available;
}

h3.field-label {
  font-weight: normal;
  color: var(--hotred);
  text-align: right;
}

.profile-side {
  width: 200px;
  display: flex;
  flex-wrap: wrap;
  justify-content: stretch;
  align-items: start;
  gap: 20px;
  height: 100%;
}

.profile-narrow {
  max-width: 100px;
}

.mini-aesthetic-wrapper {
  height: 100%;
  display: flex;
}

.main_img-wrapper {
  border-top-right-radius: 100%;
  border-top-left-radius: 100%;
  height: 450px;
}

.profile-side .main_img-wrapper {
  height: 300px;
  width: 200px;
}

.main_img-border {
  border-top-right-radius: 100px;
  border-top-left-radius: 100px;
  border: 4px solid transparent;
  background: linear-gradient(var(--richgreenblack), var(--richgreenblack)) padding-box, linear-gradient(to bottom, var(--gilded), var(--darkgold)) border-box;
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
  width: 100%;
  max-height: 308px;
}

aside .main_img-wrapper {
  max-width: 300px;
}


img.main_img {
  border-top-right-radius: 100px;
  box-shadow: var(--bigboxglow);
  height: 292px;
  width: 192px;
  object-fit: cover;
  max-width: 200px;
  border-top-left-radius: 100px;
}

hr {
  width: 100%;
  height: 1px;
  background: var(--darkgold);
  border: 0;
  margin: 20px 0;
}

.topics-list {
  width: 100%;
}

.syslog-container {
  margin: 0 auto;
  padding: 12px;
  width: 100%;
}

.syslog-message {
  border: var(--border-1px);
  padding: 12px;
  border-radius: 8px;
  border-color: var(--gildedbright);
  min-width: 200px;
  max-width: 690px;
  margin: 0 auto;
  background: var(--laveaux-panorama);
  background-blend-mode: multiply;
  background-color: rgb(0 12 13);
  text-align: center;
  box-shadow: 0 0 69px var(--darkbleu);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.syslog-message a {
  font-weight: 700;
}

.syslog-container img {
  height: 42px;
}

.search-query-highlight {
  background-color: var(--darkpatina);
  padding: 0 2px;
  font-weight: 600;
  color: var(--gildedhwhite);
}

#keyword-search-results {
  width: 100%;
  padding: 12px;
}

#portal .sitestats-wrapper {
  width: 100%;
  font-size: .75rem;
  display: grid;
  justify-content: space-between;
  align-items: start;
  gap: 12px;
  height: auto;
  grid-template-columns: 100%;
  grid-template-rows: 1fr 1fr auto;
  grid-template-areas:
    "now     "
    "recently"
    "legend  ";
}

.sitestats-section {
  font-family: var(--faculty);
  padding-bottom: 12px;
}

.sitestats-section td {
  padding: 4px;
}

header.sitestats-section__header {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

.sitestats__stats-block {
  background: rgba(0, 12, 13, .69);
  padding: 8px;
  border: 1px solid var(--darkgold);
  color: var(--bleu-de-france);
  justify-content: space-evenly;
  align-content: center;
  width: 100%;
  font-family: var(--faculty);
  text-transform: uppercase;
  border-radius: 8px;
  corner-shape: scoop;
}

#online-now,
#online-recently,
#key-legend {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: start;
  align-items: center;
  flex-direction: column;
  text-align: center;
  height: 100%;
  min-height: 144px;
}

#online-now {
  grid-area: now;
}

#online-recently {
  grid-area: recently;
}

#key-legend {
  grid-area: legend;
}

.legend-list-wrapper {
  text-align: center;
  line-height: 1.3;
  display: flex;
  padding: 0 24px 24px 24px;
  width: 100%;
  gap: 24px;
  justify-content: space-evenly;
}

#recent-posts {
  grid-area: posts;
}

.legend-list-wrapper>section {
  display: block;
}

#portal h3 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-transform: uppercase;
  gap: 4px;
  width: 100%;
  padding: 12px 24px 8px 24px;
}

.number-styles {
  font-size: inherit;
  font-family: var(--rosella-solid);
}

.bigicon-wrapper {
  font-size: 2rem;
  line-height: 1;
  color: var(--bleu-de-france);
}

.userlink,
a.userlink,
.post-author a {
  line-height: 1;
  letter-spacing: 1.5px;
  font-size: inherit;
  font-family: inherit;
}

header h3 a.userlink {
  display: block;
  width: 100%;
  padding: 12px;
  margin-bottom: -10px;
}

i.fi {
  font-style: normal;
  font-size: inherit;
  height: inherit;
  width: auto;
  display: inline-flex;
  align-self: center;
}

label i.fi {
  height: auto;
  width: auto;
}

.userlink.group-role-1,
a.userlink.group-role-1 {
  color: var(--roses)
}

.userlink.group-role-2,
a.userlink.group-role-2 {
  color: var(--seafoam);
}

.userlink.group-role-3,
a.userlink.group-role-3 {
  color: purple;
}

.userlink.group-role-4,
a.userlink.group-role-4 {
  color: turquoise;
}

.userlink.group-role-5,
a.userlink.group-role-5 {
  color: orange;
}

.userlink.group-role-6,
a.userlink.group-role-6 {
  color: darkgray;
}

.userlink.group-role-7,
a.userlink.group-role-7 {
  color: var(--gildedbright);
}

.post-author a {
  color: var(--gildedbright);
}


a.userlink:hover,
a.toc-link:hover {
  color: var(--gildedwhite);
  text-shadow: var(--text-glow);
}

.sitestats-header {
  display: flex;
  padding: 12px;
  gap: 12px;
  text-align: center;
  font-size: 1rem;
  line-height: 1.15;
}

.recentpost-wrapper {
  width: 100%;
  text-align: left;
  padding: 12px;
  border-bottom: 1px solid var(--darkpatina);
  font-family: var(--faculty);
}

#recentposts {
  gap: 12px;
  padding: 12px;
  padding-top: 0;
}

#portal .recentpost-wrapper h4 {
  text-align: left;
  font-size: 1.25rem;
  letter-spacing: 1.5px;
  padding: 0;
  align-self: baseline;
}

.last-post-author,
.topic-title {
  line-height: 1;
  color: var(--gildedbright);
  font-family: var(--merriserif);
  font-weight: 600;
  font-style: italic;
  font-size: 1rem;
  letter-spacing: 0px;
}

.topic-title {
  font-family: var(--merriserif);
  font-weight: 600;
  font-style: italic;
}

.recentpost-wrapper .last-post-author a {
  font-size: inherit;
  font-family: inherit;
  letter-spacing: 0;
}

.last-post-meta-label {
  text-transform: uppercase;
  font-size: .6rem;
  letter-spacing: 2px;
}

.last-post-time {
  font-size: .5rem;
}

.post-date {
  color: var(--seafoam69);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  line-height: 1;
}


.hint-wrapper {
  display: none;
}

.hint-wrapper.reveal-hint {
  display: flex;
}

.language-wrapper {
  border-bottom: 1px dotted var(--darkpatina);
}

.align-right {
  text-align: right;
}

.align-center {
  text-align: center;
}

.align-left {
  text-align: left;
}

.list-marker {
  color: var(--darkgold);
}

.spoilered {
  filter: blur(5px);
  transition: filter 0.3s ease-in-out;
}

.spoilered:hover {
  filter: blur(0);
}

pre {
  background: rgb(64 224 208 / 8%);
  padding: 2px 6px;
  border: 1px solid var(--darkpatina);
  width: fit-content;
  display: flex;
  text-wrap-mode: wrap;
  margin: 1rem 0;
}

code {
  width: 100%;
  display: flex;
  text-wrap-mode: wrap;
}

#dashboard-wrapper {
  flex-direction: row;
  flex-wrap: wrap;
}

.dashboard-zone {
  flex: 1 0 33%;
}

#needs-reply,
#Dashboard_Tracker {
  flex: 2 0 60%;
}

.dashboard-header {
  display: flex;
  gap: 12px;
}

#player-quickview {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: start;
  gap: 12px;
  width: 100%;
}

.dashboard-header .session-notice {
  font-size: 3.14rem;
  padding: 12px;
  font-family: var(--playersignaturefont), var(--merriserif), Georgia, 'Times New Roman', Times, serif;
  background: rgba(0, 12, 13, .69);
  corner-shape: scoop;
  border-radius: 12px;
  padding: 12px;
}

.quickview-stats {
  display: flex;
  flex-wrap: wrap;
  line-height: 1;
  font-family: var(--faculty);
  justify-content: space-between;
  align-items: start;
  background: rgba(0, 12, 13, .69);
  corner-shape: scoop;
  border-radius: 12px;
  padding: 12px;
  width: 100%;
  gap: 12px;
}

.dashboard-section {
  padding: 12px;
  display: flex;
  flex-wrap: wrap;
  background: transparent;
  border: 0;
}

.tracker-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.block-header {
  width: 100%;
  padding: 12px;
  color: var(--hotred);
}

.my-characters-wrapper {
  display: flex;
  gap: 12px;
  min-height: 300px;
  flex-wrap: wrap;
}

.my-characters-wrapper>section {
  background: var(--richergreenblack);
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--darkgold);
  flex: 1 0 0;
}

.list-topics {
  display: flex;
  flex-wrap: wrap;
  gap: 50px;
}

.topic-row {
  display: flex;
  border-radius: 18px;
  corner-shape: scoop;
  border: 1px solid var(--seafoam42);
  justify-content: start;
  align-content: start;
  flex-direction: row;
  flex-wrap: nowrap;
  width: 100%;
  min-height: min-content;
  height: 100%;
  max-height: max-content;
  flex: 1 0 500px;
  gap: 8px;
  background: rgb(51 128 228 / 10%);
  padding: 12px;
}

.topic-row.topic-mini {
  border-radius: 12px;
}

.topic-row-meta {
  display: flex;
  flex-direction: column;
  height: 100px;
  justify-content: space-between;
  align-content: space-between;
  flex: 1 0 0;
}

.topic-row-header {
  width: 100%;
  padding: 12px 24px;
  background: rgb(21 95 155 / 15%);
  border-radius: 18px 18px 0 0;
  corner-shape: scoop;
  display: flex;
  flex-wrap: wrap;
}

.topic-mini .topic-row-header {
  padding: 0;
  border-radius: 12px 12px 0 0;
}

h4.topic-title {
  padding-left: 50px;
}

.topic-description {
  font-style: italic;
  width: 100%;
  padding-top: 12px;
}

section.topic-actions {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.topic-action.search form {
  padding: 12px;
  gap: 12px;
  flex-direction: row;
}

.topic-people {
  width: 100%;
  display: flex;
  justify-content: start;
  align-items: end;
  line-height: 1;
}

.la-label,
.topic-people a,
time.last-time {
  line-height: 1;
}


.password-wrapper {
  position: relative;
}

.password-wrapper input {
  padding-right: 24px;
}

.password-wrapper button {
  border-radius: 0;
  position: absolute;
  right: 0;
  top: 0;
  padding: 7px;
}

.account-forms .help-row {
  margin-top: 12px;
}

#login .other-options {
  padding: 12px;
}

p a {
  font-weight: bold;
}

.badge {
  height: 40px;
  width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 12, 13, .69);
  border-radius: 100%;
  border: 1px solid var(--darkgold);
  color: var(--hotred);
  position: absolute;
}

.grecaptcha-badge {
  bottom: 52px !important;
}

section#my-character-data {
  gap: 48px;
  background: rgba(0, 12, 13, .69);
  border-radius: 18px;
  corner-shape: scoop;
  padding: 12px;
  border: 1px solid var(--darkpatina);
  min-height: 500px;
}

.my-char-chart {
  width: 600px;
}

canvas.character-chart {
  max-height: 420px;
}

.posts-list {
  gap: 12px;
}

#session-notice {
  line-height: 1.15;
  text-transform: uppercase;
  font-family: var(--faculty);
  text-align: center;
  width: 100%;
  justify-content: center;
  color: var(--gilded);
}

.gazette {
  gap: 4px;
  background: rgba(0, 12, 13, .69);
  border-radius: 12px;
  corner-shape: scoop;
  border: 1px solid var(--darkgold);
  background: radial-gradient(900px 450px at 12% 0%, var(--richgreenblack), transparent 45%), var(--damask), linear-gradient(180deg, var(--darkpatina), var(--richgreenblack));
  background-blend-mode: overlay, multiply, normal;
  background-size: contain;
  background-attachment: fixed;
  background-position: left center;
  margin: 0 12px;
  padding: 12px;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.gazette-post-row-inner {
  justify-content: start;
  align-content: start;
  gap: 12px;
}

.gazette-options,
.event-options {
  border-radius: 0 0 12px 12px;
  background: var(--richergreenblack);
  border-top: 1px solid rgba(89, 70, 34, 0.42);
  padding: 8px 12px;
  font-size: .75rem;
  font-family: var(--faculty);
  text-transform: uppercase;
  color: var(--darkgold);
  text-align: center;
}

.gazette-blurb {
  display: flex;
  flex-direction: column;
  height: min-content;
}

.gazette-blurb p {
  font-size: .75rem;
}

.gazette-blurb-options,
.event-blurb__options {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  font-family: var(--faculty);
  text-transform: uppercase;
  font-size: .75rem;
  width: 100%;
}

.gazette-meta,
.event-meta {
  font-family: var(--faculty);
  text-transform: uppercase;
  color: var(--gilded);
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  width: 100%;
  gap: 4px;
  text-align: left;
  justify-content: center;
  font-size: .75rem;
  padding: 0;
}



#events .event-meta {
  width: -moz-available;
  background: var(--richergreenblack);
  padding: 4px 16px;
  font-family: var(--faculty);
  color: var(--gilded);
  font-size: .875rem;
  margin: 0 auto;
  border: 1px solid var(--darkgold);
  corner-shape: scoop;
  border-radius: 8px;
  text-transform: uppercase;
  display: flex;
  gap: 48px;
  z-index: 1;
  justify-content: space-evenly;
  margin: 0 24px;
  flex-direction: row;
}

.event-body-wrapper {
  padding: 0 24px;
}

.post-content.event-body {
  min-height: 200px;
}

.featured-img-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 12px;
}

.featured-img-border {
  max-width: 300px;
  width: 100%;
}

.featured-img-wrapper img {
  border-radius: 150px 150px 0 0;
  border: 4px solid transparent;
  object-fit: cover;
  height: auto;
  width: 100%;
  background-color: var(--darkgold);
}

#archives .post-header {
  height: auto;
  padding: 12px 24px 12px 24px;
  background: rgba(0, 12, 13, .69);
  border-top: 1px solid var(--roses);
}

.gazette-forms {
  margin: 0 auto;
}

.post-row-body {
  padding: 0 24px;
  height: 144px;
}

a.buttonlink.read-more {
  padding: 4px 8px;
  text-align: center;
  border-radius: 6px;
}

#cookie-consent {
  display: block;
  z-index: 10000000;
  position: fixed;
  bottom: 72px;
  opacity: 0;
  width: 600px;
  background: rgba(0, 12, 13, 1);
  transition: all 0.3s ease;
  right: 48px;
  border: 1px solid var(--darkgold);
  corner-shape: scoop;
  border-radius: 18px;
  transform: translateY(120%);
  pointer-events: none;
}

#cookie-consent.visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.popup-inner {
  justify-content: space-evenly;
  align-items: center;
  font-family: var(--faculty);
  line-height: 1.25;
  gap: 12px;
  padding: 12px;
}

.popup-inner section p {
  font-size: .875rem;
  line-height: 1.3;
  text-align: center;
}

.cookie-category {
  flex-wrap: nowrap;
  justify-content: space-evenly;
  display: none;
}

.cookie-consent-options {
  justify-content: space-evenly;
}

#cookie-consent button {
  width: 120px;
  height: min-content;
}

.cookie-policy-links {
  justify-content: center;
  font-family: var(--ac-hunter);
  text-transform: uppercase;
  color: var(--darkgold);
}

span.policy-link {
  width: 120px;
  font-weight: bold;
  text-align: center;
}

.rat-toast {
  position: fixed;
  bottom: 68px;
  right: 24px;
  z-index: 10001;
  display: flex;
  align-items: center;
  padding: 8px 12px;
  transition: all 0.3s ease;
  font-family: var(--faculty);
  font-size: .72rem;
  line-height: .9rem;
  letter-spacing: .5px;
  color: var(--gildedwhite);
  white-space: nowrap;
  background:
    radial-gradient(900px 450px at 12% 0%, rgba(0, 0, 0, .35), transparent 55%),
    var(--damask),
    linear-gradient(180deg, var(--darkpatina), var(--richgreenblack));
  background-blend-mode: overlay, multiply, normal;
  border: 1px solid var(--darkgold);
  border-radius: 6px;
  corner-shape: scoop;
  box-shadow: 0 8px 12px rgba(0, 12, 13, .69);
  pointer-events: none;
  max-width: 300px;
  text-wrap-mode: wrap;
  opacity: 1;
}

.rat-toast.fade-out {
  opacity: 0;
}

.rat-icon {
  width: 24px;
  height: 24px;
}

.badge-bar {
  width: 100%;
  min-height: 24px;
  padding: 8px 12px;
  background: var(--patina-vignette);
  max-height: 48px;
}

footer nav ul {
  display: flex;
  border: none;
  width: 100%;
  margin: 0 auto;
  border-radius: 8px;
  corner-shape: scoop;
  grid-template-rows: auto;
  gap: 12px;
  flex-wrap: wrap;
}

.content-box-footer-menu li+li {
  border-top: 0;
}

#character-dashboard .content-box {
  flex-wrap: nowrap;
}

.block-filters {
  width: 100%;
  background: var(--richgreenblack);
  padding: 12px;
  display: flex;
  justify-content: space-evenly;
  border-radius: 12px 12px 0 0;
}

.character_grid {
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  padding: 12px;
}

.char-name-wrapper {
  grid-area: char-name;
}

#sidebar .character-card a.char-name {
  grid-area: avatar;
}

.char-load-form {
  grid-area: char-form;
}