#blogmenu b {
  color: #ef6bad;
}

#reoname,
#rakuname,
#sougoname,
#hayatename {
  text-shadow:
    -1px -1px 0 #de317c,
    1px -1px 0 #de317c,
    -1px 1px 0 #de317c,
    1px 1px 0 #de317c;
}

.wrapgod {
  display: flex;
  flex-direction: row;
  margin: auto;
  padding: 38px;
  padding-top: 18px;
  padding-right: 20px;
}

.image-gallery {
  background: rgba(255, 255, 255, 0.53);
  height: 320px;
  overflow-y: scroll;
  padding: 16px;
  border-radius: 5px;
}

.gallery-flex {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.gallery-flex img {
  max-width: 111px;
  max-height: 111px;
  transition: 0.2s;
  border-radius: 5px;
}

.gallery-flex img:hover {
  transform: scale(1.1);
  filter: brightness(120%);
}

.gallery-title {
  text-align: left;
  font-size: 25px;
  margin-top: 6px;
  margin-bottom: 6px;
  font-weight: bold;
  color: #63a5e6;
  font-style: italic;
}

.ezgallery.horizontal img {
  text-align: center;
  vertical-align: middle;
  margin: 0 5px 5px 0;
  margin: auto;
  max-width: 120px;
  max-height: 120px;
  object-fit: cover;
  object-position: bottom;
  transition: 0.2s;
  border-radius: 3px;
}

h1 {
  font-size: 1.5em;
  font-style: italic;
  color: #5395d7;
}

.buttons-box img {
  width: 82px;
}

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

.highlighter_blue {
  padding: 1px 9px;
  background:
    linear-gradient(
      104deg,
      rgba(103, 235, 250, 0) 0.9%,
      rgb(180, 235, 255) 2.4%,
      rgba(147, 218, 255, 0.5) 5.8%,
      rgba(103, 222, 250, 0.1) 93%,
      rgba(103, 235, 250, 0.7) 96%,
      rgba(103, 235, 250, 0) 98%
    ),
    linear-gradient(
      183deg,
      rgba(103, 235, 250, 0) 0%,
      rgba(103, 235, 250, 0.3) 7.9%,
      rgba(103, 235, 250, 0) 15%
    );
  box-decoration-break: clone;
}

.linkslink {
  display: inline;
  padding: 1px 8px;
  background:
    linear-gradient(
      104deg,
      rgba(254, 181, 192, 0) 0.9%,
      rgb(255, 200, 208) 2.4%,
      rgba(255, 209, 216, 0.5) 5.8%,
      rgba(255, 214, 220, 0.1) 93%,
      rgba(254, 181, 192, 0.7) 96%,
      rgba(254, 181, 192, 0) 98%
    ),
    linear-gradient(
      183deg,
      rgba(254, 181, 192, 0) 0%,
      rgba(254, 181, 192, 0.3) 7.9%,
      rgba(254, 181, 192, 0) 15%
    );
  box-decoration-break: clone;
  font-weight: bold;
  text-decoration: none;
  margin-bottom: -5px;
}

.linkslink a {
  text-decoration: none;
  color: #f56497;
}

.linkslink a:hover {
  color: #ff8db5;
}

.clickbutton {
  width: 30px;
  height: 30px;
  background-image: url(assets/click2copy.png);
  background-size: cover;
  cursor: pointer;
}

.clickbutton:hover {
  background-image: url(assets/click2copy_press.png);
}

.marquee_song {
  width: 280px;
  margin: auto;
  margin-top: 16px;
  display: flex;
  overflow: hidden;
  white-space: nowrap;
}

.marquee__item_song {
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-name: marquee-content;
  animation-timing-function: linear;
}

.marquee_song:hover .marquee__item_song {
  animation-play-state: paused;
}

@keyframes marquee-content {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(-100%);
  }
}

.linkbox {
  width: 100%;
  height: auto;
  background: white;
  padding: 2px;
  border-width: 7px;
  border-style: solid;
  border-image: url("borders/fancylace.png") 8 fill round;
  text-align: center;
  margin-bottom: 15px;
}

.linkbox img {
  width: 74px;
}

.linkbox_header {
  width: 100%;
  height: auto;
  font-size: 18px;
  text-align: center;
  padding-top: 4px;
  padding-bottom: 2px;
  font-weight: bold;
  color: white;
  background-image: linear-gradient(#95d1ff, #eaf6ff);

  text-shadow:
    -1px -1px 0 #3b8ece,
    /* top left */ 1px -1px 0 #3b8ece,
    /* top right */ -1px 1px 0 #3b8ece,
    /* bottom left */ 1px 1px 0 #3b8ece; /* bottom right */

  border: 1px solid white;
  border-radius: 4px;
  margin-bottom: 5px;
}

.best_viewed {
  display: none;
  font-size: 2.7em;
  letter-spacing: -2px;
  color: #e4f3ff;
  font-weight: bold;
  margin-bottom: -5px;

  text-shadow:
    -1.5px -1.5px 0 #275a8c,
    /* top left */ 1.5px -1.5px 0 #275a8c,
    /* top right */ -1.5px 1.5px 0 #275a8c,
    /* bottom left */ 1.5px 1.5px 0 #275a8c; /* bottom right */
}

.blogpost a:visited {
  color: rgb(255, 107, 176);
}

#headerlinks:hover #bebidora_gif {
  opacity: 0%;
}

#bebidora_gif:hover {
  opacity: 100% !important;
  margin-top: -4px;
  filter: brightness(110%);
}

#bebidora_gif:hover:before {
  content: url("favicons/home.png");
  display: block;
  margin-top: -30px;
  margin-left: 11px;
}

