:root {
  --background-color: white;
  --accent: #f9bddd;
}

html {
  line-height: 1.225;
}

body {
  cursor: url(../assets/items/cursor.png), auto;
  font-family: "MS PGothic";
  background: var(--background-color);
  padding: 0;
}

body.index {
  overflow: hidden;
  padding-top: 7%;
  padding-left: 60px;
  transform: scale(0.91);
  z-index: 10;
  position: relative;
}

body.notf {
  overflow: hidden !important;
}

body.main,
body.logs {
  padding: 0 0 7px 2px;
}

body.title {
  overflow: hidden !important;
  margin: 6px 0 0;
}

body.about {
  overflow-x: hidden;
  margin: 8px 10px 6px;
}

body.archive {
  background-image: url(../assets/backgrounds/glossy1.jpg);
  background-size: 850px;
  background-position: -20% 30%;
}

body.archive,
body.shrines {
  overflow: clip !important;
  margin: 1px;
}

body.shrinei {
  overflow-x: hidden;
  margin: 1px;
}

body.diary {
  overflow: hidden;
  margin: 1px;
}

body.scrapbook {
  overflow: hidden;
  margin: 8px;
  background: transparent;
}

* {
  box-sizing: border-box;
}

main {
  background: 0 0;
}

main.notf {
  display: flex;
  justify-content: center;
}

iframe {
  border: none;
  cursor: url(../assets/items/cursor.png), default !important;
}

input[type="checkbox"] {
  cursor: url(../assets/items/cursor.png), default !important;
}

.col.right {
  display: grid;
  grid-template-columns: 240px calc(100% - 240px);
  grid-column-gap: 5px;
}

.col {
  display: block;
  width: 100% !important;
  background: #fff;
}

/* outer wrapper */
.wrapper {
  position: relative;
  width: 1200px;
  height: 800px;
  margin: 0 auto;
  transform-origin: top left;
}

@media (max-width: 1200px) {
  .wrapper {
    transform: scale(calc(100vw / 1200));
  }
}

/* link styling */
a {
  cursor: url(../assets/items/select.png), pointer;
  color: #2453d4;
}

/* tooltip styling */
#s-m-t-tooltip {
  z-index: 9999;
  font-family: "Times New Roman";
  background-color: rgba(250, 250, 255, 0.75);
  border-bottom: 2px solid #223388;
  border-right: 2px solid #223388;
  border-radius: 5px;
  backdrop-filter: blur(1px);
  color: white;
  text-shadow:
    -1px 0 black,
    0 1px black,
    1px 0 black,
    0 -1px black;
  max-width: 200px;
  margin: 20px;
  padding: 7px;
  transition: 0.1s;
  text-align: center;
}

/* text styling */
p {
  font-size: 0.875em;
}

.inner > p {
  position: sticky;
  top: 0;
  background: #fff;
  width: 100%;
  z-index: 1;
  border-bottom: 1px solid gray;
  font-size: 12px;
}

.inner > p b {
  font-weight: 400 !important;
}

::selection {
  color: #b4dffb;
  background: #ffffe0;
  backdrop-filter: blur(2px);
}

strong {
  color: #2453d4;
}

strong2 {
  color: #ee8cc8;
}

strong3 {
  color: rgb(158, 181, 235);
}

@font-face {
  font-family: PC98;
  src: url(../assets/fonts/pc-9800.ttf);
}

@font-face {
  font-family: spirit;
  src: url(../assets/fonts/Spirit.ttf);
}

@font-face {
  font-family: redaction;
  src: url(../assets/fonts/Redaction.otf);
}

@font-face {
  font-family: "acidic";
  src: url(../assets/fonts/ACIDIC.TTF);
  font-style: normal;
}

/* corpo */
@font-face {
  font-family: "Chirp";
  src: url(../assets/fonts/chirp.otf);
  font-style: normal;
}

@font-face {
  font-family: "SFPRO";
  src: url(../assets/fonts/SFPRO.otf);
  font-style: normal;
}

@font-face {
  font-family: "Nitty";
  src: url(../assets/fonts/Nitty.otf);
  font-style: normal;
}

/* heading styling */
.heading h4 {
  padding-inline: 7px;
  padding-top: 2px !important;
  font-size: 0;
  text-transform: uppercase;
  font-weight: 400;
  display: inline-block !important;
  margin-bottom: -1px;
  margin-right: 10px;
  transform: translateY(0) !important;
}

:is(.heading h4):hover {
  font-size: inherit !important;
  padding-inline: 7px;
  margin: 0;
  text-align: left;
}
:is(.heading h4):hover:after {
  font-size: 0 !important;
}

/* universal callers */
.flexbox {
  display: flex;
}

.rowflex {
  display: flex;
  flex-direction: row;
}

.columnflex {
  display: flex;
  flex-direction: column;
}

/* main page */

/* header */
.url-info {
  background: #fff url(../assets/images/softy.webp);
  background-size: cover;
  background-position: center;
  height: 200px;
  grid-column: span 3;
  image-rendering: pixelated;
  border: 1px solid #e0e0e0 !important;
  border-radius: 10px 0 0 10px;
  width: 713px !important;
  margin-top: 0 !important;
  /** box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15), 0 4px 10px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.8), inset 0 -1px 0 rgba(0, 0, 0, 0.05); **/
  filter: opacity(85%);
  box-shadow:
    inset 0px -6px 6px -5px #dadada,
    0px 0px 6px 0px #dadada;
}

.url-info::after {
  content: "";
  width: 200px;
  height: 198.5px !important;
  margin: -0.5px 0 0 721px;
  background: url("../assets/gifs/googly.gif") left/cover no-repeat;
  position: absolute;
  border-radius: 0 10px 10px 0;
  border: 1px solid #5773ff !important;
  box-shadow:
    inset 0px -6px 6px -5px #dadada,
    0px 0px 6px 0px #dadada;
  display: block;
}

/* top row */
.table-section {
  width: 100% !important;
  margin-top: 10px !important;
  margin-bottom: 10px !important;
  display: inline-block;
  background: #fff;
  border: 0 !important;
}

.table-section .inner {
  background: linear-gradient(
    to bottom,
    #e2f3ff 1%,
    #a5d5ff 49%,
    #85b4ff 51%,
    #ebf0f4 100%
  );
  border-top: 1.5px solid #8d6e6888;
  border-left: 1.5px solid #8d6e6888;
  border-bottom: 4px solid #8d6e6888;
  border-right: 1.5px solid #8d6e6888;
  box-shadow:
    inset 0px -6px 6px -5px #dadada,
    0px 0px 6px 0px #dadada;
  border-radius: 10px;
  height: fit-content;
  overflow: hidden;
  text-align: right;
}

