/*font*/

@font-face {
  font-family: "Nintendo-DS-BIOS";
  src: url(https://dl.dropbox.com/s/vlxjtnvrl9s0snp/Nintendo-DS-BIOS.ttf);
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "pixel";
  src: url(https://dl.dropbox.com/s/kmhe7d3n18vdz5e/w95fa.woff?dl=0);
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "kiwi";
  src: url(https://dl.dropbox.com/s/388cvx0do21kj3n/KiwiSoda.ttf);
}

@font-face {
  font-family: "windows";
  src: url(https://dl.dropbox.com/s/cn0l1yjacta4whv/W95FA.otf);
}

@font-face {
  font-family: "DigiBop";
  src: url(https://dl.dropbox.com/s/8maabpvuycdrlai/DigiBop-Regular.ttf);
}

@font-face {
  font-family: "pixelpoiiz";
  src: url(https://dl.dropbox.com/s/6ju4skeoofqwcqu/pixelpoiiz.ttf);
}

:root {
  --color1: #181818;
  --color2: #2b2b2b;
  --color3: #b6b6b6;
  --color4: #8b8b8b;
  --color5: #9b9b9b;
  --color6: #ffffff;
}

@keyframes heart {
  0%,
  12%,
  25%,
  50% {
    transform: rotate(0deg);
  }

  55% {
    transform: rotate(-2.5deg);
  }

  65% {
    transform: rotate(3.5deg);
  }

  75% {
    transform: rotate(-7deg);
  }

  95%,
  100& {
    transform: rotate(0deg);
  }
}

#image02 {
  animation: heart 1.5s ease infinite;
}

/* ===== Scrollbar CSS ===== */
/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: #ac84b9 #ffffff;
}

/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {
  width: 16px;
}

*::-webkit-scrollbar-track {
  background: #ffffff;
}

*::-webkit-scrollbar-thumb {
  background-color: #ac84b9;
  border-radius: 10px;
  border: 3px none #ffffff;
}

/*tag*/

body {
  background-image: url(images/233948rmulq6mmvn.gif);
  background-attachment: fixed;
  font-family: Nintendo-DS-BIOS;
}

::selection {
  /* Change highlight background color */
  background: #ffffff00;
  /* Change highlight text color */
  color: #7c415c;
}

h3 {
  font-family: "kiwi";
}

iframe {
  overflow: hidden;
}

mark {
  background: #cc91df;
  background: linear-gradient(360deg, #cc91df 45%, rgba(42, 123, 155, 0) 0%);
  font-family: "pixel";
}

input[type="checkbox"] {
  accent-color: #5f032e;
}

progress {
  accent-color: #5f032e;
}

a:link {
  color: rgb(185, 185, 185);
  text-decoration: none;
}

a:visited {
  color: rgb(187, 145, 197);
  text-decoration: none;
}

a:hover {
  color: rgb(222, 105, 238);
  text-decoration: underline;
}

a:active {
  color: rgb(183, 0, 255);
  text-decoration: underline;
}

* {
  cursor:
    url("https://cdn.cursors-4u.net/css-previews/shiny-dark-purple-spinning-heart-4f8a1b3f-css.webp")
      0 0,
    auto !important;
}

/* .info*/

.con {
  width: fit-content;
  height: auto;
  margin: auto;
  filter: drop-shadow(0px 0px 15px white);
  margin-top: 5%;
  margin-bottom: 30px;
}

.con-one {
  background-color: white;
  background-image: url(images/3770809a97bf1o6fd.gif);
  background-size: 60px;
  width: fit-content;
  height: auto;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  height: fit-content;
}

.con-two {
  background-color: white;
  background-image: url(images/3770809a97bf1o6fd.gif);
  background-size: 60px;
  width: fit-content;
  height: auto;
  display: flex;
  flex-direction: column;
  height: fit-content;
}

.container {
  background-color: rgb(182, 182, 182);
  background-image: url(images/1831046m9d9ru5cn6.jpg);
  border: 3px dotted white;
  border-top: none;
  display: flex;
  flex-direction: row;
  margin: auto;
  padding: 10px 10px;
  align-content: space-around;
  width: 1000px;
  height: fit-content;
}

.container-banner {
  background-color: rgb(182, 182, 182);
  background-image: url(images/1831046m9d9ru5cn6.jpg);
  border: 3px dotted white;
  border-bottom: none;
  display: flex;
  flex-wrap: wrap;
  width: 1020px;
  height: 190px;
  align-content: center;
}

.box-banner {
  background-color: rgb(182, 182, 182);
  background-image: url("images/43e05e87_original.png");
  background-size: 171px;
  width: 98%;
  height: 94%;
  margin-left: 10px;
  margin-top: 4px;
  box-shadow: inset 0px 0px 15px 17px white;
}

.container-one {
  background-color: none;
  border: none;
  display: flex;
  flex-direction: column;
  width: 23%;
  height: fit-content;
  margin-right: 13px;
}

.container-two {
  background-color: none;
  border: 0px;
  border-radius: 10px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  width: 50%;
  height: fit-content;
}

.container-three {
  background-color: none;
  border: 1px solid black;
  display: flex;
  flex-direction: column;
  width: 22%;
  height: fit-content;
  margin-left: 14px;
}

.box-nav-one {
  background-color: rgb(196, 189, 180);
  background-image: url(https://dl.glitter-graphics.com/pub/3507/3507298a2hy9swkod.png);
  border: 0px solid black;
  width: auto;
  height: fit-content;
  margin: 0px 15px;
  margin-bottom: 5px;
}

.box-nav-two {
  background-color: rgb(196, 189, 180);
  background-image: url(https://dl.glitter-graphics.com/pub/3499/3499703mpr1w4lut0.gif);
  border: 0px solid black;
  width: auto;
  height: 400px;
  margin: 10px 15px;
  margin-top: -5px;
}

.box-nav-three {
  background-color: rgb(196, 189, 180);
  background-image: url(https://dl.glitter-graphics.com/pub/3507/3507298a2hy9swkod.png);
  border: 0px solid black;
  width: auto;
  height: 300px;
  margin: 10px 15px;
  margin-top: -5px;
  padding-right: 4px;
  overflow-y: scroll;
  scrollbar-width: none;
}

.box-div-one {
  background-color: none;
  border: 0px solid black;
  width: 46%;
  height: 300px;
  margin: 10px 5px;
  margin-left: 10px;
}

.box-div-two {
  background-color: none;
  border: 0px solid black;
  width: 46%;
  height: 300px;
  margin: 10px 5px;
  margin-right: 10px;
}

.box-div-three {
  background-color: none;
  border: 0px solid black;
  width: 100%;
  height: 400px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  margin: 10px 10px;
  margin-top: -3px;
}

.box-div-six {
  background-color: white;
  border: 0px solid black;
  width: 100%;
  height: 43px;
  margin: 10px 10px;
  margin-top: -3px;
}

.box-div-seven {
  background-color: none;
  border: none;
  width: 100%;
  height: 22px;
  margin: 10px 10px;
  margin-top: -3px;
}

.box-div-four {
  background-color: none;
  border: 0px solid black;
  width: 46%;
  height: 260px;
  margin: 10px 5px;
  margin-top: -3px;
  margin-left: 10px;
  overflow-y: scroll;
  scrollbar-width: none;
}

.box-div-five {
  background-color: none;
  border: 0px solid black;
  width: 46%;
  height: 260px;
  margin: 10px 5px;
  margin-top: -3px;
  margin-right: 10px;
  overflow-y: scroll;
  scrollbar-width: none;
}

.box-aside-one {
  background-color: rgb(196, 189, 180);
  background-image: url(https://dl.glitter-graphics.com/pub/3507/3507298a2hy9swkod.png);
  border: 1px solid white;
  width: 178px;
  height: 270px;
  margin: 0px 15px;
  padding-top: 6px;
  padding-left: 2px;
  padding-right: 5px;
}

.box-aside-two {
  background-color: rgb(196, 189, 180);
  background-image: url(images/tumblr_inline_mns7hy2YfK1qz4rgp.png);
  border: 1px solid white;
  width: auto;
  height: 200px;
  margin: 10px 15px;
  margin-top: -2px;
}

.box-aside-three {
  background-color: rgb(196, 189, 180);
  border: 1px solid rgb(255, 255, 255);
  width: auto;
  height: 300px;
  margin: 10px 15px;
  margin-top: -2px;
}

.box-aside-four {
  background-color: rgb(196, 189, 180);
  border: 1px solid white;
  width: auto;
  height: 200px;
  margin: 10px 15px;
  margin-top: -2px;
}

.wigheart {
  -webkit-mask-image: url(images/mgYPn13.png);
  -webkit-mask-size: 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  margin-left: 11px;
  width: 180px;
  height: auto;
}

.box-one {
  background: #0d0d0d;
  background: linear-gradient(
    0deg,
    rgba(13, 13, 13, 1) 13%,
    rgba(66, 66, 66, 1) 29%,
    rgba(217, 217, 217, 1) 53%,
    rgba(79, 79, 79, 1) 56%,
    rgba(0, 0, 0, 1) 83%,
    rgba(0, 0, 0, 1) 99%
  );
  margin-left: 15px;
  margin-top: 10px;
  padding-top: 5px;
  padding-bottom: 9px;
  width: 180px;
  height: 7px;
  display: flex;
  justify-content: left;
  align-items: center;
}

.box-two {
  background: #0d0d0d;
  background: linear-gradient(
    0deg,
    rgba(13, 13, 13, 1) 13%,
    rgba(66, 66, 66, 1) 29%,
    rgba(217, 217, 217, 1) 53%,
    rgba(79, 79, 79, 1) 56%,
    rgba(0, 0, 0, 1) 83%,
    rgba(0, 0, 0, 1) 99%
  );
  margin-left: 15px;
  margin-top: 10px;
  padding-top: 5px;
  padding-bottom: 9px;
  width: 185px;
  height: 7px;
  display: flex;
  justify-content: left;
  align-items: center;
}

.button {
  border: 2px solid black;
  width: 167px;
  height: 38px;
  color: white;
  padding: 5px 5px;
  text-align: left;
  text-decoration: none;
  display: block;
  font-size: 14px;
  margin: 6px 6px;
  cursor: pointer;
}

.button-one {
  border: 2px solid black;
  width: 191px;
  height: 38px;
  color: white;
  padding: 5px 5px;
  text-align: left;
  text-decoration: none;
  display: block;
  font-size: 14px;
  margin: 6px 6px;
  cursor: pointer;
}

.button1 {
  background-image: radial-gradient(
    100% 100% at top,
    var(--color2) 30%,
    var(--color3) 66%,
    var(--color1) 66% 70%,
    var(--color2) 90%
  ) !important;
  box-shadow:
    inset 0px 0px 0px 2px var(--color1),
    0px 0px 0px 1px white;
  border-radius: 9px;
  padding: 5px !important;
  color: rgb(255, 255, 255);
  border: 2px solid black;
  font-family: "pixel";
  text-decoration: underline;
}

.button1:hover {
  background-image: radial-gradient(
    100% 100% at top,
    var(--color5) 30%,
    var(--color6) 66%,
    var(--color4) 66% 70%,
    var(--color5) 90%
  ) !important;
  box-shadow:
    inset 0px 0px 0px 2px var(--color4),
    0px 0px 0px 1px white;
  border-radius: 9px;
  padding: 5px !important;
  color: rgb(8, 8, 8);
  border: 2px solid black;
  font-style: italic;
  text-decoration: dotted;
}

.button1::before {
  content: url(https://files.catbox.moe/1dvfk1.gif);
  margin-left: 5px;
  margin-right: 6px;
}

.button2 {
  background-image: radial-gradient(
    100% 100% at top,
    var(--color2) 30%,
    var(--color3) 66%,
    var(--color1) 66% 70%,
    var(--color2) 90%
  ) !important;
  box-shadow:
    inset 0px 0px 0px 2px var(--color1),
    0px 0px 0px 1px white;
  border-radius: 9px;
  padding: 5px !important;
  color: rgb(255, 255, 255);
  border: 2px solid black;
  font-family: "pixel";
  text-decoration: underline;
}

.button2:hover {
  background-image: radial-gradient(
    100% 100% at top,
    var(--color5) 30%,
    var(--color6) 66%,
    var(--color4) 66% 70%,
    var(--color5) 90%
  ) !important;
  box-shadow:
    inset 0px 0px 0px 2px var(--color4),
    0px 0px 0px 1px white;
  border-radius: 9px;
  padding: 5px !important;
  color: rgb(8, 8, 8);
  border: 2px solid black;
  font-style: italic;
  text-decoration: dotted;
}

.button2::before {
  content: url(https://files.catbox.moe/1dvfk1.gif);
  margin-left: 5px;
  margin-right: 6px;
}

.bg-text-div {
  background-image: url(https://dl.glitter-graphics.com/pub/3499/3499703mpr1w4lut0.gif);
  border-radius: 2px;
  margin-top: 30px;
  margin-left: 3px;
  padding-top: 7px;
  width: 97%;
  height: 77%;
}

.bg-in-text-div {
  background-color: white;
  border-radius: 2px;
  margin-left: 10px;
  margin-top: 7px;
  padding-left: 5px;
  padding-right: 5px;
  width: 85%;
  height: 90%;
  overflow-y: scroll;
  scrollbar-width: none;
}

.gradmask {
  background: linear-gradient(pink 50%, rgb(206, 92, 149));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 2em;
  font-weight: bold;
  filter: drop-shadow(0px 1px black) drop-shadow(0 -1px black)
    drop-shadow(1px 0 black) drop-shadow(-1px 0 black);
}

.textbox {
  font-family: pixel;
  font-weight: bold;
  margin-left: 5px;
  text-shadow: 0px 0px 4px white;
  color: #5f032e;
}

.log-text {
  font-family: "windows";
  font-size: 15px;
}

.log-text b {
  font-family: "pixel";
  font-size: 14px;
}

.log-text mark {
  background: #cc91df;
  background: linear-gradient(360deg, #cc91df 45%, rgba(42, 123, 155, 0) 0%);
  font-family: "pixel";
}

.twooutline {
  color: white;
  font-size: 2em;
  font-family: arial;
  font-weight: bold;
  filter: drop-shadow(0px 1px black) drop-shadow(0 -1px black)
    drop-shadow(1px 0 black) drop-shadow(-1px 0 black)
    drop-shadow(0px 1px rgb(190, 83, 137)) drop-shadow(0 -1px rgb(190, 83, 137))
    drop-shadow(1px 0 rgb(190, 83, 137)) drop-shadow(-1px 0 rgb(190, 83, 137));
}

.lacescr {
  border-width: 7px;
  border-style: solid;
  border-image: url("images/NJa4bp2.png") 8 fill round;
  margin: 4px;
  margin-top: 7px;
  width: 45%;
  height: 370px;
  overflow-y: auto;
  scrollbar-width: none;
}

.colchange {
  width: fit-content;
  transition: 0.2s ease;
  color: rgb(248, 179, 200);
  font-size: 2em;
  filter: drop-shadow(0px 1px black) drop-shadow(0 -1px black)
    drop-shadow(1px 0 black) drop-shadow(-1px 0 black);
}

.colchange:hover {
  color: rgb(185, 85, 127);
}

.marquee {
  position: relative;
  width: 453px;
  height: 70px;
  overflow-x: hidden;
}

.track {
  position: absolute;
  white-space: nowrap;
  will-change: transform;
  animation: marquee 9s linear infinite;
}

@keyframes marquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

.div-box {
  background-color: white;
  border: black 0px solid;
  width: 94%;
  height: 700px;
  margin-left: 5px;
  margin-top: -19px;
  margin-bottom: 10px;
}

.bg,
.inner {
  box-sizing: border-box;
}

.bg {
  /* for plain background */
  background: #fe82b624;

  /* vv for image background. remove if want plain */
  background-image: url(https://dl.glitter-graphics.com/pub/3499/3499703mpr1w4lut0.gif);
}

.inner {
  background: #fff;
  color: #000;
  margin: 10px;
  border: 1px solid black;
  height: 170px; /* set height to "height:fit-content;" to expand with text size */
}

.glowpad {
  margin: 0 auto;
  padding: 10px;
  width: 90%;
  box-sizing: border-box;
}

.glow {
  margin: 0 auto;
  width: 100%;
  height: 270px;
  border: 3px solid rgb(235, 192, 243);
  background: rgb(235, 192, 243);
  border-radius: 10px;
  box-shadow:
    0px 0px 10px rgb(235, 192, 243),
    0px 0px 10px rgb(235, 192, 243),
    0px 0px 10px rgb(235, 192, 243),
    0px 0px 10px rgb(235, 192, 243),
    0px 0px 14px rgb(235, 192, 243);
  color: black;
  overflow-y: auto;
  scrollbar-width: none;
}

.div-one {
  position: absolute;
  top: 605px;
  left: 1083px;
  right: auto;
  bottom: auto;
  z-index: 1;
}

.div-two {
  position: absolute;
  top: 1047px;
  left: 1083px;
  right: auto;
  bottom: auto;
  z-index: 1;
}

.img-one {
  width: 69px;
  height: 60px;
  object-fit: cover;
  object-position: 0% 0%;
  filter: drop-shadow(0px 0px 2px rgb(0, 0, 0));
}

.img-two {
  width: 69px;
  height: 60px;
  object-fit: cover;
  object-position: 0% 0%;
  filter: drop-shadow(0px 0px 2px rgb(0, 0, 0));
}

/* #info*/

#text {
  -webkit-text-stroke: 1px rgb(122, 55, 124);
    color: white;
    font-family: Arial Black, Gadget, sans-serif;
 }

#border-four {
  border-width: 7px;
  border-style: solid;
  border-image: url("images/8Tk8PKV.gif") 7 fill round;
}

#box-one-border {
  border-style: outset;
  border-width: 1px;
  border-color: rgb(83, 83, 83);
  border-radius: 3px;
}

#border-one {
  /*(c) solielios*/
  border-width: 15px;
  border-style: solid;
  border-image: url("images/Kh6qtcn.png") 10 fill round;
}

#border-two {
  border-width: 7px;
  border-style: solid;
  border-image: url("images/NJa4bp2.png") 8 fill round;
}

#border-three {
  border-width: 10px;
  border-style: solid;
  border-image: url("images/testborder3.png") 8 fill round;
}

#music-player {
  display: flex;
  align-items: center;
  justify-content: center;
}
#music-player {
  height: 1.425em;
  width: 1.425em;
  font-size: 1.5em;
  padding: 0.125em;
  border-radius: 50%;
  border: 3px dotted #7d36c0;
  background: white;
  position: relative;
  bottom: -1em;
  right: 0em;
  z-index: 1200;
  -webkit-animation: spin 2s linear infinite;
  -webkit-animation: spin 4s linear infinite;
  -moz-animation: spin 4s linear infinite;
  animation: spin 4s linear infinite;
  margin-left: 4px;
  margin-top: -18px;
}
@-moz-keyframes spin {
  100% {
    -moz-transform: rotate(360deg);
  }
}
@-webkit-keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
#music-player:hover {
  -webkit-animation: pop 0.3s ease;
}

