/*!
 * OpenSB Charla (Finalium 3)
 * Made by Chaziz for OpenSB
 */
/*! modern-normalize v3.0.1 | MIT License | https://github.com/sindresorhus/modern-normalize */
/*
Document
========
*/
/**
Use a better box model (opinionated).
*/
*,
::before,
::after {
  box-sizing: border-box;
}

html {
  /* Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3) */
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  line-height: 1.15; /* 1. Correct the line height in all browsers. */
  -webkit-text-size-adjust: 100%; /* 2. Prevent adjustments of font size after orientation changes in iOS. */
  tab-size: 4; /* 3. Use a more readable tab size (opinionated). */
}

/*
Sections
========
*/
body {
  margin: 0; /* Remove the margin in all browsers. */
}

/*
Text-level semantics
====================
*/
/**
Add the correct font weight in Chrome and Safari.
*/
b,
strong {
  font-weight: bolder;
}

/**
1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
2. Correct the odd 'em' font sizing in all browsers.
*/
code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
Add the correct font size in all browsers.
*/
small {
  font-size: 80%;
}

/**
Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.
*/
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
Tabular data
============
*/
/**
Correct table border color inheritance in Chrome and Safari. (https://issues.chromium.org/issues/40615503, https://bugs.webkit.org/show_bug.cgi?id=195016)
*/
table {
  border-color: currentcolor;
}

/*
Forms
=====
*/
/**
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
Correct the inability to style clickable types in iOS and Safari.
*/
button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}

/**
Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
*/
legend {
  padding: 0;
}

/**
Add the correct vertical alignment in Chrome and Firefox.
*/
progress {
  vertical-align: baseline;
}

/**
Correct the cursor style of increment and decrement buttons in Safari.
*/
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/**
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/
[type=search] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
Remove the inner padding in Chrome and Safari on macOS.
*/
::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to 'inherit' in Safari.
*/
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Interactive
===========
*/
/*
Add the correct display in Chrome and Safari.
*/
summary {
  display: list-item;
}

.biscuit-icon {
  /* icons! */
  display: inline-block;
  width: 16px;
  height: 16px;
  background-repeat: no-repeat;
  background-size: 16px;
}
.biscuit-icon.size-24 {
  width: 24px;
  height: 24px;
  background-size: 24px;
}
.biscuit-icon.size-32 {
  width: 32px;
  height: 32px;
  background-size: 32px;
}
.biscuit-icon.star-full {
  background-image: url("/assets/icons/star_full.svg");
}
.biscuit-icon.star-half {
  background-image: url("/assets/icons/star_half.svg");
}
.biscuit-icon.star-empty {
  background-image: url("/assets/icons/star_empty.svg");
}
.biscuit-icon.partner {
  background-image: url("/assets/icons/partner.svg");
}
.biscuit-icon.staff {
  background-image: url("/assets/icons/staff.svg");
}
.biscuit-icon.b-danger {
  background-image: url("/assets/icons/banner-danger.svg");
}
.biscuit-icon.b-primary, .biscuit-icon.b-dark {
  background-image: url("/assets/icons/banner-primary.svg");
}
.biscuit-icon.b-secondary {
  background-image: url("/assets/icons/banner-secondary.svg");
}
.biscuit-icon.b-success {
  background-image: url("/assets/icons/banner-success.svg");
}
.biscuit-icon.b-warning {
  background-image: url("/assets/icons/banner-warning.svg");
}
.biscuit-icon.search {
  background-image: url("/assets/icons/search-dark.svg");
}
.biscuit-icon.hamburger {
  background-image: url("/assets/icons/hamburger-dark.svg");
}
.biscuit-icon.caret-closed {
  background-image: url("/assets/icons/caret-closed-light.svg");
}
.biscuit-icon.caret-open {
  background-image: url("/assets/icons/caret-open-light.svg");
}
.biscuit-icon.caret-closed-header {
  background-image: url("/assets/icons/caret-closed-dark.svg");
}
.biscuit-icon.caret-open-header {
  background-image: url("/assets/icons/caret-open-dark.svg");
}
.biscuit-icon.mail {
  background-image: url("/assets/icons/mail.svg");
}
.biscuit-icon.homepage-list {
  background-image: url("/assets/icons/homepage-list-dark.svg");
}
.biscuit-icon.homepage-list.active {
  background-image: url("/assets/icons/homepage-list-light.svg");
}
.biscuit-icon.homepage-grid {
  background-image: url("/assets/icons/homepage-grid-dark.svg");
}
.biscuit-icon.homepage-grid.active {
  background-image: url("/assets/icons/homepage-grid-light.svg");
}
.biscuit-icon.placeholder {
  background-image: url("/assets/icons/placeholder.svg");
}

.page {
  padding-top: 10px;
  margin: auto;
}
.page .page-contents {
  margin: auto;
  width: 100%;
  max-width: 100%;
}
@media (min-width: 300px) {
  .page .page-contents {
    max-width: 100%;
    min-width: 270px;
    padding: 0 1rem;
  }
}
@media (min-width: 500px) {
  .page .page-contents {
    max-width: 95%;
    min-width: 420px;
    padding: 0 1rem;
  }
}
@media (min-width: 950px) {
  .page .page-contents {
    max-width: 90%;
    min-width: 640px;
    padding: 0;
  }
}
@media (min-width: 1250px) {
  .page .page-contents {
    max-width: 87.5%;
    min-width: 1200px;
    padding: 0;
  }
}
@media (min-width: 1700px) {
  .page .page-contents {
    max-width: 82.5%;
    min-width: 1500px;
    padding: 0;
  }
}

@media (min-width: 500px) {
  .grid {
    display: block;
  }
}
@media (min-width: 950px) {
  .grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 0.75rem;
  }
}
.grid.no-gap {
  gap: 0;
}

.col-1 {
  grid-column-end: span 1;
}

.col-offset-1 {
  grid-column-start: 2;
}

.row-1 {
  grid-row-end: span 1;
}

.row-offset-1 {
  grid-row-start: 2;
}

.col-2 {
  grid-column-end: span 2;
}

.col-offset-2 {
  grid-column-start: 3;
}

.row-2 {
  grid-row-end: span 2;
}

.row-offset-2 {
  grid-row-start: 3;
}

.col-3 {
  grid-column-end: span 3;
}

.col-offset-3 {
  grid-column-start: 4;
}

.row-3 {
  grid-row-end: span 3;
}

.row-offset-3 {
  grid-row-start: 4;
}

.col-4 {
  grid-column-end: span 4;
}

.col-offset-4 {
  grid-column-start: 5;
}

.row-4 {
  grid-row-end: span 4;
}

.row-offset-4 {
  grid-row-start: 5;
}

.col-5 {
  grid-column-end: span 5;
}

.col-offset-5 {
  grid-column-start: 6;
}

.row-5 {
  grid-row-end: span 5;
}

.row-offset-5 {
  grid-row-start: 6;
}

.col-6 {
  grid-column-end: span 6;
}

.col-offset-6 {
  grid-column-start: 7;
}

.row-6 {
  grid-row-end: span 6;
}

.row-offset-6 {
  grid-row-start: 7;
}

.col-7 {
  grid-column-end: span 7;
}

.col-offset-7 {
  grid-column-start: 8;
}

.row-7 {
  grid-row-end: span 7;
}

.row-offset-7 {
  grid-row-start: 8;
}

.col-8 {
  grid-column-end: span 8;
}

.col-offset-8 {
  grid-column-start: 9;
}

.row-8 {
  grid-row-end: span 8;
}

.row-offset-8 {
  grid-row-start: 9;
}

.col-9 {
  grid-column-end: span 9;
}

.col-offset-9 {
  grid-column-start: 10;
}

.row-9 {
  grid-row-end: span 9;
}

.row-offset-9 {
  grid-row-start: 10;
}

.col-10 {
  grid-column-end: span 10;
}

.col-offset-10 {
  grid-column-start: 11;
}

.row-10 {
  grid-row-end: span 10;
}

.row-offset-10 {
  grid-row-start: 11;
}

.col-11 {
  grid-column-end: span 11;
}

.col-offset-11 {
  grid-column-start: 12;
}

.row-11 {
  grid-row-end: span 11;
}

.row-offset-11 {
  grid-row-start: 12;
}

.col-12 {
  grid-column-end: span 12;
}

.col-offset-12 {
  grid-column-start: 13;
}

.row-12 {
  grid-row-end: span 12;
}

.row-offset-12 {
  grid-row-start: 13;
}

