* {
  box-sizing: border-box;
  scrollbar-color: var(--color2) var(--color4);
}
html {
  /* COLORS */
  --link-color: #2106a5; /*hsl(171, 93%, 20%);*/
  --link-hover-color: #f4007a;
  --sidebar-link-color: black;
  --sidebar-link-hover-color: #4771e4;
  --page-background-image: url("https://clubjessica.neocities.org/images/bgs/purple-hearts-sadgrl.gif");
  --page-background-color: #cebcfe;
  --main-background-color: #b0c5ff;
  --sidebar-background-color: #f5c9ff;
  --main-text-color: #000000;
  --main-border-color: #b0c5ff;
  --header-background: linear-gradient(
    90deg,
    rgb(252, 244, 201),
    rgb(251, 205, 242),
    rgb(232, 190, 250),
    rgb(171, 191, 255),
    rgb(187, 243, 192)
  );
  --color1: rgb(252, 244, 201);
  --color2: rgb(251, 205, 242);
  --color3: rgb(232, 190, 250);
  --color4: rgb(171, 191, 255);
  --color5: #bbf3c0;
  /* FONTS */
  --header-font: "venice";
  --second-header-font: "Venice"; /*superstylin*/
  --main-font: Verdana;
  --secondary-font: "freePixel";
}
/* Fonts */
@font-face {
  font-family: "fancy";
  src: url("fonts/RomanceA.ttf") format("truetype");
}
@font-face {
  font-family: "basiic";
  src: url("fonts/basiic.ttf"); /*from Cinni.net*/
}
@font-face {
  font-family: "venice";
  src: url("fonts/VeniceClassic.ttf");
}
@font-face {
  font-family: "freePixel";
  src: url("fonts/FreePixel.ttf");
}
@font-face {
  font-family: "superstylin";
  src: url("fonts/Superstylin.ttf");
}
@font-face {
  font-family: "hyperNextRegular";
  src: url("fonts/AtkinsonHyperlegibleNext-Regular.otf");
}
@font-face {
  font-family: "hyperNextLight";
  src: url("fonts/AtkinsonHyperlegibleNext-Light.otf");
}
@font-face {
  font-family: "hyperMonoRegular";
  src: url("fonts/AtkinsonHyperlegibleMono-Regular.otf");
}
@font-face {
  font-family: "intelOneMonoRegular";
  src: url("fonts/IntelOneMono-Regular.otf");
}
@font-face {
  font-family: "intelOneMonoLight";
  src: url("fonts/IntelOneMono-Light.otf");
}
/* Basics */
html {
  font-size: 16px;
}
html,
body {
  background-color: var(--page-background-color);
  height: fit-content;
  margin: 0;
}
body {
  background-image: var(--page-background-image);
  cursor: url(https://cur.cursors-4u.net/food/foo-6/foo507.ani), url(https://cur.cursors-4u.net/food/foo-6/foo507.png),
    auto;
  background-attachment: fixed;
  color: var(--main-text-color);
  font-family: var(
    --main-font
  ); /*"/venice", "/basiic", "/fancy", "/Quicksand", "/Karla", "/Itim", "/Dosis", "/Concert One"; */
  font-size: 16px;
  line-height: 1.3rem;
}
::selection {
  background-color: #b6e1d5;
}
h1 {
  font-family: var(--header-font);
  font-weight: normal;
  font-size: 2rem;
  line-height: 1.3em;
  margin: 1rem auto;
  text-align: center;
}
h2 {
  font-family: var(--header-font);
  font-weight: normal;
  line-height: 1em;
  text-align: center;
}
.alt-h2 {
  font-family: venice;
}
h3 {
  font-family: var(--main-font);
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
}
p {
  font-family: var(--main-font), sans-serif;
  font-size: 0.9rem;
  line-height: 1.37rem;
}
a {
  color: var(--link-color);
}
a:hover {
  color: var(--link-hover-color);
}
strong {
  font-weight: 600;
}
img {
  max-width: 100%;
}
.show-on-smaller {
  display: none;
}
.show-on-small {
  display: none;
}
.show-on-medium {
  display: none;
}
/* Full Page Layout */
#container {
  display: grid;
  grid-gap: 7px;
  grid-template-areas:
    "header header header"
    "site-nav main mood-bar"
    "site-nav main blinkies-box"
    "credits-bar main blinkies-box"
    "decor-box1 main blinkies-box"
    "decor-box1 main decor-box2"
    "bottom-bar bottom-bar bottom-bar";
  grid-template-columns: 0.8fr 3.25fr 0.8fr;
  grid-template-rows: auto auto auto auto auto minmax(0, 1fr) auto;
  margin: 0 auto;
  max-width: 1200px;
  min-height: 0; /* NEW */
  min-width: 0; /* NEW; needed for Firefox */
  padding: 10px 5px;
  text-align: center;
}
#index #container {
  grid-template-areas:
    "header header header"
    "site-nav main mood-bar"
    "site-nav main blinkies-box"
    "updates main blinkies-box"
    "credits-bar main blinkies-box"
    "credits-bar main decor-box2"
    "bottom-bar bottom-bar bottom-bar";
  grid-template-rows: auto auto auto minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) auto;
}
#settings-menu {
  grid-area: settings-menu;
}
#site-nav {
  grid-area: site-nav;
}
#credits-bar {
  grid-area: credits-bar;
  padding: 0;
}
#mood-bar {
  grid-area: mood-bar;
}
#header {
  background-color: var(--main-background-color);
  background: var(--header-background);
  border: 4px ridge var(--main-border-color);
  border-width: 4px 0;
  grid-area: header;
}
#main {
  background: var(--main-background-color);
  border: 3px ridge var(--main-border-color);
  grid-area: main;
  height: 100%;
  margin: 0 auto;
  /*  max-width: 815px;*/
  min-height: 0;
  min-width: 0;
  width: 100%;
  padding: 0 20px 15px;
  text-align: left;
}
#blog-main {
  grid-area: main;
}
#updates {
  grid-area: updates;
  overflow-y: scroll;
}
#blinkies-box {
  grid-area: blinkies-box;
}
#decor-box1 {
  grid-area: decor-box1;
}
#decor-box2 {
  grid-area: decor-box2;
}
#decor-box1,
#decor-box2 {
  background-image: linear-gradient(
    90deg,
    rgb(252, 244, 201),
    rgb(251, 205, 242),
    rgb(232, 190, 250),
    rgb(171, 191, 255),
    rgb(187, 243, 192)
  );
  border: 3px ridge var(--main-border-color);
  max-width: 277px;
  min-height: 0;
  min-width: 0;
}
#bottom-bar {
  background-color: var(--main-background-color);
  background: var(--header-background);
  border: 4px ridge var(--main-border-color);
  grid-area: bottom-bar;
  min-height: 1.8rem;
}
/* Header */
#banner {
  margin: 0 auto;
  max-width: 500px;
  padding: 0.1rem 1rem;
  position: relative;
}
#banner img {
  position: relative;
  top: 0.35rem;
}
/* Sidebars */
.title-bar {
  background-color: var(--main-background-color);
  margin: 0 auto;
  outline: var(--main-border-color) 3px ridge;
  padding: 5px 10px;
  text-align: center;
  color: var(--main-text-color);
  font-family: var(--header-font);
}
h2.title-bar {
  font-size: 1.5rem;
}
h1.title-bar {
  background-color: var(--sidebar-background-color);
  display: block;
  font-size: 2rem;
  margin: 0 -20px;
}
#settings-menu,
#site-nav,
#mood-bar,
#credits-bar,
#updates,
#blinkies-box {
  background: var(--sidebar-background-color);
  border: 3px ridge var(--main-border-color);
  max-width: 277px;
}
.center-flex {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
}
aside .center-flex {
  gap: 0.6rem;
  /*  height: calc(100% - 2.2rem);*/
  padding: 1rem 0.75rem;
  text-wrap: balance;
}

