:root {
  --background-color: white;
  --banner-image: url(../assets/images/softy.webp);
  --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;
  margin-top: 7%;
  margin-left: 59px;
  transform: scale(0.91);
}

body.notf {
  overflow: hidden !important;
}

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

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

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;
}

.section:first-child {
  border-bottom: 1px dashed #f9bddd;
}

/* 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;
}

strong {
  color: #2453d4;
}

strong2 {
  color: #ee918c;
}

@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: "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: "limone";
  src: url(../assets/fonts/LimoncelloRecipe.ttf);
  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 var(--banner-image);
  background-size: cover;
  background-position: center;
  height: 200px;
  grid-column: span 3;
  image-rendering: pixelated;
  border: 1px solid #000 !important;
  border-radius: 10px 0 0 10px;
  width: 713px !important;
  margin-top: 0 !important;
}

.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 #000;
  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: 1px solid #000;
  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 #000;
  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 {
  grid-column: span 2;
}

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

.blurbs .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;
}

/* 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;
}

.guestbook {
  background: url(../assets/images/cereal.webp);
  background-size: 220px 280px;
  border: 1px solid #000;
  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: 1px solid #000;
  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: 37px;
  font-family: "Spirit";
  -webkit-text-fill-color: #fff;
  color: #000;
  -webkit-text-stroke: 0.6px;
  letter-spacing: -1px;
  margin: 8px 0 0 4px;
  z-index: 105;
}

/* lower row */
#comments .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);
}

#comments .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;
}

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

#comments::before {
  top: -7px;
  right: 751px;
  width: 172px;
  height: 545px;
  margin-top: 7px;
  content: "";
  display: block;
  position: absolute;
  border: 1px solid #000;
  border-radius: 10px;
  background: url(../assets/images/pudding_slash.webp) right/cover;
}

#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);
  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: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 */
}

.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;
}

.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 #000 solid;
  border-radius: 15px;
  font-size: 80%;
  background: #f4e0ec;
  margin: 15px 0 0 22px;
  padding: 5px;
  z-index: 200;
}

#border-1 {
  height: 100%;
  width: 100%;
  border: 5px solid #f1c4ee;
  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: #fbb7c5 !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/backgrounds/grid.png);
  width: 269.5px;
  max-height: 260px;
  border: 1px solid #000;
  border-radius: 6px;
  margin-left: 5px;
  padding: 14px;
  font-size: 15px;
  z-index: 200;
}

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

#torangesquig {
  position: absolute;
  margin: 78px 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: 141px;
  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: 60px;
  width: 60px;
  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;
}

/* 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;
  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/backgrounds/star2.jpg);
  background-size: 680px;
  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 black solid;
  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 black solid;
  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 #000;
  border-radius: 18px;
  margin: 5px 4px;
  height: 141px;
}

#imusicbox {
  background: url(../assets/images/stickers1.webp);
  background-size: 830px;
  background-position: -50px -160px;
  border: 1px black solid;
  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;
}

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;
}

.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 #000;
  border-radius: 3px;
  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 #000;
  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: "limone";
  text-decoration: none;
  color: rgb(95, 95, 208);
  font-size: 18px;
  z-index: 9999;
}

.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(3, 99px); /* 3 fixed cells of 74px */
  grid-auto-rows: 104px; /* fixed row height */
  grid-auto-flow: row dense;
  gap: 0;
  padding: 10px;
  margin: -13px 0 0 -7px;
  width: calc(3 * 99px + 20px); /* adjust wrapper width */
  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: 104px;
  z-index: 100;
  position: relative;
}

.grid-cell:hover {
  transform: scale(1.1);
  z-index: 200;
}

.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: 10px;
  border-bottom: 1px solid #7a7a7a;
  color: white;
  justify-content: space-between;
  padding: 4px;
  height: 40px;
  width: 99px;
  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: 50px;
  right: 5px;
  width: 34px;
  height: 30px;
  background-image: url(../assets/items/F23.png);
  background-size: 34px;
  transform: rotate(2deg);
}

.celltag2 {
  bottom: 45px;
  right: 5px;
  width: 30px;
  height: 40px;
  background-image: url(../assets/images/O12.png);
  background-size: 30px;
}

.celltag3 {
  bottom: 48px;
  right: 4px;
  width: 40px;
  height: 36px;
  background-image: url(../assets/images/AK36.png);
  background-size: 41px;
  transform: rotate(2.5deg);
}

.celltag4 {
  bottom: 49px;
  right: 5px;
  width: 34px;
  height: 33px;
  background-image: url(../assets/images/F08.png);
  background-size: 34px;
}

.celltag5 {
  bottom: 52px;
  right: 5px;
  width: 46px;
  height: 16px;
  background-image: url(../assets/images/G04.png);
  background-size: 46px;
  transform: rotate(29deg);
}

.celltag6 {
  bottom: 48px;
  right: 6px;
  width: 37px;
  height: 35px;
  background-image: url(../assets/items/H09.png);
  background-size: 37px;
}

/* 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: #ffffb4;
  border: 1px #000 solid;
  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: "limone";
  font-size: 18px;
  color: rgb(95, 95, 208);
  letter-spacing: -1px;
  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 */
.notice {
  font-family: "Arial";
  font-size: 70px;
  font-weight: 700;
  letter-spacing: -1px;
  transform: rotate(-4deg) scale(0.91);
  margin: 166px 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: 285px;
  margin-top: -232px;
  transform: rotate(1.3deg);
  z-index: 900;
}

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

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

#inparent img {
  height: 84px;
}

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

#inbarcode img {
  height: 85px;
}

/* 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: 999999;
  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;
}