#about_button:hover:before {
  content: url("pixels/bebidora2.gif");
  display: block;
  margin-top: -50px;
  margin-left: 11px;
}

#home_button:hover:before {
  content: url("pixels/bebidora2.gif");
  display: block;
  margin-top: -50px;
  margin-left: 15px;
}

#translations_button:hover:before {
  content: url("pixels/bebidora2.gif");
  display: block;
  margin-top: -50px;
  margin-left: 35px;
}

#links_button:hover:before {
  content: url("pixels/bebidora2.gif");
  display: block;
  margin-top: -50px;
  margin-left: 25px;
}

#faq_button:hover:before {
  content: url("pixels/bebidora2.gif");
  display: block;
  margin-top: -50px;
  margin-left: 18px;
}

#blog_button:hover:before {
  content: url("pixels/bebidora2.gif");
  display: block;
  margin-top: -50px;
  margin-left: 26px;
}

.foxchanwrap {
  margin-top: -15px;
  margin-bottom: 25px;
}

.spotifywrapper {
  margin-top: 28px;
  margin-bottom: 20px;
}

#newsong {
  position: absolute;
  width: 170px;
  height: 80px;
  margin-top: -27px;
  background-image: url(assets/new_song.png);
  background-size: contain;
  background-repeat: no-repeat;
  transition: 0.2s;
}

#newsong:hover {
  opacity: 80%;
}

#rednote a {
  text-decoration: none;
  color: #ff5aad;
}

#rednote a:hover {
  color: #ffa9d4;
}

#rednote {
  font-family: "Willow";
  margin-top: -4px;
  font-size: 16px;
  background: white;
  padding: 4px;
  border-radius: 15px;
  text-align: center;
  width: 90px;
  margin-left: 7px;
  color: #ff5aad;
  border: 1px solid #ff5aad;
  box-shadow:
    -4px -3px #f599c3 inset,
    2px 3px #fff inset;
}

#rednote:hover {
  box-shadow: none;
}

#credit_title {
  margin-top: 10px;
  font-weight: bolder;
  font-family: "Zpix";
  font-size: 1.9em;
  margin-bottom: 3px;
  z-index: 100;
  position: relative;
  color: #dc8869;
  letter-spacing: -1px;
  text-shadow:
    -1px -1px 0 #fff,
    1px -1px 0 #fff,
    -1px 1px 0 #fff,
    1px 1px 0 #fff;
}

#available {
  font-family: "porkys"; /* Set the fill color to transparent */
  -webkit-text-fill-color: #dc8869;
  /* Set the stroke width and color */
  -webkit-text-stroke: 1px white; /* Shorthand */
  /* For Firefox compatibility, the prefix is needed */
  text-fill-color: #c86c49;
  text-stroke: 2px white;
}

.foxchan {
  margin-top: -22px;
  height: 170px;
  background: white;
  width: 90%;
  border-width: 16px;
  border-style: solid;
  border-image: url("borders/milkstrawberry.png") 13 fill round;
  background-clip: padding-box;

  filter: drop-shadow(2px 2px 4px rgba(162, 57, 0, 0.3));
}

.foxtext {
  font-family: "Willow";
  margin-top: 2px;
  padding: 8px;
  color: #cc6d49;
  font-size: 16px;
  margin-left: 4px;
  font-weight: bold;
  text-shadow:
    -1px -1px 0 #fff,
    1px -1px 0 #fff,
    -1px 1px 0 #fff,
    1px 1px 0 #fff;
}

#foxkoki {
  height: 168px;
  width: 222px;
  background-image: url(images/art/fox_kokiraku.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  z-index: 50;
  margin-left: 100px;
  margin-top: 5px;
}

#kisscam {
  box-shadow: 2px 0px 4px rgba(0, 104, 222, 0.59);
  border-radius: 20px;
}

.updateheader {
  font-size: 24px;
  margin-top: -5px;
}

#websitecover:hover {
  transform: scale(1.02);
  filter: opacity(80%);
}

#websitecover {
  transition: 0.2s;
}

textarea:focus {
  outline: none !important;
  border: 1px solid #5395d7;
}

#video {
  clip-path: inset(20);
}

.sidestufftitle {
  font-family: var(--heading-font);
  font-size: 3em;
  font-weight: bold;
  font-style: italic;
  color: #89d1ff;
  position: absolute;
  margin-left: 3px;
  z-index: 140;
  margin-bottom: -25px;
  text-shadow:
    -1px -1px 0 #5395d7,
    1px -1px 0 #5395d7,
    -1px 1px 0 #5395d7,
    1px 1px 0 #5395d7;
}

.sidestufftitle2 {
  font-family: var(--heading-font);
  z-index: 130;
  font-size: 3em;
  font-weight: bold;
  font-style: italic;
  color: #2586d2;
  margin-bottom: -25px;
  text-shadow:
    0 0 10px #fff,
    0 0 20px #ffffff,
    0 0 30px #ffffff,
    0 0 30px #ffffff,
    0 0 40px #ffffff,
    0 0 50px #ffffff,
    0 0 60px #ffffff;
}

#woke:hover {
  transform: scale(1.05);
  transition: 0.2s;
}

img.hover-shadow {
  transition: 0.3s;
}