/* Gif Settings */
.gif-settings {
  display: flex;
  flex-flow: row nowrap;
  gap: 0.43rem;
  justify-content: center;
  margin: 0.2rem auto;
}
.gif-settings input {
  background-color: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  height: 1.93rem;
  width: 1.93rem;
}
.cloud-border {
  border: 12px solid transparent;
  border-image: url(images/nav/frames/cloud-border.png) 8 round;
}
.play-pause-main {
  border-image: url(images/nav/frames/cloud-border.png) 8 round;
  align-items: center;
  display: flex;
  flex-flow: row wrap;
  gap: 0.4rem;
  justify-content: center;
  background-color: white;
}
.play-pause-main p {
  margin: 0 auto;
}
.play-pause-main .gif-settings {
  padding: 0.1rem 0.2rem;
  gap: 0.39rem;
  margin: 0;
}
.play-pause-main .gif-settings input {
  height: 1.73rem;
  width: 1.73rem;
}
.main-gif-flex {
  display: inline-block;
  text-align: center;
}
.gif-cat-box {
  align-items: center;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-evenly;
  margin: 2rem auto 3rem;
  max-width: 430px;
  padding: 0.1rem;
  position: relative;
  text-align: center;
}
.gif-cat-box img {
  width: auto;
  height: auto;
}
/*Adjust it so they are flex and relative*/
.sidebar-note {
  font-family: var(--main-font);
  max-width: 11.3rem;
  font-size: 0.9rem;
  line-height: 1.3rem;
  margin: 0 auto;
  text-wrap: balance;
}
button {
  background-color: var(--main-background-color);
  color: var(--main-text-color);
  display: inline-block;
  font-family: var(--header-font);
  font-size: 1.1rem;
  padding: 0.3rem;
}
/* Site Navigation */
#site-nav ul {
  padding: 0;
  list-style-type: none;
}
.rectangle-link {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0.8rem 0;
}
#site-nav a {
  color: var(--sidebar-link-color);
  text-decoration: none;
}
#site-nav a:hover {
  text-decoration: underline;
}
#site-nav li {
  font-family: var(--header-font);
  font-size: 1.3rem;
  line-height: 0.5rem;
  margin: 0;
  text-align: center;
}
#site-nav li a {
  line-height: 1.2rem;
}
#site-nav li:hover {
  background-color: white !important;
}
/* Rainbow List */
#site-nav ul {
  margin: 0;
}
#site-nav-links li {
  border-top: 1px black solid;
  padding: 0 5px;
  text-align: center;
  text-indent: 0;
}
#site-nav-links li:nth-child(5n + 1) {
  background-color: rgb(252, 244, 201);
}
#site-nav-links li:nth-child(5n + 2) {
  background-color: rgb(251, 205, 242);
}
#site-nav-links li:nth-child(5n + 3) {
  background-color: rgb(232, 190, 250);
}
#site-nav-links li:nth-child(5n + 4) {
  background-color: rgb(171, 191, 255);
}
#site-nav-links li:nth-child(5n + 5) {
  background-color: rgb(187, 243, 192);
}
/* iMood */