.table-section .heading {
  height: 22px !important;
  width: calc(100% - 2.5rem) !important;
  margin: 0 !important;
  font-weight: 400;
  font-size: 14px !important;
  border-radius: 10px 10px 0 0;
  background: var(--accent) !important;
  box-shadow: 0 -4px 3px 3px rgba(255, 255, 255, 0.5) inset;
  border: 1px solid #000;
  border-bottom: 0;
  color: #fff !important;
  text-shadow:
    0 0 1px color-mix(in srgb, var(--accent) 70%, #000),
    0 0 1px color-mix(in srgb, var(--accent) 70%, #000),
    0 0 1px color-mix(in srgb, var(--accent) 70%, #000),
    1px 1px 0 color-mix(in srgb, var(--accent) 70%, #000),
    -1px -1px 0 color-mix(in srgb, var(--accent) 70%, #000),
    -1px 1px 0 color-mix(in srgb, var(--accent) 70%, #000),
    1px -1px 0 color-mix(in srgb, var(--accent) 70%, #000);
}

.table-section .heading h4:after {
  font-size: 14px;
  content: "クイズ";
  display: inline;
}

.quiz {
  width: 200px;
  height: 112px;
  border: 1px solid black;
  border-radius: 0 0 10px 10px;
  margin-bottom: 8px;
}

.quizbg {
  background:
    linear-gradient(360deg, rgb(255, 255, 255), transparent),
    url(../assets/images/scooper.jpg) center/cover;
  padding: 7px;
  width: 100%;
  cursor: url(cursor.png), auto;
  font-family: "PC98";
  font-size: 18px;
  color: #2453d4;
  height: 100%;
  border-radius: 0 0 10px 10px;
  text-align: center;
}

.quiztitle {
  padding: 3px 0px 4px 2px;
}

.quizanswer {
  border-radius: 3px;
  border-color: #000;
  width: 128px;
  font-size: 14px;
  cursor: url(cursor.png), auto;
}

.quizvote {
  color: #775a1d;
  background: #ffffff87;
  border: 1px solid #e6e600;
  padding: 3px;
  width: 60px;
  border-radius: 4px;
  cursor: url(select.png), pointer;
}

.quizview {
  color: #775a1d;
  background: #ffffff87;
  border: 1px solid #e6e600;
  padding: 3px;
  width: 60px;
  border-radius: 4px;
  cursor: url(../assets/items/select.png), pointer;
}

.mipodmain {
  background: url(../assets/images/ipod_vert.jpg);
  background-size: cover;
  background-position: center -2px;
  border-radius: 15px;
  height: 310px;
  width: 200px;
  border: 1px solid #e0e0e0;
  box-shadow:
    inset 0px -6px 6px -5px #dadada,
    0px 0px 6px 0px #dadada;
  overflow: hidden;
  text-align: right;
}

.mipodbar {
  position: absolute;
  margin: 15px 0 0 16.5px;
}

.mipodalbum {
  display: flex;
  flex-direction: row;
  margin-top: 7px;
  margin-left: 22px;
}

.mipodalbum img {
  height: 50px;
  width: 50px;
  border: 2px ridge lightgray;
}
.mipodalbum p {
  margin: -1px 0 0 5px;
  line-height: 18px;
  text-decoration: underline;
}

.songboxp {
  margin: 27px 0 0 22px;
}

.mseeking {
  width: 163px;
  margin-top: 117px;
  margin-left: 18px;
  position: absolute;
}

.mpausebtn {
  position: absolute;
  margin-left: -108px;
  margin-top: 268px;
}

.mtable-section {
  background: transparent;
}

.mtable-section .inner {
  padding: 15px 15px 20px 17px;
  height: 452.5px;
  width: 713px;
  margin: -0.5px 0 0 -35px;
}

.mainbox {
  height: 100%;
  width: 100%;
  background: #fff;
  border: 1.25px solid #8584ff;
  border-radius: 6px;
  display: block;
  box-sizing: border-box;
  filter: drop-shadow(0 0 1px white) drop-shadow(0 0 1px white)
    drop-shadow(0 0 1px white) drop-shadow(0 0 1px white)
    drop-shadow(0 0 1px white) drop-shadow(0 2px 2px #0000004d);
}

#myellowtape {
  position: absolute;
  margin-left: 600px;
  margin-top: 630px;
  z-index: 900;
}

#myellowtape img {
  transform: rotate(35deg);
  height: 38px;
}

#mexclm {
  position: absolute;
  margin-left: 670px;
  margin-top: 1050px;
  z-index: 900;
}

#mexclm img {
  transform: rotate(-10deg);
  height: 81px;
}

/* neighbors */
.blurbs,
.ablurbs {
  grid-column: span 2;
}

.blurbs .inner,
.ablurbs .inner {
  width: 923px !important;
  margin-bottom: 10px;
  border: 1px solid #000;
  border-radius: 0 0 10px 10px !important;
  border-top: 0;
}

.blurbs .inner {
  height: 70px !important;
  padding: 12px 0 15px;
}

.ablurbs .inner {
  height: 89px !important;
  padding: 12px 0 15px;
}

.blurbs .heading,
.ablurbs .heading {
  height: 22px !important;
  width: 923px !important;
  border-radius: 10px 10px 0 0;
  background: var(--accent) !important;
  margin: 0 !important;
  font-weight: 400;
  font-size: 14px !important;
  background: var(--accent) !important;
  box-shadow: 0 -4px 3px 3px rgba(255, 255, 255, 0.5) inset;
  border: 1px solid #000;
  color: #fff !important;
  text-shadow:
    0 0 1px color-mix(in srgb, var(--accent) 70%, #000),
    0 0 1px color-mix(in srgb, var(--accent) 70%, #000),
    0 0 1px color-mix(in srgb, var(--accent) 70%, #000),
    1px 1px 0 color-mix(in srgb, var(--accent) 70%, #000),
    -1px -1px 0 color-mix(in srgb, var(--accent) 70%, #000),
    -1px 1px 0 color-mix(in srgb, var(--accent) 70%, #000),
    1px -1px 0 color-mix(in srgb, var(--accent) 70%, #000);
}

.blurbs .heading h4:after {
  font-size: 14px;
  content: "友達";
  display: inline;
}

.ablurbs .heading h4:after {
  font-size: 14px;
  content: "ファンリスト";
  display: inline;
}

/* middle row */
.middle {
  grid-column: span 2;
  display: flex;
  width: 710 !important;
  height: 299px;
  margin-bottom: 10px;
}

.blog-preview p,
.inner > p {
  padding-inline: 5px;
}

.blog-preview .heading {
  height: 22px !important;
  width: 280px !important;
  border-radius: 10px 10px 0 0;
  background: var(--accent) !important;
  border: 1px solid #000;
  margin: 0 0 0 -0.5px !important;
  font-weight: 400;
  font-size: 14px !important;
  box-shadow: 0 -2px 2px 3px rgba(255, 255, 255, 0.5) inset;
  color: #fff !important;
  text-shadow:
    0 0 1px color-mix(in srgb, var(--accent) 70%, #000),
    0 0 1px color-mix(in srgb, var(--accent) 70%, #000),
    0 0 1px color-mix(in srgb, var(--accent) 70%, #000),
    1px 1px 0 color-mix(in srgb, var(--accent) 70%, #000),
    -1px -1px 0 color-mix(in srgb, var(--accent) 70%, #000),
    -1px 1px 0 color-mix(in srgb, var(--accent) 70%, #000),
    1px -1px 0 color-mix(in srgb, var(--accent) 70%, #000);
}

.blog-preview .heading h4:after {
  font-size: 14px;
  content: "アップデート";
}

.blog-preview {
  position: relative;
  order: 2;
  width: 280px;
  display: block;
  background: #fff;
  height: 225px;
  border: 1px solid #000;
  border-top: 0;
  border-radius: 20px 20px 0 0;
  margin-left: 10px !important;
}

.blog-child {
  background: url(../assets/backgrounds/bluenote.jpg) center/cover;
  margin: 6px;
  padding: 0 4px 4px 35px;
  border: 1px solid #000;
  border-radius: 6px;
  height: 92px;
  font-size: 14px;
  line-height: 22px;
}

.blog-content {
  background: transparent;
  margin-top: 30px;
  overflow-y: auto;
  height: 61px;
}

.blog-preview::after {
  content: "";
  display: block;
  position: absolute;
  background: url(../assets/images/flan_cup.jpg) center/cover no-repeat;
  border: 1px solid #000;
  border-radius: 0 0 10px 10px;
  width: 279px;
  margin-left: -1px;
  height: 65px;
  bottom: -74px;
}

.mblogsitely {
  font-family: "Spirit";
  font-size: 25px;
  -webkit-text-fill-color: #ef91aa;
  -webkit-text-stroke: 0.5px #000;
  top: 35px;
  left: 180px;
  position: absolute;
}

.mblogentry {
  font-family: "Spirit";
  font-size: 25px;
  -webkit-text-fill-color: #ef91aa;
  -webkit-text-stroke: 0.5px #000;
  top: 133px;
  left: 180px;
  position: absolute;
}

.friends:not(#comments) {
  order: 1;
  height: 299px !important;
  width: 633px;
  border: 1px solid #000;
  border-radius: 10px;
  display: flex;
  padding: 8px;
}

.afriends {
  background: #fff9f5;
  height: 367px !important;
  width: 560px;
  border: 1px solid #000;
  border-radius: 10px;
  display: flex;
  padding: 8px;
  z-index: 999;
}

.guestbook {
  background: url(../assets/images/cereal.webp);
  background-size: 220px 280px;
  border: 1px solid #c0c0c0 !important;
  box-shadow:
    inset 0px -6px 6px -5px #dadada,
    0px 0px 6px 0px #dadada;
  border-radius: 6px;
  height: 100%;
  width: 220px;
}

.guestlink {
  width: 100%;
  text-align: center;
  margin-top: 240px;
  font-family: "PC98";
  font-size: 18px;
  font-weight: bold;
  color: #000000;
  opacity: 0.7;
}

.guestlink a {
  text-decoration: none;
}

.webrings {
  border: 1px solid #000;
  border-radius: 6px;
  padding: 6px;
  height: 100%;
  width: 220px;
  overflow-y: auto;
  margin: 0px 8px;
}

.webrings::-webkit-scrollbar {
  display: none;
}

.wentitle {
  font-family: Arial;
  font-size: 31px;
  letter-spacing: -1px;
  font-weight: bolder;
  padding: 5px;
}

.wentry,
.wentry-yume {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #000;
  background: url(../assets/backgrounds/notebg.png);
  background-attachment: fixed;
  border-radius: 3px;
  height: fit-content;
  margin: 0 0 6px;
}

.wentry img:hover,
.wentry-yume img:hover {
  filter: brightness(104%) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white)
    drop-shadow(0 0 1px white) drop-shadow(0 0 1px white)
    drop-shadow(0 01px white) drop-shadow(0 0 1px white)
    drop-shadow(1px 1px 0 #0000004d);
  cursor: url(../assets/items/select.png), pointer;
  z-index: 200;
}

.wentry-yume img {
  margin: 0 0 0 35px;
}

#yume-ring table tr td {
  padding: 0;
}

.wentry #doodlering .webring-wrapper {
  background-image: none !important;
  background-color: transparent !important;
}

.lpsringdiv {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: -webkit-fill-available;
}

.lspringdiv img {
  margin-left: 56px;
}

.lpsring {
  text-align: center;
  text-transform: lowercase;
  font-weight: bold;
  letter-spacing: 1px;
  font-size: 10px !important;
}

.lpsring a {
  font-size: 14px;
  text-decoration: none;
  letter-spacing: 1px;
}

.stamp {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: transparent;
  width: 100%;
  height: 100%;
  border: 1px dashed #2453d4;
  border-radius: 6px;
  padding: 6px;
}

.buttonbg {
  background: url(../assets/backgrounds/star.jpg) center/cover;
  background-size: 177px;
  border: 1px solid #000;
  border-radius: 6px;
  padding: 6px;
  height: 50%;
  width: 163px;
  margin-left: 8px;
  margin-bottom: 6px;
}

textarea {
  width: 94px;
  resize: none;
  overflow: hidden;
  font-size: 0.7em;
  height: 1.8rem;
  color: #444;
}

.image-container {
  width: fit-content;
  margin: 20px;
}

.image-container img {
  width: 95px;
  border-radius: 4px;
  border: 3px ridge #f3ff8d;
  padding: 5px;
  position: relative;
}

.next-button {
  cursor: url(../assets/items/select.png), pointer;
  background: transparent;
  color: #2453d4;
  border: none;
  text-decoration: underline;
  font-family: "MS PGothic";
  font-size: 14px;
}

.mlinkme {
  border-top: 1.5px solid #8d6e6888;
  border-left: 1.5px solid #8d6e6888;
  border-bottom: 4px solid #8d6e6888;
  border-right: 1.5px solid #8d6e6888;
  border-radius: 6px;
  height: 50%;
  width: 163px;
  margin-left: 8px;
  padding: 10px;
  background: linear-gradient(
    to bottom,
    #e2f3ff 1%,
    #a5d5ff 49%,
    #85b4ff 51%,
    #ebf0f4 100%
  );
}

.mlinkmebg {
  border: 3px ridge #d7b999;
  border-radius: 6px;
  height: 100%;
  padding: 4px;
  display: flex;
  background: url(../assets/backgrounds/neobg.jpg);
  background-size: 300px;
}

.mlinkmebg img {
  position: absolute;
  margin: 10px 0 0 -10px;
  z-index: 100;
}

.mlinkmebg p {
  font-size: 32px;
  font-family: "Spirit";
  filter: sepia(20%);
  font-weight: bold;
  letter-spacing: -1px;
  color: #fff4fd;
  z-index: 1001;
  text-shadow:
    0px 0px 3px #00000022,
    -2px -2px 1px #8d6e68,
    -2px -2px 1px #8d6e68,
    -2px 2px 0px #8d6e68,
    -2px -2px 1px #8d6e68,
    -2px -2px 1px #8d6e68,
    2px -2px 0px #8d6e68,
    -2px 2px 0px #8d6e68,
    -2px 1px 1px #8d6e68,
    -2px 4px 1px #8d6e68,
    2px 2px 0px #8d6e68,
    3px 4px 1px #00000022;
  margin: 8px 0 0 8px;
  z-index: 105;
}

/* lower row */
#comments .heading,
#acomments .heading {
  height: 22px !important;
  width: 741px !important;
  border-radius: 10px 10px 0 0;
  background: var(--accent) !important;
  border: 1px solid #000;
  margin: 0 !important;
  font-weight: 400;
  font-size: 14px !important;
  box-shadow: 0 -2px 2px 3px rgba(255, 255, 255, 0.5) inset;
  color: #fff !important;
  text-shadow:
    0 0 1px color-mix(in srgb, var(--accent) 70%, #000),
    0 0 1px color-mix(in srgb, var(--accent) 70%, #000),
    0 0 1px color-mix(in srgb, var(--accent) 70%, #000),
    1px 1px 0 color-mix(in srgb, var(--accent) 70%, #000),
    -1px -1px 0 color-mix(in srgb, var(--accent) 70%, #000),
    -1px 1px 0 color-mix(in srgb, var(--accent) 70%, #000),
    1px -1px 0 color-mix(in srgb, var(--accent) 70%, #000);
}

#acomments .heading {
  width: 613px !important;
}

#comments .heading h4:after {
  font-size: 14px;
  content: "チャットボックス";
  display: inline;
}

#acomments .heading h4:after {
  font-size: 14px;
  content: "クイズ結果";
  display: inline;
}

.friends .inner {
  background: url(../assets/images/sugarra.webp) !important;
  background-size: 680px !important;
  width: 741px !important;
  border: 1px solid #000;
  border-radius: 0 0 10px 10px;
  border-top: 0;
}

#comments {
  position: relative;
  grid-column: span 2;
  right: -182px;
  width: fit-content;
  height: 540px !important;
}

#acomments {
  position: relative;
  margin-top: 11px;
  right: 0;
  width: fit-content;
}

#comments .inner {
  height: 524.5px;
  padding: 0;
  overflow: hidden;
}

#acomments .inner {
  height: 175px;
  padding: 10px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  overflow-x: scroll;
  background: #fff !important;
  background-size: 680px !important;
  width: 613px !important;
  border: 1px solid #000;
  border-top: 0;
  border-bottom: 0;
}

#acomments .inner::-webkit-scrollbar-track {
  margin-left: -16px;
  margin-right: -16px;
}

#comments::before {
  top: -7px;
  right: 751px;
  width: 172px;
  height: 545.5px;
  margin-top: 7px;
  content: "";
  display: block;
  position: absolute;
  border: 1px solid #e0e0e0 !important;
  filter: opacity(85%);
  box-shadow:
    inset 0px -6px 6px -5px #dadada,
    0px 0px 6px 0px #dadada;
  border-radius: 10px;
  background: url(../assets/images/pudding_slash.webp) right/cover;
}

#acomments::after {
  top: -7px;
  right: -322px;
  width: 310px;
  height: 199px;
  margin-top: 7px;
  content: "";
  display: block;
  position: absolute;
  border-radius: 10px;
  background: url(../assets/images/peepsenv.webp) left/cover;
  background-position: 12% 108%;
}

#acomments .inner img {
  height: 100%;
  filter: grayscale(20%) sepia(80%) hue-rotate(180deg) saturate(200%)
    opacity(95%);
}

#acomments .inner img:hover {
  filter: brightness(104%) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white)
    drop-shadow(0 0 1px white) drop-shadow(0 0 1px white)
    drop-shadow(0 01px white) drop-shadow(0 0 1px white)
    drop-shadow(1px 1px 0 #0000004d);
}

#mclip {
  position: absolute;
  margin-left: 445px;
  margin-top: -14px;
  z-index: 400;
}

#mclip img {
  height: 100px;
}

#mpen {
  position: absolute;
  margin-left: 160px;
  margin-top: 1150px;
  z-index: 900;
}

#mpen img {
  height: 390px;
  transform: rotate(233deg);
  filter: drop-shadow(0 0 1px white) drop-shadow(0 0 1px white)
    drop-shadow(0 0 1px white) drop-shadow(0 0 1px white)
    drop-shadow(0 0 1px white) drop-shadow(0 0 1px white)
    drop-shadow(0 0 1px white) drop-shadow(0 0 1px #0000004d);
}

/* marquee styling */
ul {
  list-style: none;
  padding: 5px;
  margin: 0;
}

.marquee {
  --gap: 1rem;
  position: relative;
  display: flex;
  overflow: hidden;
  user-select: none;
  gap: var(--gap);
  padding: 3px 0 3px;
}

.marquee__content {
  flex-shrink: 0;
  display: flex;
  justify-content: space-around;
  gap: var(--gap);
  height: 72px !important;
  min-width: 100%;
  animation: scroll 180s linear infinite;
  animation-direction: reverse;
}

.marquee:hover .marquee__content,
.marquee:hover .dmq__content,
.marquee:hover .abmq__content,
.marquee:hover .scmq1__content,
.marquee:hover .scmq2__content {
  animation-play-state: paused;
}

.marquee__content img,
.abmq__content img {
  filter: grayscale(20%) sepia(80%) hue-rotate(180deg) saturate(200%)
    opacity(95%);
}

.marquee__content img:hover,
.dmq_content img:hover,
.abmq_content img:hover,
.scmq1__content img:hover,
.scmq2__content img:hover,
.abmq__content img:hover {
  filter: brightness(110%);
  transform: scale(1.16);
  transition: 0.3s;
}

@keyframes scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-100% - var(--gap)));
  }
}

/* music player */
.songtitlebox {
  background: linear-gradient(
    to bottom,
    #e2f3ff 1%,
    #a5d5ff 49%,
    #85b4ff 51%,
    #ebf0f4 100%
  ); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  width: 125px; /* width of the player */
  z-index: 9999;
}

.songtitle {
  background: transparent;
}

.songbox {
  background: transparent;
  font-family: "MS PGothic";
  font-size: 15px;
  font-weight: bold;
  color: #06070c;
  line-height: 16px;
  text-align: left !important;
  position: absolute;
  margin-top: 10px;
  z-index: 9999;
}

.controls {
  width: 100%;
}

.controls img:hover {
  transform: scale(1.03);
  transition: 0.1s ease;
}

.seeking {
  background-color: #fff; /* background color of seeking bar */
  display: flex;
  justify-content: space-evenly;
  padding: 5px; /* padding around seeking bar */
}

.current-time {
  padding-right: 5px;
}

.total-duration {
  padding-left: 5px;
}

i.fas:hover {
  cursor: url(../assets/items/select.png), pointer;
}

input[type="range"] {
  -webkit-appearance: none;
  width: 100%;
  background-color: #fff; /* background color of seeking bar - make the color same as .seeking background color */
}

input[type="range"]:focus {
  outline: none;
}

/* settings for chrome browsers */
input[type="range"]::-webkit-slider-runnable-track {
  width: 100%;
  height: 2px; /* thickness of seeking track */
  cursor: help;
  background: #e74492; /* color of seeking track */
}

input[type="range"]::-webkit-slider-thumb {
  height: 10px; /* height of seeking square */
  width: 10px; /* width of seeking square */
  border-radius: 5px; /* change to 5px if you want a circle seeker */
  background: #e74492; /* color of seeker square */
  cursor: help;
  -webkit-appearance: none;
  margin-top: -4.5px;
}

/* scrollbar */
::-webkit-scrollbar {
  width: 16px;
}

::-webkit-scrollbar:horizontal {
  height: 17px;
}

::-webkit-scrollbar-corner {
  background: #fff;
}

::-webkit-scrollbar-track {
  background: #fff;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='2' height='2' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1 0H0v1h1v1h1V1H1V0z' fill='silver'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 0H1v1H0v1h1V1h1V0z' fill='%23fff'/%3E%3C/svg%3E");
}

::-webkit-scrollbar-thumb {
  background-color: #dfdfdf;
  box-shadow:
    inset -1px -1px #0a0a0a,
    inset 1px 1px #fff,
    inset -2px -2px grey,
    inset 2px 2px #dfdfdf;
}

::-webkit-scrollbar-button:horizontal:end:increment,
::-webkit-scrollbar-button:horizontal:start:decrement,
::-webkit-scrollbar-button:vertical:end:increment,
::-webkit-scrollbar-button:vertical:start:decrement {
  display: block;
}

::-webkit-scrollbar-button:vertical:start {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 0H0v16h1V1h14V0z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 1H1v14h1V2h12V1H2z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 17H0v-1h15V0h1v17z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 1h-1v14H1v1h14V1z' fill='gray'/%3E%3Cpath fill='silver' d='M2 2h12v13H2z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 6H7v1H6v1H5v1H4v1h7V9h-1V8H9V7H8V6z' fill='%23000'/%3E%3C/svg%3E");
  height: 17px;
}

::-webkit-scrollbar-button:vertical:end {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 0H0v16h1V1h14V0z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 1H1v14h1V2h12V1H2z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 17H0v-1h15V0h1v17z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 1h-1v14H1v1h14V1z' fill='gray'/%3E%3Cpath fill='silver' d='M2 2h12v13H2z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11 6H4v1h1v1h1v1h1v1h1V9h1V8h1V7h1V6z' fill='%23000'/%3E%3C/svg%3E");
  height: 17px;
}

::-webkit-scrollbar-button:horizontal:start {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 0H0v16h1V1h14V0z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 1H1v14h1V2h12V1H2z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 17H0v-1h15V0h1v17z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 1h-1v14H1v1h14V1z' fill='gray'/%3E%3Cpath fill='silver' d='M2 2h12v13H2z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 4H8v1H7v1H6v1H5v1h1v1h1v1h1v1h1V4z' fill='%23000'/%3E%3C/svg%3E");
  width: 16px;
}

::-webkit-scrollbar-button:horizontal:end {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 0H0v16h1V1h14V0z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 1H1v14h1V2h12V1H2z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 17H0v-1h15V0h1v17z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 1h-1v14H1v1h14V1z' fill='gray'/%3E%3Cpath fill='silver' d='M2 2h12v13H2z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7 4H6v7h1v-1h1V9h1V8h1V7H9V6H8V5H7V4z' fill='%23000'/%3E%3C/svg%3E");
  width: 16px;
}

body::-webkit-scrollbar-corner {
  margin-top: 60px;
}

/* pixel mask */
.general-about img {
  -webkit-mask-image: url(https://i.postimg.cc/Hk6D7BxQ/868-sin-t-tulo-20240429140043.png);
  -webkit-mask-size: 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

/* animations */
#float {
  animation-name: floating;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

@keyframes floating {
  0% {
    transform: translate(0, 0px);
  }
  50% {
    transform: translate(0, 10px);
  }
  100% {
    transform: translate(0, -0px);
  }
}

/* title label */
#label {
  position: fixed;
  font-family: "Arial";
  font-size: 70px;
  font-weight: 700;
  letter-spacing: -2px;
  border: 1px solid #000;
  background: #fff;
  text-align: left !important;
  padding: 0 5px 0;
  transform: rotate(-3deg);
  left: 120px;
  top: 145px;
  z-index: 400;
  width: fit-content;
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
  opacity: 1;
  visibility: visible;
}

#label.hidden {
  opacity: 0;
  visibility: hidden;
}

.labelline1 {
  margin-top: -5px;
  border-bottom: 2px solid #000;
}

.labelline2 {
  margin-top: 0;
  border-bottom: 1px solid #000;
}

.labelconst {
  font-weight: 100;
  font-size: 14px;
  letter-spacing: 0;
  margin-top: 5px;
  margin-bottom: 0;
}

.labelest {
  font-weight: 600;
  font-size: 22px;
  letter-spacing: 0;
  margin-top: 0;
  margin-bottom: 5px;
}

.labelimg {
  margin: 5px 0 0 10px;
  padding: 0;
  display: flex;
  justify-content: right;
}

/* sitemap */
#file {
  display: flex;
  width: 634px;
  height: 370px;
  border: 1px solid #e0e0e0 !important;
  box-shadow:
    inset 0px -6px 6px -5px #dadada,
    0px 0px 6px 0px #dadada;
  border-radius: 15px;
  font-size: 80%;
  background: linear-gradient(#fff 10%, #ffceec 90%, #fff 100%);
  margin: 15px 0 0 22px;
  padding: 5px;
  z-index: 200;
}

#border-1 {
  height: 100%;
  width: 100%;
  border: 3px ridge #839aff99;
  border-radius: 15px;
  padding: 2px;
}

#border-2 {
  height: 100%;
  width: 100%;
  border: 1px dashed #f1c4ee;
  border-radius: 11px;
}

#sheet {
  height: 330px;
  overflow: auto;
  width: 520px;
  display: flex;
  line-height: 10px;
  position: absolute;
  padding: 15px 20px 15px;
  left: 70px;
  top: 17px;
  transform: rotate(2.5deg);
  background: url(../assets/backgrounds/grid.png);
  background-size: 270px;
  border: 1px solid #000;
  border-radius: 4px;
}