.hover-shadow:hover {
  box-shadow:
    0 4px 8px 0 rgba(0, 0, 0, 0.2),
    0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.book {
  height: 140px;
  width: 100%;
  background-image: url(assets/book.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.book:hover {
  background-image: url(assets/book2.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.guestbooktitle a {
  white-space: nowrap;
  color: #89d1ff;
  text-decoration: none;
}

.guestbooktitle a:visited {
  color: #89d1ff;
  white-space: nowrap;
  text-decoration: none;
}

.guestbooktitle a:hover {
  color: #ccebff;
  white-space: nowrap;
}

.wrapgod2 {
  display: flex;
  margin-left: 48px;
  margin-top: 20px;
  margin-right: 0px;
  margin-bottom: 10px;
  width: 860px;
}

.sidestuff {
  margin-left: 22px;
  margin-top: 155px;
  width: 295px;
  height: auto;
}

.updatetext p {
  margin-bottom: -4px;
}

.updatetext {
  font-family: "Willow";
  height: 145px;
  font-size: 15px;
  margin-top: 4px;
  overflow-y: scroll;
  background-color: rgba(255, 255, 255, 0.57);
}

.updatewrap {
  padding-top: 14px;
}

.updatebox {
  background: url("assets/note.jpg");
  width: 288px;
  background-size: cover;
  padding-left: 45px;
  padding-right: 15px;
  height: 211px;
  border: 1.5px solid #6fc2f3;
  text-align: left;
  margin-top: 20px;
  box-shadow: 0px 0px 10px rgba(32, 118, 185, 0.3);
}

.layout {
  scrollbar-width: thin;
  border-width: 16px;
  border-style: solid;
  border-image: url(borders/cloudlace3.png) 12 fill round;
  background-clip: padding-box;
  box-shadow: 0px 0px 10px rgba(32, 118, 185, 0.5);
  width: 850px;
}

.mainflex {
  display: flex;
  flex-direction: row;
  flex-wrap: no-wrap;
  width: 100%;
}

.topbar {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 12px;
}

.languageswitch {
  width: 100px;
  height: 34px;
  font-family: "Willow";
}

.languageswitch2 {
  width: 110px;
  height: 28px;
  font-family: "Willow";
  margin-bottom: 8px;
  text-decoration: none;
}

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

.changed-style {
  background: white !important;
  color: #5c9ad4 !important;
}

.changed-style2 {
  background: white !important;
  color: #5c9ad4 !important;
}

.active2 {
  color: white !important;
  background-color: #5c9ad4 !important;
}
.inactive2 {
  background-color: white !important;
  color: #5c9ad4 !important;
}
#en-button {
  background: #5c9ad4;
  border: 1.2px solid #5dabe7;
  border-radius: 12px 0px 0px 12px;
  color: white;
}

#cn-button {
  background: white;
  border: 1.2px solid #5dabe7;
  border-radius: 0px 12px 12px 0px;
}

#cn-button:hover {
  background: #5c9ad4;
  color: white;
}

#languagechanger th,
td {
  padding-left: 2px;
  padding-right: 2px;
  padding-top: 3px;
  padding-bottom: 0px;
  margin: auto;
  border: none;
}

#languagechanger {
  font-size: 14px;
  font-weight: bold;
  letter-spacing: -0.5px;
  width: 100%;
  height: 100%;
  text-align-last: center;
  margin: auto;
  background: white;
  cursor: pointer;
  border-radius: 15px;
  border: 1.2px solid #5dabe7;
}

#languagechanger2 a,
#languagechanger2 a:link,
#languagechanger2 a:visited,
#languagechanger2 a:active,
#languagechanger2 a:focus {
  cursor: pointer;
  outline: none;
  color: inherit;
}

#languagechanger2 a:hover {
  opacity: 50%;
}

#languagechanger2 th,
#languagechanger2 td {
  padding-left: 2px;
  padding-right: 2px;
  padding-top: 3px;
  padding-bottom: 0px;
  margin: auto;
  border: none;
  text-decoration: none;
}

#languagechanger2 {
  font-size: 14px;
  font-weight: bold;
  letter-spacing: -0.5px;
  width: 100%;
  height: 100%;
  text-align-last: center;
  margin: auto;
  background: white;
  cursor: pointer;
  border-radius: 15px;
  border: 1.2px solid #5dabe7;
}

#en-button2 {
  background: #5c9ad4;
  border: 1.2px solid #5dabe7;
  border-radius: 12px 0px 0px 12px;
  color: white;
}

#cn-button2 {
  background: white;
  border: 1.2px solid #5dabe7;
  border-radius: 0px 12px 12px 0px;
}

.ludi {
  display: flex;
  margin-left: 10px;
}

.musicnote {
  display: inline-block;
  margin-left: 30px;
}

#songtitle {
  display: inline-block;
  font-size: 11pt;
  color: #2076b9;
  font-weight: bold;
  text-shadow:
    0 0 10px #fff,
    0 0 20px #ffffff,
    0 0 30px #ffffff,
    0 0 40px #ffffff,
    0 0 60px #ffffff,
    0 0 70px #ffffff,
    0 0 80px #ffffff;
}

.guestbooktitle {
  white-space: nowrap;
  font-family: var(--heading-font);
  font-size: 3em;
  font-weight: bold;
  font-style: italic;
  color: #89d1ff;
  position: absolute;
  margin-left: 3px;
  z-index: 40;
  text-shadow:
    -1px -1px 0 #5395d7,
    1px -1px 0 #5395d7,
    -1px 1px 0 #5395d7,
    1px 1px 0 #5395d7;
}

.guestbooktitle2 {
  white-space: nowrap;
  font-family: var(--heading-font);
  z-index: 30;
  font-size: 3em;
  font-weight: bold;
  font-style: italic;
  color: #2586d2;
  position: absolute;
  text-shadow:
    0 0 10px #fff,
    0 0 20px #ffffff,
    0 0 30px #ffffff,
    0 0 40px #ffffff,
    0 0 60px #ffffff,
    0 0 70px #ffffff,
    0 0 80px #ffffff;
}