.mood-text {
  margin: 0 0 0.5rem 0;
  font-size: 0.9rem;
}
#mood a {
  display: inline-block;
  height: 1.5rem;
}
.imood {
  background-color: white;
  height: 1.3rem;
  padding: 0 0 0.1rem;
  outline: 1px gray dotted;
}
/* Updates / Scrollboxes */
.scrollbar-content {
  font-size: 1rem;
  margin: 0 auto;
  max-height: 0;
  text-align: left;
  text-wrap: balance;
}
#updates li {
  font-size: 0.9rem;
}
/* Credits */
#credits-bar .center-flex {
  justify-content: flex-start;
  padding: 1rem 0 0;
}
.credits-instructions {
  margin: 0 auto;
  padding: 0 0.7rem;
  text-align: center;
  text-wrap: balance;
}
.credits-details-p,
.credits-instructions-p {
  font-size: 0.85rem;
  line-height: 1.15rem;
  margin: 0 auto;
}
.credits-details-p {
  padding: 0;
}
.credits-instructions-p {
  border-style: solid;
  border-color: rgb(128, 157, 254);
  border-width: 1px 0;
  padding: 0.45rem 0;
  text-wrap: balance;
}
#credits-bar .credits-list {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 0.5rem;
  /* height: calc(100% - 11rem);*/
  justify-content: flex-start;
  margin: 0.3rem auto;
}
.credits-list {
  padding: 0 0.1rem 0.2rem;
  list-style-type: none;
}
.credits-list li {
  padding: 0;
  margin: 0;
}
.credits-list a {
  color: black;
  text-decoration: none;
}
.credits-list a:hover {
  color: var(--sidebar-link-hover-color);
}
/* Blinkies Box */
#blinkies-box .center-flex {
  padding: 1rem 0 0.5rem;
}

#my-blinkies {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  margin: 0.1rem 0 0;
  max-width: 200px;
  padding: 0.5rem;
}
#my-blinkies img {
  max-width: 100%;
}
#blinkie-cafe-sidebar {
  margin: 0.4rem 0 0;
}
#blinkies-box hr {
  border-top: 1px rgb(128, 157, 254) solid;
  border-bottom: none;
  margin: 0 0.3rem;
  width: 90%;
}
#blinkies-box .credits-instructions-p {
  border-width: 1px 0 0;
}
/* Sidebar Text Lists */
hr.credits-hr {
  border-top: 1px black dashed;
  border-bottom: none;
  margin: 0.3em 0.3em 0.5em;
}
ul.scrollbar-list {
  margin: 0.8rem auto 0;
}
.indirect-sources-section {
  margin: 0 0 0.6rem;
  padding: 0 0.375rem;
}
.indirect-sources-section h3 {
  font-size: 1rem;
  margin: 0 auto 0.3rem;
}
.indirect-sources-section img {
  display: block;
  margin: 0.3em auto;
}
.indirect-sources-section p {
  margin: 0.3em auto;
  text-wrap: balance;
  line-height: 1.3rem;
}
.indirect-sources-list,
.sidebar-text-list,
#updates-list dd li {
  padding: 0 0 0 1rem;
}
ul {
  list-style: none;
  text-align: left;
}
#indirect-sources {
  margin: 0 auto 0;
}
.indirect-sources-list {
  margin: 0.6rem auto 0;
}
.updates-year {
  margin: 1rem 0 0 0;
  font-weight: 400;
}
.sidebar-text-list li,
#updates-list dd li {
  margin: 0 0 0.5rem 0;
}
.sidebar-text-list li:before,
#updates-list dd li:before {
  content: "✿ ";
}
#updates-list ul {
  padding: 0;
}
#updates-list dt {
  font-weight: 600;
  margin-left: 0;
  text-align: center;
}
.updates-year:before {
  content: "☾⋆⁺ ";
  font-weight: 400;
}
.updates-year:after {
  content: " ₊⋆☽";
  font-weight: 400;
}
#updates-list {
  margin: 0.6rem auto 0 auto;
}
#updates-list dd {
  text-align: left;
  padding: 0;
  margin: 0.5rem 0 0 0;
}
\.indirect-sources-list li {
  font-family: var(--main-font);
  font-size: 0.9rem;
}
.indirect-sources-list a {
  color: var(--link-color);
  font-family: var(--header-font);
  font-weight: 600;
  font-size: 1.2rem;
  margin-bottom: 0.2rem;
}
.indirect-sources-list a:hover {
  color: var(--sidebar-link-hover-color);
}
/* Text Boxes in Mains */
.textbox {
  background-color: var(--page-background-color);
  border: 1px black solid;
  margin: 1.5rem auto 1rem;
  max-width: 600px;
  position: relative;
}
.textbox .title-bar {
  background-color: var(--sidebar-background-color);
  border-bottom: 1px solid black;
  font-size: 1.7rem;
  outline: none;
  margin: 0 auto;
}
.textbox p {
  padding: 0 1rem;
}

