html, body {
  cursor: url("cursors/banjo-paw.png"), auto;
  background-color: #010b0a;
}

a *,
button * {
  cursor: url("cursors/banjo.png"), pointer;
}

a,
button,
input,
label,
select,
textarea,
[role="button"],
[onclick] {
  cursor: url("cursors/banjo.png"), pointer;
}
/* -------------------------------------------------------- */
/* VARIABLES */
/* -------------------------------------------------------- */

/* Variables are used like this: var(--text-color) */
:root {
  /* Background Colors: */
  --background-color: #ffffff;
  --content-background-color: #5d3a10;
  --sidebar-background-color: #3a1c12;

  /* Text Colors: */
  --text-color: #c0a996;
  --sidebar-text-color: #b9875d;
  --link-color: #d1aa94;
  --link-color-hover: #f39e59;

  /* Text: */
  --font: Arial, sans-serif;
  --heading-font: Georgia, serif;
  --font-size: 13px;

  /* Other Settings: */
  --margin: 8px;
  --padding: 6px;
  --border: none;
  --round-borders: 0px;
  --sidebar-width: 228px;
}

/* -------------------------------------------------------- */
/* BASICS */
/* -------------------------------------------------------- */

* {
  box-sizing: border-box;
}

body {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-height: 100vh;
  font-size: var(--font-size);
  margin: 0;
  padding: var(--margin);
  color: var(--text-color);
  font-family: var(--font);
  line-height: 1.2;
  background: var(--background-color);
  background-image: url("https://cdn.imgchest.com/files/efc8ffb5a904.png");
  overflow-x: hidden;
}

::selection {
  /* (Text highlighted by the user) */
  background: rgba(0, 0, 0, 0.2);
}

mark {
  /* Text highlighted by using the <mark> element */
  text-shadow: 1px 1px 4px #d19628;
  background-color: inherit;
  color: #c2a493;
}

/* Links: */
a {
  text-decoration: underline;
}

a,
a:visited {
  color: var(--link-color);
}

a:hover,
a:focus {
  color: var(--link-color-hover);
  text-decoration: none;
}

/* -------------------------------------------------------- */
/* LAYOUT */
/* -------------------------------------------------------- */

.layout {
  width: 1000px;
  display: grid;
  grid-gap: var(--margin);
  grid-template: "header header header" auto "leftSidebar main rightSidebar" auto "footer footer footer" auto / var(--sidebar-width) auto var(--sidebar-width);
  /* Confused by the grid? Check out my tutorial: https://petrapixel.neocities.org/coding/positioning-tutorial#grid */
}

main {
  grid-area: main;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--padding);
  background: var(--content-background-color);
  border: var(--border);
  border-radius: var(--round-borders);
  position: relative;
}

/* -------------------------------------------------------- */
/* HEADER */
/* -------------------------------------------------------- */

header {
  grid-area: header;
  font-size: 1.2em;
  border: var(--border);
  border-radius: var(--round-borders);
  background: transparent;
  padding: 0;
}

.header-content {
  padding: var(--padding);
  background: transparent; /* or your bg if you want contrast */
}