.iframecontainer {
  height: 303px;
  width: 290px;
  border-width: 10px;
  border-style: solid;
  border-image: url(borders/cloudlace2.png) 8 fill round;
  background-clip: padding-box;
}

.iframecontainer2 {
  height: 890px;
  width: 450px;
  border-width: 10px;
  border-style: solid;
  border-image: url(borders/cloudlace2.png) 8 fill round;
  background-clip: padding-box;
}

.dibawah {
  margin-left: 70px;
  margin-top: 20px;
  display: none;
  width: 830px;
}

#bawahkanan {
  margin-left: 15px;
}

#memberlink a {
  color: #63a5e6;
  text-decoration: none;
}
#memberlink a:hover {
  color: #a8ddff;
}

/* -------------------------------------------------------- */
/* VARIABLES */
/* -------------------------------------------------------- */

/* Variables are used like this: var(--text-color) */
:root {
  /* Background Colors: */
  --background-color: #eeeeee;
  --content-background-color: #ffffff;
  --sidebar-background-color: #ffffff;

  /* Text Colors: */
  --text-color: #2076b9;
  --sidebar-text-color: #000000;
  --link-color: #268ee8;
  --link-color-hover: #a8ddff;

  /* Text: */
  --font: Willow;
  --heading-font: Willow;
  --font-size: 14px;

  /* Other Settings: */
  --margin: 0px;
  --padding: 20px;

  --round-borders: 0px;
}

/* -------------------------------------------------------- */
/* BASICS */
/* -------------------------------------------------------- */

@font-face {
  font-family: "willow";
  src: url("fonts/willow.ttf");
}

@font-face {
  font-family: "Zen Maru Gothic";
  src: url("ZenMaruGothic-Black.tff");
}

@font-face {
  font-family: "Zpix";
  src:
    local(Zpix),
    url("https://bebidora.club/fonts/zpix.tff") format("tff");
  src:
    local(Zpix),
    url("zpix.woff2") format("woff2");
}

@font-face {
  font-family: "Huninn";
  src: url("fonts/Huninn-Regular.ttf");
}

@font-face {
  font-family: "porkys";
  src: url(https://file.garden/aKM6cgV5eixaX8Eq/PORKYS_.TTF);
}

@font-face {
  font-family: "porkys";
  src: url(https://file.garden/aKM6cgV5eixaX8Eq/PORKYS_.TTF);
}

@font-face {
  font-family: "Zpix";
  src: url("fonts/zpix.tff") format("tff");
}

b {
  color: #ff68b7;
}

body {
  hyphens: auto;
  margin-bottom: 30px;
  overflow-x: hidden;
  cursor: url(pixels/heartcursor.png), auto;
  font-size: var(--font-size);
  color: #2076b9;
  font-family: var(--font);
  line-height: 1.2;
  background-image: url(bg/cloudy2.jpg);
}
::selection {
  /* (Text highlighted by the user) */
  background: #c1c3cd;
}

mark {
  text-shadow: 1px 1px 4px var(--link-color);
  background: #ffdceb;
  color: var(--text-color);
}

/* Links */
a {
  text-decoration: underline;
}

a:hover {
  color: var(--link-color-hover);
}

a,
a:visited {
  color: var(--link-color);
}

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

/* -------------------------------------------------------- */
/* LAYOUT */
/* -------------------------------------------------------- */

.fa,
.fab {
  text-decoration: none;
  margin: 4px;
}

#listen {
  margin-top: 6px;
  margin-bottom: 6px;
  font-size: 18px;
}

section {
  margin-bottom: 20px;
}

.bebidora {
  width: 205px;
  height: 135px;
  background-image: url(images/bebidora.png);
  background-size: contain;
  background-repeat: no-repeat;
  position: fixed;
  z-index: 999;
  margin-left: 770px;
  bottom: 0%;
  transition: 0.2s;
}

.bebidora:hover {
  filter: opacity(50%);
}

main .boxcontainer {
  background-image: url(bg/bluestarry2.png);
  padding: 4px;
  margin-bottom: 10px;
  border-radius: 10px;
  overflow: hidden;
  scrollbar-width: thin;
  text-align: center;
}

.descriptionbox {
  font-size: 14px;
  background: white;
  height: auto;
  border-radius: 8px;
  margin-left: 10px;
  text-align: left;
  padding: 8px;
  margin: auto;
}

.introphoto {
  width: 120px;
  height: 120px;
  margin-left: 10px;
  background-image: url(images/amadora.png);
  background-size: cover;
}

#supertitle {
  letter-spacing: -4px;
  text-align: center;
  margin: auto;
  margin-bottom: -32px;
  font-family: willow;
}
/* -------------------------------------------------------- */
/* HEADER */
/* -------------------------------------------------------- */

.mx-3 {
  height: 22px;
  width: 100%;
  position: absolute;
  height: 23px;
  border-radius: 15px;
  border: solid 1.5px #81b9f1;
}

header {
  height: 198px;
  font-size: 1.2em;
  background-image: url(images/cutout.png);
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  border-bottom: #78b6f4 1.5px solid;
  width: 100%;
}

.header-content {
  padding: var(--padding);
  position: relative;
}

#rainbow {
  font-family: "Willow" !important;
  z-index: 20;
  margin-top: -18px;
  font-size: 1.8em;
  position: absolute;
}

#rainbow2 {
  font-family: "Willow" !important;
  z-index: 10;
  margin-top: -18px;
  font-size: 1.8em;
  position: absolute;
}

#starlogo {
  position: absolute;
  left: -46px;
  margin-top: -36px;
  z-index: 1;
  pointer-events: none;
}

#bebiclub {
  z-index: 100;
  position: absolute;
}