/* Home Page */
:root {
  /*DOORS*/
  --door-accent-color: #cebcfe;
  --door-background-color: #ff78a0;
  --door-outline-color: #f86893;
  --door-back-color: linear-gradient(135deg, #cebcfe, #9782d0, black);
  --keyhole-color: #333;
  --sign-background-color: var(--sidebar-background-color);
}
#guestbook-reminder {
  text-align: center;
  margin: 3rem auto 0;
}
/* Castle Rooms (flex) */
#castle {
  margin: 1.8rem auto 1.25rem auto;
}
#roof {
  background-image: url(images/nav/dividers/blue-ribbon-bonnibel-a.gif);
  background-repeat: repeat-x;
  border: none;
  height: 40px;
  margin-bottom: 1.4rem;
  max-width: 29rem;
  top: -15px;
  position: relative;
}
#castleWrap {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  margin: -30px auto 0.5rem auto;
  max-width: 28rem;
  text-align: center;
}
.castleSquare {
  aspect-ratio: 1 / 1.2;
  border-bottom: 0.5rem #9f80f3 ridge;
  margin: 1rem 0 0 0;
  padding: 0;
  text-align: center;
  height: 10.785rem;
  width: 9rem;
}
.castleDecorSpace {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: flex-end;
}
.top-decor {
  justify-content: flex-start;
}
.blank-decor {
  height: 50%;
  width: 50%;
}
#heart-mobile {
  margin-bottom: 1.2rem;
}
#cat-play-mobile {
  margin-bottom: -8px;
}
#day-window {
  width: 5rem;
}
#pink-table-kitty {
  margin-bottom: -2px;
}
#lamp-table {
  margin-bottom: -10px;
}
#kit-kat-clock {
  margin-top: -10px;
  height: 80%;
}
/* Castle Rooms */
/*table {
  aspect-ratio: 1 / 1.2;
  /* height: auto; 
  width: auto;
  margin: 0 auto;
  min-height: 500px;
  max-height: 50vh;
  /* max-width: 500px;*
}*/
#castleMap .odd td:nth-child(2n) {
  background-color: var(--even-cell-background-color);
}
#castleMap .even td:nth-child(2n-1) {
  background-color: var(--even-cell-background-color);
  border: 2px solid green;
}
#castleMap td {
  border: 1px solid var(--main-border-color);
  margin: 0;
  padding: 0;
  text-align: center;
  height: 33%;
  width: 25%;
}
/* Doors */
/*wrap for each door*/
.door {
  cursor: pointer;
  display: inline-block;
  position: relative;
  /*Door open animation*/
  transform-style: preserve-3d;
  transform: perspective(156.25rem);
}
.door:hover .door-front {
  transform: rotateY(-160deg); /*Door open animation*/
}
/*Front of doors*/
.door-front {
  box-shadow: 1.875rem 0 3.125rem rgba(0, 0, 0, 0.2);
  display: flex;
  justify-content: center;
  overflow: hidden;
  position: absolute;
  /*Door open animation*/
  transform-origin: left;
  transition: 0.6s;
  /**/
  z-index: 1;
}
/*Back of doors*/
.door-back {
  align-items: center;
  background: var(--door-back-color);
  display: flex;
  height: 100%;
  outline: 0.2rem solid var(--door-outline-color);
  overflow: hidden;
  position: relative;
  width: 100%;
}
.door-image {
  display: block;
  min-width: 100%;
  min-height: 100%;
  margin: auto;
  object-fit: cover;
  image-rendering: pixelated;
}
/*Door shape and size*/
.door,
.door-front,
.door-front2,
.door-back {
  border-radius: 3rem 3rem 0 0; /*shape*/
  height: 10rem;
  width: 7rem;
}
/*Door Color*/
.door-front,
.door-front2,
.door-front:before,
.door-front:after,
.door-front2,
.door-front2:before,
.door-front2:after {
  background-color: var(--door-background-color);
}
/*Door Panels*/
.door-front:before,
.door-front:after,
.door-front2:before,
.door-front2:after {
  border: 0.25rem ridge var(--door-accent-color);
  content: "";
  position: absolute;
  height: 3.4rem;
  width: 1.3rem;
}
/*Panel positions*/
.door-front:before,
.door-front2:before {
  top: 1.2rem;
}
.door-front:after,
.door-front2:after {
  top: 5.6rem;
}
.door-front:before,
.door-front:after {
  left: 1.35rem;
}
.door-front2:before,
.door-front2:after {
  right: 1.35rem;
}
/*Doorknobs*/
.knob {
  background-color: var(--door-accent-color);
  border-radius: 0.125rem;
  height: 1.6rem;
  left: 6rem;
  position: absolute;
  top: 5rem;
  width: 0.8rem;
}
.knob:before {
  background-color: var(--door-background-color);
  border-radius: 50%;
  box-shadow: 2px 2px rgba(0, 0, 0, 0.2);
  content: "";
  height: 12px;
  left: 0;
  position: absolute;
  top: 2px;
  width: 12px;
  z-index: 99;
}
.knob:after {
  background-color: var(--keyhole-color);
  content: "";
  height: 4px;
  left: 6px;
  position: absolute;
  top: 16px;
  width: 2px;
}
/*Signs*/
.about-sign,
.cat-sign,
.crush-sign,
.library-sign {
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 3;
}
.about-sign:before,
.cat-sign:before,
.crush-sign:before,
.library-sign:before {
  background-color: var(--sign-background-color);
  border: 3px ridge var(--door-accent-color);
  /*color: #1f3a40;*/
  color: black;
  font-family: var(--second-header-font);
  font-size: 1rem;
  left: inherit;
  line-height: 1.1;
  margin: 0 1.3rem;
  padding: 0.1rem 0.2rem;
  position: absolute;
  text-align: center;
  top: 1.7rem;
}
.about-sign:before {
  content: "About Me";
}
.cat-sign:before {
  content: "Cat Clubhouse";
}
.crush-sign:before {
  content: "Shrines";
}
.library-sign:before {
  content: "Resource Library";
}
/* About Me Page */
#about-page .intro {
  margin: 1.5rem auto 0;
  max-width: 580px;
  text-align: center;
}
/* Categories */
.category-list {
  align-items: center;
  display: flex;
  flex-flow: row wrap;
  gap: 10px;
  justify-content: center;
  margin: 20px auto;
  /* max-width: 600px;*/
  text-align: center;
}
.about-list {
  margin: 1rem 0;
  align-items: center;
  display: grid;
  gap: 5px;
  grid-template-columns: auto auto;
  line-height: 1.6rem;
}
.about-list > * {
  text-align: center;
  border: #cebcfe ridge;
  padding: 5px 10px;
}
.about-list dt {
  background: var(--color5);
}
.about-list dd {
  background: #cebcfe;
  margin: 0;
}
.about-list-list {
  list-style: none;
  margin: 0;
  padding-left: 0.3rem;
  text-align: left;
}
.about-list-list li:before {
  content: "✿ ";
  padding: 0 0.5rem 0 0;
}
.category-section {
  align-items: center;
  display: flex;
  justify-content: space-evenly;
  flex-flow: row wrap;
  width: 100%;
}
/* Basics */
#category-basics {
  gap: 3rem;
  justify-content: center;
}
#femme-doll-link {
  align-self: flex-end;
}
#femme-doll {
  align-content: flex-end !important;
  height: 330px;
}
/* Personality */
#category-personality {
  justify-content: space-around;
  margin: 1rem 0 0;
}
#mermx-link {
  max-height: 370px;
  max-width: 30%;
}
#mermx {
  max-width: 150%;
}
/* Media */
#category-media {
  flex-flow: row nowrap;
  position: relative;
}
#winter-frankie-link {
  max-width: 20%;
  max-height: 330px;
}
#winter-frankie {
  max-width: 150%;
  position: relative;
  right: 50%;
  bottom: 1.5rem;
}
/* Quiz Results */
#quiz-results {
  text-align: center;
  margin: 0 0 15px;
}
/* Dolls */
.gallery {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-evenly;
}
.gallery img,
.gallery a {
  align-self: baseline;
  min-height: 200px;
  max-height: 400px;
}
#pink-wings-doll {
  height: 200px;
}
/*Credits*/
.logo-credit {
  max-width: 105px;
}
/* Cat Clubhouse */
#cat-club-intro {
  margin-top: 1.4rem;
  text-align: center;
}
#cat-club-instructions h1 {
  margin-top: 0.5rem;
}
#cat-club-instructions {
  margin-bottom: 3.125rem;
}
#where img {
  height: 23px;
  padding: 0 3px;
  vertical-align: text-top;
}
#drag-instructions {
  background-color: var(--sidebar-background-color);
  border: #375871 0.1rem dashed;
  display: table;
  margin: 0 auto;
  padding: 0.2rem 1rem;
}
#warning {
  font-size: 1rem;
  margin-top: 20px;
}
#warning img {
  vertical-align: text-top;
  height: 21.6px;
  padding: 0 3px;
}
#club-kitties {
  margin: 2.3rem auto;
}
#backdropWrap {
  min-width: 320px;
  width: 100%;
  height: 32rem;
  margin: 0 auto;
}
.backdrop {
  text-align: center;
  margin: 0 auto 1rem auto;
  min-width: 320px;
  width: 100%;
  height: 32rem;
  overflow: hidden;
}
.backdrop div {
  height: 32rem;
  width: 100%;
}
.backdrop div img {
  height: auto;
  width: 100%;
  clear: both;
  display: block;
  margin: 0 auto;
}
.backdrop div h3,
.backdrop .previous,
.backdrop .next {
  margin-top: 1rem;
}
.backdrop .previous,
.backdrop .next {
  display: inline;
  font-size: large;
  font-weight: bold;
  text-decoration: none;
}
.backdrop .previous {
  float: left;
  margin-left: 5rem;
}
.backdrop .next {
  float: right;
  margin-right: 5rem;
}
/* Specific Cats */
#fishbowl {
  max-width: 8rem;
  height: auto;
}
#cat-table {
  max-width: 13rem;
  height: auto;
}
#play-duo {
  height: auto;
  max-width: 8.5rem;
}
#hello-kitty-bath {
  width: auto;
  max-height: 5.8rem;
}
#baby-aisha {
  height: auto;
  max-width: 3.5rem;
}
#faerie-aisha {
  height: auto;
  width: 3.9rem;
}
#cat-looking-up {
  height: 4.75rem;
  width: auto;
}
#vampire-cat {
  height: auto;
  width: 4.5rem;
}
#butterfly-chase {
  height: 4.375rem;
  width: auto;
}
#fishbowl2 {
  height: 4.4rem;
  width: auto;
}
/* Shrines */
.clearfix {
  overflow: auto;
  width: 100%;
}
#shrines-page #main {
  height: 100%;
  /*padding: 0 0.7rem;*/
}
#shrines-intro {
  text-align: center;
}
#collage-instructions {
  background-color: var(--sidebar-background-color);
  border: #375871 0.1rem dashed;
  margin: 0 0 1rem 0;
  padding: 0.5rem 1rem;
}
.shrines-flexbox {
  display: flex;
  justify-content: center;
}
/* Rei-Ryoko Collage */
#collage-container {
  display: table;
}
.collage {
  margin: 0.5rem 1rem 0.8rem 0;
  padding: 0;
  position: relative;
}
.collage-frame {
  margin: 0 6px;
}
.rei-ryoko {
  margin: 6px;
  padding-top: 5px;
}
/*#crush-collage-caption {
  background-color: var(--sidebar-background-color);
  border: 2px ridge var(--sidebar-background-color);
  display: inline-block;
  font-size: 0.9rem;
  float: left;
  padding: 0.3rem 0.5rem;
  max-width: 320px;
}*/

