/* fonts */
@font-face {
  /* originally from Google Fonts */
  font-family: Kablammo;
  src: url(https://files.catbox.moe/ke6nnl.ttf);
}

@font-face {
  /* originally from Google Fonts */
  font-family: Antiqua;
  src: url(https://files.catbox.moe/9pk0m7.ttf);
}

@font-face {
  /* originally from Google Fonts */
  font-family: Puff;
  src: url(https://files.catbox.moe/9jxy1i.ttf);
}

@font-face {
  font-family: "Jaquard 12";
  src: url("https://files.catbox.moe/18btqi.ttf") format("woff");
  src: url("https://files.catbox.moe/18btqi.ttf") format("woff2");
  font-weight: normal;
  font-style: normal;
}

body {
  /* cursor */
  cursor: url(https://cur.cursors-4u.net/special/spe-3/spe302.ani),
    url(https://cur.cursors-4u.net/special/spe-3/spe302.png), auto;
  /* background */
  background-image: url("http://dl7.glitter-graphics.net/pub/2730/2730267baqumpdcd2.gif");
  background-attachment: scroll;
  background-repeat: repeat;
  background-size: 25%;
  width: 100vw;
}

/* paragraph settings */
p {
font-family: Puff;
}

manifesto {
  font-family: "Jaquard 12";
  font-size: 3em;
}

/* link color */
a {
  text-decoration: none;
}

#f_profiles{
  z-index: 9999;
  display: inline-block;
  position: relative;
  color: rgba(96, 52, 177, 0.445);
}

#f_profiles:hover{
  color: rgba(192, 171, 231, 0.445);
}

#back {
display: block;
margin-left: 20px;
margin-top: 20px;
margin-bottom: 20px;
width: 100%;
}

#construction {
  width: 50%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

#welcome {
  display: inline-block;
  position: absolute;
  margin-left: -1212px;
  margin-top: -89px;

}

/* hidden scrollbar */
html {
  overflow: scroll;
  overflow-x: hidden;
}
::-webkit-scrollbar {
  width: 0; /* remove scrollbar space */
  background: transparent; /* to make scrollbar invisible */
}
::-webkit-scrollbar-thumb {
  background: transparent;
}

/* change highlight color */
::selection {
  /* Change highlight background color */
  background: #290e5c;
  /* Change highlight text color */
  color: #adc9e9;
}

.container_friend {
  display: block;
  border-width: 1em;
  border-style: solid;
  border-image: url("https://dl.dropbox.com/s/v8iy6a8feyq041p/blue%20ver.png") 8
    fill round;
  margin-left: auto;
  margin-right: auto;
  width: 35em;
  height: 94vh;
  position: relative;
  padding: 5px;
  z-index: 4; 
}

#stickers {
  display: inline-block;
  position: absolute;
  margin: 0.5em;
}

.lace-box2 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 17em;
  height: 17em;
  margin: auto;
  border: 32px solid transparent;
  border-image-source: url('https://i.ibb.co/qMGNvy0j/laceydivborder2.png');
  border-image-slice: 32 fill;
  border-image-repeat: round;
  background-image: url(https://hillhouse.neocities.org/materials/backgrounds/images/morris-green.png);
  background-clip: padding-box;
  padding: 2em;
  box-sizing: border-box;
  image-rendering: pixelated;
}

.lace-box2 > img {
  width: 50%;
}

#sis1 {
  border-radius: 25px;
  padding: 0.5em;
  background-color: #911c1c;
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  bottom: 0.5em;
}

.divider{
  margin: 1em 0 0.8em 0;
  display: block;
  height: 1.8em;
  width: 99.8%;
  border: 0;
  border-color: #000;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background: url(https://64.media.tumblr.com/00701f7be6868d1d70ca6b09acab276b/fd19c2da898a2f1b-63/s250x400/26646dc1e0d35c915faefe2ddb96161453232e1d.gifv)
}

h1{
  display: block;
  text-align: center;
  font-family: Kablammo;
  font-weight: 100;
  color: rgb(182, 52, 68);
  margin: 0 0 0.5em 0;
}

/* main container with border */
.container {
  border-width: 8px;
  border-style: solid;
  border-image: url("https://dl.dropbox.com/s/v8iy6a8feyq041p/blue%20ver.png") 8
    fill round;
  margin: auto;
  width: 884px;
  height: 365px;
  position: relative;
  padding: 5px;
  z-index: 4;
}