.bebidoraclubfront {
  animation: moveUpDown2 1s infinite;
  animation-timing-function: step-end;
  font-family: var(--heading-font);
  font-size: 2.9em;
  font-weight: bold;
  font-style: italic;
  color: #89d1ff;
  position: absolute;
  text-shadow:
    -1px -1px 0 #5395d7,
    1px -1px 0 #5395d7,
    -1px 1px 0 #5395d7,
    1px 1px 0 #5395d7;
  width: 100%;
  height: 100%;
  top: -46%;
  left: 59%;
}

.bebidoraclubglow:hover {
  filter: brightness(110%);
  cursor: pointer;
}

.bebidoraclubfront:hover {
  filter: brightness(110%);
  cursor: pointer;
}

.bebidoraclubglow {
  animation: moveUpDown2 1s infinite;
  animation-timing-function: step-end;
  font-family: var(--heading-font);
  font-size: 2.9em;
  font-weight: bold;
  font-style: italic;
  top: -42%;
  left: 58.6%;
  width: 100%;
  height: 100%;
  color: #2586d2;
  position: absolute;
  text-shadow:
    0 0 10px #fff,
    0 0 20px #ffffff,
    0 0 30px #ffffff,
    0 0 40px #ffffff,
    0 0 60px #ffffff,
    0 0 70px #ffffff,
    0 0 80px #ffffff;
}

.fansite {
  font-size: 1.2em;
  font-weight: bold;
  font-style: italic;
  left: 74%;
  top: 75%;
  width: 100%;
  height: 100%;
  color: #dcedff;
  text-shadow:
    0 0 10px #fff,
    0 0 20px #ffffff,
    0 0 30px #ffffff,
    0 0 40px #ffffff,
    0 0 60px #ffffff,
    0 0 70px #ffffff,
    0 0 80px #ffffff;
  z-index: 10;
  position: absolute;
  animation: moveUpDown 1s infinite;
  animation-timing-function: step-end;
}

@keyframes moveUpDown {
  0%,
  100% {
    transform: translateY(0); /* Start and end position at original spot */
  }
  50% {
    transform: translateY(-2px); /* Move up 1 pixel */
  }
}

@keyframes moveUpDown2 {
  0%,
  100% {
    transform: translateY(0); /* Start and end position at original spot */
  }
  50% {
    transform: translateY(-1px); /* Move up 1 pixel */
  }
}

.fansitefront {
  transition: none;
  animation: moveUpDown 1s infinite;
  animation-timing-function: step-end;

  font-size: 1.2em;
  font-weight: bold;
  font-style: italic;
  left: 74%;
  top: 75%;
  width: 100%;
  height: 100%;
  color: #dcedff;
  text-shadow:
    -1px -1px 0 #5395d7,
    1px -1px 0 #5395d7,
    -1px 1px 0 #5395d7,
    1px 1px 0 #5395d7;
  z-index: 10;
  position: absolute;
}

.header-image img {
  width: 100%;
  height: auto;
}

/* -------------------------------------------------------- */
/* SIDEBARS */
/* -------------------------------------------------------- */

aside .image {
  width: 100%;
}

#lefty {
  margin-top: 8px;
}

.righty {
  margin-top: 18px;
}

#amainterview {
  border-width: 10px;
  border-style: solid;
  border-image: url("borders/cloudlace2.png") 8 fill round;
}

#hearteffect {
  position: absolute;
  margin-left: -2px;
  margin-top: 2px;
}
#hearteffect2 {
  position: absolute;
  margin-left: 120px;
  margin-top: 120px;
}
.amadoraholder {
  position: relative;
}

.amadorabunch:hover {
  opacity: 50%;
}

.amadorabunch {
  transition: 0.2s;
}

.news {
  margin-top: 4px;
}

.newsbox p {
  margin-bottom: 10px;
}

.newsbox {
  margin-bottom: -2px;
  overflow: hidden;
  width: 100%;
  border-radius: 10px;
  border: 1px solid #5395d7;
  height: 300px;
  margin-top: 10px;
  font-family: "Willow";

  background: white;
  font-size: 13px;
  padding: 9px;

  padding-top: 8px;
  padding-right: 0px;
}

.newstext {
  height: 280px;
  overflow-y: scroll;
  padding-right: 4px;
}

.sidebar-title {
  font-size: 2em;
  font-weight: bolder;
  font-style: italic;
  color: #3baaf2;
  text-shadow:
    -1px -1px 0 #ffffff,
    1px -1px 0 #ffffff,
    -1px 1px 0 #ffffff,
    1px 1px 0 #ffffff;
  position: relative;
  margin-bottom: -23px;
  z-index: 10;
  line-height: 22px;
}

.sidebar-title :after {
  position: absolute;
  content: "";
  bottom: 900px;
  height: 40px;
  width: 1px;
}

.sidebar-section:not(:last-child) {
  margin-bottom: 1em;
}

.sidebar-section ul,
.sidebar-section ol {
  padding-left: 1.5em;
}

.sidebar-section > *:not(p):not(ul):not(ol):not(blockquote) {
  margin-top: 10px;
}

#tiktoksection {
  margin-top: -2px;
  margin-bottom: -10px;
}

.todaystiktok {
  font-size: 1.9em;
  font-weight: bolder;
  color: #3baaf2;
  text-shadow:
    -1px -1px 0 #ffffff,
    1px -1px 0 #ffffff,
    -1px 1px 0 #ffffff,
    1px 1px 0 #ffffff;
  letter-spacing: -1px;

  width: 181px;
  margin: auto;
}

.tiktok iframe {
  margin: auto;
  border-width: 10px;
  border-style: solid;
  border-image: url(borders/cloudlace2.png) 8 fill round;
  background-clip: padding-box;
  margin-top: -20px;
}

