html, body {
  margin: 0;
  min-height: 100vh;
  background: linear-gradient(180deg, #fffb8e, #fdd1ff, #A0FFE7);
  font-family: "PixelOperator", sans-serif;
  cursor: url('https://pixeldew.neocities.org/mousePointer_leaf.png') 2 3, auto;

}

/* ------------------------------
   FONTS
--------------------------------*/
@font-face {
  font-family: "PixelOperator";
  src: url("https://pixeldew.neocities.org/PixelOperator.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}





/* ------------------------------
   VIGNETTE OVERLAY
--------------------------------*/
body::after { /*pseudo‑element*/
  content: ""; /*Makes an empty pseudo‑element, but it doesn’t need to contain text.*/
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9000;/*above layout*/
  background: radial-gradient(
    circle,
    rgba(255, 240, 200, 0) 45%, /*clear center for content -increase percentage for larger clear circle*/
    rgba(255, 200, 120, 0.25) 70%,/* adjust the last number to increase or decrease opacity of amber glow*/
    rgba(0, 0, 0, 0.15) 100%/* adjust the last number to increase or decrease opacity of dark edge*/
  );
}

/* ------------------------------
   SPARKLES OVERLAY
--------------------------------*/


.sparkles {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  overflow: hidden;
}

.sparkles span {
  position: absolute;

  /* size variation: 6px → 18px */
  width: calc(6px + 12px * var(--size));
  height: calc(6px + 12px * var(--size));

  border-radius: 50%;
  opacity: 0.9;

  /* soft glow */
  filter: blur(3px);

  /* placement */
  top: calc(100% * var(--y));
  left: calc(100% * var(--x));

  animation: sparkle-float 14s linear infinite;
}


.sparkles span:nth-child(3n) {
  background: rgba(255, 255, 255, 1); /* bright white */
}
.sparkles span:nth-child(3n+1) {
  background: rgba(238, 255, 149, 1); /* yellow warm light */
}
.sparkles span:nth-child(3n+2) {
  background: rgba(204, 255, 246, 1); /* mint glow */
}

@keyframes sparkle-float {
  0%   { transform: translateY(0) translateX(0); opacity: 0.7; }
  50%  { opacity: 1; }
  100% { transform: translateY(-140px) translateX(10px); opacity: 0.4; }
}

/* ------------------------------
   SCROLL BAR
--------------------------------*/

/* OUTER PAGE SCROLLBAR — Chrome, Edge, Safari. For stylesheet.css */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #9F7DD8FF;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #FBA9FF, #83FFE0, #FFFA6E);
    border-radius: 10px;
}


::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #83FFE0, #FFFA6E, #FBA9FF);
}

::-webkit-scrollbar-thumb:active {
    background: linear-gradient(180deg, #FFFA6E, #FBA9FF, #83FFE0);
}