/* End Collage */
.crush-list {
  /*  display: inline;
//  float: right;
  max-width: 220px;*/
  margin: 0.8rem;
}
figcaption {
  font-family: var(--header-font);
  font-size: 1.7rem;
  line-height: 1.8rem;
  text-align: center;
}
.crush-facts {
  border-bottom: double 2px black;
}
.footnotes strong {
  text-decoration: underline;
}
#crush-fast-facts,
#crush-fast-facts2 {
  margin: 1.2rem 0 0;
  padding: 0;
  list-style: none;
}
#crush-fast-facts li,
#crush-fast-facts2 li {
  margin-bottom: 0.1rem;
}
.category {
  font-family: var(--header-font);
  font-size: 1.3rem;
  text-align: center;
}
.category::before {
  content: " ♡ ";
}
.category::after {
  content: " ♡ ";
}
.response,
.response p {
  font-family: var(--main-font);
  font-size: 1rem;
}
.response {
  line-height: 1.3rem;
  margin: 0.5rem 0;
  padding: 0 0.5rem 0 1rem;
}

.footnotes {
  font-size: 1rem;
  line-height: 1.3rem;
  text-align: right;
  text-wrap: balance;
}
/* Resource Library */
:root {
  /* --resourceLiOdd: #baa2f9;
  --resourceLiEven: #f5c9ff; */
  --resourceLiEven: #baa2f9;
  --resourceLiOdd: rgb(251, 205, 242);
}
/* Resource Nav */
#resource-nav-list {
  font-family: var(--secondary-font);
  font-size: 1rem;
  background: var(--header-background);
  background: linear-gradient(
    70deg,
    rgb(232, 190, 250),
    rgb(171, 191, 255),
    rgb(187, 243, 192),
    rgb(252, 244, 201),
    rgb(251, 205, 242)
  );
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-basis: auto;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: space-between;
  list-style: none;
  padding-left: 0;
  width: 100%;
}
#resource-nav-list li {
  flex-grow: 1;
  padding: 0.2rem 0.3rem;
  border: 3px ridge var(--main-border-color);
}
#resource-nav-list li {
  outline: 2px solid var(--main-background-color);
}
#resource-nav-list li:hover,
#resource-nav-list li:focus-within {
  transform: rotate(-1deg);
  outline: 2px solid var(--main-background-color);
}
#resource-nav-list a {
  font-family: var(--main-font);
  color: black;
  text-decoration: none;
}
#resource-nav a:hover {
  background-color: #fcf4c9;
}
/* Resource Entries */
.resources-list {
  margin: 0 auto;
  padding: 0;
}
.resources-list li {
  font-size: 0.9rem;
  line-height: 1.3;
  list-style: none;
  margin: 0.1rem auto;
  max-width: 650px;
  padding: 0.5rem 1rem;
  text-align: left;
}
.resources-list li a {
  color: var(--resourceLinkColor);
  font-family: var(--header-font), sans-serif;
  font-size: 1.3rem;
  font-weight: 400;
  text-decoration: underline;
}
.resources-list li a:hover {
  color: blue;
}
.resources-list li img {
  max-height: 1.3rem;
}
.resources-list li:nth-child(odd) {
  background-color: var(--color2);
}
.resources-list li:nth-child(even) {
  background-color: var(--page-background-color); /*var(--resourceLiEven);*/
}
.button-jam {
  text-align: center;
}
#gifcities-entry br {
  margin: 0 0 0.5rem;
}
/* Guestbook */
#cat-pen {
  top: 4rem;
  left: 1rem;
  position: absolute;
  transform: rotate(-33deg);
}
/*Form*/
.guestbook-form {
  background-color: var(--page-background-color);
  border: 1px black solid;
  margin: 1.5rem auto 1rem;
  max-width: 600px;
  position: relative;
}
.guestbook-form .title-bar {
  background-color: var(--sidebar-background-color);
  border-bottom: 1px solid black;
  font-size: 1.7rem;
  outline: none;
  margin: 0 auto;
}
/*.guestbook-form input[type="text"]:focus,
.guestbook-form textarea:focus {
  background-color: var(--color5);
}*/

