:root {
  --header-img: url('/assets/images/bg/header.png');
  --bgor: #6885a0;
  --bg-img: url("/assets/images/bg/bg.png");
  --body-color: linear-gradient(to bottom, white, #f8fcff);
  --inner-color: #e3eef5;
  --inner-border-color: #a7bac9;
  --inner-img: url("/assets/images/bg/inner.png");
  --inner-border: 1px solid var(--inner-border-color);
  --headline-color: #54545a;
  --headline-img: url("/assets/images/bg/heading.png");
  --subheadline-img: url("/assets/images/bg/subheading.png");
  --seperator-img: url('/assets/images/bg/sep.png');
  --footer-img: url('/assets/images/bg/footer.png');
  --footer-text-color: #7d929e;
  --footer-color: #2e3234;
  --text-color: #6f6f7e;
  --text-red: #b18686;
  --text-orange: #b19586;
  --text-yellow: #b1a286;
  --text-green: #86b18d;
  --text-lime: #94b186;
  --text-aqua: #86a5b1;
  --text-blue: #869bb1;
  --text-purple: #8786b1;
  --text-pink: #b186a2;
  --text-black: black;
  --text-white: white;
  --text-glow: 
    -1px -1px 0 var(--text-white), 
    1px -1px 0 var(--text-white), 
    -1px 1px 0 var(--text-white), 
    1px 1px 0 var(--text-white);
  --text-shadow: 
    -1px -1px 0 var(--text-black), 
    1px -1px 0 var(--text-black), 
    -1px 1px 0 var(--text-black), 
    1px 1px 0 var(--text-black);
  --accent-color-2: #9595a7;
  --quote-color: #6885a0;
  --emphasis-color: #b16262;
  --hover-color: #76acd2;
  --title-font: 16px 'Daydream', sans-serif, normal;
  --bold-font: 16px 'Silom Bold', sans-serif, bold;
  --tiny-font: 20px 'NDS', 'MS Gothic', sans-serif;
  --numeric-font: 8px 'Numeric', sans-serif, normal;
}

.wrapper {
  width: 1200px;
  margin: 0 auto;
}

.dialog-box {
  position: absolute;
  min-width: 348px;
  padding: 24px 36px;

  text-overflow: ellipsis;
  text-align: center;
  font: var(--bold-font);
  
  border-image: url('/assets/images/dollies/dialog/box.png') 9 fill;
  border-image-width: 24px;
  color: #3b201c;
  
  opacity: 1;
  top: 100px;
  right: 0;
  transition: all 0.2s ease-in-out;
  pointer-events: none;
  z-index: 999999;
}
.dialog-box.text-hidden {
  opacity: 0;
  top: 96px;
  transition: all 0.2s ease-in-out;
}
.dialog-box::before {
  content: '';
  background: url('/assets/images/dollies/dialog/handle.png');
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  width: 24px;
  height: 24px;
  top: -21px;
  right: 16px;
}

.header {
  position: relative;
  width: 1200px;
  height: 252px;
  margin: 0 auto;
  background: var(--header-img);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  image-rendering: pixelated;
}
.header-container {
  position: absolute;
  display:flex;
  justify-content: center;
  top: 1em;
  bottom: 1em;
  width: 100%;
  height: 180px;

  image-rendering: pixelated;
  pointer-events: none;
  z-index: 1;
}
.header .header-dollies {
  justify-content: right;
  display: flex;
}
.header .doll {
  margin-top: auto;
  pointer-events: all;
  background-repeat: no-repeat;
  background-size: cover;
}
.header .doll:hover {
  cursor: url("/assets/cursor/hover.png"), pointer;
}
.header .doll.doll-me {
  position: relative;
  width: 64px;
  height: 64px;
  background-image: url('/assets/images/dollies/liltalky/zoey-still.gif');
}
.header .doll.doll-me.talk {
  background-image: url('/assets/images/dollies/liltalky/zoey-talk.gif');
  pointer-events: none;
}
.header .doll.doll-me.spin {
  background-image: url('/assets/images/dollies/liltalky/zoey-spin.gif');
  pointer-events: none;
}

.header .header-logo {
  display: block;
  justify-content: center;
  width: 360px;
  height: 176px;
  background: url("/assets/images/decor/logo.png") no-repeat;
  background-size: cover;
  image-rendering: pixelated;
  pointer-events: all;
}
.header .header-lilsitter {
  width: 160px;
  height: 280px;

  position: absolute;
  bottom: -96px;
  right: 256px;

  background-image: url("/assets/images/decor/sit.png");
  background-repeat: no-repeat;
  background-size: 160px;
  image-rendering: pixelated;
  
  z-index: 9999;
}
.header .lilsitter.irl {
  background-image: url("/assets/images/decor/sit-irl.png");
}
@keyframes header-logo {
  0% {
    transform: translate(-50%, 0em);
  }
  50% {
    transform: translate(-50%, -0.6em);
  }
  100% {
    transform: translate(-50%, 0em);
  }
}
.panel {
  margin-bottom: 16px;
}
.panel:last-child {
  margin-bottom: 0;
}
.panel-inset {
  text-align: center;
  background-color: var(--inner-color);
  border: var(--inner-border);
  border-style: dashed;
  padding: 8px;
  margin-bottom: 16px;
}

.form {
  margin: 0;
  margin-top: 8px;
  padding: 0;
}
.form .hidden {
  visibility: hidden !important;
  display: none !important;
  margin: 0 !important;
}
.form #form-image {
  width: auto;
  display: inline-block;
  margin-bottom: 0;
}
.form .smileys-container {
  display: flex;
  visibility: visible !important;
  margin-top: 8px;
  height: 40px;
  gap: 8px;
  transition: height 0.2s ease-in-out !important;
}
.form .smileys-container.hidden {
  display: flex;
  visibility: visible !important;
  height: 0;
  transition: height 0.2s ease-in-out;
}
.form .smiley-button {
  width: 32px;
  height: 32px;
  transform: scale(1);
  image-rendering: pixelated;
  transform: scale 0.2s ease-in-out;
  outline: none;
  border: 0;
  padding: 0;
  background: none;
}
.form .smiley-button:hover {
  animation: lilbounce 0.2s ease-in-out;
  cursor: url("/assets/cursor/hover.png"), pointer;
}
.form .smiley-button .smileys {
  width: 32px;
  height: 32px;
}
.form .btn .smiley-button {
  width: 16px;
  height: 16px;
}
.form .btn .smiley-button .smileys {
  width: 16px;
  height: 16px;
}

