body {
    margin: 0;
    padding: 0;
    /* display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; */
    min-height: 100vh;
    background-color: #f2f2f2;
    background-image: linear-gradient(rgb(0, 255, 242), rgb(216, 109, 238));
  font-family: 'Lobster', cursive;
  }

/* Lobster font for menu button and menu items */
@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');

/* Centralized menu button styles to match index.html (keeps appearance consistent across pages) */
.menu-btn {
  font-family: 'Lobster', cursive;
  font-size: 16px;
  padding: 8px 12px;
  cursor: pointer;
  background: #222;
  color: #fff;
  border: none;
  border-radius: 6px;
}
.menu a { font-family: 'Lobster', cursive; }

/* Ensure every menu element uses Lobster across all pages (override inline/inherited rules) */
.menu, .menu * , .menu-btn { font-family: 'Lobster', cursive !important; }

  h1 {
    font-size: 100px;
    font-weight: bold;
    color: rgb(25, 105, 255);
    text-align: center;
  }

  .hellotobiashere {
    /* background-color: aqua; */
    height: 30px;
  }

  /* Global custom scrollbar: wider and purple across pages */
  /* WebKit browsers (Chrome, Edge, Safari) */
  ::-webkit-scrollbar {
    width: 22px;
    height: 22px;
  }
  ::-webkit-scrollbar-track {
    background: #f5eefb; /* pale lavender track */
    border-radius: 4px; /* less rounded => more rectangular */
  }
  ::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #7b1fa2, #9c27b0); /* purple thumb */
    border-radius: 4px;
    border: 2px solid #f5eefb; /* thinner border to emphasize rectangular shape */
  }
  ::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #8e24aa, #b05adf);
  }

  /* Firefox: color and width hint (width cannot be precisely set in Firefox) */
  html {
    scrollbar-width: auto; /* let it be normal/fatter than 'thin' */
    scrollbar-color: #7b1fa2 #f5eefb; /* thumb track */
  }

  /* Ensure elements that create their own scrollbars (code blocks, panels) inherit styling where supported */
  .panel, pre, code, .sidebar { scrollbar-width: auto; }

  /* Prevent text caret/selection when clicking ordinary page text (but keep form fields editable) */
  /* Prevent text caret/selection when clicking ordinary page text but keep form fields editable */
  body *:not(input):not(textarea):not(select):not([contenteditable]) {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: inherit; /* allow site-wide custom cursor (e.g. cat-cursor.svg) to show */
  }

/* Site-wide custom cursor: try PNG first (Edge-friendly), then SVG, then default */
html, body, * { cursor: url('cat-cursor.png') 8 8, url('cat-cursor.svg') 8 8, auto; }
/* Keep native cursor and text caret for form fields */
input, textarea, select, button { cursor: auto !important; }

/* Floating dark-green header that appears at the top and when scrolling up */
.floating-header {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  height: 56px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  background: #ff69b4; /* hot pink */
  color: #fff;
  /* Ensure the floating header is above other page UI (balloons, present, instructions)
    which may use very large z-index values on some pages. */
  z-index: 130000 !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.2);
  transform: translateY(-110%);
  transition: transform 220ms ease, opacity 180ms ease;
  opacity: 0;
}
.floating-header.visible { transform: translateY(0); opacity: 1; }
.floating-header .menu-btn, .floating-header #menuBtn {
  /* keep the floating header button visually identical to the home page button */
  background: #222 !important;
  color: #fff !important;
  border: none !important;
  padding: 8px 12px !important;
  font-size: 16px !important;
  border-radius: 6px !important;
  pointer-events: auto !important;
  z-index: 130001 !important;
}
.floating-header .menu { position: absolute; top:56px; left:8px; }

/* Make sure the floating header and its buttons accept pointer events (defensive) */
.floating-header, .floating-header * { pointer-events: auto !important; }

/* ensure body content isn't obscured under the fixed header when visible */
body.has-floating-header { padding-top: 56px; }

/* When floating header is active, hide the original page header to avoid duplicate/black bar */
body.has-floating-header .site-header { display: none !important; }