@font-face {
  font-family: "Amore";
  src: url("fonts/Amore.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Darkcastle";
  src: url("fonts/Darkcastle.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Cattcatt";
  src:url("fonts/Cattcatt.ttf") format("opentype");
  font-weight: normal;
  font-style: normal;
}

.header-title {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  font-family: "Amore", serif;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(48px, 10vw, 120px);
  font-weight: bold;
  color: #190d0d;
  z-index: 90;
  text-decoration: underline;
  pointer-events: none;
  text-shadow: 1px 1px 4px white;
  background-color: inherit;
}


.header-image {
  position: relative;
  width: 90%;
  height: 470px;
  margin: 0 auto;      /* THIS centers it */
  overflow: hidden;
  background: transparent;
  top:110px;
  -webkit-filter: drop-shadow(8px 8px 8px #222);
  filter: drop-shadow(5px 5px 5px #222);
  z-index:99;
  pointer-events: none;
}


.placeholder,
.actual-header {
  width: 100%;
  height: 100%;
  object-fit: cover;   /* THIS is the key */
}

/* -------------------------------------------------------- */
/* SIDEBARS */
/* -------------------------------------------------------- */

aside {
  grid-area: aside;
  border: var(--border);
  border-radius: var(--round-borders);
  overflow: visible;
  background: var(--sidebar-background-color);
  padding: var(--padding);
  color: var(--sidebar-text-color);
}

.left-sidebar {
  grid-area: leftSidebar;
}

.right-sidebar {
  grid-area: rightSidebar;
}

.sidebar-title {
  font-weight: bold;
  font-size: 1.2em;
  font-family: var(--heading-font);
}

.button-title {
  font-weight: bold;
  font-size: 25px;
  font-family: "Darkcastle";
  color:#190b20;
  text-shadow: 1px 1px 4px white;
}

.sidebar-section:not(:last-child) {
  margin-bottom: 3em;
}

.sidebar-section ul,
.sidebar-section ol {
  padding-left: 1.5em;
}

.sidebar-section > *:not(p):not(ul):not(ol):not(blockquote) {
  margin-top: 10px;
}

.sidebar-section li a {
  line-height: 3;
  list-style-type:none;
  padding: 0;
}

.li-text {
  position: relative;
  left: 65px; /* positive = right, negative = left */
}

.li-text1 {
  position: relative;
  left: 65px; /* positive = right, negative = left */
}


/* Sidebar Blockquote: */

blockquote {
  background: rgba(0, 0, 0, 0.1);
  padding: 15px;
  margin: 1em 0;
  border-radius: 10px;
  overflow: hidden;
}

.sidebar-section blockquote {
  background: rgba(0, 0, 0, 0.1);
  padding: 15px;
  margin: 1em 0;
  border-radius: 10px;
  overflow: hidden;
}

.sidebar-section blockquote > *:first-child {
  margin-top: 0;
}

.sidebar-section blockquote > *:last-child {
  margin-bottom: 0;
}

/* Site Button: */

.site-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.15s ease;
}

.site-button:hover{
    transform: scale(1.5);
  }

.site-button textarea {
  display: block;
  height:30px;
  margin-left: auto;
  margin-right: auto;
}

/* -------------------------------------------------------- */
/* FOOTER */
/* -------------------------------------------------------- */

footer {
  grid-area: footer;
  border: var(--border);
  border-radius: var(--round-borders);
  overflow: hidden;
  font-size: 0.75em;
  padding: 15px;
  background: var(--content-background-color);
  display: flex;
  justify-content: center;
}

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

footer a:hover,
footer a:focus {
  color: var(--link-color-hover);
}

/* -------------------------------------------------------- */
/* NAVIGATION */
/* -------------------------------------------------------- */

nav {
  margin-bottom: 3em;
}

nav .sidebar-title {
  margin-bottom: 0.5em;
}

nav ul {
  margin: 0 -5px;
  padding: 0;
  list-style-type:none;
  user-select: none;
}

nav ul li {
  margin-bottom: 0;
}

nav > ul li > a,
nav > ul li > strong {
  display: inline-block;
}

nav > ul li > a,
nav > ul li > details summary,
nav > ul li > strong {
  padding: 5px 10px;
}

nav > ul li > a.active,
nav > ul li > details.active summary {
  font-weight: bold;
}

nav ul summary {
  cursor: pointer;
}

nav ul ul li > a {
  padding-left: 30px;
}

summary {
  list-style-type:none;
  cursor: url("cursors/banjo.png"), pointer;
}

summary::-webkit-details-marker {
  display: none;
}

/* -------------------------------------------------------- */
/* CONTENT */
/* -------------------------------------------------------- */

main {
  line-height: 1.5;
}

main a,
main a:visited {
  color: var(--link-color);
}

main a:hover,
main a:focus {
  color: var(--link-color-hover);
  text-decoration-style: wavy;
}

main p,
main .image,
main .full-width-image,
main .two-columns {
  margin: 0.75em 0;
}

main ol,
main ul {
  margin: 0.5em 0;
  padding-left: 1.5em;
}

main ol li,
main ul li {
  margin-bottom: 0.2em;
  line-height: 1.3;
}

main ol {
  padding-left: 2em;
}

main blockquote {
  background: rgba(0, 0, 0, 0.1);
  padding: 15px;
  margin: 1em 0;
  border-radius: 10px;
}

main pre {
  margin: 1em 0 1.5em;
}

main code {
  text-transform: none;
}

main center {
  margin: 1em 0;
  padding: 0 1em;
}

main hr {
  border: 0;
  border-top: var(--border);
  margin: 1.5em 0;
}

/* HEADINGS: */

main h1,
main h2,
main h3,
main h4,
main h5,
main h6 {
  font-family: var(--heading-font);
  margin-bottom: 0;
  line-height: 1.5;
}

main h1:first-child,
main h2:first-child,
main h3:first-child,
main h4:first-child,
main h5:first-child,
main h6:first-child {
  margin-top: 0;
}

main h1 {
  font-size: 1.5em;
}

main h2 {
  font-size: 1.4em;
}

main h3 {
  font-size: 1.3em;
}

main h4 {
  font-size: 1.2em;
}

main h5 {
  font-size: 1.1em;
}

main h6 {
  font-size: 1em;
}

/* COLUMNS: */

.two-columns {
  display: flex;
}

.two-columns > * {
  flex: 1 1 0;
  margin: 0;
}

.two-columns > *:first-child {
  padding-right: 0.75em;
}

.two-columns > *:last-child {
  padding-left: 0.75em;
}

/* -------------------------------------------------------- */
/* CONTENT IMAGES */
/* -------------------------------------------------------- */

.image {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
}

.full-width-image {
  display: block;
  width: 100%;
  height: auto;
}

.images {
  display: flex;
  width: calc(100% + 5px + 5px);
  margin-left: -5px;
  margin-right: -5px;
}

.images img {
  width: 100%;
  height: auto;
  padding: 5px;
  margin: 0;
  overflow: hidden;
}

/* -------------------------------------------------------- */
/* ACCESSIBILITY */
/* -------------------------------------------------------- */

/* please do not remove this. */

#skip-to-content-link {
  position: fixed;
  top: 0;
  left: 0;
  display: inline-block;
  padding: 0.375rem 0.75rem;
  line-height: 1;
  font-size: 1.25rem;
  background-color: var(--content-background-color);
  color: var(--text-color);
  transform: translateY(-3rem);
  transition: transform 0.1s ease-in;
  z-index: 99999999999;
}

#skip-to-content-link:focus,
#skip-to-content-link:focus-within {
  transform: translateY(0);
}

/* -------------------------------------------------------- */
/* MOBILE RESPONSIVE */
/* -------------------------------------------------------- */

/* CSS Code for devices < 800px */
@media (max-width: 800px) {
  body {
    font-size: 14px;
  }

  .layout {
    width: 100%;
    grid-template: "header" auto  "leftSidebar" auto "main" auto "footer" auto / 1fr;
    /* Confused by the grid? Check out my tutorial: https://petrapixel.neocities.org/coding/positioning-tutorial#grid */
  }

  
  .right-sidebar { 
    display: none;
  }

  aside {
    border-bottom: 1px solid;
    padding: 9px;
    font-size: 0.9em;
  }

  
  nav {
    padding: 0;
  }

  nav > ul {
    padding-top: 0.5em;
  }

  nav > ul li > a,
  nav > ul li > details summary,
  nav > ul li > strong {
    padding: 0.5em;
  }

  main {
    max-height: none;
    padding: 15px;
  }

  .images {
    flex-wrap: wrap;
  }

  .images img {
    width: 100%;
  }

  #skip-to-content-link {
    font-size: 1rem;
  }
}

  
  .mii {
    position: fixed;
    bottom:0;
    right: 0;
    z-index: 100;
    }
    
#man {
  position: relative;
  border-radius: 0% 0% 10% 10%;
  border: 0px solid #441f10;
  z-index: 0;
  overflow: hidden;
}

#man::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url();
  background-position: center;
  background-size: cover;
  opacity: 0.2; /* affects background only */
  z-index: -1;
}

#buttonbg {
  position: relative;
  z-index: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center; /* Y center */
  min-height:150px;
}

#buttonbg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url(https://cdn.imgchest.com/files/12f7ec310fea.png);
  background-position: center;
  background-size: auto 150px;
  background-repeat: no-repeat;
  z-index: -1;
}

#buttonbg .bg {
  display: block;
  width: 100%;
  height: auto; 

}

#buttonbg .content {
  position: absolute;
  inset: 0;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  pointer-events: auto;
}

#placeholder {
  position: relative;
  border-radius: 0%;
  border: 0px solid #441f10;
  z-index: 0;

}

#placeholder::before {
  content: "";
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  opacity: 0.2; /* affects background only */
  z-index: -1;
}

#meoww {
  clear: both;
}