#sheet::-webkit-scrollbar {
  display: none;
}

#sheet:hover {
  z-index: 120;
}

#sheet a {
  text-decoration: none;
  color: inherit;
  transition: 0.1s all ease-in-out;
}

#sheet a:hover,
#sheet a:focus {
  color: #ffceec !important;
}

#smbluebox {
  margin-left: -75px;
  margin-top: -70px;
  position: absolute;
  z-index: 95;
}

#smbluebox img {
  height: 490px;
  transform: rotate(-2deg);
}

#smyellownote {
  margin-left: 190px;
  margin-top: 30px;
  position: absolute;
  z-index: 90;
}

#smrilstamp {
  margin-left: 230px;
  margin-top: 180px;
  position: absolute;
  transform: rotate(10deg);
  z-index: 99;
}

#sitemap {
  left: 322px;
  top: 75px;
  position: absolute;
  padding: 5px;
  font-family: "Redaction";
  font-size: 42px;
  font-weight: bold;
  letter-spacing: -1px;
  -webkit-text-fill-color: #fbff00;
  -webkit-text-stroke: 0.01px #00f;
  z-index: 390;
}

.main-checkbox {
  margin-right: 10px;
}

.top-label,
.main-label {
  font-family: "spirit";
  letter-spacing: 1px;
  color: #fff;
  text-shadow:
    1px 0px #000,
    -1px 0px #000,
    0px 1px #000,
    0px -1px #000,
    0 0;
  transition: 0.1s;
  cursor: url(cursor.png), auto;
  filter: saturate(300%);
}

.main-label {
  margin-top: 8px;
  width: fit-content;
}

.nested-label {
  cursor: url(cursor.png), auto;
  margin-left: 20px;
}

.more-nested-items {
  display: none;
  line-height: 17px;
}

.toggle-symbol {
  width: 20px;
  margin: 0 4px 0 5px;
  font-weight: bold;
  font-size: 18px;
  color: blue;
}

.main-toggle + .main-label .toggle-symbol::before,
.nested-toggle + .nested-label .toggle-symbol::before {
  content: "+";
}

.main-toggle:checked + .main-label .toggle-symbol::before,
.nested-toggle:checked + .nested-label .toggle-symbol::before {
  content: "-";
  color: red;
}

.main-toggle:checked ~ .more-nested-items,
.nested-toggle:checked ~ .more-nested-items {
  display: block;
}

.main-toggle,
.nested-toggle {
  opacity: 0;
  position: absolute;
}

.main-label,
.nested-label {
  cursor: url(select.png), pointer;
  display: flex;
  align-items: center;
}

.flexed::-webkit-scrollbar {
  display: none;
}

#smclip {
  position: absolute;
  left: 445px;
  top: -5px;
  transform: scaleX(-1);
  z-index: 400;
}

#smcard {
  position: absolute;
  height: 130px;
  left: 300px;
  top: 40px;
  z-index: 300;
}

#smpencil {
  position: absolute;
  top: 200px;
  left: 510px;
  transform: rotate(200deg);
  z-index: 100;
}

#smcoffee {
  position: absolute;
  top: 215px;
  left: 80px;
  z-index: 100;
  filter: drop-shadow(0 0 1px white) drop-shadow(0 0 1px white)
    drop-shadow(0 0 1px white) drop-shadow(0 0 1px white)
    drop-shadow(0 0 1px white) drop-shadow(0 0 1px white)
    drop-shadow(0 0 1px white) drop-shadow(0 0 1px #0000004d);
}

#smletter {
  position: absolute;
  top: 90px;
  left: 320px;
  z-index: 94;
}

.flexed::-webkit-scrollbar {
  display: none;
}

/* title page */
.titlebox {
  background: url(../assets/images/sealcard.jpg);
  background-size: 385px;
  border: 1px solid #eaeaea !important;
  border-radius: 10px;
  box-shadow:
    inset 0px -6px 6px -5px #dadada,
    0px 0px 6px 0px #dadada;
  width: 269.5px;
  max-height: 260px;
  margin-left: 5px;
  padding: 14px;
  line-height: 19px;
  filter: saturate(120%);
  color: #715d64;
  letter-spacing: -0.5px;
  font-family: "acidic", serif;
  font-size: 15px;
  z-index: 200;
}

.titlebox img {
  position: absolute;
  margin: -28px 0 0 -8px;
  z-index: 100;
}

#goop {
  position: absolute;
  top: -22px;
  left: -3px;
  z-index: 100;
}

#torangesquig {
  position: absolute;
  margin: 84px 590px;
  z-index: 900;
}

#torangesquig img {
  height: 66px;
  transform: rotate(-20deg);
}

.miscbox {
  display: flex;
  flex-direction: column;
  width: 175px;
  border: 1px solid #000;
  border-radius: 6px;
  padding: 4px;
  margin-left: 222px;
}

#visitorid {
  display: flex;
  margin-bottom: 5px;
}

#visitorid p {
  margin: -1px 0 0 43px;
}

#visitor {
  background: url(../assets/images/heart_flan.JPG) center/cover;
  width: 100%;
  border: 1px solid #000;
  border-radius: 20px 6px 6px 6px;
  padding: 4px 7px 5px;
}

#visitor p {
  font-family: "PC98";
  font-size: 19px;
  color: #2453d4;
  letter-spacing: -1px;
  text-align: center;
}

#visitorbox {
  background: #fff;
  border: 1px solid #000;
  border-radius: 6px;
  display: flex;
  justify-content: center !important;
  flex-direction: column;
}

#warning {
  margin: 5px 0 5px;
  border: 1px solid #000;
  border-radius: 6px;
  padding: 5px;
  font-family: "Times New Roman";
  font-size: 15px;
  font-weight: bold;
  letter-spacing: -1px;
}

#warn1 {
  font-size: 30px;
  margin: -5px 0 0;
}

#warn2 {
  margin: -5px 0 0;
  text-decoration: underline;
}

#corkboard {
  display: flex;
  width: 667.5px;
  height: 137px;
  border: 2px #7f493d solid;
  border-radius: 5px;
  background: url(../assets/backgrounds/corkbg.jpg);
  margin: 5px 0 0 5px;
  z-index: 200;
}

.sticky {
  position: absolute;
  font-family: "PC98";
  font-size: 12px;
  color: #000;
  line-height: 5px;
  margin: 27px 0 0 35px;
}

.sticky_head {
  position: absolute;
  font-family: "Redaction";
  font-size: 40px;
  font-weight: bold;
  letter-spacing: -1px;
  opacity: 0.9;
  -webkit-text-stroke: 0.0001px #00f;
  color: #fff;
}

.stickyh1 {
  transform: rotate(-11deg);
  left: 130px;
  margin-top: -25px;
}

.stickyhere {
  margin-top: -48px;
  font-size: 28px;
}

.stickyh2 {
  transform: rotate(1.4deg);
  left: 190px;
  top: 300px;
  z-index: 210;
}

.stickyh2 p {
  font-family: "Spirit";
  font-size: 28px;
  color: #7b3a16;
  margin: -7px 0 10px;
}

#tibluecard {
  position: absolute;
  transform: rotate(-10deg);
  height: 125px;
  left: 10px;
  margin-top: -5px;
}

#tiyellowpin {
  position: absolute;
  transform: rotate(2deg);
  height: 25px;
  left: 290px;
  margin-top: 8px;
  z-index: 205;
}

#tinote {
  position: absolute;
  transform: rotate(2deg);
  height: 140px;
  left: 200px;
  margin-top: 5px;
  z-index: 200;
}

#tiyellowpin {
  position: absolute;
  transform: rotate(2deg);
  height: 25px;
  left: 290px;
  margin-top: 8px;
  z-index: 205;
}

#tibluebubble {
  position: absolute;
  height: 110px;
  left: 360px;
  margin-top: -25px;
  z-index: 210;
}

#tiboo {
  position: absolute;
  height: 72px;
  left: 370px;
  margin: -8px 25px 0;
  z-index: 210;
  filter: drop-shadow(0 0 1px white) drop-shadow(0 0 1px white)
    drop-shadow(0 0 1px white) drop-shadow(0 0 1px white)
    drop-shadow(0 0 1px #0000004d);
}

#tisquare1,
#tisquare2,
#tisquare3,
#tisquare4 {
  position: absolute;
  border: 2px rgb(133, 89, 43) solid;
  border-radius: 6px;
  height: 55px;
  width: 55px;
  filter: drop-shadow(0 0 1px white) drop-shadow(0 0 1px white)
    drop-shadow(0 0 1px white) drop-shadow(0 0 1px white)
    drop-shadow(0 0 1px #0000004d);
  z-index: 200;
}

#tisquare1 {
  margin: 6px 0 0 460px;
}

#tisquare2 {
  margin: 6px 0 0 527px;
}

#tisquare3 {
  margin: 71px 0 0 460px;
}

#tisquare4 {
  margin: 71px 0 0 527px;
}

#tipudding {
  margin: 270px 0 0 603px;
  position: absolute;
  z-index: 200;
}

/* about  */
.abmq__content {
  flex-shrink: 0;
  display: flex;
  justify-content: space-around;
  gap: var(--gap);
  min-width: 100%;
  animation: scroll 60s linear infinite;
  animation-direction: normal;
}

.amiddle {
  display: flex;
  margin-bottom: 10px;
}

.arating {
  background: url(../assets/backgrounds/a18-bg-grid.gif);
  background-attachment: fixed;
  background-position: 10px 4px;
  background-color: #fffef5;
  width: 336px;
  height: 163px;
  padding: 10px;
  border-top: 1.5px solid #8d6e6888;
  border-left: 1.5px solid #8d6e6888;
  border-bottom: 4px solid #8d6e6888;
  border-right: 1.5px solid #8d6e6888;
  border-radius: 16px;
  margin: 275px 0 10px;
}

.abill {
  border: 1px solid #c0c0c0eb;
  box-shadow:
    inset 0px -6px 6px -5px #dadadaad,
    5px 5px 6px -5px #dadadaad,
    -5px 5px 6px -5px #dadadaad;
  margin: 0 369px;
  position: absolute;
  background-color: #fff;
  z-index: 389;
}

.abill:hover {
  z-index: 1010;
}

.abillin {
  position: absolute;
  margin: -85px 0;
  width: 180px;
  height: 65px;
  overflow-y: auto;
  background-color: #fbfcfe;
  font-family: "Nitty";
  font-size: 10px;
  font-stretch: ultra-condensed;
  color: #585a5ce1;
  letter-spacing: -1.5px;
  line-height: 10px;
  padding: 9px 9px;
}

.abillin::-webkit-scrollbar {
  display: none;
}

.abillin:hover::-webkit-scrollbar {
  display: block;
}

.abillin:hover {
  border-top: 2px ridge #b5ebff;
  border-left: 2px ridge #b5ebff;
  border-bottom: 2px ridge #b5ebff;
  border-right: 2px ridge #b5ebff;
  border-radius: 4px;
  margin-left: 5px;
  z-index: 1010;
  transform: scale(1.2);
}

.alinkme {
  position: absolute;
  padding: 10px;
  font-size: 34px;
  font-family: "Redaction";
  filter: sepia(20%);
  font-weight: bold;
  letter-spacing: -1px;
  color: #ffe1f9;
  z-index: 2001;
  text-shadow:
    0px 0px 3px #00000022,
    -2px -2px 1px #8d6e68,
    -2px -2px 1px #8d6e68,
    -2px 2px 0px #8d6e68,
    -2px -2px 1px #8d6e68,
    -2px -2px 1px #8d6e68,
    2px -2px 0px #8d6e68,
    -2px 2px 0px #8d6e68,
    -2px 1px 1px #8d6e68,
    -2px 4px 1px #8d6e68,
    2px 2px 0px #8d6e68,
    -2px -2px 1px #8d6e68,
    -2px 2px 0px #8d6e68,
    -2px -2px 1px #8d6e68,
    -2px -2px 1px #8d6e68,
    2px -2px 0px #8d6e68,
    -2px 2px 0px #8d6e68,
    -2px 1px 1px #8d6e68,
    -2px 4px 1px #8d6e68,
    2px 2px 0px #8d6e68,
    3px 4px 1px #00000022;
  margin: 244px 73px 8px;
}

.ahead {
  position: absolute;
  background: linear-gradient(
    to bottom,
    #fff0b5 1%,
    #ffffb9 49%,
    #ffffb9 51%,
    #ebf0f4 100%
  );
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  box-shadow:
    inset 0px -6px 6px -5px #dadadaad,
    5px 5px 6px -5px #dadadaad,
    -5px 5px 6px -5px #dadadaad;
  padding: 5px 16px 6px 16px;
  font-family: "Acidic";
  font-weight: bold;
  letter-spacing: 2px;
  -webkit-text-stroke: 0.0001px rgb(79, 79, 255);
  color: #00000000;
  font-size: 18px;
  filter: sepia(20%);
  z-index: 1001;
}

.aheaddn {
  position: absolute;
  padding: 2px 4px;
  font-family: "MS PGothic";
  color: #000;
  text-decoration: underline;
  text-decoration-style: dotted;
  letter-spacing: -1px;
  font-size: 14px;
  filter: sepia(20%);
  z-index: 1001;
}

.abiscuit1 {
  border-top: 1.5px solid #fff9db;
  border-left: 1.5px solid #fff9db;
  border-bottom: 4px solid #fff9db;
  border-right: 1.5px solid #fff9db;
  box-shadow:
    inset 0 2px 2px rgba(255, 255, 255, 0.3),
    inset 0 -3px 4px rgba(0, 0, 0, 0.1),
    0 6px 10px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  outline: #d1d1d1 solid 1px;
  height: 152px;
  width: 150px;
  transform: rotate(-8deg);
  margin: 4px 0 0 14px;
  padding: 10px;
  background: url(../assets/backgrounds/choconya1.jpg);
  background-blend-mode: multiply;
  background-size: contain;
  position: absolute;
  z-index: 390;
}

.abiscuit2 {
  border-top: 1.5px solid #fff9db;
  border-left: 1.5px solid #fff9db;
  border-bottom: 4px solid #fff9db;
  border-right: 1.5px solid #fff9db;
  border-radius: 10px;
  outline: #d1d1d1 solid 1px;
  height: 152px;
  width: 150px;
  margin: 158px 0 0 8px;
  padding: 10px;
  background: url(../assets/backgrounds/choconya1.jpg);
  background-size: contain;
  position: absolute;
  z-index: 389;
}

#afilling {
  background: linear-gradient(to bottom, #fffef8 0%, #f4f1e9 55%, #fdfaf4 100%);
  box-shadow:
    inset 0 2px 2px rgba(255, 255, 255, 0.7),
    inset 0 -2px 3px rgba(0, 0, 0, 0.1);
  border-top: 1.5px solid #e2e2e2;
  border-left: 1.5px solid #e1e1e1;
  border-bottom: 4px solid #e1e1e1;
  border-right: 1.5px solid #e1e1e1;
  border-radius: 10px;
  outline: #d1d1d1 solid 1px;
  height: 100%;
}

.adoodleotd {
  border: 1.5px solid #000000;
  height: 199.5px;
  width: 355px;
  margin: -1px 0 0 375px;
  padding: 10px;
  position: absolute;
  z-index: 390;
}

.afortune {
  background-image: url(../assets/images/fortunepp.webp);
  background-size: contain;
  border: 1px solid #dadada;
  border-radius: 2px;
  box-shadow:
    inset 0px -6px 6px -5px #dadadaad,
    5px 5px 6px -5px #dadadaad,
    -5px 5px 6px -5px #dadadaad;
  height: 66px;
  width: 230px;
  margin: 206px 0 0 375px;
  padding: 10px;
  position: absolute;
  z-index: 390;
}