/* first container */
.container-one {
  background-image: url("https://i7.glitter-graphics.org/pub/849/849367pwvmhlf04u.png");
  background-repeat: repeat;
  background-position-x: center;
  width: 880px;
  position: relative;
  left: 1px;
  height: 170px;
  box-shadow: 0 0 8px 8px rgb(240, 249, 253) inset;
  z-index: 5;
}

/* container under the main container */
.container-two {
  border-width: 8px;
  border-style: solid;
  border-image: url("https://dl.dropbox.com/s/v8iy6a8feyq041p/blue%20ver.png") 8
    fill round;
  margin: auto;
  margin-top: 20px;
  width: 476px;
  height: 365px;
  position: relative;
  padding: 5px;
  z-index: 4;
}

/* name "blank's website" */
#name {
  font-family: Kablammo;
  font-size: 4em;
  -webkit-text-stroke: 2px rgb(75, 31, 97);
  color: rgb(237, 246, 213);
  margin-top: 0em;
  margin-left: 2.5em;
}

/* seamless marquee from https://sadgrl.online/resources */
.marquee {
  overflow: hidden;
  white-space: nowrap;
}

.scrolling {
  animation: marquee 10s linear infinite;
  display: inline-block;
  padding-right: 0px;
}

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

/* imgs used as top border */
.container-one img {
  margin-right: -4px;
  height: 2em;
}

/* outer image */
.outer {
  /* (c) reijeoh */
  border-width: 7px;
  border-style: solid;
  border-image: url("https://64.media.tumblr.com/0bf9b5b1bc56ef2bd4a443aeec3dab08/e7a46821cfe7af87-12/s250x400/d314d89c3d9fb927d552b57cf19abec1d0b29c13.png")
    7 fill round;
  border-radius: 15px;
  width: 115px;
  height: 115px;
  margin-top: 10px;
  display: inline-block;
  vertical-align: top;
}

/* inner image */
.inner {
  width: 100%;
  height: 100%;
  background-image: url("https://64.media.tumblr.com/7c8f5321c1eecda3106bc89a079d8fad/b9d52d431e4a1ac6-24/s250x400/4d668247011ec6c5ce41eaf4595a809ba9b5756d.gifv");
  background-size: cover;
}

/* textbox windows 98-style from loveberry: https://loveberry.nekoweb.org/resources/box */
.title-bar-controls button {
  border: none;
  border-radius: 0;
  box-sizing: border-box;
  color: transparent;
  min-height: 23px;
  min-width: 75px;
  padding: 0 12px;
  text-shadow: 0 0 #222;
}

.title-bar-controls button {
  background: silver;
  box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px grey,
    inset 2px 2px #dfdfdf;
}

.title-bar-controls button:not(:disabled):active {
  box-shadow: inset -1px -1px #fff, inset 1px 1px #0a0a0a,
    inset -2px -2px #dfdfdf, inset 2px 2px grey;
  text-shadow: 1px 1px #222;
}

@media (not(hover)) {
  button:not(:disabled):hover {
    box-shadow: inset -1px -1px #fff, inset 1px 1px #0a0a0a,
      inset -2px -2px #dfdfdf, inset 2px 2px grey;
  }
}

.title-bar-controls button:focus {
  outline: 1px dotted #000;
  outline-offset: -4px;
}

.title-bar-controls button::-moz-focus-inner {
  border: 0;
}

.window,
.title-bar {
  font-family: "Jaquard 12", Arial;
  -webkit-font-smoothing: none;
  font-size: 1.5em;
}

.window {
  box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #dfdfdf,
    inset -2px -2px #808080, inset 2px 2px #ffffff;
  background: #c0c0c0;
  color: #000;
  vertical-align: top;
  padding: 3px;
  margin-top: 10px;
  left: 0.4em;
  width: 60%;
  display: inline-block;
}