.book1 {
  position: relative;
  border-radius: 5% 5% 5% 5%;
  border: 0px solid #441f10;
  z-index: 0;
  overflow: hidden;
}

.book1::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url(https://cdn.imgchest.com/files/95291a0d20c7.png);
  background-position: center;
  background-size: cover;
  z-index: -1;
}

.book2 {
  position: relative;
  border-radius: 5% 5% 5% 5%;
  border: 0px solid #441f10;
  z-index: 0;
  overflow: hidden;
}

.book2::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url(https://cdn.imgchest.com/files/b6815ed7e502.png);
  background-position: center;
  background-size: cover;
  z-index: -1;
}



/* dropdown wrapper */
.dropdown {
  position: relative;
}

/* dropdown menu */
.dropdown-content {
  display: none;
  position: absolute;
  top: 100%;              /* appears under the book */
  left: 0;
  background: url("https://cdn.imgchest.com/files/cacbd291ead6.png");
  background-size: cover;
  min-width: 215px;
  z-index: 10;
  filter:drop-shadow(3px 0px 5px black)
}

/* dropdown links */
.dropdown-content a {
  display: block;
  padding: 10px 14px;
  margin-left: 40px;
  color: #4d3829;
  text-decoration: none;
  font-size: 14px;
}

.dropdown-content a:hover {
  color: white;
  filter: drop-shadow(0px 0px 5px #8b0000);
}

/* show on hover */
.dropdown:hover .dropdown-content {
  display: block;
}

.sidebar-section,
#placeholder {
  overflow: visible;
}

#placeholder li{
  list-style: none;
}

.book1,
.book2 {
  transition: transform 0.15s ease;  
  display: flex;
  align-items: center;      /* vertical centering */
  height: 40px;             /* <-- controls book height */
  position: relative;
  overflow: hidden;

}

.book1::before,
.book2::before {
  content: "";
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: -1;
}

.book1:hover,
.book2:hover {
transform: translate(6px, -2px) scale(1.02);
cursor: url("cursors/banjo.png"), pointer;
}

*:active{
  cursor: url("cursors/banjo.png"), pointer;
}

.clocks{
  position: absolute;
  top: -10px;
  left: 10px;
  z-index: 500000;
  }
  
  
.pink-image {
  position: relative;

  img {
    filter: brightness(1.0) contrast(1.1);
  }

  &::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background: darkorange;
    opacity: 0.25; 
    pointer-events: none;
  }
}

  .tubes{
    transition: transform 0.15s ease;
    }

  .tubes:hover{
    transform: translate(-6px, -2px) scale(1.02);
    }
    
.media-row {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  border:4.5px #53340e solid;
  border-style: dashed;
}

.little-guys {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-left:10px;
}

.media-content {
  flex: 1;
}
.fuckoff{
  pointer-events: none;
}

#zoomcc {
  width: 100px;              /* real size */
  display: flex;             /* allows true centering */
  justify-content: center;
  align-items: center;
}

#zoomcc img {
  width: 100%;
  display: block;            /* removes inline weirdness */
  transition: transform 0.3s ease, filter 0.3s ease-in-out;
  transform-origin: center center;

}

#zoomcc:hover img {
  transform: scale(1.2);
  filter: brightness(40%) opacity(80%);

}

.linktp img {
  position: absolute;
  top: 10px;   /* or wherever you want it inside the poll */
  left: 177px;    /* adjust as needed */
  z-index:400;
  transition: opacity 0.5s ease;
  pointer-events:none;
}


.content-section {
  display: none;
  opacity: 0;
  transition: opacity 0.4s ease;


}

.hidden {
  display: none;
}

.content-section.active {
  display: block;
  opacity: 1;
}

.checkboxes{
    border: #4a2e0d 5px dashed;
    margin-top:25px;
  }
  
.checkboxes h2{
  padding-left:30px;
  padding-top:10px;
  }
  
.checkboxes h3{
  padding-left:30px;
  padding-top:5px;
  }
  
  ul.task-list {
    padding-left:20px;
    padding-bottom:10px;
  }
  
  ul.task-list li.task-list-item{list-style-type:none;}
  
ul.hoarding {
  padding-left: 40px;
  padding-bottom: 10px;
}

ul.hoarding li.hoardinger::marker {
  content: "★ ";
}

ul.hoarding.finished li.finished::marker {
  content: "✦ ";
}

ul.hoarding.oneshot li.oneshot::marker {
  content: "✪ ";
}

ul.hoarding.dropped li.dropped::marker {
  content: "✱ ";
}

ul.wishlist {
  padding-left: 40px;
  padding-bottom: 10px;
}

ul.wishlist li.wishlisto::marker {
  content: "✫ ";
}

ul.comics {
  padding-left: 40px;
  padding-bottom: 10px;
}

ul.comics li.comicso::marker {
  content: "❅ ";
}
    

        .iframe-container {
  width: 500px;          /* or whatever your “barrier” is */
  max-width: 100%;       /* never overflow page */
  overflow: hidden;      /* hides anything that might stick out */
}

.iframe-container iframe {
  width: 100%;           /* scale to container */
  height: auto;          /* adjust height if needed */
  display: block;        /* removes tiny inline spacing */
}
        
#conteiner {
      overflow: scroll;
      overflow-x: hidden;
      height: 160px;
      padding: 1rem;
    }
    

  .blnks-dvdrs{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom:15px;
    }
    .blnks-dvdrs img{
      width:150px;
      height:20px;
    }
    
    #container {
  height: 55em;
  overflow-y: scroll;
  overflow-x: hidden;
  padding: 1rem;
  background-image:url("https://cdn.imgchest.com/files/86574ac2da61.jpg");
}

.littletags{
  font-size:12px;
  }
  
  #showcase{
    position: sticky;
  top: -16px;
  background: #615e42;   /* IMPORTANT so text doesn’t overlap */
  padding: 5px 0;
  z-index: 1;
  text-align:center;
    }
    
/* two-column section */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr; /* left / right */
  gap: 1rem;
  margin-bottom: 1rem;
}

/* optional styling */
.left,
.right,
.full-width {
  padding: 1rem;
  border: 3px solid rgb(0, 0, 0, 0.2);
  background-color:rgb(97, 94, 66, 0.9);
}

#container h3 {
  position: sticky;
  top: -16px;
  background: #615e42;   /* IMPORTANT so text doesn’t overlap */
  padding: 5px 0;
  z-index: 1;
  color:#e4dad3;
}