#loveorlike {
  border: 3px solid;
  border-image-slice: 100%;
  border-image-source: none;
  border-image-slice: 1;
  border-image-source: linear-gradient(
    to bottom right,
    #b827fc 0%,
    #2c90fc 25%,
    #b8fd33 50%,
    #fec837 75%,
    #fd1892 100%
  );
  background: black;
  margin-top: 23px;
  padding: 10px;
}

#loveorlike img {
  margin-bottom: 10px;
  transition: 0.2s;
  cursor: pointer;
}

#loveorlike img:hover {
  filter: brightness(50%);
}

#rainbowtext2 {
  font-family: "Willow" !important;
  background: linear-gradient(
    90deg,
    #f00,
    #ff2b00,
    #f50,
    #ff8000,
    #fa0,
    #ffd500,
    #ff0,
    #d4ff00,
    #af0,
    #80ff00,
    #5f0,
    #2bff00,
    #0f0,
    #00ff2b,
    #0f5,
    #00ff80,
    #0fa,
    #00ffd5,
    #0ff,
    #00d4ff,
    #0af,
    #007fff,
    #05f,
    #002bff,
    #00f,
    #2a00ff,
    #50f,
    #7f00ff,
    #a0f,
    #d400ff,
    #f0f,
    #ff00d4,
    #f0a,
    #ff0080,
    #f05,
    #ff002b,
    #f00
  );
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  font-weight: bold;
}

.rainbowtext {
  font-weight: bold;
  animation: rainbow 2.5s linear;
  animation-iteration-count: infinite;
  font-size: 1.2em;
  text-align: center;
}

.rainbowtext a {
  color: inherit; /* Inherits the color of its parent element */
}

.rainbowtext a:visited {
  color: inherit; /* Ensures visited links also inherit the parent color */
}

.rainbowtext a:hover,
.rainbowtext a:active {
  color: inherit; /* Prevents color changes on hover or active state */
  text-decoration: none; /* Maintains no underline on hover or active state */
}

@keyframes rainbow {
  100%,
  0% {
    color: rgb(255, 0, 0);
  }
  8% {
    color: rgb(255, 127, 0);
  }
  16% {
    color: rgb(255, 255, 0);
  }
  25% {
    color: rgb(127, 255, 0);
  }
  33% {
    color: rgb(0, 255, 0);
  }
  41% {
    color: rgb(0, 255, 127);
  }
  50% {
    color: rgb(0, 255, 255);
  }
  58% {
    color: rgb(0, 127, 255);
  }
  66% {
    color: rgb(0, 0, 255);
  }
  75% {
    color: rgb(127, 0, 255);
  }
  83% {
    color: rgb(255, 0, 255);
  }
  91% {
    color: rgb(255, 0, 127);
  }
}

/* Sidebar Blockquote: */

#membersection {
  border-color: #f54fa2;
  background-image: url(bg/pinkgingham.png);
}

.sidebar-section .boxcontainer {
  background: white;
  padding: 10px 8px 8px 8px;
  margin: 1em 0;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #5395d7;
  text-align: center;
}

.sidebar-section blockquote > *:first-child {
  margin-top: 0;
}

.sidebar-section blockquote > *:last-child {
  margin-bottom: 0;
}

/* Site Button: */

.site-button img {
  width: 60px;
}

.site-button textarea {
  font-family: monospace;
  font-size: 0.7em;
}

/* -------------------------------------------------------- */
/* FOOTER */
/* -------------------------------------------------------- */

footer {
  border: var(--border);
  border-radius: var(--round-borders);
  overflow: hidden;
  font-size: 0.75em;
  padding-top: 15px;
  padding-bottom: 15px;
  background: var(--content-background-color);
}

footer a,
footer a:visited {
  color: var(--link-color);
}

footer a:hover,
footer a:focus {
  color: var(--link-color-hover);
}

/* -------------------------------------------------------- */
/* NAVIGATION */
/* -------------------------------------------------------- */

.dropdown-content {
  display: none;
  background: white;
  position: absolute;
  bottom: 70%;
  top: auto;
  z-index: 999;
  border-width: 10px;
  border-style: solid;
  border-image: url(borders/cloudlace2.png) 8 fill round;
  background-clip: padding-box;
  margin: 0;
  padding: 0;
}

.dropdown-content img {
  height: 15px;
}

/* Links inside the dropdown */
.dropdown-content a {
  text-decoration: none;
  font-style: normal;
  font-size: smaller;
}

.whitename {
  background: white;
  display: block;
  padding: 2px 7px;
  padding-right: 9px;
  color: #5ca1d5;
}

.bluename {
  background: #cfeaff;
  display: block;
  padding: 2px 7px;
  color: #426cab;
  padding-right: 9.5px;
}

.whitename:hover {
  color: #8ec8f5;
}

.bluename:hover {
  color: #6997de;
}

.dropdown-content span:hover {
  text-shadow: none !important;
  font-style: italic;
}

#members_button:hover .dropdown-content {
  display: inline-block;
}

#members_button:hover {
  transform: translateY(-3px);
}

nav {
  margin-top: 126px;
}

nav#sidelinks {
  margin-top: -136px;
  position: absolute;
  margin-left: -3px;
}

* {
  box-sizing: border-box;
}

#sidelinks img {
  border-width: 10px;
  border-style: solid;
  border-image: url(borders/cloudlace2.png) 8 fill round;
  background: white;
  background-clip: padding-box;
  border-left: none;
}

#sidelinks img:hover {
  filter: brightness(113%);
}

nav a:hover {
  text-shadow:
    -1px -1px 0 #ffffff,
    1px -1px 0 #ffffff,
    -1px 1px 0 #ffffff,
    1px 1px 0 #ffffff;
}

