:root {
  /*BACKGROUND*/
  --body-bg-image: url("https://shadow-of-valtus.neocities.org/images/backgrounds/sadgrl_rainbowstr.gif");

  /*TEXT*/
  --text: #1a0e2b;
  --header: #ed64f5;
  --headerdark: #b30fbd;
  --link: #ef5077;
  --linkhover: #43256e;
  --linkvisited: #7726eb;

  /*LINES AND BOXES*/
  --mainborder: #00ffff;
  --headerunderline: #741b7c;
  --boxbg: #43256e;
  --infobox: #ffe3d3;
}

/*FONTS*/
@font-face {
  font-family: Alagard;
  src: url("https://shadow-of-valtus.neocities.org/fonts/alagard.ttf");
}
@font-face {
  font-family: KernMansion;
  src: url("https://shadow-of-valtus.neocities.org/fonts/KernMansion-Regular.otf");
}

@font-face {
  font-family: DebugMenu;
  src: url("https://shadow-of-valtus.neocities.org/fonts/DebugMenu-ikewise.ttf");
}

@font-face {
  font-family: "Dosis";
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/dosis/v34/HhyJU5sn9vOmLxNkIwRSjTVNWLEJN7Ml2xME.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/*BORDERS*/
.broider {
  border-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAABUCAYAAAAcaxDBAAABqUlEQVR4Xu3d0Y6DIBhEYXn/h7ZJ74SEyR9PxerZW+2sfAwsvXHbln72fU+3vOp6a2023unF7wcFPfoJCq8fQVeD9ks8zAj8uPePCz7jHirofFIFhUsv6NWg1SVePUat3oPT+ODrbThnJgBBj393Og9BbWhxT4TBtn4Fn25ocTyPv11QeIoFFRQWgONiQ+Hf97a48dj0NgF4vIIKCgvAcbmh6aso/EC3jwtfvQWtzqCgVbFwv6CrQd0zazMQD/aCCloTgO+2oYLCAnCcDRUUFoDjbKigsAAcZ0MFhQXgOBsqKCwAx9lQQWEBOM6GCgoLwHE2VFBYAI6zoYLCAnCcDRUUFoDjbKigsAAcZ0MFhQXgOBsqKCwAx9lQQWEBOM6GCgoLwHE2VFBYAI6zoYLCAnCcDRUUFoDjbKigsAAcZ0MFhQXgOBv6a9A+P704Cn6ev4sLPr4/tDqjglbFwv2CCgoLwHE2VFBYAI6zoatB07m0v/60V2qEt94ML2TtPM7/LxBBD6SCwitS0MtB056e9pz0+btdP7mF5YamAQta3EMFTQKCToVOLvkPq58Dv7F/+c0AAAAASUVORK5CYII=")
    28 / 28px / 0 round;
  border-width: 28px;
  border-style: solid;
}

/*TEXT FORMAT*/
h1,
h2,
h3 {
  font-family: "Alagard";
  line-height: 100%;
  padding-bottom: 5px;
  padding-top: 2px;
  color: var(--header);
  text-align: center;
}

h4 {
  font-family: "DebugMenu";
  font-size: larger;
  letter-spacing: 2px;
  line-height: 2px;
  text-align: left;
  color: var(--header);
  text-decoration-line: underline;
}

h5,
h6 {
  font-family: "Dosis";
  letter-spacing: 3px;
  text-align: left;
  color: var(--headerdark);
}

ul {
  list-style-image: url("https://shadow-of-valtus.neocities.org/images/misc/Bloopywoopy_arrow-right.png");
  padding: 15px;
}

/*LINKS*/
p a {
  color: var(--link);
  font-style: oblique;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-thickness: 1px;
}

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

.footer a:hover {
  color: var(--mainborder);
}

a:hover {
  cursor: url(https://shadow-of-valtus.neocities.org/images/cursors/Hearts_Precision%20Select.cur), auto;
  color: var(--linkhover);
}

/*MISC*/
.center img {
  display: block;
  margin: auto;
}

#blinkie {
  display: inline-block;
  padding: 5px;
  margin-top: 10%;
  margin-left: 142px;
  width: 68%;
  height: 30px;
}

#beholder {
  width: 300px;
  height: 300px;
  margin: -19px 55px;
  background-image: url(https://shadow-of-valtus.neocities.org/images/valtus_assets/BeholderTrim.png);
  background-size: contain;
  background-repeat: no-repeat;
  transform: rotate(-17deg);
}

#seph {
  width: 250px;
  margin: -288px 515px;
}