#container h4{
  color:#c1a997;
  padding: 5px 0;
}

#container mark{
  color: #efe6d1;
  text-shadow: 1px 1px 4px #85c743;
  background-color: inherit;
  }

#container p{
  color:#d9ded3;
  }

#container p a,
#container li a,
#container li{
  color:#e4dad3;
  }
  
  #container ul li::marker,
  #container ol li::marker{
    color:#c1a997;
  }
  
  #container p a:hover,
  #container li a:hover{
  color:#d9ded3;
  }
  

    .web-src,
    .web-src1{
  border: #401d11 5px dashed;
  border-top:#401d11 10px solid;
  margin-top: 25px;
  margin-left: 1px;
  padding-bottom: 10px;
  font-size:15px;
  /* scrollbox stuff */
  max-width: 360px;        /* CHANGE THIS */
  height: 260px;       /* CHANGE THIS */
  overflow-y: auto;    /* vertical scrolling */
  overflow-x: hidden; /* no horizontal scroll */
}

    .web-src h2,
    .web-src1 h2{
  position: sticky;
  top: 0;
  background: #401d11;
  color:#876c46;
  padding-bottom: 3px;
  padding-left:5px;
}

    .web-src ul {
      padding-left: 50px;
    }
    
    .web-src1 ul {
      padding-left: 10px;
    }
    
  .web-src::-webkit-scrollbar,
  .web-src1::-webkit-scrollbar {
  width: 8px;
}

.web-src::-webkit-scrollbar-thumb,
.websrc1::-webkit-scrollbar-thumb {
  background: #401d11;
  border-radius: 10px;
}

.web-src::-webkit-scrollbar-track,
.web-src1::-webkit-scrollbar-track {
  background: transparent;
}

#web-building {
  width: 380px;
  height: 200px;
  position: relative; /* THIS is the anchor */
}

#graphics {
  width: 380px;
  height: 200px;
}

#fun {
  width: 380px;
  height: 200px;
}

#widgets {
  width: 380px;
  height: 200px;
}

#fun {
  width: 380px;
  height: 200px;
}

#usefulweb {
  width: 380px;
  height: 200px;
  
}

#usefulweb img {
  width: 80px;      /* pick a size */
  height: auto;     /* keep proportions */
}

#noncod {
  width: 380px;
  height: 200px;
}

.figure1 img,
.figure2 img{
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(4px 15px 7px rgba(0, 0, 0, 0.55));
}
.web-src-wrapper {
  position: relative;

}

.figure2 {
  position: absolute;
  bottom: -30px;
  left: 320px;
  width: 100px;
  z-index: 10;  
}

.figure1 {
  position: absolute;
  top: -55px;
  right: -170px;
  width: 200px;
  z-index: 10;  
}

.resources-layout {
  display: flex;
  align-items: flex-start;
  gap: 5px; /* space between boxes and images */
}

/* LEFT COLUMN */
.resources-left {
  display: flex;
  width:400px;
  flex-direction: column;
  gap: 5px;
}

/* RIGHT COLUMN */
.resources-right {
  width: 150px;           /* reserved image space */
  position: relative;
  overflow:hidden;
  flex-shrink: 0;
}

.resources-right img {
  width: 150px;
  height: auto;
  display: block;
}

.workinprog img{
  display: block;
  margin: 0 auto;
  width:400px;
  height:300px;
  }
  
  

  #artstuff p{
    text-align:left;
    font-size:15px;
    }
  
  #artstuff h1 {
  font-size: 24px;
  color: #876c46;
  background-color: #401d11;
  padding-left: 20px;
  margin-bottom: 20px;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 8px;
}
  
  #artstuff{
    text-align:center;
    }  
    
  #artstuff a {
  display: inline-block;
  padding: 5px;
}

  #artstuff a img {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px;

  width: 150px;
  height: 150px;

  object-fit: cover;
  object-position: center top;

  transition: filter 0.2s ease-in;
}

#artstuff a img:hover {
  box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
  filter: grayscale(100%);
}
  

  
  .porcalamadonna{
    width:100%; 
    max-height:5000px;
    border:0px;
    margin-left:1px;
    margin-right:1px;
    }
  
  
html {
  scroll-behavior: smooth;
}

/* Floating directory */
.floating-directory {
  position: fixed;       /* stays on screen at all times */
  top: 50%;             /* distance from top of viewport */
  left: 200px;            /* change to right: 20px; to float right */
  width: 200px;
  background: rgba(64, 24, 14, 0.2);
  backdrop-filter: blur(5px);
  padding: 15px;
  border: 2px solid #441a0e;
  border-radius: 10px;
  box-shadow: 0 0 15px rgba(0,0,0,0.1);
  z-index: 999;          /* stays on top of other elements */
  font-family: "Verdana", sans-serif;
}

.floating-directory ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.floating-directory li {
  margin-bottom: 12px;
}

.floating-directory a {
  text-decoration: none;
  color: #755c46;
  font-weight: bold;
  transition: color 0.2s ease;
}

.floating-directory a:link,
.floating-directory a:visited,
.floating-directory a:hover,
.floating-directory a:active {
  color: #755c46;       /* same for all states */
  text-decoration: none; /* remove underline */
  font-weight: bold;
}

.floating-directory a:hover {
  color: #6a3e12;       /* hover color stays the same if you want a hover effect */
  text-shadow: 0 0 3px rgba(106, 62, 18, 0.8);
}

/* Make links inside #stuff behave like normal text */
#stuff .wishlisto a,
#stuff .task-list-item a,
#stuff .hoardinger a,
#stuff .comicso a {
  text-decoration: none; /* remove underline */
  color: inherit;        /* inherit text color */
  font-weight: inherit;  /* optional */
  position: relative;    /* needed for ::after */
}

/* Hover arrow effect */
#stuff .wishlisto a::after,
#stuff .task-list-item a::after,
#stuff .hoardinger a::after,
#stuff .comicso a::after{
  content: " »";
  position: absolute;
  opacity: 0;
  transform: translateX(-100%);
  margin-left: 0.5rem;
  display: inline-block;
  transition: all 0.15s ease;
  font-size: 13px;   /* size of the arrow */
  font-weight: bold;   /* chonkiness */
  color: inherit;      /* optional */
}

/* Show arrow on hover */
#stuff .wishlisto a:hover::after,
#stuff .task-list-item a:hover::after,
#stuff .hoardinger a:hover::after,
#stuff .comicso a:hover::after{
  opacity: 1;
  transform: translateX(0);
}