.anews {
  width: 2700px;
  height: 438px;
  padding: 28px 7px 10px;
  border: 1px solid #f0f0f0 !important;
  border-radius: 10px;
  margin: 1px 0 0 9px;
  background: url(../assets/backgrounds/dotbg1.png);
  box-shadow:
    inset 0px -6px 6px -5px #dadada,
    0px 0px 6px 0px #dadada;
  font-family: "PC98";
  z-index: 100;
}

.ahanger {
  position: absolute;
  top: 6px;
  left: 60.6%;
  transform: translateX(-50%);
  width: 90px;
  height: 22px;
  background: url(../assets/backgrounds/dotbg1.png);
  background-position: 0 -6px;
  border-radius: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ahole {
  width: 36px;
  height: 10px;
  background: #fff;
  border-radius: 6px;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25);
}

.acard {
  background: linear-gradient(
    to bottom,
    #ffffff 1%,
    #ce9f76 49%,
    #b08864 51%,
    #fff9f5 100%
  );
  border-radius: 16px;
  margin: 0 12px 12px;
  padding: 8px;
  border: ridge 3px rgba(192, 146, 93, 0.6);
}

.ablister {
  background: rgba(255, 255, 255, 0.6);
  border-radius: 22px;
  padding: 12px;
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.8),
    0 8px 18px rgba(172, 172, 172, 0.18);
}

.aglossy {
  position: relative;
  overflow: hidden;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.35),
    rgba(255, 255, 255, 0.15)
  );
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.8),
    inset 0 -10px 20px rgba(255, 255, 255, 0.25),
    0 12px 30px rgba(136, 136, 136, 0.25);
}

.awindow {
  background: url(../assets/images/adbgab.webp);
  background-size: cover;
  background-position: center;
  border-radius: 20px;
  height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.9),
    inset 0 -8px 16px rgba(255, 255, 255, 0.6);
}

.afooter {
  margin-top: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.anumber {
  background: rgba(0, 0, 255, 0.694);
  font-weight: bolder;
  color: #fff;
  padding: 6px 10px;
  border-radius: 2px 2px 2px 8px;
  font-size: 16px;
}

.atagged {
  margin-left: -205px;
  margin-top: 4.5px;
}

.atagged img {
  height: 32px;
  border-radius: 2px;
  border: #d2d2d2 solid 1px;
  box-shadow:
    inset 0px -5px 5px -4px #dadada,
    0px 0px 5px 0px gainsboro;
}

#ataped {
  position: absolute;
  margin-left: -49px;
  margin-top: -143px;
  pointer-events: none;
  z-index: 1200;
}

#ataped img {
  height: 26px;
  transform: rotate(-85deg);
  filter: contrast(120%) opacity(97%) grayscale(60%) hue-rotate(-100deg)
    saturate(170%);
}

#apricel {
  position: absolute;
  margin-left: 210px;
  margin-top: -265px;
  pointer-events: none;
  z-index: 900;
}

#apricel img {
  height: 140px;
  transform: rotate(13deg);
  filter: brightness(112%) contrast(105%) saturate(105%) hue-rotate(-120deg)
    opacity(0.92);
}

.ablock {
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  letter-spacing: 1px;
}

.atest {
  background: url(../assets/images/shortcake.webp);
  background-size: 700px;
  background-position: 40% 50%;
  width: 100%;
  height: 438px;
  border: 1px solid #e0e0e0 !important;
  filter: opacity(85%);
  box-shadow:
    inset 0px -6px 6px -5px #dadada,
    0px 0px 6px 0px #dadada;
  border-radius: 10px;
  margin: 0 0 0 9px;
}

#atabs {
  position: absolute;
  margin: -31px 0 0 6px;
  transform: scale(0.8);
  transform-origin: left top;
  display: flex;
  flex-direction: row;
  z-index: 998;
}

.apasspin {
  border: 1px solid #000;
  border-radius: 6px;
  background-color: #ecf7ff;
  padding: 6px;
  height: 100%;
  width: 288px;
  overflow-y: auto;
  margin: 0px 1px;
  z-index: 999;
}

#apcolum {
  background: transparent;
}

#apcolum:hover {
  z-index: 2000;
}

.aphoto {
  border-top: 1.5px solid #8d6e6888;
  border-left: 1.5px solid #8d6e6888;
  border-bottom: 4px solid #8d6e6888;
  border-right: 1.5px solid #8d6e6888;
  border-radius: 6px;
  height: 200px;
  width: 173.5px;
  margin-left: 8px;
  padding: 8px;
  background: linear-gradient(
    to bottom,
    #e2f3ff 1%,
    #a5d5ff 49%,
    #85b4ff 51%,
    #ebf0f4 100%
  );
}

.aphoto img {
  height: 100%;
  width: 100%;
  filter: brightness(105%)
    /* contrast(120%) opacity(97%) grayscale(60%) hue-rotate(100deg) saturate(170%) */;
  border-radius: 6px;
  border: #e6ecff ridge 3px;
}

#abadge {
  position: absolute;
  margin-left: 110px;
  margin-top: 730px;
  pointer-events: none;
  z-index: 900;
}

#abadge img {
  height: 160px;
  transform: rotate(2deg);
  filter: drop-shadow(0 0 1px white) drop-shadow(0 0 1px white)
    drop-shadow(0 0 1px white) drop-shadow(0 0 1px white)
    drop-shadow(0 0 1px white) drop-shadow(0 0 1px white)
    drop-shadow(0 0 1px white) drop-shadow(0 0 1px #0000004d);
}

#apenc {
  position: absolute;
  margin-left: 560px;
  margin-top: 520px;
  z-index: 1009;
}

#apenc img {
  height: 390px;
  transform: rotate(205deg);
  filter: drop-shadow(0 0 1px white) drop-shadow(0 0 1px white)
    drop-shadow(0 0 1px white) drop-shadow(0 0 1px white)
    drop-shadow(0 0 1px white) drop-shadow(0 0 1px white)
    drop-shadow(0 0 1px white) drop-shadow(0 0 1px #0000004d);
}

#akeych1 {
  position: absolute;
  margin: -20px 660px;
  z-index: 1001;
  pointer-events: none;
}

#akeych1 img {
  height: 290px;
  transform: rotate(-5deg);
  filter: brightness(1.05) contrast(0.9) drop-shadow(0 0 1px white)
    drop-shadow(0 0 1px white) drop-shadow(0 0 1px white)
    drop-shadow(0 0 1px white) drop-shadow(0 0 1px white)
    drop-shadow(0 0 1px white) drop-shadow(0 0 1px #0000004d);
}

#aidc {
  position: absolute;
  margin-left: -3px;
  margin-top: -447px;
  filter: brightness(1.05) saturate(125%) contrast(0.9)
    drop-shadow(0 0 1px white) drop-shadow(0 0 1px white)
    drop-shadow(0 0 1px white) drop-shadow(0 0 1px white)
    drop-shadow(0 0 1px white) drop-shadow(0 0 1px white)
    drop-shadow(0 0 1px #0000004d);
  z-index: 97;
}

#aidc img {
  height: 268px;
  border-radius: 14px;
}

#aidcim {
  position: absolute;
  margin-left: 39px;
  margin-top: -470px;
  z-index: 901;
}

#aidcim img {
  width: 113.5px;
  height: 118px;
}

#aidcim img:hover {
  filter: brightness(104%) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white)
    drop-shadow(0 0 1px white) drop-shadow(0 0 1px white)
    drop-shadow(0 0 1px white) drop-shadow(0 0 1px white)
    drop-shadow(0 0 1px white) drop-shadow(0 0 1px white)
    drop-shadow(0 0 1px white) drop-shadow(0 0 1px #0000004d)
    drop-shadow(0 0 1px #8080804d);
}

.aipodmain {
  background: url(../assets/images/ipod_vert.jpg);
  background-size: cover;
  background-position: center -2px;
  border-radius: 15px;
  height: 310px;
  width: 200px;
  margin: 0 9px 8px 0;
  border: 1px solid #e0e0e0;
  box-shadow:
    inset 0px -6px 6px -5px #dadada,
    0px 0px 6px 0px #dadada;
  overflow: hidden;
  text-align: right;
}

@font-face {
  src: url(https://dl.dropbox.com/scl/fi/44jmpsjadcy83ekitx5h2/Icons-South-St.ttf?rlkey=xlgdqf7d1egq08yvreyauv0p5&dl=0);
  font-family: icons;
}

.abphone {
  animation: bobbing 3s ease-in-out infinite;
  margin: -160px 303px;
  z-index: 1000;
}

#dmessage {
  transform: scale(1.6) rotate(-4deg);
  height: 320px;
  width: 160px;
  outline: #a4a4a4 solid 1px;
  border: 1px solid #e0e0e0 !important;
  box-shadow:
    0 0 0 2px rgb(248, 211, 239) inset,
    0 0 0 6px #000 inset,
    inset 0px -6px 6px -5px #dadada,
    0px 0px 6px 0px #dadada;
  border-radius: 25px;
  padding: 6px;
  position: absolute;
  font-family: "SFPRO";
  box-sizing: border-box;
}

#dmessage::after,
#dmessage::before {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  background: #000;
  border-radius: 50px;
  box-sizing: border-box;
}

#dmessage::before {
  text-shadow: none !important;
  content: "o";
  top: 10px;
  width: 33%;
  height: 16px;
  color: #00008b;
  line-height: 12px;
  text-align: right;
  padding-inline: 6px;
  font-size: 10px;
}

#dmessage::after {
  content: "";
  bottom: 9px;
  width: 35%;
  height: 3px;
}

.message-in:before,
.message-out:before {
  width: 20px;
  height: 20px;
  background: 0 0;
  bottom: 0;
  z-index: -1;
  position: absolute;
  content: "";
  display: block;
}

.topbarorwhatever {
  text-align: left !important;
  height: 20%;
  width: 100%;
  background: #ecf5fc;
  border-radius: 18px 18px 0 0;
  padding: 0 7px;
  border-bottom: 1px solid #d1d4db;
}

.topbarorwhatever p:not(#contactname) {
  margin: 6px 0 !important;
  font-size: 9px;
  display: inline-block;
  color: black !important;
}

.topbarorwhatever p:not(#bigname, #contactname, :first-child) {
  float: right;
  margin-top: 6px;
  font-family: icons !important;
  word-spacing: 2px;
  font-size: 9px;
}

.ppprofile {
  width: 100%;
  height: 30px;
  margin: 3px auto !important;
  text-align: center;
  color: #000 !important;
  text-decoration: none !important;
  display: block;
}

#ppictuture {
  content: url(../assets/images/pinkflurry.JPG);
  margin-bottom: -2px;
  margin-top: -2px;
}

#contactname:before {
  content: "the void ";
  font-size: 8px;
  font-weight: 400;
  margin-top: -100px;
  color: #000;
}

#contactname {
  margin: -2px;
  font-size: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 700;
  color: #4ba5f1;
}

.ppprofile img {
  width: 25px;
  height: 25px;
  object-fit: cover;
  border-radius: 100%;
}

#vottomvar {
  width: 100%;
}

#messagescrollable {
  width: 100%;
  height: 70%;
  overflow-y: scroll;
  overflow-x: hidden;
  transform: rotate(180deg);
  direction: rtl;
  background: #fff;
  padding: 24px 4px 0;
}

#messagescontainer {
  min-height: 0;
  display: flex;
  flex-direction: column-reverse;
}

#messagescrollable::-webkit-scrollbar {
  display: none;
}

.message-in,
.message-out {
  font-size: 9px;
  padding: 5px;
  margin-inline: 8px !important;
  word-break: break-word;
  border-radius: 5px;
  position: relative;
  transform: rotate(180deg);
  text-align: left;
  margin-block: 4px;
}

:is(.message-in, .message-out) img {
  width: 100%;
}

.message-out {
  background: url(../assets/backgrounds/grid-blue.png);
  background-size: 10px;
  margin-right: 45px !important;
  color: #3568d6;
  filter: drop-shadow(0 0 1px white) drop-shadow(0 0 1px white)
    drop-shadow(0 0 1px white) drop-shadow(0 0 1px white)
    drop-shadow(0 2px 2px #0000004d);
  border: 1px solid #2453d4;
}

.message-in:before {
  left: -19px;
  border-radius: 0 0 10px;
  border-right: 5px solid #e9e9eb;
  transform: rotate(5deg);
}

.message-in {
  background: #e9e9eb;
  margin-left: 45px !important;
  color: #000;
}

#vottomvar {
  background: #d1d4db;
  height: 10%;
  border-radius: 0 0 18px 18px;
}

.messageboxxy {
  width: 80%;
  height: 18px;
  background: #fff;
  border-radius: 50px;
  transform: translateY(-39px);
  border: 1px solid #cecece;
  float: right;
  margin-right: 5px;
  padding: 7px;
  cursor: text;
}