nav .sidebar-title {
  margin-bottom: 0.5em;
}

nav ul {
  margin: 0 -5px;
  padding: 0;
  list-style: none;
  user-select: none;
}

nav ul li {
  margin-bottom: 0;
}

nav > ul li > a,
nav > ul li > strong {
  display: inline-block;
  text-decoration: none;
}

nav > ul li > a,
nav > ul li > details summary,
nav > ul li > strong {
  padding: 5px 10px;
}

nav > ul li > a.active,
nav > ul li > details.active summary {
  font-weight: bold;
}

nav ul summary {
  cursor: pointer;
}

nav ul ul li > a {
  padding-left: 30px;
}

/* NAVIGATION IN HEADER */

header nav {
  font-size: 19px;
  font-weight: bold;
  font-style: italic;
  letter-spacing: -0.5px;
  white-space: nowrap;
}

header nav ul {
  display: flex;
  white-space: nowrap;
  margin: 0;
  justify-content: center;
  z-index: 90;
}

header nav ul li {
  background: none;
  position: relative;
  margin: 2px;
  padding: 1px;
}

nav ul li:nth-child(2) > a {
  color: #ea5e7f;
  background-color: #ffc8cd;
  box-shadow:
    -4px -3px #f599c3 inset,
    2px 3px #ffe3fa inset;
  border-width: 10px;
  border-style: solid;
  border-image: url(borders/cloudlace2.png) 8 fill round;
  background-clip: padding-box;
}

nav ul li:nth-child(3) > a {
  background-color: #ffe0d5;
  color: #d69031;
  box-shadow:
    -4px -3px #ffa991 inset,
    2px 3px #fff4e4 inset;
  border-width: 10px;
  border-style: solid;
  border-image: url(borders/cloudlace2.png) 8 fill round;
  background-clip: padding-box;
}

nav ul li:nth-child(4) > a {
  background-color: #fff2b4;
  color: #ce9e46;
  box-shadow:
    -4px -3px #dfbf5e inset,
    2px 3px #feffc7 inset;
  border-width: 10px;
  border-style: solid;
  border-image: url(borders/cloudlace2.png) 8 fill round;
  background-clip: padding-box;
}

nav ul li:nth-child(5) > a {
  background-color: #beffad;
  color: #50b960;
  box-shadow:
    -4px -3px #70d96c inset,
    2px 3px #dfffe9 inset;
  border-width: 10px;
  border-style: solid;
  border-image: url(borders/cloudlace2.png) 8 fill round;
  background-clip: padding-box;
}

nav ul li:nth-child(6) > a {
  background-color: #bcdfff;
  color: #519edb;
  box-shadow:
    -4px -3px #76b5fb inset,
    2px 3px #e3eeff inset;
  border-width: 10px;
  border-style: solid;
  border-image: url(borders/cloudlace2.png) 8 fill round;
  background-clip: padding-box;
}

nav ul li:nth-child(7) > a {
  background-color: #f8d5ff;
  color: #b982ca;
  box-shadow:
    -4px -3px #d29ee1 inset,
    2px 3px #ffe4f4 inset;
  border-width: 10px;
  border-style: solid;
  border-image: url(borders/cloudlace2.png) 8 fill round;
  background-clip: padding-box;
}

nav ul li:nth-child(8) > a {
  color: #ea5eb7;
  background-color: #ffc8ee;
  box-shadow:
    -4px -3px #f599c3 inset,
    2px 3px #ffe3fa inset;
  border-width: 10px;
  border-style: solid;
  border-image: url(borders/cloudlace2.png) 8 fill round;
  background-clip: padding-box;
}

/* -------------------------------------------------------- */
/* CONTENT */
/* -------------------------------------------------------- */

.indexcontent {
  width: 50%;
  margin-top: -5px;
  padding: 15px;
  padding-top: 18px;
  line-height: 1.5;
  background-clip: padding-box;
  border-width: 10px;
  border-style: solid;
  border-image: url(borders/cloudlace2.png) 8 fill round;
  overflow-x: hidden;
}

#memberclick {
  width: 280px;
  margin: auto;
  padding: 12px;
  margin-top: 12px;
  margin-bottom: 20px;
}

.maintextbox {
  font-size: 1.8em;
  font-weight: bolder;
  font-style: italic;
  color: #63a5e6;
  text-shadow:
    -1px -1px 0 #ebf7ff,
    1px -1px 0 #ebf7ff,
    -1px 1px 0 #ebf7ff,
    1px 1px 0 #ebf7ff;
  margin: auto;
  width: auto;
  justify-content: center;
  align-content: center;
  text-align: center;
}

textarea {
  height: 80px;
  color: #9fbedd;
}

#socialtitle {
  font-size: 3em;
  font-weight: bolder;
  font-style: italic;
  color: #a5d2ff;
  text-shadow:
    -2px -1px 0 #2076b9,
    1px -1px 0 #2076b9,
    -1px 1px 0 #2076b9,
    1px 1px 0 #2076b9;
  position: relative;
  margin-bottom: -30px;
  margin-top: -15px;
}

.bigtitle {
  font-size: 3em;
  font-weight: bolder;
  font-style: italic;
  color: #a5d2ff;
  text-shadow:
    -2px -1px 0 #2076b9,
    1px -1px 0 #2076b9,
    -1px 1px 0 #2076b9,
    1px 1px 0 #2076b9;
  position: relative;
}

.socialmenu {
  font-size: 2em;
  writing-mode: vertical-rl;
}