@media (min-width: 300px) {
  .col-tiny-1 {
    grid-column-end: span 1;
  }
  .col-offset-tiny-1 {
    grid-column-start: 2;
  }
  .row-tiny-1 {
    grid-row-end: span 1;
  }
  .row-offset-tiny-1 {
    grid-row-start: 2;
  }
  .col-tiny-2 {
    grid-column-end: span 2;
  }
  .col-offset-tiny-2 {
    grid-column-start: 3;
  }
  .row-tiny-2 {
    grid-row-end: span 2;
  }
  .row-offset-tiny-2 {
    grid-row-start: 3;
  }
  .col-tiny-3 {
    grid-column-end: span 3;
  }
  .col-offset-tiny-3 {
    grid-column-start: 4;
  }
  .row-tiny-3 {
    grid-row-end: span 3;
  }
  .row-offset-tiny-3 {
    grid-row-start: 4;
  }
  .col-tiny-4 {
    grid-column-end: span 4;
  }
  .col-offset-tiny-4 {
    grid-column-start: 5;
  }
  .row-tiny-4 {
    grid-row-end: span 4;
  }
  .row-offset-tiny-4 {
    grid-row-start: 5;
  }
  .col-tiny-5 {
    grid-column-end: span 5;
  }
  .col-offset-tiny-5 {
    grid-column-start: 6;
  }
  .row-tiny-5 {
    grid-row-end: span 5;
  }
  .row-offset-tiny-5 {
    grid-row-start: 6;
  }
  .col-tiny-6 {
    grid-column-end: span 6;
  }
  .col-offset-tiny-6 {
    grid-column-start: 7;
  }
  .row-tiny-6 {
    grid-row-end: span 6;
  }
  .row-offset-tiny-6 {
    grid-row-start: 7;
  }
  .col-tiny-7 {
    grid-column-end: span 7;
  }
  .col-offset-tiny-7 {
    grid-column-start: 8;
  }
  .row-tiny-7 {
    grid-row-end: span 7;
  }
  .row-offset-tiny-7 {
    grid-row-start: 8;
  }
  .col-tiny-8 {
    grid-column-end: span 8;
  }
  .col-offset-tiny-8 {
    grid-column-start: 9;
  }
  .row-tiny-8 {
    grid-row-end: span 8;
  }
  .row-offset-tiny-8 {
    grid-row-start: 9;
  }
  .col-tiny-9 {
    grid-column-end: span 9;
  }
  .col-offset-tiny-9 {
    grid-column-start: 10;
  }
  .row-tiny-9 {
    grid-row-end: span 9;
  }
  .row-offset-tiny-9 {
    grid-row-start: 10;
  }
  .col-tiny-10 {
    grid-column-end: span 10;
  }
  .col-offset-tiny-10 {
    grid-column-start: 11;
  }
  .row-tiny-10 {
    grid-row-end: span 10;
  }
  .row-offset-tiny-10 {
    grid-row-start: 11;
  }
  .col-tiny-11 {
    grid-column-end: span 11;
  }
  .col-offset-tiny-11 {
    grid-column-start: 12;
  }
  .row-tiny-11 {
    grid-row-end: span 11;
  }
  .row-offset-tiny-11 {
    grid-row-start: 12;
  }
  .col-tiny-12 {
    grid-column-end: span 12;
  }
  .col-offset-tiny-12 {
    grid-column-start: 13;
  }
  .row-tiny-12 {
    grid-row-end: span 12;
  }
  .row-offset-tiny-12 {
    grid-row-start: 13;
  }
}
@media (min-width: 500px) {
  .col-small-1 {
    grid-column-end: span 1;
  }
  .col-offset-small-1 {
    grid-column-start: 2;
  }
  .row-small-1 {
    grid-row-end: span 1;
  }
  .row-offset-small-1 {
    grid-row-start: 2;
  }
  .col-small-2 {
    grid-column-end: span 2;
  }
  .col-offset-small-2 {
    grid-column-start: 3;
  }
  .row-small-2 {
    grid-row-end: span 2;
  }
  .row-offset-small-2 {
    grid-row-start: 3;
  }
  .col-small-3 {
    grid-column-end: span 3;
  }
  .col-offset-small-3 {
    grid-column-start: 4;
  }
  .row-small-3 {
    grid-row-end: span 3;
  }
  .row-offset-small-3 {
    grid-row-start: 4;
  }
  .col-small-4 {
    grid-column-end: span 4;
  }
  .col-offset-small-4 {
    grid-column-start: 5;
  }
  .row-small-4 {
    grid-row-end: span 4;
  }
  .row-offset-small-4 {
    grid-row-start: 5;
  }
  .col-small-5 {
    grid-column-end: span 5;
  }
  .col-offset-small-5 {
    grid-column-start: 6;
  }
  .row-small-5 {
    grid-row-end: span 5;
  }
  .row-offset-small-5 {
    grid-row-start: 6;
  }
  .col-small-6 {
    grid-column-end: span 6;
  }
  .col-offset-small-6 {
    grid-column-start: 7;
  }
  .row-small-6 {
    grid-row-end: span 6;
  }
  .row-offset-small-6 {
    grid-row-start: 7;
  }
  .col-small-7 {
    grid-column-end: span 7;
  }
  .col-offset-small-7 {
    grid-column-start: 8;
  }
  .row-small-7 {
    grid-row-end: span 7;
  }
  .row-offset-small-7 {
    grid-row-start: 8;
  }
  .col-small-8 {
    grid-column-end: span 8;
  }
  .col-offset-small-8 {
    grid-column-start: 9;
  }
  .row-small-8 {
    grid-row-end: span 8;
  }
  .row-offset-small-8 {
    grid-row-start: 9;
  }
  .col-small-9 {
    grid-column-end: span 9;
  }
  .col-offset-small-9 {
    grid-column-start: 10;
  }
  .row-small-9 {
    grid-row-end: span 9;
  }
  .row-offset-small-9 {
    grid-row-start: 10;
  }
  .col-small-10 {
    grid-column-end: span 10;
  }
  .col-offset-small-10 {
    grid-column-start: 11;
  }
  .row-small-10 {
    grid-row-end: span 10;
  }
  .row-offset-small-10 {
    grid-row-start: 11;
  }
  .col-small-11 {
    grid-column-end: span 11;
  }
  .col-offset-small-11 {
    grid-column-start: 12;
  }
  .row-small-11 {
    grid-row-end: span 11;
  }
  .row-offset-small-11 {
    grid-row-start: 12;
  }
  .col-small-12 {
    grid-column-end: span 12;
  }
  .col-offset-small-12 {
    grid-column-start: 13;
  }
  .row-small-12 {
    grid-row-end: span 12;
  }
  .row-offset-small-12 {
    grid-row-start: 13;
  }
}
@media (min-width: 950px) {
  .col-medium-1 {
    grid-column-end: span 1;
  }
  .col-offset-medium-1 {
    grid-column-start: 2;
  }
  .row-medium-1 {
    grid-row-end: span 1;
  }
  .row-offset-medium-1 {
    grid-row-start: 2;
  }
  .col-medium-2 {
    grid-column-end: span 2;
  }
  .col-offset-medium-2 {
    grid-column-start: 3;
  }
  .row-medium-2 {
    grid-row-end: span 2;
  }
  .row-offset-medium-2 {
    grid-row-start: 3;
  }
  .col-medium-3 {
    grid-column-end: span 3;
  }
  .col-offset-medium-3 {
    grid-column-start: 4;
  }
  .row-medium-3 {
    grid-row-end: span 3;
  }
  .row-offset-medium-3 {
    grid-row-start: 4;
  }
  .col-medium-4 {
    grid-column-end: span 4;
  }
  .col-offset-medium-4 {
    grid-column-start: 5;
  }
  .row-medium-4 {
    grid-row-end: span 4;
  }
  .row-offset-medium-4 {
    grid-row-start: 5;
  }
  .col-medium-5 {
    grid-column-end: span 5;
  }
  .col-offset-medium-5 {
    grid-column-start: 6;
  }
  .row-medium-5 {
    grid-row-end: span 5;
  }
  .row-offset-medium-5 {
    grid-row-start: 6;
  }
  .col-medium-6 {
    grid-column-end: span 6;
  }
  .col-offset-medium-6 {
    grid-column-start: 7;
  }
  .row-medium-6 {
    grid-row-end: span 6;
  }
  .row-offset-medium-6 {
    grid-row-start: 7;
  }
  .col-medium-7 {
    grid-column-end: span 7;
  }
  .col-offset-medium-7 {
    grid-column-start: 8;
  }
  .row-medium-7 {
    grid-row-end: span 7;
  }
  .row-offset-medium-7 {
    grid-row-start: 8;
  }
  .col-medium-8 {
    grid-column-end: span 8;
  }
  .col-offset-medium-8 {
    grid-column-start: 9;
  }
  .row-medium-8 {
    grid-row-end: span 8;
  }
  .row-offset-medium-8 {
    grid-row-start: 9;
  }
  .col-medium-9 {
    grid-column-end: span 9;
  }
  .col-offset-medium-9 {
    grid-column-start: 10;
  }
  .row-medium-9 {
    grid-row-end: span 9;
  }
  .row-offset-medium-9 {
    grid-row-start: 10;
  }
  .col-medium-10 {
    grid-column-end: span 10;
  }
  .col-offset-medium-10 {
    grid-column-start: 11;
  }
  .row-medium-10 {
    grid-row-end: span 10;
  }
  .row-offset-medium-10 {
    grid-row-start: 11;
  }
  .col-medium-11 {
    grid-column-end: span 11;
  }
  .col-offset-medium-11 {
    grid-column-start: 12;
  }
  .row-medium-11 {
    grid-row-end: span 11;
  }
  .row-offset-medium-11 {
    grid-row-start: 12;
  }
  .col-medium-12 {
    grid-column-end: span 12;
  }
  .col-offset-medium-12 {
    grid-column-start: 13;
  }
  .row-medium-12 {
    grid-row-end: span 12;
  }
  .row-offset-medium-12 {
    grid-row-start: 13;
  }
}
@media (min-width: 1250px) {
  .col-large-1 {
    grid-column-end: span 1;
  }
  .col-offset-large-1 {
    grid-column-start: 2;
  }
  .row-large-1 {
    grid-row-end: span 1;
  }
  .row-offset-large-1 {
    grid-row-start: 2;
  }
  .col-large-2 {
    grid-column-end: span 2;
  }
  .col-offset-large-2 {
    grid-column-start: 3;
  }
  .row-large-2 {
    grid-row-end: span 2;
  }
  .row-offset-large-2 {
    grid-row-start: 3;
  }
  .col-large-3 {
    grid-column-end: span 3;
  }
  .col-offset-large-3 {
    grid-column-start: 4;
  }
  .row-large-3 {
    grid-row-end: span 3;
  }
  .row-offset-large-3 {
    grid-row-start: 4;
  }
  .col-large-4 {
    grid-column-end: span 4;
  }
  .col-offset-large-4 {
    grid-column-start: 5;
  }
  .row-large-4 {
    grid-row-end: span 4;
  }
  .row-offset-large-4 {
    grid-row-start: 5;
  }
  .col-large-5 {
    grid-column-end: span 5;
  }
  .col-offset-large-5 {
    grid-column-start: 6;
  }
  .row-large-5 {
    grid-row-end: span 5;
  }
  .row-offset-large-5 {
    grid-row-start: 6;
  }
  .col-large-6 {
    grid-column-end: span 6;
  }
  .col-offset-large-6 {
    grid-column-start: 7;
  }
  .row-large-6 {
    grid-row-end: span 6;
  }
  .row-offset-large-6 {
    grid-row-start: 7;
  }
  .col-large-7 {
    grid-column-end: span 7;
  }
  .col-offset-large-7 {
    grid-column-start: 8;
  }
  .row-large-7 {
    grid-row-end: span 7;
  }
  .row-offset-large-7 {
    grid-row-start: 8;
  }
  .col-large-8 {
    grid-column-end: span 8;
  }
  .col-offset-large-8 {
    grid-column-start: 9;
  }
  .row-large-8 {
    grid-row-end: span 8;
  }
  .row-offset-large-8 {
    grid-row-start: 9;
  }
  .col-large-9 {
    grid-column-end: span 9;
  }
  .col-offset-large-9 {
    grid-column-start: 10;
  }
  .row-large-9 {
    grid-row-end: span 9;
  }
  .row-offset-large-9 {
    grid-row-start: 10;
  }
  .col-large-10 {
    grid-column-end: span 10;
  }
  .col-offset-large-10 {
    grid-column-start: 11;
  }
  .row-large-10 {
    grid-row-end: span 10;
  }
  .row-offset-large-10 {
    grid-row-start: 11;
  }
  .col-large-11 {
    grid-column-end: span 11;
  }
  .col-offset-large-11 {
    grid-column-start: 12;
  }
  .row-large-11 {
    grid-row-end: span 11;
  }
  .row-offset-large-11 {
    grid-row-start: 12;
  }
  .col-large-12 {
    grid-column-end: span 12;
  }
  .col-offset-large-12 {
    grid-column-start: 13;
  }
  .row-large-12 {
    grid-row-end: span 12;
  }
  .row-offset-large-12 {
    grid-row-start: 13;
  }
}
@media (min-width: 1700px) {
  .col-huge-1 {
    grid-column-end: span 1;
  }
  .col-offset-huge-1 {
    grid-column-start: 2;
  }
  .row-huge-1 {
    grid-row-end: span 1;
  }
  .row-offset-huge-1 {
    grid-row-start: 2;
  }
  .col-huge-2 {
    grid-column-end: span 2;
  }
  .col-offset-huge-2 {
    grid-column-start: 3;
  }
  .row-huge-2 {
    grid-row-end: span 2;
  }
  .row-offset-huge-2 {
    grid-row-start: 3;
  }
  .col-huge-3 {
    grid-column-end: span 3;
  }
  .col-offset-huge-3 {
    grid-column-start: 4;
  }
  .row-huge-3 {
    grid-row-end: span 3;
  }
  .row-offset-huge-3 {
    grid-row-start: 4;
  }
  .col-huge-4 {
    grid-column-end: span 4;
  }
  .col-offset-huge-4 {
    grid-column-start: 5;
  }
  .row-huge-4 {
    grid-row-end: span 4;
  }
  .row-offset-huge-4 {
    grid-row-start: 5;
  }
  .col-huge-5 {
    grid-column-end: span 5;
  }
  .col-offset-huge-5 {
    grid-column-start: 6;
  }
  .row-huge-5 {
    grid-row-end: span 5;
  }
  .row-offset-huge-5 {
    grid-row-start: 6;
  }
  .col-huge-6 {
    grid-column-end: span 6;
  }
  .col-offset-huge-6 {
    grid-column-start: 7;
  }
  .row-huge-6 {
    grid-row-end: span 6;
  }
  .row-offset-huge-6 {
    grid-row-start: 7;
  }
  .col-huge-7 {
    grid-column-end: span 7;
  }
  .col-offset-huge-7 {
    grid-column-start: 8;
  }
  .row-huge-7 {
    grid-row-end: span 7;
  }
  .row-offset-huge-7 {
    grid-row-start: 8;
  }
  .col-huge-8 {
    grid-column-end: span 8;
  }
  .col-offset-huge-8 {
    grid-column-start: 9;
  }
  .row-huge-8 {
    grid-row-end: span 8;
  }
  .row-offset-huge-8 {
    grid-row-start: 9;
  }
  .col-huge-9 {
    grid-column-end: span 9;
  }
  .col-offset-huge-9 {
    grid-column-start: 10;
  }
  .row-huge-9 {
    grid-row-end: span 9;
  }
  .row-offset-huge-9 {
    grid-row-start: 10;
  }
  .col-huge-10 {
    grid-column-end: span 10;
  }
  .col-offset-huge-10 {
    grid-column-start: 11;
  }
  .row-huge-10 {
    grid-row-end: span 10;
  }
  .row-offset-huge-10 {
    grid-row-start: 11;
  }
  .col-huge-11 {
    grid-column-end: span 11;
  }
  .col-offset-huge-11 {
    grid-column-start: 12;
  }
  .row-huge-11 {
    grid-row-end: span 11;
  }
  .row-offset-huge-11 {
    grid-row-start: 12;
  }
  .col-huge-12 {
    grid-column-end: span 12;
  }
  .col-offset-huge-12 {
    grid-column-start: 13;
  }
  .row-huge-12 {
    grid-row-end: span 12;
  }
  .row-offset-huge-12 {
    grid-row-start: 13;
  }
}
:root {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --link-color: #0061C5;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  background: #F2F2F2;
  color: #27272c;
  font-size: 14px;
  padding: 0;
  margin: 0;
  font-weight: 400;
  line-height: 1.5;
}