.title-bar {
  background: linear-gradient(
    90deg,
    rgb(246, 189, 193),
    rgb(170, 233, 244),
    rgb(212, 235, 152)
  );
  padding: 3px 2px 3px 3px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title-bar-text {
  font-weight: 500;
  color: rgb(249, 149, 169);
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: rgb(75, 31, 97);
  letter-spacing: 0;
  margin-right: 24px;
}

.title-bar-controls {
  display: flex;
}

.title-bar-controls button {
  padding: 0;
  display: block;
  min-width: 16px;
  min-height: 14px;
}

.title-bar-controls button:active {
  padding: 0;
}

.title-bar-controls button:focus {
  outline: none;
}

.title-bar-controls button[aria-label="Minimize"] {
  background-image: url("https://raw.githubusercontent.com/jdan/98.css/main/icon/minimize.svg");
  background-position: bottom 3px left 4px;
  background-repeat: no-repeat;
}

.title-bar-controls button[aria-label="Maximize"] {
  background-image: url("https://raw.githubusercontent.com/jdan/98.css/4a2282dd9170cabf730fb5803d1153d86b2e94e3/icon/maximize.svg");
  background-position: top 2px left 3px;
  background-repeat: no-repeat;
}

.title-bar-controls button[aria-label="Close"] {
  background-image: url("https://raw.githubusercontent.com/jdan/98.css/main/icon/close.svg");
  background-position: top 3px left 4px;
  background-repeat: no-repeat;
  margin-left: 2px;
}

.window-body {
  margin: 8px;
}

/* scrolls */
.fieldset {
  border: 1px gray solid;
  box-shadow: white 1px 1px 0px inset, white 1px 1px 0px, white 0px 1px 0px,
    white 1px 0px 0px;
  margin: 0;
  padding: 10px;
  overflow-y: auto;
  height: 100px;
}

/* marked text */
mark {
  font-family: Antiqua;
  background: linear-gradient(rgb(195, 83, 251) 50%, rgb(97, 169, 181));
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 1em;
}

/* "socials"-box */
.socials {
  border: 3px solid rgb(178, 236, 246);
  height: 180px;
  background: rgb(246, 252, 231);
  width: 22%;
  position: relative;
  right: 0.5em;
  left: 0.2em;
  margin-top: 10px;
  margin-bottom: 10px;
  display: inline-block;
  box-shadow: inset 13px 0 6px -10px rgb(151 133 196 / 30%),
    inset -13px 0 6px -10px rgb(151 133 196 / 30%),
    inset 0 13px 6px -10px #f0f0f0, inset 0 0 0 -10px rgb(66 66 66 / 30%);
}

/* socials-buttons */
#social_buttons {
  border-radius: 50px;
  border: 3px solid rgb(106, 170, 177);
  background-image: url("https://64.media.tumblr.com/66dd2cc3cb12a483438f929be08f0a50/bfa141952e175b15-f4/s500x750/e3e9b772969ccb59835c74e9399dfb676d031558.gifv");
  background-size: cover;
  font-family: Kablammo;
  font-size: 1.25em;
  color: rgb(98, 78, 148);
  width: 80%;
  margin-top: 10px;
  margin-left: 10%;
  margin-right: 10%;
}

/* music player */
/*-------MUSIC PLAYER BY GLENTHEMES-------*/
#glenplayer02 {
position:relative;
margin: auto;
top:0px;
left:0px;
width:450px;
z-index:5;
    /*(c) solielios*/
border-width:12px;
border-style:solid;
border-image: url("https://files.catbox.moe/o4q22b.png") 11 fill round;  
}

.ex2_1 {
  display: inline-block;
width: 439px;
height: 20px;
border-radius: 10px;
background-image: url("https://i.scdn.co/image/ab67616d0000b273d2d0e13579ab33ae8d3d05e4");
background-size: 25%;
opacity:1;
margin: auto;
padding:5px;        
}

.ex2_2 {
  display: inline-block;
width: 439px;
height: 20px;
border-radius: 10px;
background-image: url("https://m.media-amazon.com/images/I/81ipudxuEkL._UF894,1000_QL80_.jpg");
background-size: 25%;
opacity:1;
margin: auto;
padding:5px;        
}

#glenplayer02 a {text-decoration:none;}
 
#glenplayer02 > div {
align-self:center;
-webkit-align-self:center;
}
 
.music-controls {
user-select:none;
-webkit-user-select:none;
font-size:13px;
cursor:pointer;
display: inline-block;
}
 
.playy, .pausee {
display: inline-block;
} 

.playy:hover, .pausee:hover {
  color: rgb(189, 68, 88) !important;
}

 
.sonata {
margin-left:10px;
display: inline-block;
}
 
.labeltext {
display: inline-block;
margin-left:8px;
font-family:courier new;
font-size:20px;
}

#zelda {
  display: inline-block ;
  position: absolute;
  width: 10em;
  left: -10em;
  margin-top: -1em;
}

/* spinning disc image */
.disk {
display: inline-block;
animation-duration: 8s;
animation-iteration-count: infinite;
animation-name: spin;
animation-timing-function: linear;
position: absolute;
width: 300px;
left: -223px;
bottom: -76px;
}

@keyframes spin {
from { transform: rotate(0deg) }
to { transform: rotate(360deg) }
}