.guestbook-form input[type="text"]:focus::before,
.guestbook-form textarea:focus::before {
  content: "✿ ";
  color: black;
  font-weight: normal;
}
#commentForm {
  font-size: 0.95rem;
  padding: 1rem 3rem 0.5rem;
}
#commentForm label,
#commentForm button {
  display: block;
  margin: 0.3rem auto;
}
#commentForm input,
#commentForm textarea {
  font-size: 0.95rem;
  margin: 0 auto 0.5rem;
  width: 100%;
}
/* Symbols */
#guestbook-symbols {
  border: 1px inset lightgray;
  margin: 0 auto 1.5rem auto;
  padding: 0 0.5rem 1.5rem;
  max-width: 550px;
}
#guestbook-symbols p {
  margin: 1.1rem auto;
  text-align: center;
}
.symbols-flex {
  display: flex;
  flex-flow: row wrap;
  font-size: 1.3rem;
  gap: 0.1rem;
  justify-content: center;
  padding: 0.1rem;
}
.symbols-flex span {
  min-width: 1.25rem;
  border: 1px inset lightgrey;
  padding: 0.4rem;
  text-align: center;
  white-space: nowrap;
}
.symbols-flex span:nth-child(2n + 1) {
  background-color: var(--color3);
}
.symbols-flex span:nth-child(2n + 2) {
  background-color: var(--page-background-color);
}
/* Table version */
.single-icon td {
  min-width: 1rem;
}
.symbols-table td {
  width: 5rem;
  border: 1px solid black;
  text-align: center;
  white-space: nowrap;
}
.kaomoji {
  display: flex;
  flex-flow: row wrap;
}
/*Stickers*/
.guestbook-sticker {
  display: none;
  position: absolute;
}
.comment:nth-child(4n + 1) #lisa-frank-cat {
  display: block;
  top: -15px;
  right: -15px;
}
.comment:nth-child(4n + 2) #lisa-frank-unicorn {
  display: block;
  top: -20px;
  left: -20px;
}
.comment:nth-child(4n + 3) #lisa-frank-tiger {
  display: block;
  top: -10px;
  right: -10px;
}
.comment:nth-child(4n + 4) #lisa-frank-dog {
  display: block;
  top: -15px;
  left: -20px;
}
/*Comment Display*/
#comments {
  margin: 2rem auto 1rem;
  max-width: 600px;
}
.comment {
  border: 1px black solid;
  margin: 1.25rem 1rem;
  padding: 0 1.5rem 0.5rem;
  position: relative;
}
.comment:nth-child(4n + 1) {
  background-color: var(--color5);
}
.comment:nth-child(4n + 2) {
  background-color: var(--color3);
}
.comment:nth-child(4n + 3) {
  background-color: var(--color1);
}
.comment:nth-child(4n + 4) {
  background-color: var(--color2);
}
.comment h3 {
  text-align: left;
  font-size: 1.2rem;
}
.comment-name {
  font-family: "basiic";
}
.mid-header {
  color: black;
  font-size: 0.95rem;
  font-weight: 500;
}
.comment p {
  font-family: "basiic";
  font-size: 1rem;
}
#source-detail-target:after {
  content: "Hover or tab over";
}