/* Visual div (PNJ) */
.imgboomself {
  position: fixed;
  bottom: 0;
  left: -50px;
  z-index: 5000;

  width: 650px;
  height: 900px;

  background-image: url('https://64.media.tumblr.com/998a119bf1d25afcb6fcc38bc4c4bebb/d548a38d89017cad-72/s2048x3072/6e7039320754daf9d46db4fcc5a9ee5826685008.pnj');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom left;
  transition: background-image 0.2s ease;

  pointer-events: none; /* ignore clicks, let hitbox handle them */
}

/* Swap GIF on hover of hitbox */
.imgboom-hitbox:hover ~ .imgboomself {
  background-image: url('https://64.media.tumblr.com/08046db487c32a694629793fc3baffaa/f338c2002cb02435-82/s1280x1920/0bfc92b006acfa7d3fbe180ddbd1c6d35dc2557a.gif');
}

/* Hitbox */
.imgboom-hitbox {
  position: fixed;
  bottom: 30px;
  left: 114px;
  width: 355px;
  height: 226px;
  cursor: pointer;
  z-index: 5001;
  background: transparent;
}

/* Tooltip */
.tooltippo {
  position: fixed;
  bottom: 160px;
  left: 160px;
  background: rgba(0,0,0,0.75);
  color: #fff;
  padding: 6px 10px;
  border-radius: 5px;
  font-size: 14px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 10000;
}

/* Show tooltip when hovering hitbox */
.imgboom-hitbox:hover ~ .tooltippo {
  opacity: 1;
}

#imgboom-wrapper {
  float: left;
  margin: 5px;

  width: 142px;
  height: 483px;

  position: relative;
  overflow: visible; /* THIS enables spill */
}

/* invisible placeholder */
#imgboom-wrapper::before {
  content: "";
  display: block;
  width: 142px;
  height: 483px;
}

/* the big image */
#imgboom-bg {
  position: absolute;
  bottom: 0;     /* anchor it */
  left: -90px;  /* make it spill sideways */

  width: 277px;
  height: 496px;
  filter: drop-shadow(20px 3px rgba(0, 0, 0, 0.2));
  background-image: url("https://64.media.tumblr.com/d45983155e3cd897d4d26bc4911ffa98/70031ab62b9a1b45-5e/s2048x3072/36faf206d35df7a926bffc34230c52f926f0507c.pnj");
  background-size: contain;
  background-repeat: no-repeat;
}

#barbiebepatient-wrapper {
  float: left;
  margin: 5px;

  width: 142px;
  height: 423px;

  position: relative;
  overflow: visible; /* THIS enables spill */
}

/* invisible placeholder */
#barbiebepatient-wrapper::before {
  content: "";
  display: block;
  width: 142px;
  height: 423px;
}

/* the big image */
#barbiebepatient-bg {
  position: absolute;
  bottom: -13px;     /* anchor it */
  left: -55px;  /* make it spill sideways */

  width: 277px;
  height: 496px;

  background-image: url("https://64.media.tumblr.com/0da9bd473693b18ae6ceb16c841e2189/d548a38d89017cad-30/s2048x3072/58e8edc6854db0be9f3807900c92f02d7f7c6c79.pnj");
  background-size: contain;
  background-repeat: no-repeat;
}

.barbiebepatient-blinkies {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 columns, you can change to 3 */
  gap: 10px;                 /* space between items */
  overflow-y: auto;           /* vertical scroll if content is too tall */
  max-height: 227px;          /* adjust for your layout */
  padding: 5px;
  border: 1px solid #c0d19a;
  background-color: rgba(0,0,0,0.05);
  box-sizing: border-box;
  margin-left:30px;
  margin-right: 5px;
  margin-top:20px;
}

.barbiebepatient-blinkies img {
  width: 100%;                /* fill the grid cell */
  height: auto;               /* keep aspect ratio */
  display: block;
  border-radius: 5px;         /* optional rounded corners */
}

.barbiebepatient-marquee {
  width: calc(100% - 35px);   /* avoids right-edge clipping */
  height: 75px;
  overflow: hidden;
  border: 1px solid #c0d19a;
  background-color: rgba(0,0,0,0.05);
  padding-top: 5px;
  box-sizing: border-box;

  margin-left: 30px;
  margin-right: 5px;
  margin-top: 20px;
}

.barbiebepatient-marquee img {
  height: 65px;
  vertical-align: middle;
}

#barbiebeitalian{
  position:absolute;
  bottom:2px;
  left:0;
}

#barbiebeseptember{
  position:absolute;
  bottom:20px;
  left:0;
}

#barbiebeadoctor{
  position:absolute;
  bottom:-38px;
  left:0;
}

#barbiebeavirgo{
  position:absolute;
  bottom:38px;
  left:0;
}

#barbiedontbesad{
  position:absolute;
  top:0;
  left:0;
  transform: rotate(-5deg);
}


/*{
  border: 1px red solid;
}*/
  .textforabtarbie hr{
    border: none;
    height: 2px;
    margin: 10px 0;
  }
    
  .textforabtarbie h2{
    font-family:"amore";
    text-align:center;
    color:#c0d19a;
    }
    
    .textforabtarbie h1{
    font-family:"amore";
    font-size:40px;
    text-align:center;
    font-weight: bold;
    color: #190d0d;
    text-decoration: underline;
    pointer-events: none;
    text-shadow: 0.5px 0.5px 2px white;
    }
  
  .textforabtarbie p{
    font-size:14px;
    text-align:left;
    text-indent:20px;
    margin:5px;
    }
      
  .textforabtarbie ul {
    padding-left: 25px;
    }

  .textforabtarbie li {
    list-style-type: circle;
    }
    /*{
      outline:red 2px solid;
    }*/
    
    .kinss{
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      flex-direction: row;
      overflow: visible; /* THIS enables spill */
    }
    
.kinstextbox{
  position: absolute;
  bottom: -20px;
  left: 27.5px;

  width: 165px;
  height: 52px;

  z-index: 999;

  display: flex;
  flex-direction: column;   /* ← THIS */
  align-items: center;
  justify-content: center;
}

.kinstextbox::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;

  width: 165px;
  height: 52px;

  background-image: url('https://cdn.imgchest.com/files/885413d117da.png');
  background-repeat: no-repeat;
  background-size: contain;

  z-index: -1;
}

.kinstextbox h2{
  margin: 0;
  color: #6e2222;
  text-align: center;
  font-size: 15px;
  font-family: "Darkcastle";
}