/* paragraph about boarding school music */
#music {
  display: inline-block;
  margin-top: 15px;
  margin-bottom: 15px;
  margin-left: 40px;
  margin-right: 15px;
  color: rgb(195, 83, 251);
}

/* chat */
#chattable {
  display: inline-block;
  height: 400px;
  position: relative;
  top: -350px;
  left: -600px;
  border-width:7px;
  border-style:solid;
  border-image: url("https://dl.dropbox.com/s/v8iy6a8feyq041p/blue%20ver.png") 7 fill round; 
}

#acnh {
  display: inline-block;
  position: absolute;
background-image: url("https://hillhouse.neocities.org/materials/backgrounds/images/pattern-blueberries.png");
mask-image: url("https://files.catbox.moe/u1ozp2.png");
mask-size: 169%;
mask-repeat: no-repeat;
mask-position: center;  
width: 600px;
height: 600px;   
text-align: center;
margin-top: -10em;
right: -40em;
}

#acnh p {
  margin-left: auto;
  margin-right: auto;
  margin-top: 110px;
  margin-bottom: auto;
}

#acnh ul{
  padding: 0%;
}

#acnh li{
  font-family: Puff;
}

#acnh p,li {
  width: 60%;
  display: inline-block;
  color: rgb(240, 249, 253);
  text-shadow: #290e5c 1px 0 10px;
}


/* washi tape */
.taped::before {
  background-image:url('https://hillhouse.neocities.org/materials/stickers/images/tape/flowers-greenleaves.png');
  background-repeat:no-repeat;
  display:inline-block;
  content:" ";
  position:absolute;
  height:50px;
  width:150px;
background-size:contain;
  top:-30px;
  left:20%
}

.cornertaped.taped::before {
  top:-30px;
  left:-30px;
  transform:rotate(-25deg)
}

.taped:nth-of-type(4n)::before, .taped ~ div .taped:nth-of-type(6n)::before {
        background-image:url('https://hillhouse.neocities.org/materials/stickers/images/tape/pattern-practicaltaxidermy.png');
        left:20px 
        }

.taped:nth-of-type(8n)::before {
      background-image:url('https://hillhouse.neocities.org/materials/stickers/images/tape/stars-milkyway.png'); 
      left:30%
      }

.taped:nth-of-type(odd)::before {
      background-image:url('https://hillhouse.neocities.org/materials/stickers/images/tape/pattern-wavy.png');
      right:20px 
      }

.taped:nth-of-type(3n)::before {
      background-image:url('https://hillhouse.neocities.org/materials/stickers/images/tape/flowers-daisies2.png'); 
      left:10%  
      }
    
  .taped:nth-of-type(5n)::before {
      background-image:url('https://hillhouse.neocities.org/materials/stickers/images/tape/flowers-blue.png'); 
      left:60%
      }

.taped:nth-of-type(7n)::before, article.taped ~ div article.taped:first-of-type::before {
      background-image:url('https://hillhouse.neocities.org/materials/stickers/images/tape/hall-trickortreat.png'); 
      left:30%
      }

article.taped ~ div article.taped:nth-of-type(4n)::before {
   background-image:url('https://hillhouse.neocities.org/materials/stickers/images/tape/stars-moon.png'); 
   left:70%
   }

#boardingpass {
  display: inline-block;
  position: absolute;
  right: -730px;
  top: -3em;
  rotate: -12deg;
  z-index: 4;
}

#boardingpass img{
  width: 79%;
  display: inline-block;
}

#guten {
  display: inline-block;
  position: absolute;
  width: 15em;
  left: 25em;
  margin-top: 4em;
}

.img-floatinganim {
animation-name: floating; 
animation-duration: 3s; 
animation-iteration-count: infinite; 
animation-timing-function: ease-in-out;
width: 40%;
} 

@keyframes floating { 
0% { 
transform: translate(0,  0px); 
} 

50%  { 
transform: translate(0, 40px); 
} 

100%   {
transform: translate(0, -0px); 
} 
} 

.fish > img{
  display: inline-block;
  width: 400px;
}

.fish > div{
  display: inline-block;
  position: absolute;
  width: 400px;
  left: -200px;
  margin-top: 11em;
  padding: 15px;
  background-color: rgb(197, 229, 122);
  text-align: center;
}

.fish {
  display: inline-block;
  position: absolute;
  width: 400px;
  margin: auto;
  left: 55%;
  margin-top: -100px;
}

#pot {
  width: 40%;
  position: absolute;
  display: inline-block;
  margin-left: -13em;
}

#noodles {
  position: absolute;
  display: inline-block;
  margin-left:19em;
  margin-top: 180px;
  width: 30%;
}