.main-title2 {
  font-size: 2.8em;
  font-weight: bolder;
  font-style: italic;
  color: #a5d2ff;
  text-shadow:
    -2px -1px 0 #2076b9,
    1px -1px 0 #2076b9,
    -1px 1px 0 #2076b9,
    1px 1px 0 #2076b9;
  position: relative;
  margin-top: -38px;
  margin-left: 46px;
  z-index: 99;
}

.main-title3 {
  font-size: 2.8em;
  font-weight: bolder;
  font-style: italic;
  color: #a5d2ff;
  text-shadow:
    -2px -1px 0 #2076b9,
    1px -1px 0 #2076b9,
    -1px 1px 0 #2076b9,
    1px 1px 0 #2076b9;
  position: relative;
  z-index: 99;
}

.starwing {
  display: inline-block;
}

.starwing2 {
  display: inline-block;
}

#socialsection {
  margin: auto;
  text-align: center;
}

#socialsection2 {
  justify-content: center;
  align-items: center;
  display: flex;
  padding-top: 28px;
  padding-bottom: 15px;
  background-image: url(bg/bluestarry2.png);
  padding-right: 14px;
  margin-bottom: 10px;
  border-radius: 10px;
  text-align: center;
}

.watchmenu {
  margin: auto;
  justify-content: center;
  align-items: center;
  display: flex;
}

#watchsection {
  background: none;
}

.watchtitles {
  font-family: "Willow";
  font-size: 1.2em;
  font-weight: bolder;
  font-style: italic;
  color: #d8efff;
  text-shadow:
    -1px -1px 0 #2076b9,
    1px -1px 0 #2076b9,
    -1px 1px 0 #2076b9,
    1px 1px 0 #2076b9;
  position: relative;
  text-align: center;
  justify-content: center;
  top: 54px;
  z-index: 90;
}

.card {
  border: solid 1px #2076b9;
  border-radius: 15px;
  height: 67px;
  width: 94px;
  display: inline-block;
  margin-right: 10px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  transition: 0.2s;
  background-color: white;
  cursor: pointer;
}

.card:hover {
  opacity: 60%;
}

#dreamland {
  background-image: url(images/dreamland2.png);
}

#npc {
  background-image: url(images/rakunpc.png);
}

#concealeryt {
  background-image: url(images/concealer/concealer1.png);
}

.ytiframe {
  width: 100%;
  margin: auto;
  border-width: 10px;
  border-style: solid;
  border-image: url(borders/cloudlace2.png) 8 fill round;
  background-clip: padding-box;
  margin-bottom: 10px;
}

main p,
main .image,
main .full-width-image,
main .two-columns {
  margin: 0.75em 0;
}

main ol,
main ul {
  margin: 0.5em 0;
  padding-left: 1.5em;
}

main ol li,
main ul li {
  margin-bottom: 0.2em;
  line-height: 1.3;
}

main ol {
  padding-left: 2em;
}

main blockquote {
  background: white;
  border: solid 1px #5395d7;
  padding: 15px;
  margin: 1em 0;
  border-radius: 10px;
}

main pre {
  margin: 1em 0 1.5em;
}

main code {
  text-transform: none;
}

main center {
  margin: 1em 0;
  padding: 0 1em;
}

main hr {
  border: 0;
  border-top: var(--border);
  margin: 1.5em 0;
}

/* HEADINGS: */

main h1,
main h2,
main h3,
main h4,
main h5,
main h6 {
  font-family: var(--heading-font);
  margin-bottom: 0;
  line-height: 1.5;
}

main h1:first-child,
main h2:first-child,
main h3:first-child,
main h4:first-child,
main h5:first-child,
main h6:first-child {
  margin-top: 0;
}

main h1 {
  font-size: 1.5em;
}

main h2 {
  font-size: 1.4em;
}

main h3 {
  font-size: 1.3em;
}

main h4 {
  font-size: 1.2em;
}

main h5 {
  font-size: 1.1em;
}

main h6 {
  font-size: 1em;
}

/* COLUMNS: */

.two-columns {
  display: flex;
}

.two-columns > * {
  flex: 1 1 0;
  margin: 0;
}

.two-columns > *:first-child {
  padding-right: 0.75em;
}

.two-columns > *:last-child {
  padding-left: 0.75em;
}

/* -------------------------------------------------------- */
/* CONTENT IMAGES */
/* -------------------------------------------------------- */

.newsbox .image {
  filter: opacity(80%);
  margin-top: 4px;
  border-radius: 10px;
  transition: 0.2s;
}

.newsbox .image:hover {
  filter: opacity(100%);
}

.image {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  border-radius: 10px;
}

.borderimage {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  border-width: 10px;
  border-style: solid;
  border-image: url("borders/cloudlace2.png") 8 fill round;
}

.borderimage_flex {
  border-width: 10px;
  border-style: solid;
  border-image: url("borders/cloudlace2.png") 8 fill round;
  width: 100%;
  height: 100%;
}

#concealer {
  margin: auto;
}

#concealer img:hover {
  opacity: 50%;
}

#concealer img {
  width: 140px;
  height: 140px;
  object-fit: cover;
  border-width: 10px;
  border-style: solid;
  border-image: url("borders/cloudlace2.png") 8 fill round;
  transition: 0.2s;
}

.full-width-image {
  display: block;
  width: 100%;
  height: auto;
}

.images {
  display: flex;
  width: calc(100% + 5px + 5px);
  margin-left: -5px;
  margin-right: -5px;
  align-items: center;
  justify-content: center;
  margin: auto;
  gap: 10px;
}

.images img {
  width: 100%;
  height: auto;
  overflow: hidden;
}

@media screen and (max-width: 768px) {
  .bebidora {
    display: none;
  }
}

@media screen and (max-width: 480px) {
  .bebidora {
    display: none;
  }
}