#cat {
  margin-left: 4px;
  margin-top: -48px;
  width: 175px;
  height: 168px;
  z-index: 9002;
}

#valtustitle {
  height: auto;
  position: absolute;
  top: 37%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/*FOUNDATION*/
* {
  box-sizing: border-box;
}

@media screen and (max-width: 1023px) {
}

body {
  background-image: var(--body-bg-image);
  color: var(--text);
  font-family: "Dosis", "Verdana", sans-serif;
  font-size: 12px;
  cursor: url(https://shadow-of-valtus.neocities.org/images/cursors/HALLOWEEN1.cur), auto;
  overflow-x: clip;
}

#container {
  width: 1024px;
  height: auto;
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  scrollbar-color: #ef5077 #ffe3d3;
  scrollbar-width: thin;
}
#smallcontainer {
  width: 68%;
  height: 100%;
  position: absolute;
  top: 49%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
}

#frame {
  width: 75%;
  height: 50%;
  border: none;
  position: absolute;
  top: 47%;
  left: 50%;
  transform: translate(-50%, -9%);
  overflow: hidden;
}

/*NAV*/
#buttonnav {
  float: left;
  width: 20%;
  height: 70%;
  text-align: center;
  padding: 15px;
  margin-top: 17%;
  z-index: 9000;
}

.navextras {
  padding-top: 55px;
  width: 190px;
  height: 680px;
  background-color: var(--boxbg);
  border-radius: 25px;
  border-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAABUCAYAAAAcaxDBAAABqUlEQVR4Xu3d0Y6DIBhEYXn/h7ZJ74SEyR9PxerZW+2sfAwsvXHbln72fU+3vOp6a2023unF7wcFPfoJCq8fQVeD9ks8zAj8uPePCz7jHirofFIFhUsv6NWg1SVePUat3oPT+ODrbThnJgBBj393Og9BbWhxT4TBtn4Fn25ocTyPv11QeIoFFRQWgONiQ+Hf97a48dj0NgF4vIIKCgvAcbmh6aso/EC3jwtfvQWtzqCgVbFwv6CrQd0zazMQD/aCCloTgO+2oYLCAnCcDRUUFoDjbKigsAAcZ0MFhQXgOBsqKCwAx9lQQWEBOM6GCgoLwHE2VFBYAI6zoYLCAnCcDRUUFoDjbKigsAAcZ0MFhQXgOBsqKCwAx9lQQWEBOM6GCgoLwHE2VFBYAI6zoYLCAnCcDRUUFoDjbKigsAAcZ0MFhQXgOBv6a9A+P704Cn6ev4sLPr4/tDqjglbFwv2CCgoLwHE2VFBYAI6zoatB07m0v/60V2qEt94ML2TtPM7/LxBBD6SCwitS0MtB056e9pz0+btdP7mF5YamAQta3EMFTQKCToVOLvkPq58Dv7F/+c0AAAAASUVORK5CYII=")
    28 / 28px / 0 round;
  border-width: 10px;
  border-style: solid;
  z-index: 9100;
}

.navextras img {
  padding: 2px;
}

.btn {
  padding: 30px 75px 15px 92px;
  font-size: 16px;
}