#tab{
  margin-left: -2em;
  margin-top: 5em;
  position:absolute;
  width:100px;
  z-index:9999999999;
  display: inline-block;
}

#tab .sp{
  height:14px;
  width:370px;
  margin:-17px 0 0 -10px;
  overflow:hidden;
  position:absolute;
  background:url(https://31.media.tumblr.com/89d0a73dbfd39d6e6dfcd157efacf73a/tumblr_inline_nc4ltugMJI1rh7826.png);
}

#tab .nb{
  width:350px;
  margin-bottom:20px;
  padding:5px 10px 5px 10px;
  background:url(https://31.media.tumblr.com/905e072082d7e170a96e198cf24af6d9/tumblr_inline_nc4ltqDhD21rh7826.png);
  border:1px solid rgba(0,0,0,0.1);
  -webkit-border-bottom-right-radius: 6px;
  -webkit-border-bottom-left-radius: 6px;
  -moz-border-radius-bottomright: 6px;
  -moz-border-radius-bottomleft: 6px;
  border-bottom-right-radius: 6px;
  border-bottom-left-radius: 6px;
  z-index:999999;
  box-shadow:rgba(0,0,0,0.07)5px 5px;
  font-size:11px;
  line-height:13px;
}
    
#mana {
  display: inline-block;
  position: absolute;
  right: 30px;
  margin-top: 20em;
}

#mana img{
  position: absolute; 
  display: inline-block; 
  z-index: -1;
}

.malice {
  z-index: 5;
  display: inline-block;
  width: 400px;
  height: auto;
  --borderwidth: 60px;
    box-sizing: content-box;
    border: var(--borderwidth) solid;
    border-image-source: url(https://files.catbox.moe/dd4bnq.png);
    border-image-slice: 84;
    border-image-repeat: round;
    border-radius: 0px;
    outline: none;
    margin: var(--borderwidth);
}
.malice > .mizer {
  font-family: "Jaquard 12";
  font-size: 1.5em;
  width: auto;
  height: auto;
  padding: 20px;
    background-color: #dfdfdf;
/* have this as an element inside your container - for example:
    <article class="yourcontainer">
    <div class="containercontent">
        and your content goes here!
    </div>
    </article>
 */
}

.stamps {
  display: inline-block;
  position: absolute;
  margin-top: 2em;
  margin-left: 30px;
  width: 200px;
  height: 50em;
}

.stamps img{
  width: 100%;
  margin: 10px;
}

#wipe {
  position: absolute;
  display: inline-block;
  text-align: center;
  font-family: "Kablammo";
  width: 200px;
  right: -8em;
  top: 3em;
  font-size: 250%;
}

.sketchbook {
  display: inline-block;
  position: absolute;
  left: 22em;
  margin-top: 26em;
  width: 335px;
  height: 506px;
}

.sketchbook > img {
  display: inline-block;
}

.sketchbook > img {
  filter: drop-shadow(1px 1px 0 #23385e) 
  drop-shadow(-1px 1px 0 #23385e) 
  drop-shadow(0 2px 0 #23385e) 
  drop-shadow(0 -1px 0 #23385e) 
  drop-shadow(0 1px 1.5px #23385e) 
  drop-shadow(0 -1px 1.5px #23385e) 
  drop-shadow(1px -1px 1.5px #23385e) 
  drop-shadow(-1px -1px 1.5px #23385e);   
}

.sketchbook > div {
  font-family: Antiqua;
color: #ffffff;
text-shadow: 2px 0 #23385e, -2px 0 #23385e, 0 2px #23385e, 0 -2px #23385e,
             1px 1px #23385e, -1px -1px #23385e, 1px -1px #23385e, -1px 1px #23385e;
  border-width:20px;
border-style:solid;
border-image: url("https://dl.dropbox.com/s/v8iy6a8feyq041p/blue%20ver.png") 8 fill round;
  position: relative;
  z-index: -1;
  width: 350px;
  top: -25em;
  left: 18em;
  padding: 10px;
  padding-left: 50px;
}

#whisker {
  display: inline-block;
  position: absolute;
  right: 10em;
  margin-top: 50em;
}

#whisker > p{
  display: inline-block;
  width: 100px;
  padding: 1em;
  border-width: 20px; 
border-style: solid; 
border-image: url("https://files.catbox.moe/fmru60.gif") 6 fill round;          
  position: absolute;
  z-index: -1;
  text-align: center;
  color: #290e5c;
  top: 3em;
  left: 1em;
}