a {
  text-decoration: none;
  color: var(--link-color);
}
a:hover {
  text-decoration: underline;
}

img {
  border: 0;
}

h1 {
  margin: 0;
  font-size: 24px;
  font-weight: normal;
}

h2 {
  margin: 0;
  font-size: 20px;
  font-weight: normal;
}

h3 {
  margin: 0;
  font-size: 16px;
  font-weight: normal;
}

h4 {
  margin: 0;
  font-size: 14px;
  font-weight: normal;
}

h5 {
  margin: 0;
  font-size: 12px;
  font-weight: normal;
}

h6 {
  margin: 0;
  font-size: 10px;
  font-weight: normal;
}

img.img-responsive {
  width: 100%;
}

.clear {
  clear: both;
}

.bold {
  font-weight: 500;
}

textarea,
input[type=text],
input[type=email],
input[type=password],
input[type=number] {
  border: 1px solid rgb(218.45, 218.45, 218.45);
  background-color: 1px solid rgb(252.45, 252.45, 252.45);
  color: #000;
  transition: border linear 0.3s;
  border-radius: 3px;
  padding: 6px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
textarea:focus,
input[type=text]:focus,
input[type=email]:focus,
input[type=password]:focus,
input[type=number]:focus {
  border-color: var(--link-color);
  outline: none;
}

code {
  color: #a33a3a;
}

pre {
  color: #a33a3a;
  background-color: #ffe8e8;
  border: 1px solid #eed1d1;
  border-radius: 5px;
  padding: 10px;
  margin: 0;
  overflow-x: auto;
  line-height: 1.5;
  white-space: pre-wrap;
}

blockquote {
  margin: 0 0 0.5em 0;
  padding-left: 0.8em;
  border-left: 4px solid #DDDDDD;
}

.profile-picture {
  border: 1px solid #888;
  display: block;
  border-radius: 4px;
  position: relative;
}
.profile-picture::before {
  content: "";
  display: inline-block;
  width: 100%;
  height: 100%;
  background-image: url("/assets/charla_pfp_gloss.svg");
  background-size: cover;
  position: absolute;
  border-radius: 3px;
}
.profile-picture .pfp {
  width: auto;
  height: 100%;
  border-radius: 3px;
  aspect-ratio: 1/1;
}

hr {
  border: 0;
  border-bottom: 1px solid #DDDDDD;
  height: 0;
  margin: 10px 0;
}
hr.taller {
  margin: 25px 0;
}

.userlink-handle {
  color: #aaa;
  text-decoration: none;
}

.fade {
  color: #888;
}

.flex {
  display: flex;
}

.emoji {
  display: inline;
  width: 24px;
  vertical-align: middle;
}

.header {
  position: sticky;
  top: 0;
  z-index: 2000;
  width: 100%;
  background: linear-gradient(to bottom, #333333, #151515);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
  height: 48px;
  display: flex;
}
.header .header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 0 1rem;
  width: 100%;
}

.header-main-links {
  gap: 1em;
  align-items: center;
}
@media (min-width: 300px) {
  .header-main-links {
    display: none;
  }
}
@media (min-width: 500px) {
  .header-main-links {
    display: none;
  }
}
@media (min-width: 950px) {
  .header-main-links {
    display: flex;
  }
}

.header-links {
  /* actually known as user links, but back in 2023 the main browse/members links were aligned to the right so
  thats why this is called header-links. */
  text-align: right;
  margin-left: auto;
  display: flex;
  align-items: center;
}
.header-links .user-menu-container {
  direction: rtl;
}
.header-links .user-menu-container .user-menu-button {
  height: 48px;
  padding: 0 2px 0 8px;
  direction: ltr;
  display: flex;
  align-items: center;
}
.header-links .user-menu-container .user-menu-button:hover, .header-links .user-menu-container .user-menu-button.selected {
  cursor: pointer;
}
.header-links .user-menu-container .user-menu-button:hover {
  background: rgba(255, 255, 255, 0.075);
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.25) inset;
}
.header-links .user-menu-container .user-menu-button:active, .header-links .user-menu-container .user-menu-button.selected {
  background: rgba(255, 255, 255, 0.025);
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.6) inset;
}
.header-links .user-menu-container .user-menu-button .user-menu-pfp {
  width: 32px;
  height: 32px;
}
.header-links .user-menu-container .user-menu-button .user-menu-caret-container {
  display: inline-block;
  opacity: 0.75;
  width: 16px;
  height: 16px;
}