.about {
  background-image: url(https://shadow-of-valtus.neocities.org/images/valtus_assets/Nav/About.png);
  background-repeat: no-repeat;
}

.about:hover {
  background-image: url(https://shadow-of-valtus.neocities.org/images/valtus_assets/Nav/About_Hover.png);
  background-repeat: no-repeat;
}

.thevault {
  background-image: url(https://shadow-of-valtus.neocities.org/images/valtus_assets/Nav/Vault.png);
  background-repeat: no-repeat;
}

.thevault:hover {
  background-image: url(https://shadow-of-valtus.neocities.org/images/valtus_assets/Nav/Vault_Hover.png);
  background-repeat: no-repeat;
}

.altar {
  background-image: url(https://shadow-of-valtus.neocities.org/images/valtus_assets/Nav/Altar.png);
  background-repeat: no-repeat;
}

.altar:hover {
  background-image: url(https://shadow-of-valtus.neocities.org/images/valtus_assets/Nav/Altar_Hover.png);
  background-repeat: no-repeat;
}

.art {
  background-image: url(https://shadow-of-valtus.neocities.org//images/valtus_assets/Nav/Art.png);
  background-repeat: no-repeat;
}

.art:hover {
  background-image: url(https://shadow-of-valtus.neocities.org/images/valtus_assets/Nav/Art_Hover.png);
  background-repeat: no-repeat;
}

.toybox {
  background-image: url(https://shadow-of-valtus.neocities.org/images/valtus_assets/Nav/Toys.png);
  background-repeat: no-repeat;
}

.toybox:hover {
  background-image: url(https://shadow-of-valtus.neocities.org/images/valtus_assets/Nav/Toys_Hover.png);
  background-repeat: no-repeat;
}

.yard {
  background-image: url(https://shadow-of-valtus.neocities.org/images/valtus_assets/Nav/Yard.png);
  background-repeat: no-repeat;
}

.yard:hover {
  background-image: url(https://shadow-of-valtus.neocities.org/images/valtus_assets/Nav/Yard_Hover.png);
  background-repeat: no-repeat;
}

.links {
  background-image: url(https://shadow-of-valtus.neocities.org/images/valtus_assets/Nav/Links.png);
  background-repeat: no-repeat;
}

.links:hover {
  background-image: url(https://shadow-of-valtus.neocities.org/images/valtus_assets/Nav/Links_Hover.png);
  background-repeat: no-repeat;
}

/*SCROLLPARTS*/
#scrolltop {
  width: 100%;
  height: 300px;
  background-size: contain;
  background-image: url(https://shadow-of-valtus.neocities.org/images/valtus_assets/scrolltop.png);
  background-repeat: no-repeat;
  background-position: center;
  z-index: -1;
}

#scrollbody {
  width: 100%;
  height: 662px;
  margin-top: -9px;
  background-size: contain;
  background-image: url(https://shadow-of-valtus.neocities.org/images/valtus_assets/scrollmid.png);
  background-repeat: repeat-y;
  background-position: center;
  z-index: -2;
}

#scrollbottom {
  width: 100%;
  height: 104px;
  margin-top: -2px;
  background-size: contain;
  background-image: url(https://shadow-of-valtus.neocities.org/images/valtus_assets/scrollbottom.png);
  background-repeat: no-repeat;
  background-position: center;
  z-index: -1;
}

/*RIGHT SIDEBAR*/
#rightcontent {
  float: right;
  width: 20%;
  height: 60%;
  margin-top: 7%;
  text-align: left;
  padding: 15px;
  z-index: 9000;
}

#rightextras {
  width: 180px;
  height: 700px;
  margin-left: -18px;
  z-index: 9100;
}

.purplebox {
  padding: 15px;
  margin-top: 20px;
  margin-bottom: 10px;
  height: 170px;
  overflow-y: auto;
  overflow-x: clip;
  background-color: var(--boxbg);
  border-radius: 25px;
  border-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAABUCAYAAAAcaxDBAAABqUlEQVR4Xu3d0Y6DIBhEYXn/h7ZJ74SEyR9PxerZW+2sfAwsvXHbln72fU+3vOp6a2023unF7wcFPfoJCq8fQVeD9ks8zAj8uPePCz7jHirofFIFhUsv6NWg1SVePUat3oPT+ODrbThnJgBBj393Og9BbWhxT4TBtn4Fn25ocTyPv11QeIoFFRQWgONiQ+Hf97a48dj0NgF4vIIKCgvAcbmh6aso/EC3jwtfvQWtzqCgVbFwv6CrQd0zazMQD/aCCloTgO+2oYLCAnCcDRUUFoDjbKigsAAcZ0MFhQXgOBsqKCwAx9lQQWEBOM6GCgoLwHE2VFBYAI6zoYLCAnCcDRUUFoDjbKigsAAcZ0MFhQXgOBsqKCwAx9lQQWEBOM6GCgoLwHE2VFBYAI6zoYLCAnCcDRUUFoDjbKigsAAcZ0MFhQXgOBv6a9A+P704Cn6ev4sLPr4/tDqjglbFwv2CCgoLwHE2VFBYAI6zoatB07m0v/60V2qEt94ML2TtPM7/LxBBD6SCwitS0MtB056e9pz0+btdP7mF5YamAQta3EMFTQKCToVOLvkPq58Dv7F/+c0AAAAASUVORK5CYII=")
    28 / 28px / 0 round;
  border-width: 10px;
  border-style: solid;
}

.infobox {
  background-color: #ffe8e1;
  border-color: var(--link);
  border-width: 10px;
  border-radius: 15px;
  border-style: double;
  font-size: 12;
  padding: 10px;
  margin-top: 22px;
  margin-bottom: 22px;
  width: 180px;
  height: 170px;
  overflow-y: scroll;
  overflow-x: clip;
  z-index: 9000;
}

.infobox b {
  background: #ef5077;
  color: #ffe8e1;
  width: 100%;
  display: block;
  padding: 6px 7px;
  font-size: 1.5em;
  border-top: 5px solid #ffe8e1;
}

/*IPOD*/
.ipod {
  /* change these to whatever colors you want to use for it! */
  --black: #5b3a53;
  --dark: #a63356;
  --med: #ef5077;
  --light: #fdc6d3;
  --white: #ffe8e1;

  width: 180px;
  height: 204px;
  border: 5px var(--med) solid;
  padding: 20px;
  position: relative;
  margin-bottom: 34px;
  margin-top: 12px;
  border-radius: 25px;
  background: var(--light);
  box-shadow: 8px 14px var(--med);
  z-index: 9000;
}

/* the actual music player*/
audio {
  border-radius: 25px;
  width: 90%;
  height: 30px;
  background: var(--med);
  color: white;
  mix-blend-mode: hard-light;
  opacity: 0.4;
  margin: 10px auto;
}

.screen {
  height: 76%;
  background: var(--white);
  border-radius: 9px;
  overflow-y: clip;
  outline: 2px var(--white) solid;
  outline-offset: 8px;
  font-family: "ChicagoFLF", "Chicago", monospace; /* the font used on vintage apple products - feel free to change this if
you want something different! */
  font-size: 12px;
  text-align: center;
}

/* the bold text - where your song title will go, probably */
.screen b {
  background: var(--med);
  color: var(--white);
  width: 100%;
  display: block;
  padding: 3px 5px;
  font-size: 0.9em;
  margin-top: 5px;
  border-top: 11px double var(--white);
}

/* the bit under the audio player */
.screen .caption {
  padding: -5px;
}

#footer {
  text-align: center;
  background-color: var(--boxbg);
  border: solid 4px var(--mainborder);
  border-radius: 31px;
  width: 45%;
  height: 50px;
  position: absolute;
  top: 94%;
  left: 50%;
  transform: translate(-50%, -16%);
}