.messageboxxy:after {
  content: "";
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAIAAACRXR/mAAAJ0klEQVRYCc1ZW0hUXxff58xNRylJayaGCrKITJ3UpKmmbCxsQDJzqrcu0kWIIrErVJRBFyiKii4PEb1E0UOXJ6MLiSaEVpQ1qHRR0TQdc5zRmss5c86H/v7fan9jNcG/4NsPss4+66z1W7+19trbPUySJPV/h6IosiyrqhqJRBRFUVUVj9DEW7/f39nZ2dXV5fF4urq6ent7e3p6uru7P3/+DAGTAwMD9DkMwhXMqqpKQpTM8Bkc80rhcDjKBB5fv369Y8eO7Ozs2SMjIyNj1qxZaWlpVqs1IyMjMzPTarVmZmZmZGTMnj07Nze3oqKira1NVVVJkpSRAY8Us6qq5CsSicALCwQCkIAsCnUoFMLbYDCoqmp9ff3MmTNFUWSM6fV6NjK0Wi2E0X81Gg1jLCcn58OHD7CjqirZhC9woSgKgVNVdZgtAk5sybJMwCORCNIXDAaLiorgG8gYY6IoCoKg0WgEQcArgRuiKGpGRmlpaRSaSCRCRJAvgs4A5YdKBD88Mt6/fz9x4kTGmFarBSyQgZnRVPEz06dP7+vrg1cKHo+ESZZlejXMFqUcaf723xEMBoeGhvx+fyAQCIfD1dXVKSkpxBOo0uv14Gk0W8SrwWAwm80tLS1erzcUCgUCAa/XOzg4CD9DQ0NEJEH8J4mqqr5///7o0aPLly/Pz89fsGCB3W7Py8tbuHDhopHhcDhycnLi4+PhXhRFnU5HfPCYaJIxRvNxcXHZ2dkFBQV2u33JkiWLFi1yOBzz589fsmRJQUHBihUrzpw509ra+j2JKPnbt2+npaUJggAyUMUoEn6GCCDOdDod+eYBQSaDjDGEAWX8pUWDVzab7dGjR0DGIpFIQ0PDpEmTyBBvHRWNuHn3XFkPVzpeEVZ6yxhD/YmiiFB5jnmPsJCWluZ2u4dXoiRJpaWloigCO5keDQVWqB0QSprBt/yqjHoV9UliYmJ8fDxjLC4ujmLbuXOnJEmstbXVYrHQLAzBNFnh+SMCNBpNlNcoNSKDFiy6HcyWlZU9f/781q1bWVlZ0EQ3SU9P7+7uZrW1tSkpKfiSLwXeB58UWnpkiyLR6XSUdKDnA+PTZ7fbPR4PyujOnTuwD4XU1NSmpiZWU1OTlJTEp4wPjp/ngUInMTHRarWWlJTs3bv3+PHjlZWV5eXlLpdrxowZer1eHBmCIMTFxcExWVi1ahXtOfX19UlJSYhNEASLxdLY2MiePn06ZswYNCH6jBf4iEnNYrFs3Lixqqrqy5cvaDbUCRVF6erqunfv3tq1axMTE2GK0m0wGERRNJlMjx8/jkQiAwMDe/bsgQtUjslkevPmDUOTpM9Qtnzh8xC1Wq1er1+9enV1dTV23MHBQX4blUcGsuPz+erq6pxOJxYTtQMYnzRp0po1a5xOJ+qdvEyePLm5uXk4iWPGjCFKBEEgiKRKERuNxsrKSkBBa1YUpa+v79WrV9XV1TU1NW/fvvV6vXRYkiTJ4/Hs3bsXK47KgwRYhnfANZvNw7VVW1s7duxYQsDj4yfRQS5fvkyblSRJdXV127Zty8rKSk5OTkhIiI+PT0lJmTt37u7du589e0YtW5blQ4cOARnZJ+NRgsVicbvdP4WFYueb+IkTJ0KhEJjo6OjYvn07xUPRk9eJEyfu2bPH6/WitMPh8Pbt26k2SC0KE2MsNiz6RhTFwsLCnp4eENDc3OxwOKhxGwyGqEMENcmioqKOjg6shvb29jlz5gDZz+okNiw+oPHjxz9+/Bgns97e3qVLl6L1ATevGeVPFMV169b19/ejEG/duoW1yX9CwUOIwRaFJQhCcXExVfG+ffuQMpgmtSjrWq0WLDLGTp06BZr9fv/ixYt/gSk2W+RGq9XevHkT7aC+vn7ChAlRKYMm9Xd0UfpcFMXU1NR3796hyM6ePUuapMMLMdiizjl58uS2tjYccCsrK3FEJiikRuXM+wCvBoPh0qVL3759U1X1xYsXtFB4TZJjwKKY8vPzYdHn8zkcDkoByoiaJOZp5dLaBNySkhJsBh6Px2q1khFCQ0IMWHRSWL9+PZZSW1tbamoqzZPpqDInBySIomi1WrE3BwIBp9NJr0YLMWDRhr9161bUe0tLi9lsJjR04PxhqUX5mzZtmsfjkSRJlmWXyxX1ln+MAYtqpaysjNqVxWJBcpE7yhSPlfdBiNPT0z99+iTLsiRJxcXFUTr8YwxYUNXr9StXrkRZdHd3p6enY55A8yuAtx4l5+Xl+Xw+VVW/fv26cOHCX4TxW7B0Ol1OTo7X65VlORQKuVwuAsR3rygQUY86nW7Tpk2gHAX6r2ChvJKTk9+8eYMd+urVq9grcTaKalFRaPAoiqLBYLh3756iKJFI5OHDh0aj8YeamIzNFt+mcSHw6dOn3NxcIIMVxE0U/tBffn6+3+9HYPv27fuhDk3GgAVPKHCbzfblyxdk4caNG9iJqZx5lGSdBJPJVFVVBUzt7e3Tpk2jDkw6vBADFvUnxpjRaLx48SLuCCRJ2r9/P1YioFPfooqh5CYkJJw9e5Zujo4cOfJrTLH3RPggl1OnTm1sbETQwWDw2LFj48aNQ5T0j6F2ZDDGkP3x48dfuHAhEAigG9fW1vL/+fEM8XIMtih0IBMEwel0dnZ20qXe3bt3ly1blpCQQIuAUBqNxuLi4pqaGuRdUZSPHz/a7XY+AzwUXo4Bi1eFOVEUV61ahQsM9H2fz3f//v0DBw4UFhbm5eXZbDaXy3X48OEnT55gGw2Hw5FI5N27d7ThIPsUc5SX30oi/TcLK2hUBQUF9fX1oAG3c7iH6u/vx31YOBxG1tCEHzx4YLPZyBS/ZY3GFBsWfcMfRNHJzGbzsWPHmpqaAI5u50KhEO4yUYJut3vXrl1msxmm9Hq9VqtFhL9oKL+VRJ5t4l+n02k0milTppSXl9+9e7elpaW3t3dwZAwMDDQ2Nt64cWPz5s3YQIGJjkkIjDdL8UOIAYv6FrTpUoUsAqVOpzOZTJmZmfPmzbPZbDNmzDCZTFiJSDqtZXJPGzzN8MI/sBoaGpKTk6klUsvhVf+GTOAooSASh2HW2dmJ/YReE8S/gYa3SVfDdHGi1WoXL17s9XqH704PHjxIKQPno5nnzf1BmRwReVeuXFEUhcmy7PF4CgsL+TX8Bx3/zBS/wFGmBoNhw4YN/f39338uaG9v37Jli8lkQm3hbo1u2/6GALhYQAaDYerUqRUVFcA0zBZ6D36Tefny5fXr10+fPn3y5Mkzf3lcunTp5MmT586dO3/+/LVr19xuN/qwoijDd6fY49AGg8Eg/9MBIf4bAv2bjgM+7+I7W/RLEL9v8Kp/XIYj/gcVzADu9yT+ccf/xuD/Kaz/AKRCVxNDcm4YAAAAAElFTkSuQmCC)
    center/contain no-repeat;
  display: block;
  width: 15px;
  height: 13px;
  position: absolute;
  top: 1px;
  left: -18px;
  opacity: 0.4;
  cursor: pointer;
}

.messageboxxy span {
  display: block;
  font-size: 10px;
  line-height: 0;
  color: #cecece;
  user-select: none;
}

#vottomvar:before {
  content: "";
  display: block;
  width: calc(100% - 2px);
  background: #fff;
  height: 20px;
  transform: translateY(-19px);
}

.ppprofile:hover {
  background: transparent !important;
  border: 0px !important;
  outline: 0px !important;
  text-decoration: none !important;
}

.abpass {
  background: #fff;
  border: 1px solid #c0c0c0 !important;
  box-shadow:
    inset 0px -6px 6px -5px #dadada,
    0px 0px 6px 0px #dadada;
  border-radius: 3px;
  height: 194px;
  width: 194px;
  position: absolute;
  margin: 795px 690px 0px;
  padding: 9px;
  z-index: 2002;
}

.abpins {
  border: 1px solid #c0c0c0;
  height: 100%;
  overflow: hidden;
}

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

.aext-button {
  cursor: url(../assets/items/select.png), pointer;
  background: transparent;
  color: #2453d4;
  border: none;
  text-decoration: underline;
  font-family: "MS PGothic";
  font-size: 14px;
  margin: 10px 0;
}

/* diary */
.lines {
  position: fixed;
  width: 677px;
  height: 366px;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 300;
  opacity: 0.05;
}

.lines:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    transparent 50%,
    rgba(0, 0, 0, 0.5) 51%
  );
  background-size: 100% 4px;
  will-change: background, background-size;
  animation: scanlines 0.2s linear infinite;
}

@keyframes scanlines {
  from {
    background: linear-gradient(
      to bottom,
      transparent 10%,
      rgba(0, 0, 0, 0.5) 51%
    );
    background-size: 100% 4px;
  }
  to {
    background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.5) 50%,
      transparent 51%
    );
    background-size: 100% 4px;
  }
}

.pc {
  background: url(../assets/images/purinweb.webp);
  background-size: 690px;
  background-position: 50% 70%;
  left: 0;
  top: 0;
  padding: 11px;
  height: 365px;
  width: 676px;
}

.screen {
  background: transparent;
  font-family: "pc98";
  color: #fff;
  text-shadow:
    1px 0 #000,
    -1px 0 #000,
    0 1px #000,
    0 -1px #000,
    0 0;
}

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

.screen img:hover {
  filter: brightness(110%) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white)
    drop-shadow(0 0 1px white) drop-shadow(0 0 1px white)
    drop-shadow(0 0 1px white) drop-shadow(0 0 1px white)
    drop-shadow(1px 1px 0 #0000004d);
  cursor: url(../assets/items/select.png), pointer;
}

.hidden {
  display: none;
}

.ywindow {
  background: white;
  width: 315px;
  height: 188px;
  border: 1px solid #ffc9c6;
  border-radius: 5px;
  margin-top: -250px;
  margin-left: 50px;
  position: absolute;
  z-index: 2000;
  cursor: url(../assets/items/cursor.png), move;
}

.divider {
  width: 313.5px;
  margin-bottom: -15px;
  padding: 23px 4px 3px 4px;
  border-bottom: 1px solid #ffc9c6;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  font-family: "Arial";
  font-size: 15px;
  background: #b3e6fb;
  color: #ffc9c6;
  text-shadow: 0 0 3px #3e3e3e;
}

.login {
  width: fit-content;
  background: #ffffff;
  border: 1px solid #ad4944;
  border-radius: 20px;
  padding: 2px 4px 0;
  box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.25);
}

.screen2 {
  background: white;
  margin: 16px 5px 3px;
  height: 157.5px;
  font-family: "pc98";
  font-size: 14px;
  overflow: auto;
}

.screen2 img:hover {
  filter: brightness(104%) drop-shadow(0px 0px 1px white)
    drop-shadow(0px 0px 1px white) drop-shadow(0px 0px 1px white)
    drop-shadow(0px 0px 1px white) drop-shadow(0px 0px 1px white)
    drop-shadow(0px 0px 1px white) drop-shadow(1px 1px 0px #0000004d);
  cursor: url(../assets/items/select.png), pointer;
}

.folderflex {
  display: flex;
  flex-direction: column;
  margin-top: 15px;
}

.itemflex {
  display: flex;
  flex-direction: row;
}

.folder_item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-right: 12px;
}

.divider img:hover {
  filter: brightness(103%);
  cursor: url(../assets/items/select.png), pointer;
}

.divider img:active {
  filter: brightness(97%) saturate(125%);
  cursor: url(../assets/items/select.png), pointer;
}

.entry {
  font-family: "pc98";
  font-size: 14px;
  border: 2px solid #ffc9c6;
  border-radius: 6px;
  top: 10px;
  margin-left: 170px;
  position: absolute;
  cursor: url(../assets/items/cursor.png), move;
  z-index: 2001;
}

.note_header {
  width: 414px;
  padding: 4px;
  border-bottom: 2px solid #ffc9c6;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  font-family: "segoe UI";
  font-size: 15px;
  background: #fffcec;
  color: #000;
}

.note {
  background: url(../assets/backgrounds/notebg.png);
  background-size: 240px;
  background-attachment: fixed;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  line-height: 19px;
  width: 414px;
  height: 220px;
  padding: 20px 20px 10px;
  overflow: auto;
  font-size: 18px;
}

.note_header img:hover {
  filter: brightness(103%);
  cursor: url(../assets/items/cursor.png), pointer;
}

.note_header img:active {
  filter: brightness(97%) saturate(125%);
  cursor: url(../assets/items/select.png), pointer;
}

.startmenuz {
  color: inherit;
}

.startbar {
  width: 676px;
  padding: 4px;
  background: linear-gradient(180deg, #fff 0%, #ffcef8 100%);
  border-top: 1px solid #000;
  box-shadow:
    0px 0px 15px 0px #fffbf0 inset,
    0 0 5px white;
}

.startbar label {
  margin-top: -20px;
}

#startmcon {
  position: fixed;
  margin-top: -319px;
  left: 0;
  font-family: "PC98";
  width: 244px;
  height: 270px;
  z-index: 1000;
  display: none;
}

#start_toggle:checked ~ #startmcon {
  display: block;
}

.startpanel {
  width: 100%;
  height: 100%;
  background-color: #fff;
  border: 3.5px solid #ffcef8;
  border-bottom: none;
  outline: 0.5px solid #000;
  border-radius: 12px 12px 0 0;
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
}

.start-header {
  background: linear-gradient(180deg, #fff 0%, #ffcef8 80%, #fff 100%);
  padding: 5px;
  display: flex;
  align-items: center;
  border-radius: 8px 8px 0 0;
}

.user-avatar {
  width: 48px;
  height: 48px;
  border: 2px ridge rgb(253, 234, 238);
  border-radius: 4px;
  margin-right: 10px;
}

.username {
  color: #00f;
  font-weight: bold;
}

.start-content {
  display: flex;
  flex: 1;
  overflow-y: auto;
  padding: 4px;
}

.app-list {
  flex: 1;
  padding: 3px;
  margin-left: 4px;
}

.app-list.pink-bg {
  background: linear-gradient(180deg, #fff 0%, rgba(255, 215, 229, 1) 100%);
  border: 1px solid rgba(255, 133, 174, 0.6);
}

.diapp {
  padding: 2px;
  cursor: pointer;
  font-size: 14px;
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  position: relative;
  filter: sepia(0.8) hue-rotate(160deg);
  transition: filter 0.4s ease;
}

.diapp a {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
  width: 100%;
}

.app-icon {
  width: 24px;
  height: 24px;
  margin-right: 10px;
}

.diapp:hover {
  filter: none;
}

.diapp:hover {
  border: 1px solid #ff89c8;
  background: linear-gradient(
    to bottom,
    rgba(253, 247, 249, 0.589) 0%,
    #f4ffc2 100%
  );
  border-radius: 2px;
}

.window-content {
  overflow: hidden;
  padding: 0 0 0 18px;
  background: url(../assets/backgrounds/notebg.png);
  background-size: 240px;
  background-attachment: fixed;
  border-radius: 0 0 5px 5px;
}

.window-content textarea,
.window-content iframe {
  width: 100%;
  height: 100%;
  background: transparent;
  border: none;
  margin: 0;
  padding: 17px 0;
  font-size: 15px;
  font-family: "PC98";
  color: #000;
  resize: none;
}

.window-content textarea {
  overflow: auto;
}

.window-content textarea:focus {
  outline: none;
}

.dvideo {
  background: url(../assets/images/videopl.jpg);
  background-size: 213px 203px;
  border: 1px solid #6c6c6c;
  border-radius: 10px;
  height: 203px;
  width: 213px;
  margin: -80px 0 0 400px;
  overflow: hidden;
  text-align: right;
  display: none;
  position: absolute;
}

#vid_toggle:checked ~ .dvideo {
  display: block;
}

.dvidcov {
  background: #000;
  position: absolute;
  margin-top: 24px;
  margin-left: 5px;
  height: 131px;
  width: 204px;
}

.dvidimg {
  display: flex;
  flex-direction: row;
  margin-top: 16px;
  margin-left: 5px;
}

.dipodmain {
  background: url(../assets/images/mediapl.jpg);
  background-size: 174px 190px;
  border: 1px solid #6c6c6c;
  border-radius: 10px;
  height: 190px;
  width: 175px;
  margin: -110px 0 0 300px;
  overflow: hidden;
  z-index: 9999;
  text-align: right;
  position: absolute;
  display: none;
}

#mus_toggle:checked ~ .dipodmain {
  display: block;
}

.dipodalbum {
  display: flex;
  flex-direction: row;
  margin-top: -5.5px;
  margin-left: 6px;
}

.dipodalbum img {
  height: 132px;
  width: 162px;
  border-radius: 6px 6px 0 0;
  filter: brightness(116%);
}

.dseeking {
  width: 200px;
  margin-top: 128px;
  margin-left: 12px;
  position: absolute;
  background-color: transparent;
  background: none;
}

.dseeking input[type="range"] {
  background-color: transparent !important;
}

.dseeking input[type="range"]::-webkit-slider-runnable-track {
  width: 100%;
  height: 2px;
  cursor: help;
  background: transparent;
}

.dseeking input[type="range"]::-webkit-slider-thumb {
  height: 7px;
  width: 12px;
  background: url("../assets/items/trackThumb.gif") no-repeat center;
  background-size: contain;
  border-radius: 5px;
  cursor: help;
  -webkit-appearance: none;
  margin-top: -4.5px;
}

.dpausebtn {
  position: absolute;
  top: 148px;
  left: 71px;
}

.dpausebtn:hover {
  filter: brightness(110%);
}

.diaryexit {
  cursor: url(../assets/items/select.png), pointer !important;
}

.button {
  cursor: var(--cursor_pointer);
  color: #fff;
}

button:hover,
button:active {
  filter: brightness(110%);
}

#start_button {
  background: linear-gradient(
    to bottom,
    #e2f3ff 1%,
    #a5d5ff 49%,
    #85b4ff 51%,
    #ebf0f4 100%
  );
  text-shadow: 1px 1px 5px #e02464;
  color: #fff;
  margin-left: -4px;
  margin-top: 0;
  border: 1px solid;
  padding: 0;
  border-left: 0;
  border-radius: 0 10px 10px 0;
  font-style: italic;
  display: inline-block;
}

#start_button img {
  padding: 1px 6px 0.5px 6px;
  width: 45px;
}

#start_button:hover {
  filter: brightness(103%);
  cursor: url(../assets/items/select.png), pointer;
}

#clock {
  float: right;
  font-family: "PC98";
  color: #2453d4;
  text-shadow:
    -1px 1px #fff,
    1px -1px #fff,
    -1px -1px #fff,
    1px 1px #fff;
  font-size: 29px;
  font-weight: 900;
  text-align: center;
  margin: 1px 4px 0 0;
}