/******** BLOG PAGE ********/
#blog #main * {
  font-family: var(--main-font);
}
#blog-header ul {
  padding-left: 1rem;
}
#blog-header li {
  list-style: none;
  margin: 0 0.1rem 0.5rem 0;
}
.blog-entry #main li:before,
#blog-header li:before,
.recent-posts li::before,
.blog-h1::before,
.tag-post-list li::before {
  content: "❀ ";
  color: black;
  font-weight: normal;
}
.blog-entry #main li:hover:before,
#blog-header li:hover:before,
.recent-posts li:hover:before,
.tag-post-list li:hover:before {
  content: "✿ ";
  color: black;
  font-weight: normal;
}
#blog-header li a,
#blog #main a {
  color: black;
}
#blog-header li a:hover,
#blog-header li a:focus,
#blog #main a:hover,
#blog #main a:focus {
  background-color: var(--color1);
}
.blog-h1,
.recent-posts h2 {
  font-family: var(--main-font);
  font-weight: 500;
}
.recent-posts h2 {
  font-size: 1.4rem;
}
.recent-posts h2::before {
  content: "☺ ";
  font-weight: 400;
}
.recent-posts h2::after {
  content: " ☺";
}
.blog-h1::before {
  content: "✿ ";
}
.blog-h1::after {
  content: " ✿";
}
#blog #main {
  position: relative;
}
/* TAGS PAGE */
#tags-page h3 {
  text-align: left;
  font-weight: 400;
}
/* Wands */
#wands-header::before {
  content: "⸝* ";
}
.wands li::before {
  /*content: "⸝* ";*/
  content: "(๑'ᵕ'๑)⸝* ";
}
.wands li:hover:before {
  /*content: "🪄 ";*/
  content: "(๑'o'๑)⊃━☆ ";
}
#tarot-tag-header::before {
  content: "⋆˖⁺‧₊☽ ";
}
#tarot-tag-header::after {
  content: " ☾₊‧⁺˖⋆";
}
/* ENTRIES */
.blog-entry p {
  font-size: 0.97rem;
  line-height: 1.7rem;
}
.blog-sources-list li {
  line-height: 1.6rem;
  margin: 0 0 1rem;
}
/*tags row*/
#entry-tags::before {
  content: attr(aria-label) ": ";
  font-size: 120%;
  font-weight: bold;
  margin-left: -15px;
}
#entry-tags {
  margin-top: 0.5rem;
  padding-left: 1rem;
}
#entry-tags li {
  display: inline;
  margin-left: 0.5rem;
}
#entry-tags li a {
  line-height: 2rem;
  margin: 0 0 0 0.2rem;
  padding: 0.2rem 0.3rem 0.2rem 0.3rem;
}
#entry-tags li::before {
  content: "❀";
}
#entry-tags li:hover::before {
  content: "✿";
}
#blog figure,
#content img {
  display: block;
  margin: 0 auto;
  text-align: center;
}
#blog .emoji {
  display: inline;
}
#blog figcaption {
  font-family: unset;
  font-size: unset;
  line-height: unset;
  text-align: unset;
}
/* listening */
.vibes {
  align-items: stretch;
  display: flex;
  flex-flow: row wrap;
  gap: 0.5rem 0;
  justify-content: stretch;
  margin: 0.5rem auto 0;
  padding: 0 0.5rem;
}
.vibes > * {
  flex: 1;
}
.vibes h1 {
  font-size: 1.8rem;
  text-align: left;
  margin: 0;
}
#blog-details {
  justify-content: center;
  display: flex;
  flex-flow: column nowrap;
}
h4#postDate {
  text-align: center;
}
#blog-details #blog-header ul {
  padding: 0;
}

#blog figure.listening-to {
  display: flex;
  flex-flow: row wrap;
  gap: 1rem;
  justify-content: center;
  margin: 0.7rem auto;
  text-align: center;
}
#content .listening-to img.album {
  margin: 0;
  max-height: 15rem;
  max-width: 15rem;
  border: 1px solid black;
}
.listening-to figcaption {
  align-self: center;
  border: 1px black solid;
  display: grid;
  max-width: 25rem;
  padding: 0.5rem;
  text-wrap: balance;
}
.tarot-card {
  max-height: 400px;
  max-width: 150px;
}

/*
#blog-main {
  grid-area: main;
  height: 100%;
  width: 100%;
}
#blog-header-container {
  padding: 0 20px 2px;
}
#blog-frame {
  height: 100%;
  width: 100%;
}*/