@keyframes lilbounce {
  0% {
    transform: scale(1);
  }
  20% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
.form .inner {
  text-align: left;
  padding: 8px;
  margin: 0 auto;
  margin-bottom: 8px;
}
.form #form-file {
  opacity: 0;
  position: absolute;
  margin-top: 8px;
  display: none;
}
.form .form-method {
  display: flex;
}
.form .option {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}
.form .verify {
  display: none;
}
.form .form-error {
  color: var(--emphasis-color);
  font: var(--bold-font);
  vertical-align: middle;
  line-height: 32px;
}

.form.form-poll {
  position: relative;
}
.form.form-poll:before {
  content: '';
  background: url('/assets/images/decor/poll.png');
  width: 100px;
  height: 100px;
  position: absolute;
  right: -128px;
  top: 50%;
  bottom: 50%;
  transform: translate(50%, -50%);
}
.form.form-poll .poll-title {
  color: var(--quote-color);
}
.form.form-poll .poll-title, .form.form-poll .poll-description {
  text-align: center;
  align-items: center;
  justify-content: center;
}
.form.form-poll .poll-submit {
  margin-top: 8px;
  display: flex;
  justify-content: space-between;
}
.form.form-poll .option {
  display: flex;
  justify-content: space-between;
  padding: 2px;
  margin: 0;
  font: var(--bold-font);
  color: var(--text-color);
  font-size: 16px;
  line-height: 16px;
  vertical-align: middle;
  border: 1px solid transparent;
}
.form.form-poll .option:hover {
  background: var(--inner-color);
  border: var(--inner-border);
  color: var(--quote-color);
}
.form.form-poll .option div {
  width: 50%;
}
.form.form-poll .option .radio input[type='radio'] {
  margin: 0;
  appearance: none;
}
.form.form-poll .option .radio input[type="radio"]:checked + label {
  background-image: url('/assets/images/btn/radio-selected.png');
}
.form.form-poll .option .radio {
  width: 12px;
  height: 12px;
  margin-right: 8px;
  margin-top: auto;
  margin-bottom: auto;
}
.form.form-poll .option .radio label {
  display: block;

  width: 10px;
  height: 10px;
  margin: auto;

  background-image: url('/assets/images/btn/radio.png');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;

  image-rendering: pixelated;
}