/* logs */
.ltable-section {
  background: transparent;
}

.ltable-section .inner {
  padding: 15px 15px 20px 17px;
  height: 508px;
  width: 713px;
  margin: -8px 0 0 0;
}

.lipodmain {
  background: url(../assets/images/ipod_vert.jpg);
  background-size: cover;
  background-position: center -2px;
  border-radius: 15px;
  height: 310px;
  width: 200px;
  margin-top: -10px;
  border: 1px solid #000;
  overflow: hidden;
  text-align: right;
}

.lipodbar {
  position: absolute;
  margin: 15px 0 0 16.5px;
}

.lipodalbum {
  display: flex;
  flex-direction: row;
  margin-top: 7px;
  margin-left: 22px;
}

.lipodalbum img {
  height: 50px;
  width: 50px;
  border: 2px ridge lightgray;
}
.lipodalbum p {
  margin: -1px 0 0 5px;
  line-height: 18px;
  text-decoration: underline;
}

.lseeking {
  width: 163px;
  margin-top: 117px;
  margin-left: 18px;
  position: absolute;
}

.lpausebtn {
  position: absolute;
  margin-left: -108px;
  margin-top: 268px;
}

.lquiz {
  background: url("../assets/gifs/mikulog.gif");
  background-size: 330px;
  background-position: 44% 49%;
  width: 199px;
  height: 192px;
  padding: 10px;
  border: 1px solid black;
  border-radius: 10px;
  margin: 8px 0;
}

.lmiddle {
  grid-column: span 2;
  display: flex;
  width: 710 !important;
  height: 299px;
  margin-bottom: 100px;
  margin-top: -7px;
}

.cd-insert {
  width: 713px;
  height: 395px !important;
  border: 1px solid #e4e4e4;
  border-radius: 10px 10px 90px 10px;
  padding: 8px;
  background: linear-gradient(145deg, #ffffff, #e6e6e6);
  box-shadow:
    17px 17px 41px #d4d4d4,
    -17px -17px 41px #ffffff;
  display: flex;
  position: relative;
  overflow: hidden;
}

.cd-main {
  width: 360px;
  height: 360px;
  margin: 11px;
  border: 1px solid #e4e4e4;
  border-radius: 50%;
  background: linear-gradient(145deg, #e0e0e0, #f5f5f5);
  box-shadow:
    inset 8px 8px 16px #c4c4c4,
    inset -8px -8px 16px #ffffff;
}

.cd-grip {
  position: absolute;
  width: 55px;
  height: 55px;
  border-radius: 50%;
  background: linear-gradient(145deg, #d0d0d0, #e8e8e8);
  box-shadow:
    inset 8px 8px 16px #c4c4c4,
    inset -8px -8px 16px #ffffff;
  bottom: calc(50% - 80px - 10px);
  right: calc(50% - 80px + 36px);
}

.cd-hub {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #e8e8e8;
  border: 1px solid #e8e8e8;
  box-shadow:
    6px 6px 12px #c5c5c5,
    -6px -6px 12px #ffffff,
    inset 0 0 8px rgba(0, 0, 0, 0.1);
  position: absolute;
  margin: 150px 148px;
  z-index: 900;
}

.cd-hub::before {
  content: "";
  position: absolute;
  width: 80%;
  height: 80%;
  margin: 4px;
  border-radius: 50%;
  border: 2px solid hwb(0 89% 11%);
  box-shadow: 0 0 2px rgba(255, 255, 255, 0.8);
}

.cdone {
  margin: 2px 1px;
  z-index: 900;
  height: 355px !important;
  transition: transform 0.3s ease;
}

.cd-main:hover {
  animation: spinOnce 2s ease-in-out; /* Single spin on hover */
}

/* All CDs (images) - hidden by default */
.cd-img {
  position: absolute;
  opacity: 0;
  transition: opacity 0.5s ease;
}

/* Active CD */
.cd-img.active {
  opacity: 1;
}

/* Buttons */
.cd-buttons {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  max-width: 500px;
  margin: 0 auto;
}

.cd-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #333;
  color: white;
  border: none;
  cursor: pointer;
}

@keyframes spinOnce {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(40deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

/* shrines */
.ipad-in {
  background: url(../assets/images/melroom.jpg);
  background-size: 750px;
  background-position: 60% 75%;
  left: 0;
  top: 0;
  padding: 0;
  height: 410px;
  width: 676px;
}

.ipad-main {
  display: flex;
  flex-direction: row;
  padding: 0 80px;
  margin: -5px 0 4px;
  font-family: "SFPRO";
  transform: scale(0.97);
}

#ipad-header {
  border-radius: 8px;
  margin: -3px 0 2px;
}

#ipad-footer {
  background: transparent;
  margin-top: -4px;
}

#ipad-footer img {
  display: block;
  margin: 0 auto;
  width: 180px;
  border-radius: 20px;
}

.iflex-1 {
  display: flex;
  flex-direction: column;
  width: 170px;
}

.iflex-2 {
  display: flex;
  flex-direction: column;
  width: 170px;
  margin: 0 2px 0;
}

.iflex-3 {
  display: flex;
  flex-direction: column;
  width: 170px;
}

.appset {
  display: flex;
  flex-direction: row;
  padding: 13px;
}

.app:hover {
  background: #d2d2d2;
  opacity: 0.9;
  transition: 0.1s ease;
  transform: scale(1.05);
}

.app {
  flex: 1;
  border: 1px solid #e0e0e0 !important;
  box-shadow:
    inset 0px -6px 6px -5px #dadada,
    0px 0px 6px 0px #dadada;
  border-radius: 18px;
  height: 68px;
  cursor: url(../assets/items/select.png), pointer;
}

.shname {
  margin-top: -8px;
  font-size: 12px;
}

#shnamedown {
  margin: 328px 36px;
  position: absolute;
  font-size: 12px;
}

#ireminders {
  background-image: url(../assets/images/shrinote.webp);
  background-size: 163px;
  background-position: 0% 5%;
  border: 1px solid #e0e0e0 !important;
  box-shadow:
    inset 0px -6px 6px -5px #dadada,
    0px 0px 6px 0px #dadada;
  border-radius: 18px;
  margin: 4px;
  height: 151px;
}

#ireminders:hover {
  opacity: 0.9;
  transition: 0.1s ease;
  transform: scale(1.05);
}

#ipad-img {
  background-image: url(../assets/gifs/snookums.gif);
  background-size: 290px;
  background-position: 40% 0%;
  border: 1px solid #e0e0e0 !important;
  box-shadow:
    inset 0px -6px 6px -5px #dadada,
    0px 0px 6px 0px #dadada;
  border-radius: 18px;
  margin: 5px 4px;
  height: 141px;
}

#imusicbox {
  background: url(../assets/images/stickers1.webp);
  background-size: 830px;
  background-position: -50px -160px;
  border: 1px solid #e0e0e0 !important;
  box-shadow:
    inset 0px -6px 6px -5px #dadada,
    0px 0px 6px 0px #dadada;
  border-radius: 18px;
  margin: 4px;
  height: 238px;
}

#iclock {
  border: 4px rgb(255, 221, 173) ridge;
  border-radius: 18px;
  margin: 4px;
  padding: 16px 0 0;
  height: 79px;
  font-family: "Redaction";
  -webkit-text-stroke: 0.0001px #00f;
  color: #fff;
  text-shadow:
    -1px 1px #fff,
    1px -1px #fff,
    -1px -1px #fff,
    1px 1px #fff;
  font-size: 39px;
  font-weight: 900;
  text-align: center;
}

.img-hover {
  z-index: 400;
}

.img-hover img:hover {
  filter: drop-shadow(0px 0px 1px white) drop-shadow(0px 0px 1px white)
    drop-shadow(0px 0px 1px white) drop-shadow(0px 0px 1px white)
    drop-shadow(0px 0px 1px white) drop-shadow(0px 0px 1px white)
    drop-shadow(0px 0px 1px white) drop-shadow(0 0 1px #0000004d);
}

.shitopbar {
  width: 927px;
  padding: 6px 4px 6px;
  border-bottom: 2px solid #ffc9c6;
  font-family: sans-serif;
  font-size: 14px;
  background: #fffcec;
  color: #464646;
}

.shilogin {
  width: 740px;
  display: flex;
  background: #ffffff;
  border: 1px solid #ad4944;
  border-radius: 20px;
  padding: 5px 3px 0;
  box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.25);
}

#shiloadinggif {
  margin-right: 10px;
  margin-top: -2px;
}

#shiloadinggif img {
  width: 17px;
}

#shibarbutton1 {
  float: right;
  margin-top: -22px;
}

#shibarbutton2 {
  float: right;
  margin-top: -22px;
  margin-right: 23px;
}

.shafolder {
  background: rgba(134, 134, 134, 0.797);
  backdrop-filter: blur(10px);
  width: 252px;
  height: 280px;
  border-radius: 18px;
  margin: -290px 213px;
  position: absolute;
  z-index: 2000;
  transform: scale(0.92);
}

.shfheader {
  margin: -38px 0 0;
  font-size: 21px;
  font-family: "SFPRO";
  color: #fff;
}

.shfooter {
  margin: 10px 0 0;
  font-size: 11px;
  font-family: "SFPRO";
  color: #fff;
}

.shfooter a {
  color: inherit;
}

.shscreen2 {
  margin: 15px 5px 3px;
  padding: 6px 14.5px 14px;
  font-family: "SFPRO";
  font-size: 14px;
  overflow: auto;
  overflow-x: hidden;
}

.shscreen2 img {
  width: 54.5px;
  margin: 15px 5px 3px;
  border-radius: 12px;
}

.shscreen2 img:hover {
  background: #d2d2d2;
  transition: 0.1s ease;
  transform: scale(1.08);
  cursor: url(../assets/items/select.png), pointer;
}

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

.shfnames {
  margin: 1px 13px 2px;
  font-size: 12px;
  color: #fff;
}

.ipad-main.toggle {
  position: fixed;
  z-index: 1000;
}

body.shrines::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(5px);
  z-index: 10;
  display: none;
  animation: none;
}

body.shrines.blurred::before {
  display: block;
}

/* scrapbook */
.scsection {
  filter: grayscale(20%);
  margin: 12px 0 0 169px;
  display: flex;
  padding: 0;
  background-image: url(../assets/backgrounds/grid-blue.png);
  border: solid 4px white;
  border-image: url(../assets/backgrounds/grid-blue.png);
  outline: ridge 4px #dcebfb;
  border-radius: 10px;
  width: 770px;
  height: 548px;
  z-index: 900;
}

#schandle {
  filter: grayscale(20%);
  position: absolute;
  padding: 10px;
  background-image: url(../assets/backgrounds/grid-blue.png);
  border: ridge 4px #dcebfb;
  border-right: none;
  margin: -350px 0 12px 2.5px;
  border-radius: 100px 0 0 100px;
  width: 174px;
  height: 115px;
}

#scinhandle {
  filter: grayscale(20%);
  background-color: #fffef5;
  border: dashed 1px #c1c1c1;
  border-right: none;
  margin-left: 2.5px;
  border-radius: 100px 0 0 100px;
  width: 105%;
  height: 100%;
}

#spirals {
  position: absolute;
  margin-left: 358px;
  margin-top: 52px;
  z-index: 9999;
  pointer-events: none;
  filter: drop-shadow(0.5px 0.5px 0 white) drop-shadow(0 0.5px 0 white)
    drop-shadow(0 0.5px 0.5px white) drop-shadow(0.5px 0.5px 1px black)
    drop-shadow(-0.5px 0.5px 0 black) drop-shadow(0 0.5px 0 black);
}

#spirals img {
  width: 36px;
  margin-bottom: -40px;
}

#scpenc {
  position: absolute;
  margin-left: 56px;
  margin-top: -500px;
  z-index: 9999;
}

#scpenc img {
  height: 455px;
  transform: rotate(-6deg);
  filter: drop-shadow(0 0 1px white) drop-shadow(0 0 1px white)
    drop-shadow(0 0 1px white) drop-shadow(0 0 1px white)
    drop-shadow(0 0 1px white) drop-shadow(0 0 1px white)
    drop-shadow(0 0 1px white) drop-shadow(0 0 1px #0000004d);
}

#scwrapper {
  position: relative;
  z-index: 0;
}

#sctabs {
  position: absolute;
  margin: -27px 0 0 132px;
  transform: rotate(-90deg);
  transform-origin: left top;
  display: flex;
  flex-direction: row;
}

.bkmrk {
  padding: 5.5px;
  border-radius: 10px 10px 0px 0px;
  background-color: #fff;
  border: 2px ridge #ebebeb;
  border-bottom: 0px;
  padding-bottom: 0px;
  text-align: center;
  width: 80px;
}

.bkmrkin {
  border: 1.25px dashed #cc9a81;
  border-bottom: 0px;
  border-radius: 8px 8px 0px 0px;
  padding: 8px 5px;
  text-shadow:
    -1px 0 #fff,
    0 1px #fff,
    1px 0 #fff,
    0 -1px #fff,
    0 0;
}

.abkmrkin {
  padding: 6px 5px !important;
}

.bkmrkin a {
  text-decoration: none;
  font-weight: bold;
  color: #ffffff;
  text-transform: uppercase;
  text-shadow:
    0 1px #977357,
    1px 0px #977357,
    0 -1px #977357,
    -1px 0px #977357;
  font-size: 10px;
}

.bkmrkin a:hover {
  text-decoration: none;
  text-shadow:
    -1px -1px 0 rgb(158, 158, 255),
    1px -1px 0 rgb(158, 158, 255),
    -1px 1px 0 rgb(158, 158, 255),
    1px 1px 0 rgb(158, 158, 255);
}

#sckitch {
  position: absolute;
  top: 0;
  left: -155px;
  z-index: -1;
  pointer-events: none;
}

#sckitch img {
  height: 300px;
  transform: rotate(2deg);
  filter: drop-shadow(0 0 1px white) drop-shadow(0 0 1px white)
    drop-shadow(0 0 1px white) drop-shadow(0 0 1px white)
    drop-shadow(0 0 1px white) drop-shadow(0 0 1px white)
    drop-shadow(0 0 1px white) drop-shadow(0 0 1px #0000004d);
}

.tape,
.tape2,
.smtape {
  border-top: 1px dashed #ffc8c8;
  border-bottom: 1px dashed #ffc8c8;
  background: rgba(255, 232, 247, 0.58);
  padding: 3px;
  width: 130px;
  height: 30px;
  background-repeat: no-repeat;
  z-index: 9999;
}

.tape {
  position: absolute;
  margin: -520px 265px;
  transform: rotate(-1.6deg);
}

.tape2 {
  position: absolute;
  margin: -222px 80px;
  transform: rotate(1deg);
  z-index: 1001;
}

.scpolaroid {
  background: #fff;
  border: 1px solid #c0c0c0;
  border-radius: 3px;
  box-shadow:
    inset 0px -6px 6px -5px #dadada,
    0px 0px 6px 0px #dadada;
  height: 234px;
  width: 220px;
  position: absolute;
  margin: -210px 40px;
  padding: 9px;
  z-index: 1000;
}

.scsquig {
  position: absolute;
  margin: -360px 300px;
  z-index: 1001;
}

.scsquig img {
  height: 66px;
  transform: rotate(140deg);
}

.scsti1 {
  position: absolute;
  margin: -526.5px 464px;
  z-index: 1001;
  filter: drop-shadow(0 0 1px white) drop-shadow(0 0 1px white)
    drop-shadow(0 0 1px white) drop-shadow(0 0 1px white)
    drop-shadow(0 0 1px white) drop-shadow(0 0 1px #0000004d);
  transform: rotate(3.6deg);
}

.scsti1 img {
  height: 36px;
}

.scsti2 {
  position: absolute;
  margin: -484px 447px;
  z-index: 1001;
  padding: 2px;
  height: 75px;
  background: #fff;
  border: #000 1px solid;
  border-radius: 5px;
}

.scsti2 img {
  height: 69px;
}

.scsti3 {
  position: absolute;
  margin: -405px 447px;
  z-index: 1001;
  padding: 2px;
  height: 75px;
  background: #fff;
  border: #000 1px solid;
  border-radius: 5px;
}

.scsti3 img {
  height: 69px;
}

.notes:hover {
  z-index: 1005;
}

.polins {
  background: url(../assets/images/CMGING.webp);
  background-size: 220px 280px;
  border: 1px solid #c0c0c0;
  height: 100%;
}

#sudoku {
  margin: -538px 228px;
  width: 212px;
  height: 246px;
  overflow: hidden;
  position: relative;
  z-index: 999;
}