.header-logo {
  margin-right: 0.6rem;
}
.header-logo a {
  display: block;
  height: 32px;
}
.header-logo a:focus {
  outline: none;
}
.header-logo .logo {
  height: 32px;
}

form.header-search {
  position: relative;
  display: none;
}
form.header-search #header-search-button {
  position: absolute;
  right: 0;
  top: 1px; /* stupid hack */
  background: none;
  border: none;
  height: 32px;
  width: 40px;
}
form.header-search #header-search-button .biscuit-icon.search {
  width: 16px;
  height: 16px;
  background-size: 16px;
}
form.header-search #header-search-button:hover {
  cursor: pointer;
}
form.header-search #header-search-input {
  border-radius: 16px;
  transition: border 0.1s ease-in-out;
  padding: 6px 40px 6px 10px;
  height: 32px;
  border: 1px solid black;
  color: #eee;
  background: #5A5A5A;
  box-shadow: 0 1px 0 #333;
}
form.header-search #header-search-input:focus {
  /*
  background: #eee;
  color: #222;
   */
  box-shadow: 0 1px 0 #000;
  border-color: var(--link-color);
}
@media (min-width: 300px) {
  form.header-search {
    display: block;
    max-width: 130px;
  }
  form.header-search #header-search-input {
    max-width: 125px;
  }
}
@media (min-width: 500px) {
  form.header-search {
    display: block;
    max-width: 240px;
  }
  form.header-search #header-search-input {
    max-width: 220px;
  }
}
@media (min-width: 950px) {
  form.header-search {
    display: block;
    max-width: 240px;
  }
  form.header-search #header-search-input {
    max-width: 220px;
  }
}
form.header-search .form-button-container {
  display: inline;
}

.menulink {
  display: flex;
  align-items: center;
  gap: 0.5em;
  color: white;
  opacity: 0.75;
  height: 48px;
  padding: 0 0.5em;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}
.menulink:hover {
  opacity: 1;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.075);
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.25) inset;
}
.menulink:active {
  opacity: 1;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.025);
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.6) inset;
}
.menulink .biscuit-icon {
  width: 32px;
  height: 32px;
  background-size: 32px;
}
@media (min-width: 300px) {
  .menulink.hide-small {
    display: none;
  }
}
@media (min-width: 500px) {
  .menulink.hide-small {
    display: none;
  }
}
@media (min-width: 950px) {
  .menulink.hide-small {
    display: block;
  }
}
.menulink.username {
  display: none;
}
@media (min-width: 950px) {
  .menulink.username {
    display: inline;
  }
}

.menu#user-menu {
  border-top: none;
  top: 48px;
  border-radius: 0 0 5px 5px;
}

.header-button {
  display: flex; /* stupid hack */
  margin-right: 0.25rem;
}

.footer {
  margin: 1rem 0;
  line-height: 1.5rem;
}
.footer .footer-container {
  color: #333;
  margin: auto;
  text-align: center;
  width: 100%;
  max-width: 100%;
}
.footer .footer-container .footer-copyright {
  font-size: 0.75rem;
}
.footer .footer-container span {
  margin: 0 0.25em;
}
@media (min-width: 300px) {
  .footer .footer-container {
    max-width: 100%;
    min-width: 270px;
    padding: 0 1rem;
  }
}
@media (min-width: 500px) {
  .footer .footer-container {
    max-width: 95%;
    min-width: 420px;
    padding: 0 1rem;
  }
}
@media (min-width: 950px) {
  .footer .footer-container {
    max-width: 90%;
    min-width: 640px;
    padding: 0;
  }
}
@media (min-width: 1250px) {
  .footer .footer-container {
    max-width: 87.5%;
    min-width: 1200px;
    padding: 0;
  }
}
@media (min-width: 1700px) {
  .footer .footer-container {
    max-width: 82.5%;
    min-width: 1500px;
    padding: 0;
  }
}