.kinstextbox h4{
  margin: 0;
  color: #4f3b22;
  text-align: center;
  font-size: 10px;
  font-family: "arial";
}
  
  #composer,
  #housewilson{
    position: relative;
  }
  
  #composer img,
  #housewilson img{
    transition: transform 0.2s ease, filter 0.2s ease;
  }
  
    #composer::before {
  content: "";
  display: block;
  width: 220px;
  height: 242px;
  /*outline:red 2px solid;*/
  background-image: url("https://cdn.imgchest.com/files/b2d5053b5c4f.png");
  background-position: bottom;
  background-size: 220px;
  background-repeat: no-repeat;
  }
  
  #composerskin1{
    position: absolute;
    top: 30px;
    left: -20px;
    width: 150px !important;
    height: auto !important;
    max-width: none;

  }
  
  #composerskin2{
    position: absolute;
    top: 70px;
    left: -20px;
    width: 120px !important;
    height: auto !important;
    max-width: none;

  }
  
  #composerskin3{
    position: absolute;
    top: 50px;
    left: -20px;
    width: 130px !important;
    height: auto !important;
    max-width: none;

  }

  #composerskin1,
#composerskin2,
#composerskin3 {
  position: absolute;
  z-index: 0;
  pointer-events: none;
}

#composer{
  position: relative;
}
  #composer img:first-child{
    position: absolute;
    bottom: 19px;
    right: -1px;
    z-index: 10;
    width:200px;
    height: auto;
    transform-origin: bottom center;
  }
  
  #composer img:hover{
    transform: scale(1.2);
    transform-origin: bottom center;
    filter:drop-shadow(8px 8px 10px rgba(253, 255, 227, 0.5)) sepia(60%);
  }
  
  #housewilson::before {
  content: "";
  display: block;
  width: 220px;
  height: 242px;
  /*outline:blue 2px solid;*/
  background-image: url("https://cdn.imgchest.com/files/b2d5053b5c4f.png");
  background-position: bottom;
  background-size: 220px;
  background-repeat: no-repeat;
}

#housewilson img{
    position: absolute;
    bottom: 19px;
    left: 15px; /*fix position x axis*/
    z-index: 92;
    width:182.5px;
    height: auto;
    transform-origin: bottom center;
  }
  
  #housewilson img:hover{
    transform: scale(1.2);
    transform-origin: bottom center;
    filter:drop-shadow(8px 8px 10px rgba(253, 255, 227, 0.5)) sepia(60%);
  }
  
  #housewilsoncomment::before{
    content: "";
    position: absolute;
    background-image: url("https://cdn.imgchest.com/files/95b6adcf0126.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: 115%;
    height: 115%;
    opacity: 1;
    z-index: -2;
  }
  
  #housewilsoncomment {
    text-align: center;
    align-items: center;
    justify-content: center;
    display: flex;
    position: absolute;
    width: 190px;
    height: 100px;
    top: 10px;
    left: 59px;
    padding-left: 0;
    padding-right: 2px;
    transform: rotate(13deg);
  }
 
   #housewilsoncomment h4{
     color: #2c2820;
     font-family: "arial";
     font-size: 13px;
     text-align: left;
     font-weight: bolder;
   }
  
  .lefto {
    float: left;
    width: calc(50% - 30px); /* 50% minus half the gap */
    margin-left: 20px;        /* optional offset */
    }

  .righto {
    float: left;               /* also left, not right */
    width: calc(50% - 30px);  /* same width so they fit together */
    margin-left: 20px;         /* gap between them */
    }
  
  .righto-socials {
    float: left;               /* also left, not right */
    width: calc(50% - 30px);  /* same width so they fit together */
    margin-left: 20px;         /* gap between them */
    text-align: center;
    }
    
  .righto-socials img {
    width:70px;      
    height:auto;
    transition: transform 0.3s ease, filter 0.3s ease;
    }

  .righto-socials img:hover{
    transform: scale(1.3);
    filter: drop-shadow(2px 2px 10px rgba(253, 255, 227, 0.5)) sepia(60%);
  }
  
.imvuach {
  display: flex;
  flex-wrap: wrap;
  float: left;
  width: calc(50% - 30px);
  margin-left: 20px;
  gap: 6px;          /* 👈 small, even spacing */
}

/* 3 equal columns */
.imvuachcolumn {
  flex: 0 0 calc(33.3333% - 6px);
  max-width: calc(33.3333% - 6px);
  padding: 0;        /* remove padding */
}

.imvuachcolumn img {
  display: block;
  width: 100%;
  margin-top: 0;
}
  .textforabtme {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
    overflow: hidden;
    color:#c0a996;
    }
      
  .textforabtme h1{
    font-family:"amore";
    font-size:40px;
    text-align:center;
    font-weight: bold;
    color: #190d0d;
    text-decoration: underline;
    pointer-events: none;
    text-shadow: 0.5px 0.5px 2px white;
    }
    
    .textforabtme h2{
    font-family:"amore";
    text-align:center;
    color:#c0d19a;
    }
    
  .textforabtme h3.directory {
    font-size: 15px;
    text-align: center;
    }

  .textforabtme h3.directory a {
    text-decoration: none;
    color: #c0d19a;         /* adjust to your theme */
    margin: 0 5px;      /* space between items */
    position: relative;  /* needed for ::after */
    }

  /* Add pipe between items */
  .textforabtme h3.directory a::after {
    content: "|";
    margin-left: 10px;
    }

  /* Remove pipe after last link */
  .textforabtme h3.directory a:last-child::after {
    content: "";
    }
    
  .textforabtme p{
    font-size:14px;
    text-align:left;
    text-indent:20px;
    margin:5px;
    }
      
  .textforabtme ul {
    padding-left: 25px;
    }

  .textforabtme li {
    list-style-type: circle;
    }


.stampies {
  text-align: center; /* center the row */
}

.stampies img {
  width: 100px;
  height: 50px;
  display: inline-block;   /* allows them to sit next to each other */
  margin: 5px 2px;        /* spacing between images */
  vertical-align: middle;  /* keeps them aligned nicely */
}


.eichar hr {
  border: none;
  height: 2px;
  background-color: #190d0d;
  margin: 0.5em auto;
}


  persona-arts-scroll {
  max-height: 500px; 
  overflow-y: auto;
  padding: 10px;
  background: #fdfdfd;
  background-image:url(https://cdn.imgchest.com/files/efc8ffb5a904.png);
  background-repeat:repeat;
  overflow-x:hidden;
}


.persona-arts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(235px, 1fr));
  grid-auto-rows: auto;
  gap: 10px;
}