#sudoku iframe {
  width: 400px;
  height: 390px;
  transform: translateX(-68px);
  pointer-events: auto;
}

.crop-container {
  height: 258px;
  margin: 12px 0 0 -22px;
  width: fit-content;
  overflow: hidden;
}

.crop-container:hover {
  overflow: auto;
}

.crop-container iframe {
  margin-top: -20px;
}

.scmusic {
  border-radius: 15px;
  height: 150px;
  width: 300px;
  top: 171px;
  left: 236px;
  z-index: 990;
  position: absolute;
  padding-top: 0;
  overflow: hidden;
  text-align: right;
}

.scseeking {
  width: 212px;
  padding: 7px 4px;
  margin-top: 100px;
  position: absolute;
  z-index: 990;
  border: 1px solid #000;
}

.scpause {
  margin: -201px -34px;
  border: 1px solid #000;
  z-index: 1000;
}

#scpausewrap {
  background: #fff;
  border: 1px solid #000;
  border-radius: 3px;
  position: absolute;
  padding: 9px;
  width: 74px;
  height: 74px;
  margin: -325.5px 447px;
}

.scpausebtn {
  border: 1px solid #787878;
  border-radius: 3px;
  filter: grayscale(27%);
  position: absolute;
  margin-left: -108px;
  margin-top: 269px;
}

#sidebox1 {
  background-color: #fffef5;
  outline: ridge #c1c1c1;
  border-radius: 6px;
  font-size: 14px;
  margin: 5px 0 0 5px;
  height: 531px;
  width: 365px;
  overflow: hidden;
  padding: 0;
}

#sidebox2 {
  background-color: #fffef5;
  outline: ridge #c1c1c1;
  border-radius: 6px;
  font-size: 14px;
  margin: 5px 0 0 12.5px;
  height: 531px;
  width: 375px;
  overflow: hidden;
  padding: 0;
}

:root {
  --grid: rgba(0, 0, 0, 0.1);
  --lightborder: rgba(0, 0, 0, 0.2);
  --heavyborder: rgba(0, 0, 0, 0.5);
}

.header {
  height: 6%;
  display: flex;
  align-items: center;
}

.day {
  height: 11.69%;
  display: flex;
  align-items: center;
}

.date {
  height: 100%;
  margin-left: 4%;
  width: 10%;
  border-top: 1px solid var(--heavyborder);
  border-left: 1px dotted var(--heavyborder);
  border-right: 1px dotted var(--heavyborder);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
}

.date > p {
  font-size: 0.7em;
  line-height: 0.1em;
  margin: 2px;
}

.date.today-highlight {
  background-color: rgba(0, 0, 0, 0.1);
  font-weight: bold;
}

.menu1 {
  height: 100%;
  width: 30%;
  border-top: 1px solid var(--heavyborder);
  display: flex;
  align-items: center;
  padding-left: 4%;
  white-space: nowrap;
}

.menu1 a {
  font-family: "acidic";
  text-decoration: none;
  color: rgb(95, 95, 208);
  font-size: 18px;
  z-index: 9999;
  margin-top: 5px;
}

.menu2 {
  height: 100%;
  width: 30%;
  border-top: 1px solid var(--heavyborder);
  display: flex;
  align-items: center;
}

.menu3 {
  height: 100%;
  width: 30%;
  border-top: 1px solid var(--heavyborder);
  border-right: 1px solid var(--heavyborder);
  display: flex;
  align-items: center;
  margin-right: 4%;
}

.scmarquee {
  width: 294px !important;
  margin: 22px -10px 20px;
  padding: 19px 0 19px;
}

.scmq1__content {
  flex-shrink: 0;
  display: flex;
  justify-content: space-around;
  gap: var(--gap);
  min-width: 100%;
  animation: scroll 95s linear infinite;
  animation-direction: normal;
}

.scmq2__content {
  flex-shrink: 0;
  display: flex;
  justify-content: space-around;
  gap: var(--gap);
  min-width: 100%;
  margin-top: 2px;
  animation: scroll 100s linear infinite;
  animation-direction: reverse;
}

.scmq1__content img,
.scmq2__content img {
  width: 84px;
}

.grid-bg {
  background-image:
    linear-gradient(to right, var(--grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid) 1px, transparent 1px);
  background-size: 9px 9.5px;
  background-position: 0 -1.5px;
  border: 1px dotted rgb(216, 216, 216);
  height: 437px;
  width: 344px;
  position: fixed;
  margin: -437px 14.5px;
}

.notes {
  width: 92%;
  height: 88%;
  margin-top: 0;
  margin-left: 4%;
  margin-right: 4%;
  overflow: hidden;
  padding: 0.2em;
  position: relative;
  z-index: 999;
}

.notesline {
  position: fixed;
  top: 467px;
  left: 0;
  z-index: 9999;
  width: 307px;
  border-bottom: 1px solid var(--heavyborder);
}

.quote {
  height: 10%;
  display: flex;
  align-items: center;
  font-size: 1em;
}

.quote-author {
  height: 100%;
  width: 80%;
  padding-bottom: 12%;
  margin: 41px 0 0 -19px;
}

.corner-calendar {
  height: 92%;
  width: 21%;
  margin: 4%;
  margin-top: 6%;
  display: flex;
  flex-direction: column;
}

.calendar-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  width: 100%;
  height: 100%;
  gap: 0;
  box-sizing: border-box;
}

.calendar > div {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6em;
  overflow: hidden;
}

.current-week-border {
  position: absolute;
  border: 0.05em solid #666;
  border-radius: 1em;
  pointer-events: none;
  z-index: 0;
  box-sizing: border-box;
}

.today {
  font-weight: bold;
}

.prev {
  color: #666;
}

.saturday {
  color: #666;
}

.sunday {
  color: red;
}

.calendarframe {
  height: 101.5%;
  width: 104.9%;
  background: transparent;
  margin: -4px 0 0 -13px;
}

#calendar-cover {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 35px 0 0 2px;
}

.scheader {
  position: absolute;
  margin: -39px 0 0 -220px;
  font-size: 0.9em;
  letter-spacing: -0.7px;
}

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

.scheader span {
  cursor: url(../assets/items/select.png), pointer;
}

.month-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(16, auto);
  width: 92.4%;
  margin: -3px 0 21px -23px;
  max-width: 1200px;
  border: 0.05em solid var(--lightborder);
}

.month-grid:first-child {
  margin-top: -6px;
}

.month-grid:last-child {
  margin-bottom: -7px;
}

.day-block {
  border: none;
  outline: 0.001em solid var(--heavyborder);
  outline-offset: -0.05px;
  padding: 0.25rem;
  display: flex;
  background-color: #fff;
  background-image:
    linear-gradient(to right, rgba(0, 0, 0, 0.089) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.089) 1px, transparent 1px);
  background-size: calc(100% / 10) calc(100% / 10);
  flex-direction: column;
  font-size: 0.8rem;
  height: 125px;
  overflow: hidden;
  position: relative;
}

.day-block .post-entry {
  overflow-y: auto;
  max-height: 100%;
  -webkit-overflow-scrolling: touch;
}

.day-block .post-entry::-webkit-scrollbar {
  display: none;
}

.weekday-label.saturday {
  color: blue;
}

.weekday-label.sunday {
  color: red;
}

.date-number {
  font-weight: bold;
  margin-bottom: 0.25rem;
}

.post-entry {
  white-space: pre-wrap;
  font-size: 0.75rem;
  line-height: 1.2;
  color: #333;
  padding: 0 2px 0;
}

.month-header {
  padding: 0;
  border: none;
  display: flex;
  flex-direction: column;
  font-family: sans-serif;
}

.month-banner {
  background-color: #88b9f8;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 0.5rem;
  height: 49px;
}

.year-block {
  display: flex;
  flex-direction: column;
  font-size: 0.85rem;
  line-height: 1.1;
}

.western-year {
  font-weight: bold;
}

.japanese-year {
  font-size: 0.75rem;
  margin-top: 0.1rem;
}

.month-number {
  font-size: 2.7rem;
  font-weight: 300;
  line-height: 1;
  margin-top: -5px;
}

.month-name {
  background-color: white;
  color: #5f7085;
  padding: 0.27rem 0.5rem;
  font-size: 0.9rem;
  border: 1px solid #ccc;
  border-top: none;
  letter-spacing: 0.05em;
  font-family: MS PGothic;
  font-weight: bold;
  letter-spacing: -1px;
}

.date-number {
  font-family: sans-serif;
  font-weight: 100;
}

/* c-ephemera */
.grid-wrapper {
  display: grid;
  grid-template-columns: repeat(2, 143px);
  grid-auto-rows: 147px;
  grid-auto-flow: row dense;
  gap: 10px;
  padding: 10px;
  margin: -13px 0 0 -7px;
  width: calc(2 * 143px + 20px);
  height: calc(100vh - 50px);
  box-sizing: content-box;
}

.grid-cell {
  outline: 0.001em solid var(--heavyborder);
  outline-offset: -0.07px;
  background-color: #fff;
  background-image:
    linear-gradient(to right, rgba(0, 0, 0, 0.089) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.089) 1px, transparent 1px);
  background-size: calc(100% / 6) calc(100% / 8);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 150px;
  z-index: 100;
  position: relative;
}

.grid-cell:hover {
  z-index: 9999;
}

.cell-content:hover::-webkit-scrollbar {
  display: block;
}

.cell-content {
  flex: 1;
  font-size: 12px;
  overflow-y: auto;
  padding: 3px 5px 5px 5px;
}

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

.cell-content::-webkit-scrollbar,
.cell-banner::-webkit-scrollbar {
  display: none;
}

.cell-banner {
  background-color: #9bc4fa;
  font-family: sans-serif;
  font-size: 11.5px;
  border-bottom: 1px solid #7a7a7a;
  color: white;
  justify-content: space-between;
  padding: 4px;
  height: 44px;
  width: 143px;
  overflow-y: auto;
}

.celltag1,
.celltag2,
.celltag3,
.celltag4,
.celltag5,
.celltag6 {
  position: absolute;
  cursor: url(../assets/items/select.png), pointer;
  z-index: 2;
  opacity: 0.9;
  transition: opacity 0.3s;
}

.celltag1:hover,
.celltag2:hover,
.celltag3:hover,
.celltag4:hover,
.celltag5:hover,
.celltag6:hover {
  opacity: 1;
}

.celltag1 {
  bottom: 91px;
  right: 10px;
  width: 45px;
  height: 39px;
  background-image: url(../assets/items/F23.png);
  background-size: 45px;
  transform: rotate(2deg);
}

.celltag2 {
  bottom: 86px;
  right: 10px;
  width: 38px;
  height: 54px;
  background-image: url(../assets/images/K25.png);
  background-size: 38px;
}

.celltag3 {
  bottom: 85px;
  right: 9px;
  width: 54px;
  height: 49px;
  background-image: url(../assets/images/AK36.png);
  background-size: 55px;
  transform: rotate(2.5deg);
}

.celltag4 {
  bottom: 90px;
  right: 10px;
  width: 48px;
  height: 47px;
  background-image: url(../assets/images/F08.png);
  background-size: 48px;
}

.celltag5 {
  bottom: 99px;
  right: 5px;
  width: 56px;
  height: 20px;
  background-image: url(../assets/images/G04.png);
  background-size: 56px;
  transform: rotate(48deg);
}

.celltag6 {
  bottom: 91px;
  right: 10px;
  width: 47px;
  height: 45px;
  background-image: url(../assets/items/H09.png);
  background-size: 47px;
}

/* c-dictionary */
#cdsidebox {
  background-color: #fffef5;
  font-size: 17px;
  font-family: "Times New Roman";
  margin: -5px 0 0 -12px;
  height: 438px;
  width: 374px;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0;
  position: relative;
}

#cdsidebox::-webkit-scrollbar {
  display: none;
}

#cdsidebox .day {
  height: 14.4%;
  display: flex;
  align-items: center;
}

.alphacon {
  width: 312px;
  height: 63px;
  font-size: 12px;
  padding: 9px 8px;
  position: absolute;
  overflow-y: auto;
}

.alphacon i {
  background-color: rgb(255, 226, 255);
}

.alphacon::-webkit-scrollbar {
  display: none;
}

/* c-memos */
.smtape {
  position: absolute;
  margin: 235px 0 0 158px;
  transform: rotate(5deg);
  z-index: 1002;
}

.scmempol {
  background: url(../assets/images/scrap/memos/0925.JPEG);
  background-size: contain;
  border: 1px solid #000;
  border-radius: 3px;
  height: 170px;
  width: 170px;
  filter: brightness(110%);
  position: absolute;
  margin: 248px 0 0 158px;
  padding: 9px;
  z-index: 1001;
}

.smhead {
  position: absolute;
  background: linear-gradient(
    to bottom,
    #fff0b5 1%,
    #ffffb9 49%,
    #ffffb9 51%,
    #ebf0f4 100%
  );
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  box-shadow:
    inset 0px -6px 6px -5px #dadadaad,
    5px 5px 6px -5px #dadadaad,
    -5px 5px 6px -5px #dadadaad;
  padding: 4px 40px 10px 30px;
  font-family: "Redaction";
  font-size: 40px;
  filter: sepia(20%);
  font-weight: bold;
  letter-spacing: -1px;
  color: #fde5f8;
  z-index: 1001;
  text-shadow:
    0px 0px 3px #00000022,
    -2px -2px 1px #8d6e68,
    -2px -2px 1px #8d6e68,
    -2px 2px 0px #8d6e68,
    -2px -2px 1px #8d6e68,
    -2px -2px 1px #8d6e68,
    2px -2px 0px #8d6e68,
    -2px 2px 0px #8d6e68,
    -2px 1px 1px #8d6e68,
    -2px 4px 1px #8d6e68,
    2px 2px 0px #8d6e68,
    3px 4px 1px #00000022;
}

.smnote {
  position: absolute;
  background: url(../assets/backgrounds/bluenote.jpg);
  background-size: 270px 270px;
  border: 1px #000 solid;
  border-radius: 6px;
  filter: sepia(15%);
  height: 115px;
  width: 293px;
  padding: 51px 0 0 40px;
  font-family: "acidic";
  font-size: 16px;
  color: rgb(95, 95, 208);
  z-index: 1000;
}

/* archive */
#arpostal {
  position: absolute;
  margin-left: 400px;
  margin-top: 35px;
  z-index: 90;
  pointer-events: none;
}
#arpostal img {
  height: 180px;
}

#artitle {
  width: 675px;
  border-bottom: 2px black solid;
  text-align: center;
  padding: 5px 0;
  font-family: "redaction";
  font-size: 51px;
  font-weight: bold;
  -webkit-text-fill-color: #fff;
  -webkit-text-stroke: 0.01px #00f;
}

.arnav {
  width: 675px;
  border-bottom: 1px black solid;
  text-align: center;
  padding: 5px 0;
  font-family: "Times New Roman";
  font-size: 16px;
  position: absolute;
  z-index: 220;
}

.arnav a:hover {
  background-color: var(--accent);
  color: #fff;
}

.arnav a {
  text-decoration: none;
  color: #000;
}

#arncont {
  display: flex;
  margin-bottom: -10px;
  padding-top: 2px;
}

#arleft {
  width: 200px;
  border-right: black 1px solid;
  margin: 30px 7px;
  padding-right: 8px;
  font-family: "Times New Roman";
}

#arright {
  width: 485px;
  margin-top: 30px;
  padding-left: 2px;
}

.arheadline {
  margin: 7px -2px 0 0;
  border: 1px solid black;
  border-radius: 6px;
  width: 456px;
  padding: 3px;
  font-family: "Arial";
  font-size: 14px;
}

.arheadline a {
  text-decoration: none;
  color: #000;
}

.arheadline a:hover {
  text-decoration: none;
  color: #00f;
}

#arrightright {
  display: flex;
  flex-direction: column;
  width: 350px;
  font-family: "Times New Roman";
  font-size: 32px;
  letter-spacing: -1px;
  line-height: 24px;
}

#arright table {
  width: 456px;
  border-collapse: collapse;
  border: 1px solid black;
}

#arright table th {
  border: 1px solid black;
}