textarea,
input[type=text],
input[type=email],
input[type=password],
input[type=number] {
  border: 1px solid #DDDDDD;
  background-color: #FFF;
  color: #27272c;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  transition: border-color linear 0.3s, box-shadow linear 0.3s;
  border-radius: 3px;
  padding: 6px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
textarea:focus,
input[type=text]:focus,
input[type=email]:focus,
input[type=password]:focus,
input[type=number]:focus {
  border-color: var(--link-color);
  outline: none;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 4px var(--link-color);
}

.form-input {
  margin-bottom: 8px;
}

.form-submit {
  width: 100%;
}

.form-button-container {
  text-align: right;
}

.form-image {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.form-image.edit-page {
  width: 300px;
}

.form-flex {
  display: flex;
  gap: 5px;
}

.thumbnail {
  border-radius: 2px;
  border: 1px solid #DDDDDD;
}

.content-grid {
  /* named like this to avoid conflicts with grid system */
  display: grid;
  gap: 5px;
  grid-auto-rows: minmax(135px, auto);
}
@media (min-width: 300px) {
  .content-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 500px) {
  .content-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 950px) {
  .content-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (min-width: 1250px) {
  .content-grid {
    grid-template-columns: repeat(6, 1fr);
  }
}
.content-grid.content-grid-users {
  grid-auto-rows: minmax(auto, auto);
}
@media (min-width: 1250px) {
  .content-grid.content-grid-users {
    grid-template-columns: repeat(4, 1fr);
  }
}
.content-grid.content-grid-users .content-entry, .content-grid.content-grid-users .content-entry:first-child {
  border: none;
  padding: 0.5rem 0;
}

.content-header {
  background: #DDDDDD;
  padding: 0.3em 0.5em;
  color: #27272c;
  font-weight: bold;
}

.content-box {
  border: 1px solid #DDDDDD;
  background: #FFF;
  padding: 1rem;
  overflow: hidden;
  word-break: break-word;
}
.content-box.no-border-top {
  border-top: none;
}
.content-box.rounded {
  border-radius: 5px;
}
.content-box.login {
  padding: 15px;
}
.content-box.related-uploads {
  max-height: 500px;
  overflow-y: scroll;
}
.content-box.carousel {
  padding: 1rem 0;
}
.content-box.content-note {
  /* used for staff notes. i think it just looks cool honestly */
  background: #FDFDCB;
  background: linear-gradient(180deg, rgb(253, 253, 203) 0%, rgb(252, 249, 161) 100%);
  border-color: #DDDB9A;
  color: #4A1D0C;
  font-family: Georgia, "Times New Roman", serif;
  border-radius: 3px;
}
.content-box.content-note p {
  margin: 0.5em 0;
}
.content-box .section {
  margin-bottom: 0;
}
.content-box .section .section-header {
  margin-bottom: 1em;
}
.content-box .content-entry {
  display: flex;
  padding: 0.8rem 0;
  border-bottom: 1px solid #DDDDDD;
}
.content-box .content-entry:first-child {
  padding-top: 0;
}
.content-box .content-entry:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.content-box .content-entry.centered {
  align-items: center;
}
.content-box .content-entry.journal .content-thumbnail .profile-picture {
  width: 50px;
  height: 50px;
}
.content-box .content-entry .content-info {
  flex-grow: 1;
}
.content-box .content-entry .content-info .content-title {
  font-size: 1em;
}
.content-box .content-entry .content-info .content-title-upload {
  display: flex;
}
.content-box .content-entry .content-info .content-title-upload .content-title-link {
  flex-grow: 1;
  font-size: 1em;
}
.content-box .content-entry .content-info .content-title-upload .content-rating {
  min-width: 80px;
}
.content-box .content-entry .content-info .content-title-upload .content-upload-edit-button {
  direction: rtl;
  min-width: 40px;
}
.content-box .content-entry .content-info .content-description {
  font-size: 0.8em;
}
.content-box .content-entry .content-image {
  margin-right: 8px;
  min-width: 50px;
  min-height: 50px;
  display: block;
}
@media (min-width: 300px) {
  .content-box .content-entry .content-image {
    width: 140px;
  }
}
@media (min-width: 500px) {
  .content-box .content-entry .content-image {
    width: 140px;
  }
}
@media (min-width: 950px) {
  .content-box .content-entry .content-image {
    width: 140px;
  }
}
@media (min-width: 1250px) {
  .content-box .content-entry .content-image {
    width: 160px;
  }
}
@media (min-width: 1700px) {
  .content-box .content-entry .content-image {
    width: 175px;
  }
}
.content-box .content-entry .content-image.small {
  width: 100px;
}
.content-box .content-entry .content-image.profile-picture {
  width: 60px;
  height: 60px;
}
.content-box .content-entry .content-image:hover {
  border-color: var(--link-color);
}
.content-box .content-entry-small {
  max-height: 190px;
  text-align: center;
}
.content-box .content-entry-small .content-title {
  font-size: 12px;
  margin: auto;
  font-weight: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  white-space: nowrap;
}
@media (min-width: 300px) {
  .content-box .content-entry-small .content-title {
    max-width: 140px;
  }
}
@media (min-width: 500px) {
  .content-box .content-entry-small .content-title {
    max-width: 120px;
  }
}
@media (min-width: 950px) {
  .content-box .content-entry-small .content-title {
    max-width: 135px;
  }
}
@media (min-width: 1250px) {
  .content-box .content-entry-small .content-title {
    max-width: 150px;
  }
}
@media (min-width: 1700px) {
  .content-box .content-entry-small .content-title {
    max-width: 160px;
  }
}
.content-box .content-entry-small .content-author {
  font-size: 10px;
  margin: auto;
  font-weight: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  white-space: nowrap;
}
@media (min-width: 300px) {
  .content-box .content-entry-small .content-author {
    max-width: 140px;
  }
}
@media (min-width: 500px) {
  .content-box .content-entry-small .content-author {
    max-width: 120px;
  }
}
@media (min-width: 950px) {
  .content-box .content-entry-small .content-author {
    max-width: 135px;
  }
}
@media (min-width: 1250px) {
  .content-box .content-entry-small .content-author {
    max-width: 150px;
  }
}
@media (min-width: 1700px) {
  .content-box .content-entry-small .content-author {
    max-width: 160px;
  }
}
.content-box .content-entry-small .content-rating .biscuit-icon {
  width: 12px;
  height: 12px;
  background-size: 12px;
}
.content-box .content-entry-small .content-image-container {
  /* Thumbnails used by grid thumbnails */
  display: table;
  text-align: center;
  margin: auto;
  height: 135px;
}
.content-box .content-entry-small .content-image-container .content-image-link {
  display: table-cell;
  vertical-align: middle;
}
.content-box .content-entry-small .content-image-container .content-image-link .content-image {
  max-height: 135px;
  margin: 2px auto;
}
@media (min-width: 300px) {
  .content-box .content-entry-small .content-image-container .content-image-link .content-image {
    max-width: 140px;
  }
}
@media (min-width: 500px) {
  .content-box .content-entry-small .content-image-container .content-image-link .content-image {
    max-width: 120px;
  }
}
@media (min-width: 950px) {
  .content-box .content-entry-small .content-image-container .content-image-link .content-image {
    max-width: 135px;
  }
}
@media (min-width: 1250px) {
  .content-box .content-entry-small .content-image-container .content-image-link .content-image {
    max-width: 150px;
  }
}
@media (min-width: 1700px) {
  .content-box .content-entry-small .content-image-container .content-image-link .content-image {
    max-width: 160px;
  }
}
.content-box .content-entry-small .content-image-container .content-image-link .content-image:hover {
  border-color: var(--link-color);
}

.banner {
  padding: 0.5rem 0.7rem;
  display: flex;
  align-items: center;
  border-radius: 4px;
  margin-bottom: 0.5em;
  background-repeat: repeat-x;
}
.banner .notification-icon {
  margin-right: 0.66em;
  min-width: 20px;
  min-height: 20px;
  background-size: 20px;
}
.banner.full-screen {
  margin: 0;
  border-radius: 0;
}
.banner.full-screen .notification-text {
  margin: auto;
}

.banner-primary {
  background-color: rgb(52.8826086957, 153.4434782609, 228.1173913043);
  background-image: linear-gradient(rgb(28.7960869565, 136.5147826087, 216.5039130435), rgb(25.2039130435, 116.7470144928, 189.4960869565));
  border: 1px solid rgb(22.5097826087, 106.7130434783, 169.2402173913);
  color: #fff;
}
.banner-primary a {
  text-decoration: underline;
  color: rgba(255, 255, 255, 0.7);
}

.banner-secondary {
  background-color: hsl(0, 0%, 103.3333333333%);
  background-image: linear-gradient(rgb(245.65, 245.65, 245.65), rgb(230.35, 230.35, 230.35));
  border: 1px solid rgb(218.875, 218.875, 218.875);
  color: #000;
}
.banner-secondary a {
  text-decoration: underline;
  color: #000;
}

.banner-success {
  background-color: rgb(68.4615384615, 216.5384615385, 68.4615384615);
  background-image: linear-gradient(rgb(42.6153846154, 206.6846153846, 42.6153846154), rgb(37.3846153846, 181.3153846154, 39.7834615385));
  border: 1px solid rgb(33.4615384615, 162.2884615385, 33.4615384615);
  color: #fff;
}
.banner-success a {
  text-decoration: underline;
  color: rgba(255, 255, 255, 0.7);
}

.banner-danger {
  background-color: rgb(240, 33.75, 15);
  background-image: linear-gradient(rgb(206.4, 29.025, 12.9), rgb(177.6, 27.75, 11.1));
  border: 1px solid rgb(156, 21.9375, 9.75);
  color: #fff;
}
.banner-danger a {
  text-decoration: underline;
  color: rgba(255, 255, 255, 0.7);
}

.banner-warning {
  background-color: rgb(255, 193.2367346939, 61);
  background-image: linear-gradient(rgb(255, 181.8710204082, 25.3), rgb(249.7, 174.3653401361, 0));
  border: 1px solid rgb(226.75, 154.5602040816, 0);
  color: #000;
}
.banner-warning a {
  text-decoration: underline;
  color: #000;
}

.banner-dark {
  background-color: rgb(76.5, 76.5, 76.5);
  background-image: linear-gradient(rgb(58.65, 58.65, 58.65), rgb(43.35, 43.35, 43.35));
  border: 1px solid rgb(31.875, 31.875, 31.875);
  color: #fff;
}
.banner-dark a {
  text-decoration: underline;
  color: rgba(255, 255, 255, 0.7);
}

.comment {
  margin: 0.33em 0;
  padding: 0.5em 0;
  display: flex;
  border-bottom: 1px solid #DDDDDD;
}
.comment:last-child {
  border-bottom: none;
}
.comment .profile-picture {
  width: 50px;
  height: 50px;
  margin-right: 0.75em;
}
.comment .comment-body {
  width: 100%;
}
.comment .comment-body .comment-contents {
  margin-top: 0.25em;
}
.comment .comment-body .comment-contents .reply-button {
  font-size: 0.75em;
}
.comment .comment-body .comment-contents p {
  margin: 0.5em 0;
}
.comment .comment-body .comment-contents p:first-child {
  margin-top: 0;
}
.comment .comment-body .comment-contents p:last-child {
  margin-bottom: 0;
}

.replies {
  border-left: 1px solid #DDDDDD;
  padding-left: 1em;
  margin-top: 0.5em;
}
.replies .comment {
  border: none;
}
.replies .comment .profile-picture {
  width: 35px;
  height: 35px;
}

.new-comment, .reply-form {
  display: flex;
}
.new-comment:not(:only-child), .reply-form:not(:only-child) {
  margin-bottom: 0.33em;
  padding-bottom: 0.5em;
  border-bottom: 1px solid #DDDDDD;
}
.new-comment .profile-picture, .reply-form .profile-picture {
  width: 50px;
  height: 50px;
  margin-right: 0.75em;
}
.new-comment .new-comment-form, .reply-form .new-comment-form {
  width: 100%;
}
.new-comment #comment_button, .new-comment .submit-reply-button, .reply-form #comment_button, .reply-form .submit-reply-button {
  margin-left: auto;
  display: block;
}

.new-comment-logged-out {
  background: #FFF;
  color: #27272c;
  border: 1px solid #DDDDDD;
  border-radius: 3px;
  padding: 6px;
}

.section {
  margin-bottom: 1em;
}
.section .section-header {
  display: flex;
  align-items: baseline;
  margin-bottom: 0.5em;
}
.section .section-header .section-header-left {
  flex-grow: 1;
  display: flex;
  align-items: baseline;
  gap: 0.5em;
}
.section .section-header .section-header-left .section-title {
  font-size: 1.33em;
}
.section .section-header .section-header-left .section-desc {
  color: rgba(0, 0, 0, 0.5019607843);
}
.section .section-header a {
  font-size: 14px;
  margin-left: 4px;
}
.section .section-header a.userlink {
  margin-left: 0;
}

.button {
  padding: 7px 11px;
  text-align: center;
  border-radius: 4px;
  color: white;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  display: inline-block;
  cursor: pointer;
  text-decoration: none;
  font-weight: normal;
  background-repeat: repeat-x;
  line-height: 1em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.1);
}
.button:hover {
  text-decoration: none;
}
.button.button-hamburger {
  padding: 0;
  display: flex;
}
.button.button-hamburger:not(:hover):not(:active) {
  box-shadow: none;
  border-color: rgba(0, 0, 0, 0);
}
.button.button-caret {
  padding: 3px 4px;
}
.button.button-small {
  padding: 5px 10px;
}
.button.button-big {
  font-size: 15px;
  padding: 7px 15px;
  border-radius: 5px;
}
.button.button-huge {
  font-size: 24px;
  padding: 0.5em 0.8em;
  border-radius: 7px;
}

.button-primary {
  border: 1px solid rgb(22.5097826087, 101.8220289855, 169.2402173913);
  background-color: #1B80CB;
  background-image: linear-gradient(rgb(30.3760869565, 142.1347826087, 225.1239130435), rgb(24.6052173913, 113.9737971014, 184.9947826087));
  color: white;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
}
.button-primary.button-transparent {
  border-color: rgba(22.5097826087, 101.8220289855, 169.2402173913, 0.66);
  background: none;
}
.button-primary:hover {
  background-color: rgb(52.8826086957, 153.4434782609, 228.1173913043);
  background-image: linear-gradient(rgb(52.8826086957, 150.5228985507, 228.1173913043), rgb(28.1973913043, 133.6765217391, 212.0026086957));
}
.button-primary:active {
  background-color: rgb(24.0065217391, 113.8086956522, 180.4934782609);
  background-image: linear-gradient(#1B80CB, rgb(24.0065217391, 109.8965217391, 180.4934782609));
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
}

.button-secondary {
  border: 1px solid rgb(218.875, 218.875, 218.875);
  background-color: #eee;
  background-image: linear-gradient(rgb(250.75, 250.75, 250.75), rgb(227.8, 227.8, 227.8));
  color: black;
  text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.4);
}
.button-secondary.button-transparent {
  border-color: rgba(218.875, 218.875, 218.875, 0.66);
  background: none;
}
.button-secondary:hover {
  background-color: hsl(0, 0%, 103.3333333333%);
  background-image: linear-gradient(hsl(0, 0%, 103.3333333333%), rgb(243.1, 243.1, 243.1));
}
.button-secondary:active {
  background-color: rgb(225.25, 225.25, 225.25);
  background-image: linear-gradient(#eee, rgb(225.25, 225.25, 225.25));
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
}

.button-success {
  border: 1px solid rgb(33.4615384615, 162.2884615385, 37.7557692308);
  background-color: #28c228;
  background-image: linear-gradient(rgb(47.3205128205, 212.1794871795, 47.3205128205), rgb(36.5128205128, 177.0871794872, 38.8557264957));
  color: white;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
}
.button-success.button-transparent {
  border-color: rgba(33.4615384615, 162.2884615385, 37.7557692308, 0.66);
  background: none;
}
.button-success:hover {
  background-color: rgb(68.4615384615, 216.5384615385, 68.4615384615);
  background-image: linear-gradient(rgb(68.4615384615, 216.5384615385, 70.9294871795), rgb(41.7435897436, 202.4564102564, 41.7435897436));
}
.button-success:active {
  background-color: rgb(35.641025641, 172.858974359, 35.641025641);
  background-image: linear-gradient(#28c228, rgb(35.641025641, 172.858974359, 39.071474359));
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
}

.button-danger {
  border: 1px solid rgb(156, 26.8125, 9.75);
  background-color: #c01b0c;
  background-image: linear-gradient(rgb(216, 30.375, 13.5), rgb(172.8, 27, 10.8));
  color: white;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
}
.button-danger.button-transparent {
  border-color: rgba(156, 26.8125, 9.75, 0.66);
  background: none;
}
.button-danger:hover {
  background-color: rgb(240, 33.75, 15);
  background-image: linear-gradient(rgb(240, 37.5, 15), rgb(201.6, 28.35, 12.6));
}
.button-danger:active {
  background-color: rgb(168, 23.625, 10.5);
  background-image: linear-gradient(#c01b0c, rgb(168, 27.5625, 10.5));
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
}

.button-warning {
  border: 1px solid rgb(226.75, 162.118537415, 0);
  background-color: #ffb10a;
  background-image: linear-gradient(rgb(255, 185.1183673469, 35.5), rgb(244.6, 170.8040136054, 0));
  color: black;
  text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.4);
}
.button-warning.button-transparent {
  border-color: rgba(226.75, 162.118537415, 0, 0.66);
  background: none;
}
.button-warning:hover {
  background-color: rgb(255, 193.2367346939, 61);
  background-image: linear-gradient(rgb(255, 196.4700680272, 61), rgb(255, 180.2473469388, 20.2));
}
.button-warning:active {
  background-color: rgb(239.5, 163.2510204082, 0);
  background-image: linear-gradient(#ffb10a, rgb(239.5, 169.2385204082, 0));
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
}

.button-dark {
  border: 1px solid rgb(76.5, 76.5, 76.5);
  background-color: #333;
  background-image: linear-gradient(rgb(63.75, 63.75, 63.75), rgb(40.8, 40.8, 40.8));
  color: white;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
}
.button-dark.button-transparent {
  border-color: rgba(76.5, 76.5, 76.5, 0.66);
  background: none;
}
.button-dark:hover {
  background-color: rgb(76.5, 76.5, 76.5);
  background-image: linear-gradient(rgb(76.5, 76.5, 76.5), rgb(56.1, 56.1, 56.1));
}
.button-dark:active {
  background-color: rgb(38.25, 38.25, 38.25);
  background-image: linear-gradient(#333, rgb(38.25, 38.25, 38.25));
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
}

.jumbotron.page-banner {
  background: #333 url("/assets/charla_banner_background.jpg") center;
  background-size: cover;
  color: white;
  text-shadow: 0 0.1em 0.2em rgba(0, 0, 0, 0.5);
  padding: 20px 0;
}
.jumbotron.page-banner h1, .jumbotron.page-banner p {
  margin: 0;
}
.jumbotron.page-banner h1 {
  font-size: 1.33rem;
  font-weight: bold;
}
@media (min-width: 300px) {
  .jumbotron.page-banner h1 {
    font-size: 1rem;
  }
}
@media (min-width: 500px) {
  .jumbotron.page-banner h1 {
    font-size: 1.2rem;
  }
}
@media (min-width: 950px) {
  .jumbotron.page-banner h1 {
    font-size: 1.33rem;
  }
}
.jumbotron.page-banner.homepage {
  padding: 0;
}
.jumbotron.page-banner.homepage .jumbotron-container.homepage-logged-in {
  height: 92px;
}
.jumbotron.page-banner.homepage .jumbotron-container.homepage-logged-in .jumbotron-welcome {
  display: flex;
  align-items: center;
}
.jumbotron.page-banner.homepage .jumbotron-container.homepage-logged-in .jumbotron-welcome .profile-picture {
  margin-right: 1em;
}
@media (min-width: 300px) {
  .jumbotron.page-banner.homepage .jumbotron-container.homepage-logged-in .jumbotron-welcome .profile-picture {
    width: 48px;
    height: 48px;
  }
}
@media (min-width: 500px) {
  .jumbotron.page-banner.homepage .jumbotron-container.homepage-logged-in .jumbotron-welcome .profile-picture {
    width: 64px;
    height: 64px;
  }
}
@media (min-width: 950px) {
  .jumbotron.page-banner.homepage .jumbotron-container.homepage-logged-in .jumbotron-welcome .profile-picture {
    width: 64px;
    height: 64px;
  }
}
.jumbotron.page-banner.homepage .jumbotron-container.homepage-logged-out {
  height: 120px;
}
@media (min-width: 300px) {
  .jumbotron.page-banner.homepage .jumbotron-container.homepage-logged-out .jumbotron-welcome .button-get-started {
    display: none;
  }
}
@media (min-width: 500px) {
  .jumbotron.page-banner.homepage .jumbotron-container.homepage-logged-out .jumbotron-welcome .button-get-started {
    display: none;
  }
}
@media (min-width: 950px) {
  .jumbotron.page-banner.homepage .jumbotron-container.homepage-logged-out .jumbotron-welcome .button-get-started {
    display: inline-block;
  }
}
.jumbotron.page-banner .jumbotron-welcome {
  flex-grow: 1;
  line-height: 2em;
}
.jumbotron.profile-banner {
  background: #111 center/cover;
  height: 250px;
}
.jumbotron.profile-banner .jumbotron-container {
  padding-top: 48px;
}
.jumbotron .jumbotron-container {
  /* duplicate of the page class */
  display: flex;
  align-items: center;
  margin: auto;
  width: 100%;
  max-width: 100%;
}
@media (min-width: 300px) {
  .jumbotron .jumbotron-container {
    max-width: 100%;
    min-width: 270px;
    padding: 0 1rem;
  }
}
@media (min-width: 500px) {
  .jumbotron .jumbotron-container {
    max-width: 95%;
    min-width: 420px;
    padding: 0 1rem;
  }
}
@media (min-width: 950px) {
  .jumbotron .jumbotron-container {
    max-width: 90%;
    min-width: 640px;
    padding: 0;
  }
}
@media (min-width: 1250px) {
  .jumbotron .jumbotron-container {
    max-width: 87.5%;
    min-width: 1200px;
    padding: 0;
  }
}
@media (min-width: 1700px) {
  .jumbotron .jumbotron-container {
    max-width: 82.5%;
    min-width: 1500px;
    padding: 0;
  }
}
.jumbotron .jumbotron-right-container {
  text-align: right;
  height: inherit;
  display: flex;
}
@media (min-width: 300px) {
  .jumbotron .jumbotron-right-container {
    flex-direction: column-reverse;
    justify-content: space-between;
  }
}
@media (min-width: 500px) {
  .jumbotron .jumbotron-right-container {
    flex-direction: column-reverse;
    justify-content: space-between;
  }
}
@media (min-width: 950px) {
  .jumbotron .jumbotron-right-container {
    flex-direction: column;
    justify-content: space-between;
  }
}
.jumbotron .jumbotron-right-container .jumbotron-right-buttons {
  text-shadow: none;
}
.jumbotron .jumbotron-right-container .jumbotron-right-date {
  margin-top: 0.75em;
  font-weight: normal;
}
@media (min-width: 300px) {
  .jumbotron .jumbotron-right-container .jumbotron-right-date {
    display: none;
  }
}
@media (min-width: 500px) {
  .jumbotron .jumbotron-right-container .jumbotron-right-date {
    display: none;
  }
}
@media (min-width: 950px) {
  .jumbotron .jumbotron-right-container .jumbotron-right-date {
    display: inline;
  }
}

/* Style for the menu */
.menu {
  display: none;
  position: absolute;
  background-color: #FFF;
  border: 1px solid #DDDDDD;
  padding: 3px 0;
  min-width: 100px;
  z-index: 1999;
  width: 12rem;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
.menu hr {
  border-color: #DDDDDD;
  margin: 0;
}
.menu .menu-item-button {
  direction: ltr;
  display: flex;
  align-items: center;
  text-align: left;
  padding: 0.3rem 0.8rem;
  color: rgba(39, 39, 44, 0.66);
  gap: 5px;
}
.menu .menu-item-button span {
  overflow: hidden;
  text-overflow: ellipsis;
}
.menu .menu-item-button.small {
  font-size: 12px;
}
.menu .menu-item-button:hover {
  background: rgba(0, 0, 0, 0.1);
  color: #27272c;
  text-decoration: none;
  cursor: pointer;
}
.menu .menu-item-button .menu-item-profile-picture {
  width: 24px;
  height: 24px;
}

.menu-button .menu-caret-container {
  display: inline;
}

.menu-upload-edit {
  direction: rtl;
  width: 150px;
}

.tabcontent {
  display: none;
}

.tabs {
  border-bottom: 1px solid #DDDDDD;
  display: flex;
}
.tabs.homepage {
  justify-content: flex-end;
  border-bottom: none;
}
.tabs.homepage .tablink {
  color: white;
  padding: 2px 4px;
  display: flex;
}
.tabs.homepage .tablink:hover {
  background-color: rgba(233.075, 233.075, 233.075, 0.1);
}
.tabs.homepage .tablink.active {
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  background-color: #F2F2F2;
}

.tablink {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  padding: 7px 14px;
  cursor: pointer;
  background-color: rgba(255, 255, 255, 0);
  margin-bottom: -1px;
  border-radius: 4px 4px 0 0;
  color: var(--link-color);
  display: inline-block;
  border: 1px solid rgba(0, 0, 0, 0);
}
.tablink:hover {
  background-color: rgb(233.075, 233.075, 233.075);
  text-decoration: none;
}
.tablink.active {
  background-color: #FFF;
  border: 1px solid #DDDDDD;
  border-bottom: 1px solid rgba(255, 255, 255, 0);
  color: black;
  font-weight: bold;
}
.tablink:focus {
  outline: none;
}

table.c1 {
  width: 100%;
  border: 1px solid #DDDDDD;
  border-spacing: 0;
  border-collapse: collapse;
}
table.c1 tbody {
  margin: 0;
}
table.c1 tr {
  border: 1px solid #DDDDDD;
  background: #FFF;
}
table.c1 tr.h {
  background-color: rgb(227.375, 227.375, 227.375);
  background-image: linear-gradient(rgb(246.5, 246.5, 246.5), rgb(233.75, 233.75, 233.75));
}
table.c1 tr.h th {
  padding: 1px 4px;
  text-align: left;
  border: 1px solid #DDDDDD;
  font-weight: 500;
}
table.c1 tr.banned-other-unbanned {
  background-color: #ff9696;
  background-image: linear-gradient(#ff9696, rgb(255, 139.8, 141.72));
}
table.c1 tr.banned-other-unbanned td {
  border-color: rgb(255, 121.95, 128.6025);
}
table.c1 tr.unbanned-other-banned {
  background-color: #ffc848;
  background-image: linear-gradient(#ffc848, rgb(255, 193.7144262295, 61.8));
}
table.c1 tr.unbanned-other-banned td {
  border-color: rgb(255, 181.0171721311, 43.95);
}
table.c1 tr.banned {
  background-color: #ffcccc;
  background-image: linear-gradient(#ffcccc, rgb(255, 193.8, 194.82));
}
table.c1 tr.banned td {
  border-color: rgb(255, 175.95, 179.9025);
}
table.c1 tr.shadow-banned {
  background-color: #ffe2cc;
  background-image: linear-gradient(#ffe2cc, rgb(255, 219.18, 193.8));
}
table.c1 tr.shadow-banned td {
  border-color: rgb(255, 206.0975, 175.95);
}
table.c1 tr.unbanned-other-unbanned {
  background-color: #fffdcc;
  background-image: linear-gradient(#fffdcc, rgb(255, 251.58, 193.8));
}
table.c1 tr.unbanned-other-unbanned td {
  border-color: rgb(255, 247.9475, 175.95);
}
table.c1 tr.partner {
  background-color: #e2ffcc;
  background-image: linear-gradient(#e2ffcc, rgb(221.22, 255, 193.8));
}
table.c1 tr.partner td {
  border-color: rgb(214.0025, 255, 175.95);
}
table.c1 tr.staff {
  background-color: #e2f0ff;
  background-image: linear-gradient(#e2f0ff, rgb(215.8, 235.3774712644, 255));
}
table.c1 tr.staff td {
  border-color: rgb(197.95, 228.3438793103, 255);
}
table.c1 td {
  border: 1px solid #DDDDDD;
  padding: 4px;
}
table.c1 td.fade-into-bg {
  background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(255, 255, 255, 0.5));
}

.pagination {
  /* because pagination looks weird with normal buttons */
  margin: 1em auto auto;
  display: flex;
  justify-content: center;
}
.pagination .pagination-ellipsis {
  color: #999;
  padding: 0 4px;
}
.pagination .pagination-item {
  display: inline-block;
  padding: 3px 10px;
  border: 1px solid #DDDDDD;
  border-right: none;
  background: #FFF;
}
.pagination .pagination-item:first-child {
  border-radius: 5px 0 0 5px;
}
.pagination .pagination-item:last-child {
  border-right: 1px solid #DDDDDD;
  border-radius: 0 5px 5px 0;
}
.pagination .pagination-item a {
  color: #27272c;
}
.pagination .pagination-item.current {
  background: #1B80CB;
  border: 1px solid rgb(24.6052173913, 111.3006376812, 184.9947826087);
  border-right: none;
  color: white;
}
.pagination .pagination-item.current:last-child {
  border-right: 1px solid rgb(24.6052173913, 111.3006376812, 184.9947826087);
}

#hamburger {
  top: 48px;
  left: -215px;
  position: fixed;
  z-index: 2000;
  width: 200px;
  padding: 1rem 0;
  height: calc(100vh - 48px);
  background: #191919;
  box-shadow: 1px 0 6px rgba(0, 0, 0, 0.15);
  display: block;
  overflow-y: scroll;
  transition: left 0.25s cubic-bezier(0.33, 1, 0.68, 1);
}
@media (prefers-reduced-motion) {
  #hamburger {
    transition: none;
  }
}
#hamburger.active {
  left: 0;
}
#hamburger .hamburger-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
#hamburger .hamburger-list .hamburger-header {
  margin-top: 0.8rem;
  display: block;
  padding: 5px 0.9rem;
  color: rgba(255, 255, 255, 0.66);
  font-weight: bold;
  text-transform: uppercase;
  font-size: 0.7rem;
}
#hamburger .hamburger-list .hamburger-link .hamburger-link-profile-picture {
  display: inline-block;
  width: 24px;
  height: 24px;
}
#hamburger .hamburger-list .hamburger-link a {
  display: flex;
  padding: 5px 1rem;
  color: rgba(255, 255, 255, 0.66);
  align-items: center;
  gap: 0.4rem;
}
#hamburger .hamburger-list .hamburger-link a:hover {
  background: rgba(255, 255, 255, 0.1);
  color: white;
  text-decoration: none;
}

.text-primary {
  color: #1B80CB;
}

.text-secondary {
  color: #eee;
}

.text-success {
  color: #28c228;
}

.text-danger {
  color: #c01b0c;
}

.text-warning {
  color: #ffb10a;
}

.text-dark {
  color: #333;
}

.submission {
  text-align: center;
  background: #FFF;
  border: 1px solid #DDDDDD;
  border-bottom: none;
}
.submission .img-submission {
  padding: 1rem;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.2));
}

.watch-box {
  background: #FFF;
  border: 1px solid #DDDDDD;
  padding: 1rem;
  overflow: hidden;
  word-break: break-word;
}
.watch-box .watch-box-info .watch-box-info-detail .watch-box-info-detail-title {
  color: gray;
}
.watch-box .watch-box-info .watch-box-info-stat .watch-box-info-stat-number {
  font-weight: 500;
}
.watch-box .watch-box-info .section-title h2 {
  font-size: 0.9em;
  font-weight: 500;
}
.watch-box .watch-box-description {
  margin: 0 auto;
  word-wrap: break-word;
}
.watch-box .watch-box-row {
  display: flex;
  align-items: center;
}
.watch-box .watch-box-row .watch-box-right {
  /* star rating */
  text-align: right;
}
.watch-box .watch-box-row .watch-box-left {
  /* author and upload date. */
  display: flex;
  align-items: center;
  gap: 0.8em;
  flex-grow: 1;
}
.watch-box .watch-box-row .watch-box-left .watch-box-profile-picture {
  width: 50px;
  height: 50px;
}
.watch-box .watch-box-row .watch-box-left .watch-box-author .watch-box-author-userlink {
  font-size: 1.1em;
}

.container.user, .container.read {
  margin-top: -65px;
}

.profile-box {
  display: flex;
  align-items: center;
}
.profile-box.centered {
  text-align: center;
}
.profile-box h1 {
  margin: 0;
  font-size: 14px;
}
.profile-box .profile-box-pfp {
  width: 90px;
  height: 90px;
  margin-right: 0.75em;
}
.profile-box .profile-box-pfp.small {
  width: 60px;
  height: 60px;
}
.profile-box .profile-box-pfp.small .profile-picture {
  width: 60px;
  height: 60px;
}
.profile-box .profile-box-pfp .profile-picture {
  width: 90px;
  height: 90px;
}
.profile-box .profile-box-info {
  width: 100%;
  line-height: 2.25em;
}
.profile-box .profile-box-info .profile-box-username {
  display: flex;
  gap: 0.25em;
  align-items: center;
  font-size: 24px;
  font-weight: 500;
}
.profile-box .profile-box-info .profile-box-handle {
  color: gray;
  font-size: 1.25em;
}
.profile-box .profile-box-follow {
  width: 120px;
  text-align: right;
  align-self: start;
}

.content-notice .pfp {
  width: 80px;
  margin-right: 5px;
}

.under-construction {
  max-width: 300px;
  margin: auto;
  border: 1px solid #DDDDDD;
  display: block;
}

.admin-legend-title {
  margin-bottom: 3px;
  color: gray;
  font-weight: 450;
}

.admin-legend {
  list-style: none;
  padding: 0;
  margin: 0 0 10px 15px;
}
.admin-legend .admin-legend-entry {
  display: flex;
  align-items: center;
  gap: 0.33em;
  margin-bottom: 0.25em;
}
.admin-legend .admin-legend-entry .admin-legend-icon {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: block;
}
.admin-legend .admin-legend-entry .admin-legend-icon.banned-other-unbanned {
  background: #ff9696;
  border: 1px solid rgb(255, 22.5, 34.125);
  background-image: linear-gradient(#ff9696, rgb(255, 124.5, 131.025));
}
.admin-legend .admin-legend-entry .admin-legend-icon.unbanned-other-banned {
  background: #ffc848;
  border: 1px solid rgb(199.5, 129.5659836066, 0);
  background-image: linear-gradient(#ffc848, rgb(255, 181.9110655738, 46.5));
}
.admin-legend .admin-legend-entry .admin-legend-icon.banned {
  background: #ffcccc;
  border: 1px solid rgb(255, 76.5, 85.425);
  background-image: linear-gradient(#ffcccc, rgb(255, 178.5, 182.325));
}
.admin-legend .admin-legend-entry .admin-legend-icon.shadow-banned {
  background: #ffe2cc;
  border: 1px solid rgb(255, 144.575, 76.5);
  background-image: linear-gradient(#ffe2cc, rgb(255, 207.675, 178.5));
}
.admin-legend .admin-legend-entry .admin-legend-icon.unbanned-other-unbanned {
  background: #fffdcc;
  border: 1px solid rgb(255, 239.075, 76.5);
  background-image: linear-gradient(#fffdcc, rgb(255, 248.175, 178.5));
}
.admin-legend .admin-legend-entry .admin-legend-icon.partner {
  background: #e2ffcc;
  border: 1px solid rgb(162.425, 255, 76.5);
  background-image: linear-gradient(#e2ffcc, rgb(215.325, 255, 178.5));
}
.admin-legend .admin-legend-entry .admin-legend-icon.staff {
  background: #e2f0ff;
  border: 1px solid rgb(98.5, 181.8767241379, 255);
  background-image: linear-gradient(#e2f0ff, rgb(200.5, 229.5353448276, 255));
}

#banForm {
  display: inline-block;
}

body.login {
  background: #333 url("/assets/biscuit_login_background.jpg");
  background-size: cover;
  background-position: center;
}
body.login .page {
  display: flex;
  align-items: center;
  height: calc(100vh - 48px);
  justify-content: center;
}
body.login .page-login {
  margin: 0;
  padding: 0;
}
body.login .page-login .register, body.login .page-login .login {
  width: 350px;
}
body.login .section-header {
  text-shadow: 0 0.1em 0.2em rgba(0, 0, 0, 0.5);
  color: white;
}
body.login .login-text {
  margin: 1em 0;
  font-size: 0.8em;
}
body.login .login-text.login-footer {
  margin: 0.8em 0 0 0;
  font-size: 0.9em;
  text-align: center;
  text-shadow: 0 0.1em 0.2em rgba(0, 0, 0, 0.5);
  color: white;
}
body.login .login-text.login-footer a {
  color: white;
}

.container.version .grid {
  align-items: center;
}

@media (min-width: 300px) {
  .img-version {
    max-width: 300px;
  }
}
@media (min-width: 950px) {
  .img-version {
    max-width: 100%;
  }
}

@media (min-width: 300px) {
  .col-version {
    text-align: center;
    border-bottom: 1px solid #DDDDDD;
    padding: 30px;
  }
}
@media (min-width: 950px) {
  .col-version {
    border-bottom: none;
    padding: 0;
  }
}

#settings-banner-preview {
  background: #111 center/cover;
  border: 1px solid #DDDDDD;
  padding: 1rem;
  height: 250px;
  display: flex;
}

.profile-yt2008 .content-box {
  /* change content-box padding on profiles that use yt channel 1.0 */
  padding: 0.5em;
  margin-bottom: 0.8em;
}
.profile-yt2008 .content-header.highlight-box {
  display: flex;
  align-items: center;
}
.profile-yt2008 .content-header.highlight-box .title {
  flex-grow: 1;
}
.profile-yt2008 .highlight-box .highlight-intro {
  display: flex;
  gap: 0.5em;
}
.profile-yt2008 .highlight-box .highlight-intro .highlight-username {
  font-weight: 800;
}
.profile-yt2008 .highlight-box .highlight-intro .highlight-stat {
  font-size: 0.8em;
}
.profile-yt2008 .highlight-box .highlight-intro .profile-picture {
  width: 88px;
  height: 88px;
}
.profile-yt2008 .highlight-description {
  margin: 0.8em 0;
}
.profile-yt2008 .highlight-description p:first-child {
  margin-top: 0;
}
.profile-yt2008 .highlight-description p:last-child {
  margin-bottom: 0;
}