/* custom font */
@font-face {
  font-family: "hearts";
  src: url("https://dl.dropbox.com/s/1479f8x52y3z5u4/rainyhearts.ttf");
}

/* cursor */
* {
  cursor: url(https://cur.cursors-4u.net/others/oth-1/oth4.cur), auto;
  box-sizing: border-box;
}

/* scrollbar */
::-webkit-scrollbar {
width: 16px
}
 
::-webkit-scrollbar:horizontal {
height: 17px
}
 
::-webkit-scrollbar-corner {
background: #eee
}
 
::-webkit-scrollbar-track:vertical {
background: linear-gradient(90deg, #e5e5e5, #f0f0f0 20%)
}
 
::-webkit-scrollbar-track:horizontal {
background: linear-gradient(180deg, #e5e5e5, #f0f0f0 20%)
}
 
::-webkit-scrollbar-thumb {
border: 1.5px solid #888;
border-radius: 3px;
box-shadow: inset 0 -1px 1px #fff, inset 0 1px 1px #fff;
background-color: #eee;
}
 
::-webkit-scrollbar-thumb:vertical {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAKCAIAAADpZ+PpAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAADrSURBVChTTc5LboJQGAXguyoCu4ERCzAGlRk7UOwGWIDh0s4M4kxb06RSq/jAB6AxJkJ4lTDrue3AnvyzP+fLId+/yfM8juP7PQmCCOf7B3e+ZD+O40RRVFW12VQUpd3r9U3T2m4OpKoqWZYNwzBZLEqfh0N7NnvfrPcEWlEUWZb9mWF4Ph6D0ylcLbfM5HkeJrhGA2hb15/QXnv+w7RYXsDatjOdvnmrHSnLEizMNE2v11sUXQBCnn98kbquBUGQJAlmq9WB2e3qg4HJdqKkaRql1HGc0WgMcDJ5dd0F24kediZJ8t/ELT69H+8py0CYSIO5AAAAAElFTkSuQmCC") no-repeat 50%, linear-gradient(90deg, #eee 45%, #ddd 0, #bbb)
}
 
::-webkit-scrollbar-thumb:horizontal {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAJCAYAAAALpr0TAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAADcSURBVChTNZBLqoUwEEQrURQUxZGCvy24ACfiityJi7tv8GauQoPxk5tquA2RQ9vVVYk6z9NZaxFFEe77htYazjk8z4MwDIVZ+rourOuKaZrwvi+WZcE8z1BKCbPPCjk4DAO2bRP1OI7wLiL6Mbd7J408z1GWpQwWRYGqqiQG+03TgMu0MacfUN4qANmn8UOv9MjW3sKaSm7iIdOSlziOQ3LScd93aPonSYK6riVLlmVo21aYfVqzND9pmqLrOlGT+76XbcxLZkb19/l3fEP+oF0cx8KMEASBsDEGX2/CgZCHkg+8AAAAAElFTkSuQmCC") no-repeat 50%, linear-gradient(180deg, #eee 45%, #ddd 0, #bbb)
}
 
::-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 {
height: 17px
}
 
::-webkit-scrollbar-button:vertical:start:decrement {
background: white;
background-image: url("https://cdn.discordapp.com/attachments/904308736712138793/1001299199633141851/download.png");
background-repeat: no-repeat;
background-position: center;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
 
::-webkit-scrollbar-button:vertical:start:increment {
display: none;
}
 
::-webkit-scrollbar-button:vertical:end:decrement {
display: none;
}
 
::-webkit-scrollbar-button:vertical:end:increment {
background: white;
background-image: url("https://cdn.discordapp.com/attachments/904308736712138793/1001299200052576387/87ae92e1-3894-4469-b1b9-aedf5f04975c.png");
background-repeat: no-repeat;
background-position: center;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

/* body background */
body.home-page {
  background-image: url("https://i.pinimg.com/1200x/09/73/f2/0973f245b930010816e7251a4856f9b3.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  font-family: hearts; 
  color: black;
}

body.blog-page {
  background-image: url("https://i.pinimg.com/736x/f0/0b/2a/f00b2acfad670aea3ba56c1e012f969b.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  font-family: hearts; 
  color: black;
}

body.moosic-page {
  background-image: url("https://i.pinimg.com/736x/f2/6d/6a/f26d6a4240227c221e08ace6a451dc8b.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  font-family: hearts; 
  color: black;
}



/* main container */
main {
  position: relative;
  width: 1000px;
  height: 700px;
  margin: 60px auto;
  background: white;
  border: 9px solid;
  border-image: url("https://64.media.tumblr.com/6f0c2efb2b0902a5907c60c9d1dcad9e/9b9e0ed89a039867-11/s75x75_c1/90da82e9674eafbcc1f84f71303f353726a700b5.pnj")
    8 fill round;
  overflow-y: scroll;
  position: relative;
}

/* row holding favicon + player + favicon */
.music-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
}

/* favicons */
.music-icon {
  width: 18px;
  height: 18px;
  image-rendering: pixelated;
}

/* music player */
#music {
  position: relative;
  background: url('https://file.garden/ZRYtsnIP2EXOR4Kw/Site%20Files/musicplayer.png') no-repeat;
  background-size: 100% 100%;
  height: 50px;
  width: 305px;
  border: 1px solid #000000;
  overflow: hidden;
}

/* invisible youtube click layer */
#music iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.0000001;
  z-index: 1;
}

/* text inside player */
#music .music-text {
  position: absolute;
  top: 10px;
  left: 55px;
  z-index: 2;
}

#music span {
  display: block;
  color: #ffffff;
  font-size: 12px;
  text-align: left;
}


.container {
  display: flex;
  
  gap: 10px; /* Optional: adds consistent space between items */
}

.item {
  background-color: transparent;
  padding: 0px;
  border: 0;
}


.link-box {
  margin: 15px;
  padding: 12px;
  background: white;

  border: 6px solid;
  border-image: url("https://64.media.tumblr.com/6f0c2efb2b0902a5907c60c9d1dcad9e/9b9e0ed89a039867-11/s75x75_c1/90da82e9674eafbcc1f84f71303f353726a700b5.pnj")
    6 fill round;

  font-size: 14px;
}

.link-box h3 {
  margin-top: 0;
  font-size: 16px;
  text-decoration: underline;
}

.link-box a {
  color: black;
  text-decoration: none;
}

.link-box a:hover {
  text-decoration: underline;
}


/* banner */
/* General pseudo-element style for spacing */
main::before {
  content: "";
  display: block;
  height: 300px;
  background-size: cover;
  background-position: center;
}

/* Home page banner */
body.home-page main::before {
  background-image: url("https://i.pinimg.com/originals/e5/8b/34/e58b34c3bbb397575341d6880198eb87.gif"); /* your home page banner */
}

/* Blog page banner */
body.blog-page main::before {
  background-image: url("https://i.pinimg.com/736x/a5/56/b4/a556b44759d9e89e26f5c6385e144939.jpg"); /* your blog page banner */
}

/* Music page banner */
body .moosic-page main::before {
  background-image: url("hhttps://i.pinimg.com/originals/96/a2/02/96a2022852a1fec5af8634b22c2fb284.gif"); /* your music page banner */
}

/* content */
.content {
  padding: 15px;
}

/* stamps */
.stamps img {
  margin: 3px;
}



/* overlay grain */
html::before {
  content: "";
  position: fixed;
  inset: 0;
  background: linear-gradient(
    rgba(0,0,0,0) 50%,
    rgba(0,0,0,0.16) 50%
  );
  background-size: 100% 2px;
  pointer-events: none;
  z-index: 2;
}