/* RESPONSIVE CODE (adjusting it for screen sizes) */
@media (pointer: none) {
  #source-detail-target {
    content: "Long press on";
  }
}
@media screen and (max-width: 1000px) {
  .show-on-medium {
    display: block;
  }
  #container,
  #container #index {
    grid-template-areas:
      "header header"
      "main site-nav"
      "main credits-bar"
      "main mood-bar"
      "main blinkies-box"
      /*  "main decor-box2"*/
      "bottom-bar bottom-bar";
    margin: 0 5%;
    /*  max-width: 865px; */
    padding: 10px 5px;
    display: grid;
    grid-template-columns: 3.5fr 1fr;
    grid-template-rows: auto auto auto auto auto 1fr auto;
    text-align: center;
  }
  #index #container {
    grid-template-areas:
      "header header"
      "main site-nav"
      "main updates"
      "main credits-bar"
      "main mood-bar"
      "main blinkies-box"
      "bottom-bar bottom-bar";
    grid-template-rows: auto 1fr minmax(0, 0.75fr) auto auto auto auto;
  }
  #blog.blog-entry #container {
    grid-template-areas:
      "header header"
      "main site-nav"
      "main credits-bar"
      "main mood-bar"
      "main blinkies-box"
      "main decor-box1"
      "bottom-bar bottom-bar";
    grid-template-rows: auto auto auto auto auto minmax(0, 1fr) auto;
  }
  #credits-bar .credits-list {
    height: initial;
  }
  #credits-bar .center-flex {
    gap: 0.5rem;
  }
  #mood-bar .center-flex {
    gap: 0.1rem;
    padding: 0.53rem 0.75rem;
  }
  #decor-box2 {
    display: none;
  }
  #shrines-page #decor-box1 {
    display: none;
  }
  #main {
    height: auto;
    min-width: unset;
  }
  .show-on-small {
    display: none;
  }
  #imood {
    height: 1.3rem;
    width: auto;
  }
  #mood-bar p {
    margin: 0.5em auto;
  }
  /* Shrines */
  .shrines-flexbox {
    flex-direction: column;
  }
  #shrines-intro {
    text-align: center;
    margin-bottom: 0.8rem;
  }
  /*#collage-instructions {
    margin: 0 0 2rem 0;
    padding: 0.5rem 1rem;
  }*/
  #collage-container {
    position: relative;
    overflow: visible;
  }
  .collage-frame {
    margin: 0 auto;
    left: 0;
    right: 0;
  }
  .rei-ryoko {
    margin: 0 auto;
  }
  #crush-collage-caption {
    float: none;
    margin: 1.5rem auto 0.5rem;
  }
  .crush-list figcaption {
    margin-top: 0;
  }
  .indirect-sources-list {
    text-align: center;
    padding-left: 0;
  }
}
@media screen and (max-width: 740px) {
  .show-on-medium {
    display: block;
  }
  .small-screen-clearfix {
    overflow: auto;
    width: 100%;
  }
}
@media screen and (max-width: /*600px*/ 730px) {
  #container {
    margin: 5px;
    gap: 6px 0;
    grid-template-areas:
      "header"
      "main"
      "site-nav"
      "mood-bar"
      "credits-bar"
      "blinkies-box"
      "bottom-bar";
    grid-template-columns: 100%;
    grid-template-rows: auto;
  }
  #index #container {
    gap: 6px;
    grid-template-areas:
      "header header"
      "main main"
      "site-nav site-nav"
      "updates mood-bar"
      "credits-bar credits-bar"
      "blinkies-box blinkies-box"
      "bottom-bar bottom-bar";
    grid-template-rows: auto auto auto minmax(0, 1fr) auto auto auto auto auto;
    grid-template-columns: 1fr 1fr;
  }
  #credits-bar .gif-settings {
    margin: 0;
  }
  #credits-bar .center-flex {
    padding: 0;
  }
  #header,
  #main,
  #site-nav,
  #credits-bar,
  #bottom-bar,
  #settings-menu,
  #mood-bar,
  #blinkies-box {
    max-width: unset;
  }
  #index #mood-bar,
  #index #updates {
    max-width: 100%;
  }
  #header,
  #main,
  #site-nav,
  #credits-bar,
  #bottom-bar {
    width: 100%;
  }
  .show-on-large,
  #decor-box1 {
    display: none;
  }
  .show-on-small {
    display: contents;
    margin: 0;
    padding: 0;
  }
  #my-blinkies {
    max-width: unset;
    gap: 3px;
  }
  #my-blinkies img {
    max-width: 11.5rem;
  }
  .gif-settings {
    padding: 0.7rem 0 0 0;
    justify-content: space-evenly;
  }
  .rectangle-link {
    align-items: center;
    display: flex;
    justify-content: center;
    flex-direction: row;
  }
  .rectangle-link div {
    flex-grow: 1;
    width: 33%;
  }
  #credits-bar .credits-list {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }
  .center-flex {
    gap: 0;
    justify-content: space-evenly;
  }
  .sidebar-note {
    max-width: 100%;
    font-size: 1rem;
    display: block;
    line-height: 1rem;
    margin: 0 auto;
    /* padding: 0.5rem;*/
  }
  #site-nav {
    border: 3px ridge var(--main-border-color);
    margin: 0 auto;
    width: 100%;
  }
  #site-nav ul {
    align-content: stretch;
    align-items: stretch;
    margin: 0;
    padding: 0;
  }
  #site-nav li {
    margin: 0;
    line-height: 0.5rem;
  }
  /*.credits-list ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
    list-style-type: none;
    text-align: center;
  }*/
  .credits-list li {
    display: inline-block;
    margin: 0 0.2rem;
  }
  #collage-container {
    min-width: 100%;
  }
  #crush-list {
    min-width: 100%;
  }
}
@media screen and (max-width: 520px) {
  #shrines-page #main {
    padding: 0;
  }
  .small-screen-clearfix {
    overflow: unset;
    width: unset;
  }
  #shrines-page h1 {
    margin-bottom: 0.1rem;
  }
  #shrines-intro {
    margin-bottom: 2rem;
  }
  .crush-list figcaption {
    margin-top: 1rem;
  }
  .gif-cat-box {
    margin: 1rem auto 3rem auto;
    row-gap: 1rem;
  }
  #gif-kitty {
    order: 0;
  }
  .cloud-border {
    order: 1;
  }
}
@media screen and (max-width: 430px) {
  .show-on-smaller {
    display: contents;
  }
  #shrines-page #container {
    padding: 3px;
  }
  #site-nav-links .gif-warning {
    line-height: 0.9rem;
    text-align: right;
    padding: 0 0.6rem 0 0;
  }
}
@media screen and (max-width: 365px) {
  #container {
    padding: 0;
  }
  /* #site-nav-links li {
    align-items: center;
    display: block;
    justify-content: center;
    flex-direction: row;
  }
  /*  #site-nav-links li div {
    flex-grow: 1;
    width: unset;
  } */
}
/*@media screen and (max-width: 600px) {
  #container {
    display: flex;
    flex-direction: column;
  }
  #header {
    order: -99;
  }
  #settings-menu {
    order: -1;
  }
}*/