.persona-arts img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 3px;
} 



/* Preview scroll/grid */
.persona-arts-scroll {
  max-height: 500px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 10px;
  background: #fdfdfd;
  background-image: url(https://cdn.imgchest.com/files/efc8ffb5a904.png);
  background-repeat: repeat;
}

.persona-arts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(235px, 1fr));
  gap: 10px;
}

.previewowow {
  cursor: pointer;
}

.previewowow img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 3px;
  opacity: 0.9;
  transition: opacity 0.2s ease, transform 0.15s ease;
}

.previewowow img:hover {
  opacity: 1;
  transform: scale(1.02);
}

/* ===== Lightbox ===== */
.lightboxos {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  
  /* HIDE without breaking flex */
  visibility: hidden;
  opacity: 0;
  pointer-events: none;

  z-index: 9999;
  padding: 40px;
  box-sizing: border-box;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;

  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.lightboxos img {
  max-width: 90%;
  max-height: 80vh;
  display: block;
  border-radius: 4px;
}

/* Caption box */
#literallyjustacap {
  display: block;
  width: 60%;
  max-width: 700px;
  padding: 10px 14px;
  margin: 0;
  color: white;
  font-size: 14px;
  line-height: 1.4;
  text-align: center;
  background: rgba(0,0,0,0.45);
  border-radius: 4px;
  word-break: break-word;
  white-space: normal;
  overflow-wrap: break-word;
}

#literallyjustacap::selection{
  background-color: rgb(255, 255, 255, 0.2);;
  color: white;
  text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.5);
}

/* Close button */
.xwtf {
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 40px;
  color: white;
  cursor: pointer;
  z-index: 10;
  user-select: none;
}

.xwtf:hover {
  color: #ff5555;
  transform: scale(1.1);
  transition: 0.15s ease;
}

  .imgboomself2 {
  position: fixed;
  bottom: 0;
  left: -50px;
  z-index: 5000;

  width: 650px;
  height: 900px;

  background-image: url('https://64.media.tumblr.com/9b0463b89ec62fe6f53e7f48aa6dcb5d/d548a38d89017cad-bf/s2048x3072/18b5e5135d2d3a0b4fdca60ba54a323431187fb2.pnj');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom left;
  transition: background-image 0.2s ease;

  pointer-events: none; /* ignore clicks, let hitbox handle them */
}

.columbus {
  display: grid;
  grid-template-columns: 150px 1fr 150px;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  align-items: center;
}
.columb {
  position: relative;
  text-align: center;
}

.borkbork img {
  transform-origin: bottom right;
  position: relative;
  z-index: 1;
  transition: transform 0.2s ease;
}

.borkbork img:hover {
  transform: scale(3);
  z-index: 9999;
}

.borkborkbig img {
  transform-origin: bottom right;
  position: relative;
  z-index: 1;
  transition: transform 0.2s ease;
}

.borkborkbig img:hover {
  transform: scale(1.6);
  z-index: 9999;
}

.abtmescrolly{
  overflow: scroll;
  overflow-x: hidden;
  height: 30em;
  padding: 1rem;
  background-image: url(https://cdn.imgchest.com/files/0234a16c2ae9.png); /* change image bg url here */
  background-size: contain;
  outline: 2px solid #241e27;
  filter: drop-shadow(0px 0px 10px #241e27);
}

.abtmescrolly p{
  color: #c0b195;
  background: rgba(50, 41, 56, 0.3);
  filter: drop-shadow(1px 1px 5px rgb(2, 1, 1));
}
/* Swap GIF on hover of hitbox */
.imgboom-hitbox:hover ~ .imgboomself2 {
  background-image: url('https://64.media.tumblr.com/08046db487c32a694629793fc3baffaa/f338c2002cb02435-82/s1280x1920/0bfc92b006acfa7d3fbe180ddbd1c6d35dc2557a.gif');
}

#son {
  transform: rotate(-30deg) translateY(-20px) scale(1);
  filter: drop-shadow(5px 5px 5px rgba(231, 236, 201, 0.1));
  transition: transform 0.2s ease, filter 0.2s ease; /* smooth animation */
}

#son:hover {
  transform: rotate(-30deg) translateY(-20px) scale(1.05); /* enlarges on hover */
  filter: drop-shadow(5px 5px 5px rgba(255, 255, 255, 0.2)); /* brighter shadow */
}

#son:active {
  transform: rotate(-30deg) translateY(-20px) scaleY(0.5);
}

.lore-note {
  color: black;
  font-size: 10px;
  font-family: "Courier New", Monospace;
  display: #2e1803;   /* ensure it’s block */
  margin: 0 90px;   /* top/bottom 0, left/right 20px */
  line-height: 1.4;
  text-indent: 0;
  font-weight: bolder;
  text-align: center;
}
/*======================================*/
/* DECORATIONS */
/*======================================*/
#glubglubrafayel,#bunbunxavier,#artsybirb,#sleepyalien,#xavierstarry{
  filter: sepia(90%) drop-shadow(1px 1px 3px rgba(109, 80, 40, 0.8));
  opacity: 0.5;
  pointer-events: none;
}

#bunbunxavier{
  position:absolute;
  top:380px;
  right:10px;
  transform: rotate(20deg);
}

#bunbunxavier img{
  width: 177px;
}

#glubglubrafayel{
  position:absolute;
  top:300px;
  right:130px;
  transform: rotate(42deg) scaleX(-1);
}

#glubglubrafayel img{
  width: 177px;
}

#sleepyalien{
  position:absolute;
  bottom:60px;
  left:90px;
  transform: rotate(-16deg) scaleX(-1);
  z-index: 0;
}

#sleepyalien img{
  width: 137px;
  filter: drop-shadow(0px 0px 3px white);
}

#xavierstarry{
  position: absolute;
  top:760px;
  left:10px;
  transform: rotate(-16deg);
  z-index: 0;
}

#xavierstarry img{
  width:100px;
}

/*======================================*/
/* END OF DECORATIONS */
/*======================================*/

/*-------MUSIC PLAYER BY GLENTHEMES-------*/
#glenplayer02 {
position:fixed;
top:2em;
margin-bottom:20px;
left:0;
margin-left:20px;
display:flex;
z-index:9999999999999999;
text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;
background-color: rgba(0, 0, 0, 0.5);
padding: 0 10px 0px 30px;
}
#glenplayer02 a {text-decoration:none;}
 