.profile-me {
  position: relative;
  margin: 0 auto;
  width: 292px;
  height: 400px;

  background: url('/assets/images/decor/me.gif') no-repeat;
  background-size: cover;
  background-position: center;

  image-rendering: pixelated;
}
.profile-description {
  display:flex;
  flex-wrap: wrap;
  gap: 2px;
  justify-content: center;
  align-items: center;
  font: var(--bold-font);
  color: #855d5d;
  margin-top: 8px;
}
.profile-description .item {
  padding: 4px 6px 2px;
  text-align: center;
  border-image: url('/assets/images/border/item.png');
  border-image-slice: 7 fill;
  border-image-width: 10px;
  border-image-repeat: repeat;
  image-rendering: pixelated;
  line-height: 16px
}

.container, .footer {
  width: 960px;
  margin: 0 auto;
}
.container {
  display: flex;
  gap: 16px;
  width: calc(960px - 32px);
  color: var(--text-color);
  text-align: left;
  transition: all 0.2s ease-in-out;
  background: var(--body-color);
  background-attachment: fixed;
  padding: 16px;
}

.gallery-modal {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99999;

  width: 100%;
  height: 100%;  

  pointer-events: all;
  opacity: 1;
  
  color: white;
  background: url('/assets/images/bg/lightbox.png');
  transition: opacity 0.2s ease-in-out;
  font-weight: normal;
}
.gallery-modal.no-controls #prev-button, .gallery-modal.no-controls #next-button {
  display: none !important;
}
.gallery-modal.hidden {
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}
.gallery-modal .modal-position {
  position: absolute;
  top: 32px;
  left: 32px;
  text-align: center;
  margin: 12px;
}
.gallery-modal .modal-button {
  background: none;
  outline: 0;
  border: none;
  color: var(--text-white);
  font-size: 24px;
  pointer-events: all;
}
.gallery-modal .modal-button.hidden {
  display: none;
  pointer-events: none;
}
.gallery-modal .modal-container {
  display: flex;
  position: relative;
  height: 100%;
  padding: 2em;
  margin: auto;
  text-align: center;
  justify-content: center;
  align-items: center;
}
.gallery-modal .modal-content {
  justify-content: space-between;
  text-align: center;
  
  max-width: 640px;
  max-height: 800px;
}
.gallery-modal img {
  max-width: 100%;
  max-height: 640px;
  border-radius: 4px;
  filter: drop-shadow(2px 2px 2px 2px rgb(0,0,0,0.2));
}
.gallery-modal #modal-caption {
  font-size: 16px;
  font: var(--bold-font);
}
.gallery-modal #close-button {
  position: absolute;
  top: 32px;
  right: 32px;
}
.gallery-modal #prev-button {
  position: absolute;
  left: 32px;
}
.gallery-modal #next-button {
  position: absolute;
  right: 32px;
}

.title {
  width: 100%;
  height: 48px;
  background: none;
  background-repeat: no-repeat;
  background-position: left;
  background-size: contain;
  margin-bottom: 16px;
  image-rendering: pixelated;
}
.title.title-gallery {
  background-image: url('/assets/images/text/gallery.png');
}
.title.title-collection {
  background-image: url('/assets/images/text/collection.png');
}