#arright table td {
  border: 1px solid black;
  padding: 8px;
  text-align: left;
  font-family: "Times New Roman";
}

#arright td:first-child {
  width: 200px;
}

#arright a {
  text-decoration: none;
}

.inviscroll {
  overflow-y: auto;
  height: 300px;
  padding-bottom: 10px;
}

.inviscroll::-webkit-scrollbar {
  display: none;
}

#arnote {
  width: 113px;
  font-size: 15px;
  font-family: "Times New Roman";
  margin-top: 4px;
  line-height: 18px;
}

#arlive {
  margin: -5px -7px;
}

#arlive img {
  height: 45px;
}

.arliveb {
  font-size: 31px;
  letter-spacing: -2px;
}

.arlives {
  font-size: 31px;
  letter-spacing: -2px;
}

#arlivenote {
  line-height: 15px !important;
}

.arls1 {
  margin: -26px 0 0;
  font-family: "Arial";
}

.arls2 {
  margin: -26px 0 0;
  color: #bdbdbd;
  font-size: 11px;
  font-family: "Arial";
}

#arlad {
  margin: 3px -1px;
}

#arlad img {
  height: 64px;
}

#artoast {
  margin: 8px 5px;
}

#artoast img {
  height: 200px;
  width: 338px;
}

.artoastb {
  margin: -1px 4px;
}

.arsectionhead {
  font-family: "Times New Roman";
  font-size: 32px;
  margin-top: 6px;
}

.arsectionti {
  text-align: left;
}

.arsectiondesc {
  text-align: right;
  font-size: 13px;
}

.arbisectiond {
  text-align: right;
  padding: 3px;
  font-family: "Arial" !important;
  font-size: 14px;
}

/* index page */
main.index {
  margin-top: -15px;
}

#index-background {
  content: "";
  position: fixed;
  top: -37px;
  left: -45px;
  right: -45px;
  bottom: 0;
  height: 642px;
  background: url(../assets/backgrounds/G3NNOtrbgAAqnJE.webp) center/cover;
  background-size: 650px;
  background-position: 1% 46.5%;
  background-blend-mode: overlay;
  filter: opacity(70%) saturate(150%);
  border: 1.5px solid #f4e0ec;
  border-radius: 22px;
  z-index: -9999;
  box-shadow:
    inset 0px -5px 5px -4px #dadada,
    0px 0px 5px 0px #dadada;
  pointer-events: none;
}

#index-background::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255, 0, 0, 0) 0%,
    rgba(255, 0, 0, 0) 33%,
    rgba(255, 255, 255, 0.2) 37%,
    rgba(255, 255, 255, 0.5),
    rgba(255, 255, 255, 0.2) 66%,
    rgba(255, 255, 255, 0) 69%,
    rgba(255, 255, 255, 0) 100%
  );
  background-size: 300% 300%;
  opacity: 0.7;
  background-position: 0% 0%;
  pointer-events: none;
  overflow: hidden;
  border-radius: 15px;
}

@keyframes shine {
  0% {
    background-position: 0% 0%;
  }

  100% {
    background-position: 100% 100%;
  }
}

.notice {
  font-family: "Arial";
  font-size: 70px;
  font-weight: 700;
  letter-spacing: -1px;
  transform: rotate(2.8deg) scale(0.91);
  margin: 160px 0 0 -310px;
  border: 1px solid #000;
  background: #fff;
  width: 320px;
  text-align: left !important;
  padding: 0 8px 0;
  position: absolute;
  z-index: 992;
}

#innotice1 {
  font-weight: bold;
  font-size: 41px;
  margin-top: -2px;
  margin-bottom: -5px;
}

#innotice2 {
  font-weight: 100;
  font-size: 14px;
  margin-top: 5px;
  margin-bottom: 0;
}

#innotice3 {
  font-weight: 600;
  font-size: 13px;
  margin-top: 5px;
  margin-bottom: 0;
}

#innotice4 {
  font-weight: 800;
  font-size: 21px;
  margin-top: -5px;
  margin-bottom: 0;
}

#innotice5 {
  font-weight: 400;
  font-size: 44px;
  letter-spacing: -3px;
  margin-top: -4px;
  margin-bottom: -5px;
}

#innotice6 {
  font-weight: 100;
  font-size: 13px;
  margin-top: 5px;
  margin-bottom: 0;
}

#innotice7 {
  font-weight: 100;
  font-size: 13px;
  margin-top: 5px;
  margin-bottom: 3px;
}

.hl {
  border-bottom: 2px solid #000;
  width: 100%;
}

#doodle-marquee {
  background: url(../assets/backgrounds/grid.png) center/cover;
  border: 4px ridge #d7b999;
  border-radius: 10px;
  width: 350px;
  height: 68px;
  position: absolute;
  padding: 6px 16px 10px;
  margin: 395px 0 0 378px;
  z-index: 19;
}

.dmq_content {
  flex-shrink: 0;
  display: flex;
  justify-content: space-around;
  gap: var(--gap);
  min-width: 100%;
  animation: scroll 20s linear infinite;
  animation-direction: reverse;
}

#inpinkcircle {
  position: absolute;
  margin-left: 300px;
  margin-top: -50px;
  transform: rotate(-70deg);
  z-index: 0;
}

#inpinkcircle img {
  height: 330px;
}

.intable-section {
  width: fit-content;
  display: flex;
  justify-content: center;
}

.intable-section .inner {
  padding: 15px 15px 20px 17px;
  height: 350px;
  width: 420px;
  margin: 20px 0 0 -35px;
}

#innotebg {
  background: url(../assets/backgrounds/notebg.png);
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1.25px solid #8584ff;
  border-radius: 6px;
  display: block;
  box-sizing: border-box;
  filter: drop-shadow(0 0 1px white) drop-shadow(0 0 1px white)
    drop-shadow(0 0 1px white) drop-shadow(0 0 1px white)
    drop-shadow(0 0 1px white) drop-shadow(0 2px 2px #0000004d);
}

#inyellowtape {
  position: absolute;
  margin-left: 680px;
  margin-top: -360px;
  z-index: 910;
}

#inyellowtape img {
  width: 190px;
  transform: rotate(22deg);
}

#inclip {
  position: absolute;
  margin-left: 425px;
  margin-top: -247px;
  z-index: 993;
}

#inclip img {
  transform: rotate(21deg);
  height: 81px;
}

#inblueswirl {
  position: absolute;
  margin-left: 670px;
  margin-top: -230px;
  z-index: 993;
}

#inblueswirl img {
  transform: rotate(-15deg);
  height: 80px;
}

#indonuts {
  position: absolute;
  margin-left: 570px;
  margin-top: -190px;
  z-index: 900;
}

#indonuts img {
  filter: drop-shadow(0 0 1px white) drop-shadow(0 0 1px white)
    drop-shadow(0 0 1px white) drop-shadow(0 0 1px white)
    drop-shadow(0 0 1px white) drop-shadow(0 0 1px white)
    drop-shadow(0 0 1px white) drop-shadow(0 0 1px #0000004d);
  height: 270px;
}

#invelope {
  position: absolute;
  margin-left: 277px;
  margin-top: -232px;
  transform: rotate(-0.8deg);
  z-index: 900;
}

#invelope img {
  border: 1px solid #000;
  height: 192px;
}

#inparent {
  position: absolute;
  left: -85px;
  top: -90px;
  z-index: 900;
}

#inparent img {
  height: 84px;
  border-radius: 6px;
  border: 1px solid #c4c4c4;
  box-shadow:
    inset 0px -5px 5px -4px #dadada,
    0px 0px 5px 0px gainsboro;
}

#inbarcode {
  position: absolute;
  left: 56px;
  top: -92px;
  z-index: 900;
}

#inbarcode img {
  height: 86px;
  border-radius: 6px;
  border: 1px solid #c4c4c4;
  box-shadow:
    inset 0px -5px 5px -4px #dadada,
    0px 0px 5px 0px gainsboro;
}

.modal {
  position: absolute;
  top: -16%;
  left: -10%;
  width: 120%;
  height: 100%;
  backdrop-filter: blur(6px);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

#toggle:checked ~ .modal {
  display: flex;
}

.modal-content {
  max-width: 400px;
  margin-left: -10%;
  text-align: center;
  position: relative;
  padding: 0 110px;
  z-index: 20;
  display: inline-block;
  animation: bobbing 3s ease-in-out infinite;
}

#modal-warn {
  text-align: left;
  position: absolute;
  font-family: "Redaction";
  filter: opacity(0.8);
  color: rgb(169, 6, 118);
  padding: 0 4px;
  font-size: 16px;
  height: 125px;
  width: 199px;
  overflow: auto;
  margin: -260px 0 0 55px;
  line-height: 19px;
  transform: rotate(-5.8deg);
}

#modal-warn::-webkit-scrollbar {
  display: none;
}

@keyframes bobbing {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-7px);
  }
}

.modal-content img {
  filter: drop-shadow(0 0 1px white) drop-shadow(0 0 1px white)
    drop-shadow(0 0 1px white) drop-shadow(0 0 1px white)
    drop-shadow(0 0 1px white) drop-shadow(0 0 1px white)
    drop-shadow(0 0 1px white) drop-shadow(0 0 1px #0000004d);
  height: 400px;
  margin-top: -90px;
}

.modalsig {
  height: 400px;
  margin-top: -90px;
  position: absolute;
  pointer-events: none;
}

.modalsig img {
  filter: none !important;
  height: 105px;
  margin-top: -70px;
  margin-left: 60px;
  position: absolute;
  pointer-events: none;
}

.close,
.open {
  cursor: pointer;
}

.close {
  color: red;
  margin-left: -40px;
}

/* ddlc sticker */
.flexed {
  display: flex;
  flex-direction: row;
  justify-content: center;
  position: absolute;
  width: 95%;
  margin: 45px 20px 0 22px;
  z-index: 991;
}

.monika {
  background: url(../assets/images/monika1.webp) no-repeat;
  background-size: 100% !important;
  margin-right: -15px;
  margin-top: -3px;
  height: 119px;
  width: 84px;
}

.monika:hover {
  animation: monika 1600ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes monika {
  from {
    transform: rotate(0deg);
    content: url(../assets/images/monika2.webp);
  }
  to {
    transform: rotate(360deg);
  }
}

.natsuki {
  background: url(../assets/images/natsuki1.webp) no-repeat;
  background-size: 100% !important;
  margin-right: -15px;
  margin-top: 4px;
  height: 110px;
  width: 96px;
}

.natsuki:hover {
  background: url(../assets/images/natsuki2.webp);
  animation: natsuki 0.2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes natsuki {
  0% {
    transform: translate(0);
    content: url(../assets/images/natsuki2.webp);
  }
  20% {
    transform: translate(-2px, 2px);
  }
  40% {
    transform: translate(-2px, -2px);
  }
  60% {
    transform: translate(2px, 2px);
  }
  80% {
    transform: translate(2px, -2px);
  }
  100% {
    transform: translate(0);
    content: url(../assets/images/natsuki2.webp);
  }
}

.yuri {
  background: url(../assets/images/yuri1.webp) no-repeat;
  background-size: 100% !important;
  margin-right: -15px;
  height: 115px;
  width: 79px;
}

.yuri:hover {
  background: url(../assets/images/yuri2.webp);
  animation: yuri 1.5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes yuri {
  0%,
  100% {
    transform: translateX(0);
    content: url(../assets/images/yuri2.webp);
  }
  10%,
  30%,
  50%,
  70% {
    transform: translateX(-5px);
  }
  20%,
  40%,
  60% {
    transform: translateX(5px);
  }
  80% {
    transform: translateX(8px);
  }
  90% {
    transform: translateX(-8px);
  }
}

.sayori {
  background: url(../assets/images/sayori1.webp) no-repeat;
  background-size: 100% !important;
  height: 115px;
  width: 79px;
}

.sayori:hover {
  background: url(../assets/images/sayori2.webp);
  animation: sayori 0.9s;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier;
}

@keyframes sayori {
  0%,
  100% {
    transform: translateX(0%);
    transform-origin: 50% 50%;
    content: url(../assets/images/sayori2.webp);
  }
  15% {
    transform: translateX(-2px) rotate(-2deg);
  }
  30% {
    transform: translateX(5px) rotate(8deg);
  }
  45% {
    transform: translateX(-6px) rotate(-3.6deg);
  }
  60% {
    transform: translateX(5px) rotate(2.4deg);
  }
  75% {
    transform: translateX(-6px) rotate(-1.2deg);
    content: url(../assets/images/sayori2.webp);
  }
}

/* enter link */
.curved-text {
  font-size: 72px;
  font-family: "Spirit";
  color: transparent;
  display: inline-block;
  margin: -90px 0 0 585px !important;
  transform: perspective(600px) rotateX(40deg);
  text-align: center;
  filter: drop-shadow(0 0 1px white) drop-shadow(0 0 1px white)
    drop-shadow(0 0 1px white) drop-shadow(0 0 1px white)
    drop-shadow(0 0 1px white) drop-shadow(0 0 1px white)
    drop-shadow(1px 1px 0 #0000004d);
  letter-spacing: 2px;
  z-index: 999;
  position: relative;
}

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

.curved-text span {
  display: inline-block;
  position: relative;
  background: linear-gradient(#fff, #ef91aa, #fff);
  background-clip: text;
}

.curved-text span:nth-child(1) {
  transform: rotate(63deg);
  left: 5px;
  top: -55px;
}

.curved-text span:nth-child(2) {
  transform: rotate(47deg);
  top: -6px;
  left: -15px;
}

.curved-text span:nth-child(3) {
  transform: rotate(30deg);
  left: -35px;
  top: 25px;
}

.curved-text span:nth-child(4) {
  transform: rotate(15deg);
  left: -46px;
  top: 40px;
}

.curved-text span:nth-child(5) {
  transform: rotate(3deg);
  left: -50px;
  top: 49px;
}

.curved-text span:nth-child(6) {
  transform: rotate(-20deg);
  left: -50px;
  top: 40px;
}

.curved-text:hover {
  filter: drop-shadow(0 0 1px white) drop-shadow(0 0 1px white)
    drop-shadow(0 0 1px white) drop-shadow(0 0 1px white)
    drop-shadow(0 0 1px white) drop-shadow(0 0 1px white)
    drop-shadow(0 0 1px #2453d4) drop-shadow(1px 1px 0 #0000004d);
  transition: 0.2s ease;
}

/* 404 page */
#nfbiscuit {
  position: absolute !important;
  margin: 60px 0 0 -50px;
  z-index: 900;
}

#nfbiscuit img {
  transform: rotate(-8deg);
  height: 190px;
}

#nfclip,
#nfyellowswirl,
#nfyellowtape {
  position: absolute;
  z-index: 800;
}

#nfclip img {
  transform: rotate(-8deg);
  margin: 230px 0 0 290px;
  height: 100px;
}

#nfyellowswirl img {
  transform: rotate(45deg);
  margin: 70px 0 0 210px;
  height: 80px;
}

#nfyellowtape img {
  transform: rotate(-11deg);
  margin: 405px 0 0 -170px;
  height: 40px;
  width: 200px;
}

.nftable-section {
  width: fit-content;
  display: flex;
  justify-content: center;
  margin: 230px 0 0 50px !important;
  transform: rotate(3deg);
}

.nftable-section .inner {
  padding: 15px 15px 20px 17px;
  height: 170px;
  width: 415px;
  margin: 20px 0 0 -40px;
}

#nfnotebg {
  background: url(../assets/backgrounds/notebg.png);
  height: 100%;
  border: 1.25px solid #8584ff;
  border-radius: 6px;
  display: flex;
  justify-content: center;
  box-sizing: border-box;
  filter: drop-shadow(0 0 1px white) drop-shadow(0 0 1px white)
    drop-shadow(0 0 1px white) drop-shadow(0 0 1px white)
    drop-shadow(0 0 1px white) drop-shadow(0 2px 2px #0000004d);
}

#error {
  font-size: 110px;
  font-family: "Spirit", cursive;
  display: inline-block;
  margin-top: 5px;
  text-align: center;
  background: -webkit-linear-gradient(#fff, #ef91aa, #fff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 1px white) drop-shadow(0 0 1px white)
    drop-shadow(0 0 1px white) drop-shadow(0 0 1px white)
    drop-shadow(0 0 1px white) drop-shadow(0 0 1px white)
    drop-shadow(1px 1px 0 #0000004d);
  letter-spacing: -2px;
  z-index: 901;
}

#counter {
  font-weight: bold;
}