#glenplayer02 > div {
align-self:center;
-webkit-align-self:center;
}
 
.music-controls {
user-select:none;
-webkit-user-select:none;
width:13px;
font-size:13px;
cursor:pointer;
}
 
.playy, .pausee {color:#fff;} /* color of play & pause buttons */
 
.pausee {display:none;}
 
.sonata {
margin-left:10px;
color:#fff; /* color of music note symbol */
}
 
.labeltext {
margin-left:1px;
font-family:courier new;
font-size:9px;
color:#fff; /* color of song title */
filter: drop-shadow(1px 1px 1px white);
}
 
.music-controls:hover {
  cursor: url("cursors/banjo.png"), pointer;
}

/* wrapper that allows overflow */
.hae-wrap {
    position: relative;
    width: 481px;
    height: 299px;
    margin-top: 50px;
}

/* background image – bigger than hae */
.hae-bg {
    position: absolute;
    bottom: 27px;
    left: 5px;

    width: 100%;
    height: 114%;
    
    transform: skew(-3deg, 1deg) rotate(-2deg);
    background-image: url("https://cdn.imgchest.com/files/cad9ef645913.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;

    z-index: 0;
    pointer-events: none;
}

.hae {
    border: 0px solid brown;
    border-radius: 5px;
    height: 250px;
    width: 405px;
    font-family: gamja flower;
    color: #453F55;
    position: relative;
    overflow: hidden; /* hides the cover */
    margin: 5px auto 0;
    transform: skew(10deg, -1deg) rotate(1deg);
   
}


/* actual scroll area */
.hae .content {
    height: 100%;
    padding: 6px;

    overflow-y: auto;
    overflow-x: hidden;

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: min-content;
    gap: 6px;

    font-size: 0.85em;
    background-image: url("https://cdn.imgchest.com/files/e7dec36889dc.jpg");
}

.cellophan img{
    filter: drop-shadow(1px 1px 3px rgba(0, 0, 0, 0.6));
    width:100px;
    height: auto;
    transition: filter 0.2s ease, transform 0.2s ease;
    position: relative;
    cursor: url("cursors/banjo.png"), pointer;
}

.cellophan img:hover{
  filter: drop-shadow(1px 1px 10px rgba(225, 225, 225, 1));
  transform: scale(1.5) rotate(7deg) skew(-10deg, 1deg);
}

#tooltipsy {
  position: fixed;
  pointer-events: none;

  background: rgba(0, 0, 0, 0.5);
  color: white;

  padding: 6px 9px;
  border-radius: 8px;
  backdrop-filter: blur(2px) sepia(100%);
  font-size: 12px;
  line-height: 1.2;

  max-width: 160px;          /* ← THIS controls when it wraps */
  white-space: normal;       /* allow wrapping */
  word-wrap: break-word;        
  display: inline-block;        /* ← forces box sizing */

  opacity: 0;
  transform: translateY(-8px);
  transform-origin: top left;
  transition: opacity .15s ease, transform .15s ease;

  z-index: 9999;
}

#suitcasetag img{
  width: 200px;
}

#suitcasetag{
  position: absolute;
  z-index: 2;
  top: -10px;
  right: 50px;
  transform: rotate(5deg);
  pointer-events: none;
}

#suitcasetag p {
  position: absolute;
  top: 18px;      /* ← move up/down */
  right: 30px;     /* ← move left/right */
  font-family: "Cattcatt";
  font-size: 20px;
  font-weight: bold;
  margin: 0;
  color: #574d3c;
}

/* Show the tooltip text on hover */
.cellophan:hover .tooltipsy {
  visibility: visible;
}

/* cover */
.sip {
    position: absolute;
    inset: 0;
    background-image: url("https://cdn.imgchest.com/files/609aafc9ec18.png");
    background-size: cover;
    z-index: 2;
    transition: transform 0.8s ease;
}

/* slide UP on hover */
.hae:hover .sip {
    transform: translateY(-100%);
}

/* web shimeji */
.webmeji-container {
  position: fixed;
  bottom: 0;
  width: 100px;
  height: 100px;
  overflow: hidden;
  z-index: 9999;
}

.webmeji-container img {
  width: 100%;
  height: auto;
  user-select: none;
  pointer-events: none;
  display: block;
  transform-origin: center;
}

@media (max-width: 768px) {
  .webmeji-container {
    width: 50px;
    height: 50px;
  }
}

#sitemap span{
  color:#d1aa94;
}

#sitemap span:hover{
  color: #f39e59;
  cursor: url("cursors/banjo.png"), pointer;
}

.sitemap-link {
  cursor: url("cursors/banjo.png"), pointer;
  text-decoration: underline;
}

.sitemap-link:hover {
  opacity: 0.7;
}

#pics *{
  box-sizing: border-box;
}

.coolassgalleryrow {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  gap: 1px;
  
}

.coolassgallerycolumn {
  flex: 0 0 40%;
  width: 20%;
  max-width: 30%;
  gap: 2.5px;
  margin: 0 auto 0;
}

.coolassgallerycolumn img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
  transition: transform 0.2s ease;
}

.coolassgallerycolumn img:hover{
  transform: scale(2);
}

.lefttop:hover{
  transform: scale(2);
  transform-origin: top left;
}

.lefttop{
  transition: transform 0.2s ease;
  transform-origin: top left;
}

.righttop:hover{
  transform: scale(2);
  transform-origin: top right;
}

.righttop{
  transition: transform 0.2s ease;
  transform-origin: top right;
}

.imageeetop:hover{
  transform: scale(2);
  transform-origin: top center;
}

.imageeetop{
  transition: transform 0.2s ease;
  transform-origin: top center;
}

.imageeeright:hover{
  transform: scale(2);
  transform-origin: center right;
}

.imageeeright{
  transition: transform 0.2s ease;
  transform-origin: center right;
}

.imageeeleft{
  transition: transform 0.2s ease;
  transform-origin: center left;
}

.imageeeleft:hover{
  transform: scale(2);
  transform-origin: center left;
}

.markiplier {
  height: 300px;
  overflow: hidden;
  margin-right: 10px;
}

.markiplier-track {
  display: flex;
  flex-direction: column;
  align-items: center; /* THIS centers the image */
  animation: markiplier-scroll 50s linear infinite;
  gap: 10px;
}

.markiplier img {
  width: 100%;
  display: block;
}

@keyframes markiplier-scroll {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-50%);
  }
}

.markiplier:hover .markiplier-track {
  animation-play-state: paused;
}