.sprite, .smileys {
  display: inline-block;
  position: relative;
  top: 1px;
  width: 14px;
  height: 14px;
  padding: 0;
  margin: 0;
  outline: none;
  border: none;
  background: none;
  background-image: url('/assets/images/icons/heart.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.smileys {
  width: 16px;
  height: 16px;
}
.sprite.sprite-star {
  background-image: url('/assets/images/icons/star.png');
}
.sprite.sprite-backward {
  background-image: url('/assets/images/icons/back.png');
}
.sprite.sprite-calendar {
  background-image: url('/assets/images/icons/calendar.png');
}
.sprite.sprite-info {
  background-image: url('/assets/images/icons/info.png');
}
.sprite.sprite-warning {
  background-image: url('/assets/images/icons/warning.png');
}
.sprite.sprite-draw {
  background-image: url('/assets/images/icons/draw.png');
}
.sprite.sprite-forward {
  background-image: url('/assets/images/icons/forward.png');
}
.sprite.sprite-folder {
  background-image: url('/assets/images/icons/folder.png');
}
.sprite.sprite-exit {
  background-image: url('/assets/images/icons/no.png');
}
.sprite.sprite-works {
  background-image: url('/assets/images/icons/gallery.png');
}
.sprite.sprite-fanworks {
  background-image: url('/assets/images/icons/heart.png');
}
.sprite.sprite-jukebox {
  background-image: url('/assets/images/icons/headset.png');
}
.sprite.sprite-faq {
  background-image: url('/assets/images/icons/message.png');
}
.sprite.sprite-docs {
  background-image: url('/assets/images/icons/docs.png');
}
.sprite.sprite-user {
  background-image: url('/assets/images/icons/user.png');
}
.sprite.sprite-admin {
  background-image: url('/assets/images/icons/admin.png');
}
.sprite.sprite-download {
  background-image: url('/assets/images/icons/download.png');
}
.sprite.sprite-clock {
  background-image: url('/assets/images/icons/timer.png');
}
.sprite.sprite-poll {
  background-image: url('/assets/images/icons/poll.png');
}
.sprite.sprite-youtube {
  background-image: url('/assets/images/socials/youtube.png');
}
.sprite.sprite-games {
  background-image: url('/assets/images/icons/games.png');
}

.smileys.smiley-smile {
  background-image: url('/assets/images/smileys/smile.png');
}
.smileys.smiley-woot {
  background-image: url('/assets/images/smileys/woot.png');
}
.smileys.smiley-flush {
  background-image: url('/assets/images/smileys/flushed.png');
}
.smileys.smiley-skull {
  background-image: url('/assets/images/smileys/skull.png');
}
.smileys.smiley-wave {
  background-image: url('/assets/images/smileys/wave.png');
}
.smileys.smiley-star {
  background-image: url('/assets/images/smileys/star.png');
}
.smileys.smiley-trans {
  background-image: url('/assets/images/smileys/trans.png');
}
.smileys.smiley-pride {
  background-image: url('/assets/images/smileys/pride.png');
}
.smileys.smiley-ghost {
  background-image: url('/assets/images/smileys/ghost.png');
}
.smileys.smiley-ribbon {
  background-image: url('/assets/images/smileys/ribbon.png');
}
.smileys.smiley-shock {
  background-image: url('/assets/images/smileys/shock.png');
}
.smileys.smiley-cat {
  background-image: url('/assets/images/smileys/cat.png');
}
.smileys.smiley-hearts {
  background-image: url('/assets/images/smileys/hearts.png');
}

.entry {
  display: block;
  position: relative;
  width: auto;
  height: 200px;
  margin-bottom: 8px;
  background: var(--inner-img);
  font: var(--title-font);
  overflow: hidden;
  z-index: 0;
}
.entry:hover .entry-img {
  background-size: 110%;
}
.entry.entry-top {
  height: 264px;
  margin-bottom: 16px;
}
.panel > .entry:last-child {
  margin-bottom: 0;
}
.entry::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  border: 24px solid transparent;
  border-image-outset: 24px;
  border-image: url('/assets/images/border/entry.png') 8 fill / 16px stretch;
  image-rendering: pixelated;
  pointer-events:none;
  z-index: 2;
}
.entry.entry-gallery {
  overflow:visible;
  width: 200px;
  height: 200px;
  margin-bottom: 8px;
  background: transparent;
}
.entry.entry-gallery:before {
  border-image-source: url('/assets/images/border/gallery.png');
}
.entry.entry-gallery .entry-date {
  display: block;
  position: relative;
  width: fit-content;
  font: var(--numeric-font);
  color: #b19586;
  padding: 2px 4px;
  margin: 0 auto;
  border: none;
  border-image: url('/assets/images/border/date-format.png');
  border-image-slice: 3 fill;
  border-image-width: 8px;
  image-rendering: pixelated;
  z-index: 2;
}
.entry.entry-gallery img {
  height: 200px;
}
.entry.entry-wip {
  pointer-events: none;
}
.entry .entry-decor.decor-me {
  position: absolute;
  width: 69px;
  height: 126px;
  bottom: 16px;
  right: 16px;
  background: url('/assets/images/decor/gurl.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  image-rendering: pixelated;
}
.entry .entry-img {
  position: absolute;
  width: 100%;
  height: 100%;

  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 4px;

  image-rendering: auto;
  transition: 
    background-size 0.2s ease-in-out, 
    filter 0.2s ease-in-out, 
    opacity 0.2s ease-in-out;
  z-index: 0;
}
.entry .entry-img.fade {
  animation: entry-fade;
  animation-duration: 0.5s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}
.entry .entry-title {
  display: flex;
  justify-content: space-between;
  position: absolute;
  padding: 16px;
  left: 0;
  right: 0;
  bottom: 0;
  color: var(--text-color);
  text-shadow: var(--text-glow);
  transition: color 0.1s ease-in-out;
  pointer-events: none;
  z-index: 1;
}
.entry .entry-title .entry-subtitle {
  font: var(--bold-font);
  color: var(--text-color);
  line-height: 16px;
  transition: color 0.1s ease-in-out;
}
.entry .entry-date {
  position: absolute;
  right: 0;
  top: 0;
  padding: 16px;
  z-index: 2;
  font: var(--bold-font);
  background: var(--body-color);
  border-radius: 0 0 0 4px;
  border-left: 2px solid var(--inner-border-color);
  border-bottom: 3px solid var(--inner-border-color);
  pointer-events: none;
}
@keyframes entry-fade {
  from {
    opacity: 0;
  } to {
    opacity: 1;
  }
}
.gallery {
  display: flex;
  flex-direction: row;
  gap: 8px;
  image-rendering: auto !important;
}
.gallery-date {
  width: fit-content;
  justify-content: left;
  font: var(--bold-font);
  color: #817669;
  padding: 8px 16px 6px;
  margin-bottom: 8px;
  border-image: url('/assets/images/border/date.png');
  border-image-slice: 7 fill;
  border-image-width: 16px;
  image-rendering: pixelated;
}
.gallery.gallery-flex {
  display: flex;
  flex-wrap: wrap;
}
.gallery.gallery-flex .entry {
  width: 100%;
  height: 240px;
}
.gallery.gallery-tiled {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 8px;
  row-gap: 18px;
  background: transparent;
}
.gallery.gallery-tiled .entry, .gallery.gallery-tiled img {
  aspect-ratio: 1 / 1;
  object-position: center;
  object-fit: cover;
  height: 200px;
  margin: 0;
}
.gallery.gallery-tiled img {
  width: 100%;
}
.gallery.gallery-tiled .entry-img {
  background-size: cover;
}
.gallery.gallery-tiled .gallery-ribbon {
  position: absolute;
  display: flex;
  gap: 24px;
  left: -6px;
  top: 40%;
  right: -4px;
  justify-content: center;
  text-align: center;
  padding: 12px;
  padding-top: 8px;
  border-image-source: url('/assets/images/border/ribbon.png');
  border-image-width: 16px;
  border-image-slice: 7 fill;
  border-image-repeat: no-repeat;
  image-rendering: pixelated;
  color: white;
  font: var(--bold-font);
  z-index: 2;
}

.message {
  padding: 12px;
  image-rendering: auto;
}
.message.message-align:nth-child(2n) .row .col:last-child {
  order: -1;
  margin-left: 0;
  margin-right: 12px;
}
.message:nth-child(2n) {
  background-color: var(--inner-color);
  border: var(--inner-border);
}
.message:nth-child(2n) .btn {
  border: none;
}
.message .head {
  color: var(--text-color);
  font: var(--bold-font);

  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
}
.message .head .time-stamp {
  color: var(--accent-color-2);
  font: var(--tiny-font);
  line-height: 12px;
}
.message .head .user-name {
  font-weight: bold;
  color: var(--bg-color);
}
.message .head .user {
  display: flex;
  gap: 8px;
}
.message .text-left {
  margin-top: 0;
}

.pagination {
  display: flex;
  flex-wrap: wrap;
  margin: 8px auto;
  gap: 6px;
}

.progress-bar {
  position: relative;
  image-rendering: pixelated;
  color: var(--text-color);
  background-color: #eee;
  box-shadow: inset 0px 0px 1px 1px #ddd;
  height: 16px;
  margin-bottom: 2px;
  overflow: hidden;
}
.progress-bar .bar {
  position: absolute;
  overflow: hidden;
  box-shadow: inset 0px 0px 1px 1px #638961;
  background-image: url('/assets/images/bg/bar.png');
  background-repeat: repeat-x;
  height: inherit;
  transition: width 0.5s ease-out;
}
.progress-bar .percentage {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  color: var(--text-color);
  font: var(--bold-font);
  font-size: 14px;
  line-height: 18px;
  z-index: 1;
}

/* General */
.que {
  margin-bottom: 32px;
}
.que .q {
  font-style: italic;
  color: var(--quote-color);
  margin-bottom: 4px;
  font: var(--bold-font);
}

.btn {
  color: var(--text-color);
  text-align: center;
  padding: 6px 8px;
  font: var(--bold-font);
  line-height: 16px;
  background-color: var(--inner-color) !important;
  border: var(--inner-border) !important;
  outline: none;
  
  image-rendering: pixelated;
  transition: none;
}
.btn:hover {
  cursor: url("/assets/cursor/hover.png"), auto;
  text-decoration: underline;
}
.btn[disabled] {
  color: var(--accent-color-2);
  text-shadow: none;
  pointer-events: none;
}
.btn.btn-page {
  min-width: 26px;
  padding: 4px 8px; 

  border: none;
  background: none;

  filter: none;
  font: var(--tiny-font);
  font-size: 16px;
}
.btn.btn-page:hover {
  color: var(--bg-color);
  cursor: url("/assets/cursor/hover.png"), pointer;
}
.btn.btn-page[disabled] {
  color: var(--bg-color);
  pointer-events: none;
  text-decoration: underline;
  background-color: var(--inner-color);
  border: var(--inner-border);
}

.pad-8 {
  padding: 8px !important;
}
.pad-16 {
  padding: 16px !important;
}
.gap-4 {
  gap: 4px !important;
}
.gap-8 {
  gap: 8px !important;
}
.gap-10 {
  gap: 10px !important;
}
.gap-12 {
  gap: 12px !important;
}
.gap-16 {
  gap: 16px !important;
}
.mhauto {
  margin: 0 auto !important;
}
.m0 {
  margin: 0 !important;
}
.mauto {
  margin: auto !important;
}
.mb0 {
  margin-bottom: 0 !important;
}
.mb8 {
  margin-bottom: 8px !important;
}
.mb12 {
  margin-bottom: 12px !important;
}
.mb16 {
  margin-bottom: 16px !important;
}
.mt0 {
  margin-top: 0 !important;
}
.mt8 {
  margin-top: 8px !important;
}
.mt12 {
  margin-top: 12px !important;
}
.mt16 {
  margin-top: 16px !important;
}

.row {
  width: 100%;
  display: flex;
  flex-direction: row;
}
.row-flex {
  display: flex;
  flex-direction: row;
  flex: 1;
}
.row-auto {
  display: flex;
  flex-direction: row;
  width: auto;
}
.row-between {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.col {
  width: 50%;
  resize: none;
  flex-shrink: 1;
}
.col.col-thin {
  max-width: 290px;
  min-width: 290px;
}
.col.col-thin h1 {
  color: var(--quote-color);
}
.col.col-wide {
  max-width: 67%;
  min-width: 67%;
}
.col.col-auto {
  width: auto;
}
.col img {
  max-width: 100%;
}

.footer {
  max-width: 960px;
  margin: 0 auto;
  text-align: center;
  image-rendering: pixelated;
  font: var(--tiny-font);
  color: var(--footer-text-color);
  background: var(--footer-color);
  border-top: 1px solid black;
}
.footer .footer-decoration {
  width: 100%;
  height: 32px;
  background: var(--footer-img);
  background-position: top center;
  background-repeat: repeat-x;
  background-size: 64px;
}
.footer .footer-container {
  padding: 24px;
}

.sprite, .pixelated {
  image-rendering: pixelated !important;
}
.profile-link {
  width: 88px;
  height: 31px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 8px;
  margin-bottom: 0;
  resize: none;
  overflow-y: scroll;
}
.profile-link:before {
  content: "<a target='_blank' href='https://zoeyonline.me'><img src='https://zoeyonline.me/assets/images/button.gif'></a>";
}

.text-shadow {
  text-shadow: var(--text-black) !important;
}
.text-glow {
  text-shadow: var(--text-glow) !important;
}
.text-bold {
  font: var(--bold-font);
}
.text-center {
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
}
.text-right {
  justify-content: right;
  align-items: right;
  text-align: right;
}
.text-left {
  justify-content: left;
  align-items: left;
  text-align: left;
}
.text-hyperlink {
  color: var(--quote-color);
}
.text-hyperlink, .text-underline {
  text-decoration: underline;
  font-weight: normal;
}
/*if else if else if else if else*/
.text-hyperlink[href]:not(
  :has(img), 
  :where(
    [href^="#"],
    [href^="javascript:" i],  
    [href^="/"]:not([href^="//"]),
    [href*="//zoeyonline.me"],
    [href*="//old.zoeyonline.me"]
  )
):after, .text-hyperlink.outgoing:after {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-left: 4px;
  background-image: url('/assets/images/icons/outgoing.png');
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: sub;
}
.drop-shadow {
  filter: drop-shadow(0 2px 0 rgba(0,0,0,0.25));
}
.drop-shadow.a1 {
  filter: drop-shadow(0 2px 0 black);
}
.rainbow-text {
  animation: rainbow-text;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.rainbow-text.linear {
  animation-timing-function: step-start;
}

.text-red {
  color: var(--text-red) !important;
}
.text-orange {
  color: var(--text-orange) !important;
}
.text-yellow {
  color: var(--text-yellow) !important;
}
.text-green {
  color: var(--text-green) !important;
}
.text-lime {
  color: var(--text-lime) !important;
}
.text-aqua {
  color: var(--text-aqua) !important;
}
.text-blue {
  color: var(--text-blue) !important;
}
.text-purple {
  color: var(--text-purple) !important;
}
.text-pink {
  color: var(--text-pink) !important;
}
.text-black {
  color: var(--text-color) !important;
}
@keyframes rainbow-text {
  from {
    color: red;
  }
  20% {
    color: yellow;
  }
  40% {
    color: lime;
  }
  60% {
    color: blue;
  }
  80% {
    color: magenta;
  }
  100% {
    color: red;
  }
}
.wavy-text {
  display: flex;
}
.wavy-text:is(.header-logo) { 
  display: block;
  animation: wavy-text 1s ease-in-out infinite;
}
.wavy-text span {
  animation: wavy-text 1s ease-in-out infinite;
}
.wavy-text span:nth-child(1) {
  animation-delay: 0s;
}
.wavy-text span:nth-child(2) {
  animation-delay: 0.1s;
}
.wavy-text span:nth-child(3) {
  animation-delay: 0.2s;
}
.wavy-text span:nth-child(4) {
  animation-delay: 0.3s;
}
.wavy-text span:nth-child(5) {
  animation-delay: 0.4s;
}
.wavy-text span:nth-child(6) {
  animation-delay: 0.5s;
}
.wavy-text span:nth-child(7) {
  animation-delay: 0.6s;
}
.wavy-text span:nth-child(8) {
  animation-delay: 0.7s;
}
.wavy-text span:nth-child(9) {
  animation-delay: 0.8s;
}
.wavy-text span:nth-child(10) {
  animation-delay: 0.9s;
}
.wavy-text span:nth-child(11) {
  animation-delay: 1s;
}
@keyframes wavy-text {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-0.3em);
  }
}

/* Basic HTML */
::selection {
  background-color: var(--inner-border-color);
}
input:not(
  [type='checkbox'], 
  [type='radio'],
  [type='range'],
  [type='color']
), textarea {
  outline: 0;
  width: 100%;
  background-color: var(--inner-color);
  border: var(--inner-border);
  padding: 6px;
  font: var(--tiny-font);
}
input:not(
  [type='checkbox'], 
  [type='radio'],
  [type='range'],
  [type='color']
)::placeholder, textarea::placeholder {
  color: var(--inner-border-color);
}
label:hover {
  cursor: url("/assets/cursor/hover.png"), pointer;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
p {
  line-height: 16px;
  font-weight: normal;
}
small {
  color: var(--accent-color-2); 
  font-size: 12px;
}
strong { 
  color: var(--quote-color);
  font-weight: normal;
  font: var(--bold-font);
  font-size: 16px;
}
em {
  color: var(--emphasis-color);
  font-style: normal;
  font: var(--bold-font);
}
a {
  color: inherit;
  text-decoration: none;
  transition: color 0.1s ease-in-out;
  font: var(--bold-font);
}
a:hover {
  color: var(--hover-color);
  cursor: url("/assets/cursor/hover.png"), pointer;
  transition: color 0.1s ease-in-out;
}
video {
  width: 100%;
  border-radius: 12px;
  image-rendering: auto;
}
h1 {
  position: relative;
  font: var(--title-font);
  text-align: left;
  padding: 8px;
  margin: auto;
  margin-bottom: 8px;
  color: var(--text-color);
  z-index: 0;
  image-rendering: pixelated;
}
h2 {
  margin-top: 0;
  margin-bottom: 12px;
  font: var(--bold-font);
  font-size: 18px;
  text-align: left;
  box-sizing: border-box;
  line-height: 20px;
  font-weight: normal;
}
h3 {
  width: auto;
  color: var(--text-color);
  background-position: top right;
  background-image: url('/assets/images/bg/subheading.png');
  background-color: var(--inner-color);
  background-repeat: no-repeat;
  margin-bottom: 16px;
  border-radius: 4px;
  padding: 6px;
  font-size: 18px;
  text-align: left;
  font-weight: normal;
  font: var(--bold-font);
}
.bg-left {
  background-position: top left;
}
.alert {
  font: var(--bold-font);
  font-weight: normal;
  text-align: left;

  border-radius: 4px;
  margin-bottom: 8px;
  padding: 8px;
}
.alert.info-alert {
  background-color: #eee;
  color: var(--text-color);
}
.alert.warning-alert {
  color: #975252;
  border-left-color: #b18686;
  background-color: #dfbcc1;
}
hr {
  height: 35px;
  outline: none;
  border: none;
  background: url('/assets/images/decor/decor.png');
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  image-rendering: pixelated;
}
html {
  scroll-behavior: smooth;
  font: var(--bold-font);
  cursor: url("/assets/cursor/pointer.png"), auto;
}
button {
  font: var(--bold-font);
}
button:hover {
  cursor: url("/assets/cursor/hover.png"), pointer;
}
::-webkit-scrollbar {
  border-image: transparent;
  border-image-source: url('/assets/images/bg/scrollbar.png');
  border-image-width: 8px;
  border-image-slice: 7 fill;
  border-image-repeat: repeat;
}
::-webkit-scrollbar-thumb {
  border-image: url('/assets/images/bg/scrollbar-thumb.png');
  border-image-width: 8px;
  border-image-slice: 7 fill;
  border-image-repeat: repeat;
}
::-webkit-scrollbar-thumb:hover {
  border-image-source: url('/assets/images/bg/scrollbar-thumb-hover.png');
}
body.no-scroll {
  overflow: hidden !important;
}
body {
  margin: 0 !important;
  padding: 0 !important;
  word-spacing: 2px;
  font: var(--tiny-font);
  color: var(--text-color);
  background-image: var(--bg-img);
  background-color: var(--bg-color);
  overflow-y: scroll !important;
  overflow-x: hidden;
}