@import url("https://fonts.googleapis.com/css2?family=Comic+Relief:wght@400;700&display=swap");

/*
==========================================================================
  Refactored Stylesheet
==========================================================================
  This stylesheet has been reorganized for better readability and maintenance.
  It is divided into the following sections:
  1.  Variable Definitions
  2.  Global Styles & Resets
  3.  Typography
  4.  Layout Utilities
  5.  Spacing Utilities
  6.  Border Utilities
  7.  Background Utilities
  8.  Component Styles
  9.  Animation Keyframes & Classes
  10. Overlay Components
  11. Media Queries
==========================================================================
*/

/* ==========================================================================
   1. Variable Definitions
   ========================================================================== */

:root {
    --neon-pink: #ff66cc;
    --electric-blue: #00ccff;
    --lime-green: #99ff00;
    --sun-yellow: #ffff66;
    --deep-purple: #6600cc;
    --blood-red: #cc0000;
    --background-brown: #895129;
    --background-dark: #000033;
    --background-dark-alpha: #0000338b;
    --background-light: #000044;
    --background-black: black;
}

/* ==========================================================================
   2. Global Styles & Resets
   ========================================================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    min-height: 100vh;
    padding: 25px;
    background-color: #000000;
    color: var(--sun-yellow);
    font-family: "Comic Relief", system-ui;
    line-height: 1.6;
}

footer {
    margin-top: 30px;
    padding: 15px;
    border-top: 2px solid var(--lime-green);
    text-align: center;
}

img {
    max-width: 100%;
    height: auto;
}

/* ==========================================================================
   3. Typography
   ========================================================================== */

h1 {
    margin: 10px 0;
    font-size: 5rem;
    color: #fff;
    letter-spacing: 3px;
    text-transform: uppercase;
}

h2 {
    font-size: inherit;
}

h3 {
    font-size: inherit;
}

.blog-post-title-large {
    font-size: 2.5rem;
    color: inherit;
    text-transform: none;
    letter-spacing: normal;
}

/* Text Alignment */
.text-left {
    text-align: left;
}
.text-center {
    text-align: center;
}
.text-justify {
    text-align: justify;
}

/* Text Decoration */
.no-decoration {
    text-decoration: none;
}

/* Text Weight & Style */
.text-bold {
    font-weight: bold;
}
.text-shadow {
    text-shadow: 1px 1px 0 black;
}
.lh-1-5 {
    line-height: 1.5;
}

/* Text Sizes */
.text-xs {
    font-size: 0.8rem;
}

/* Text Colors */
.text-black {
    color: black;
}
.text-white {
    color: white;
}
.text-red {
    color: var(--blood-red);
}
.text-inherit {
    color: inherit;
}
.text-brown {
    color: var(--background-brown);
}
.text-dark {
    color: var(--background-dark);
}
.text-pink {
    color: var(--neon-pink);
}
.text-green {
    color: var(--lime-green);
}
.text-yellow {
    color: var(--sun-yellow);
}
.text-lime-green {
    color: var(--lime-green);
}

.text-black .marquee {
    color: white;
}

/* ==========================================================================
   4. Layout Utilities
   ========================================================================== */

/* Display */
.none,
.hidden {
    display: none;
}
.block {
    display: block;
}
.inline-block {
    display: inline-block;
}
.flex {
    display: flex;
}
.grid {
    display: grid;
}

/* Position */
.fixed {
    position: fixed;
}
.absolute {
    position: absolute;
}
.relative {
    position: relative;
}
.left-0 {
    left: 0;
}
.right-0 {
    right: 0;
}
.pinned-top {
    top: 30px;
}
.pinned-right {
    right: 35px;
}

/* Flexbox */
.flex-1 {
    flex: 1;
}
.flex-col {
    flex-direction: column;
}
.flex-row {
    flex-direction: row;
}
.flex-wrap {
    flex-wrap: wrap;
}
.items-center {
    align-items: center;
}
.justify-center {
    justify-content: center;
}
.justify-space-between {
    justify-content: space-between;
}

/* Grid */
.grid-2 {
    grid-template-columns: repeat(2, 1fr);
}
.grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

/* Sizing */
.w-auto {
    width: auto;
}
.w-30 {
    width: 30%;
}
.w-100 {
    width: 100%;
}
.w-100px {
    width: 100px;
}
.min-w-180 {
    min-width: 180px;
}
.max-w-900 {
    max-width: 900px;
}

.h-auto {
    height: auto;
}
.h-100 {
    height: 100%;
}
.h-100-vh {
    height: 100vh;
}
.mh-30 {
    min-height: 30px;
}

/* ==========================================================================
   5. Spacing Utilities
   ========================================================================== */

/* Gaps */
.gap-15 {
    gap: 15px;
}
.gap-30 {
    gap: 30px;
}

/* Margins */
.m-0 {
    margin: 0;
}
.m-5 {
    margin: 5px;
}
.m-15 {
    margin: 15px;
}
.m-20 {
    margin: 20px;
}
.m-a {
    margin: auto;
}
.m-h-a {
    margin-left: auto;
    margin-right: auto;
}
.m-v-65 {
    margin-top: 65px;
    margin-bottom: 65px;
}

/* Margin Top */
.m-t-0 {
    margin-top: 0;
}
.m-t-5 {
    margin-top: 5px;
}
.m-t-10 {
    margin-top: 10px;
}
.m-t-15 {
    margin-top: 15px;
}
.m-t-20 {
    margin-top: 20px;
}
.m-t-30 {
    margin-top: 30px;
}
.m-t-50 {
    margin-top: 50px;
}
.m-t-75 {
    margin-top: 75px;
}
.m-t--30 {
    margin-top: -30px;
}
.m-t--55 {
    margin-top: -55px;
}
.m-t-a {
    margin-top: auto;
}

/* Margin Right */
.m-r-0 {
    margin-right: 0;
}
.m-r-5 {
    margin-right: 5px;
}
.m-r-10 {
    margin-right: 10px;
}
.m-r-15 {
    margin-right: 15px;
}
.m-r-20 {
    margin-right: 20px;
}
.m-r-50 {
    margin-right: 50px;
}
.m-r-a {
    margin-right: auto;
}

/* Margin Bottom */
.m-b-0 {
    margin-bottom: 0;
}
.m-b-5 {
    margin-bottom: 5px;
}
.m-b-10 {
    margin-bottom: 10px;
}
.m-b-15 {
    margin-bottom: 15px;
}
.m-b-20 {
    margin-bottom: 20px;
}
.m-b-22 {
    margin-bottom: 22px;
}
.m-b-50 {
    margin-bottom: 50px;
}
.m-b-a {
    margin-bottom: auto;
}

/* Margin Left */
.m-l-0 {
    margin-left: 0;
}
.m-l-5 {
    margin-left: 5px;
}
.m-l-10 {
    margin-left: 10px;
}
.m-l-15 {
    margin-left: 15px;
}
.m-l-a {
    margin-left: auto;
}

/* Paddings */
.p-5 {
    padding: 5px;
}
.p-10 {
    padding: 10px;
}
.p-15 {
    padding: 15px;
}
.p-20 {
    padding: 20px;
}
.p-25 {
    padding: 25px;
}
.p-50 {
    padding: 50px;
}
.p-75 {
    padding: 75px;
}

/* Padding Top */
.p-t-0 {
    padding-top: 0;
}
.p-t-20 {
    padding-top: 20px;
}
.p-t-30 {
    padding-top: 30px;
}
.p-t-50 {
    padding-top: 50px;
}
.p-t-80 {
    padding-top: 80px;
}

/* Padding Right */
.p-r-0 {
    padding-right: 0;
}
.p-r-15 {
    padding-right: 15px;
}
.p-r-20 {
    padding-right: 20px;
}
.p-r-80 {
    padding-right: 80px;
}

/* Padding Bottom */
.p-b-0 {
    padding-bottom: 0;
}
.p-b-20 {
    padding-bottom: 20px;
}
.p-b-50 {
    padding-bottom: 50px;
}
.p-b-80 {
    padding-bottom: 80px;
}

/* Padding Left */
.p-l-0 {
    padding-left: 0;
}
.p-l-15 {
    padding-left: 15px;
}
.p-l-20 {
    padding-left: 20px;
}
.p-l-80 {
    padding-left: 80px;
}

/* ==========================================================================
   6. Border Utilities
   ========================================================================== */

/* Border Styles */
.border-solid {
    border: 3px solid var(--background-black);
}
.border-solid-thin {
    border: 1px solid var(--background-black);
}
.border-solid-thick {
    border: 5px solid var(--background-black);
}
.border-double {
    border: 6px double var(--background-black);
}
.border-groove {
    border: 3px groove var(--background-black);
}
.border-ridge {
    border: 3px ridge var(--background-black);
}
.border-outset {
    border: 2px outset var(--background-black);
}
.border-outset-thick {
    border: 3px outset var(--background-black);
}

/* Individual Border Styles */
.border-top-double {
    border-top: 6px double var(--background-black);
}
.border-bottom-double {
    border-bottom: 6px double var(--background-black);
}
.border-top-ridge {
    border-top: 3px ridge var(--background-black);
}
.border-bottom-ridge {
    border-bottom: 3px ridge var(--background-black);
}
.border-left-ridge {
    border-left: 3px ridge var(--background-black);
}
.border-right-ridge {
    border-right: 3px ridge var(--background-black);
}

/* Border Colors */
.border-black {
    border-color: black;
}
.border-white {
    border-color: #fff;
}
.border-pink {
    border-color: var(--neon-pink);
}
.border-blue {
    border-color: var(--electric-blue);
}
.border-green {
    border-color: var(--lime-green);
}
.border-yellow {
    border-color: var(--sun-yellow);
}
.border-purple {
    border-color: var(--deep-purple);
}
.border-red {
    border-color: var(--blood-red);
}
.border-brown {
    border-color: var(--background-brown);
}
.border-dark {
    border-color: var(--background-dark);
}

/* Rainbow Borders */
.border-single-rainbow,
.border-rainbow,
.border-rainbow-footer {
    border: 2px solid transparent;
    border-image: linear-gradient(
        to right,
        red,
        orange,
        yellow,
        green,
        blue,
        indigo,
        violet
    );
    border-image-slice: 1;
}

.border-rainbow,
.border-rainbow-footer {
    background-color: #ccc;
}

.border-rainbow-hack::before {
    content: "";
    display: block;
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    bottom: 2px;
    pointer-events: none;
    background: none;
    border: 2px solid transparent;
    border-image: linear-gradient(
            to right,
            red,
            orange,
            yellow,
            green,
            blue,
            indigo,
            violet
        )
        1;
}

.border-rainbow-footer::before {
    content: "";
    display: block;
    pointer-events: none;
    margin: -21px -15px 0 -15px;
    background: none;
    border-top: 2px solid transparent;
    border-image: linear-gradient(
            to right,
            red,
            orange,
            yellow,
            green,
            blue,
            indigo,
            violet
        )
        1;
}

/* ==========================================================================
   7. Background Utilities
   ========================================================================== */

/* Background Properties */
.bg-center {
    background-position: center;
}
.bg-contain {
    background-size: contain;
}
.bg-cover {
    background-size: cover;
}
.bg-no-repeat {
    background-repeat: no-repeat;
}
.bg-repeat {
    background-repeat: repeat;
}
.bg-repeat-x {
    background-repeat: repeat-x;
}

/* Solid Background Colors */
.bg-white {
    background-color: #fff;
}
.bg-black {
    background-color: #000;
}
.bg-pink {
    background-color: var(--neon-pink);
}
.bg-yellow {
    background-color: var(--sun-yellow);
}
.bg-purple {
    background-color: var(--deep-purple);
}
.bg-red {
    background-color: var(--blood-red);
}
.bg-green {
    background-color: var(--lime-green);
}
.bg-dark-blue {
    background: rgba(0, 0, 60, 0.7);
}
.bg-shadow {
    background-color: rgba(0, 0, 0, 0.7);
}

/* Sticky Note Backgrounds */
.bg-sticky-yellow {
    background-color: #f1f58f;
}
.bg-sticky-orange {
    background-color: #ffa930;
}
.bg-sticky-pink {
    background-color: #ff32b2;
}
.bg-sticky-blue {
    background-color: #a9edf1;
}
.bg-sticky-green {
    background-color: #74ed4b;
}

/* Tiled/Image Backgrounds */
.bg-cardboard {
    background-image: url("../img/tiles/cardboard.jpg");
    background-size: contain;
}
.bg-eden {
    background: url("../img/clipart/eden.gif");
    background-size: cover;
    background-position: center;
    background-position: no-repeat;
}
.bg-eden-alt {
    background: url("../img/clipart/eden_2.gif");
    background-size: cover;
    background-position: center;
    background-position: no-repeat;
}
.bg-stones {
    background: url("../img/tiles/stones.jpg");
}
.bg-bricks {
    background: url("../img/tiles/brick.jpg");
}
.bg-castle-defense {
    background:
        url("../img/clipart/castle_defense.gif") repeat-x,
        url("../img/clipart/montypython.gif") repeat-x;
    background-position:
        bottom,
        top center;
    background-size: auto, contain;
    padding: 275px 0 0 0;
}
.bg-runescape-ui {
    background: url("../img/clipart/runescape-interface.png");
}
.bg-old-paper {
    background: url("../img/clipart/fantasy_paper.jpg");
}
.bg-torch {
    background: url("../img/tiles/torch.gif");
    background-position: bottom;
}
.bg-rock {
    background: url("../img/tiles/rock.jpg");
}
.bg-fantasy-paper {
    background: url("https://plaisance.neocities.org/bg/bg_flowertile.jpg");
}
.bg-wizzard {
    background: url("../img/clipart/wizzard.gif");
}
.bg-medieval {
    background: url("../img/clipart/medieval.jpeg");
    background-size: contain;
}
.bg-bamboo {
    background: url("../img/clipart/bamboo.gif");
    background-size: contain;
}
.bg-ocean {
    background-image: url("../img/tiles/beach.jpg");
}
.bg-feet {
    background:
        linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
        url("../img/tiles/feet.gif");
}
.bg-cloudy {
    background-image: url("../img/tiles/cloudy.jpg");
}
.bg-sunset {
    background: url("../img/tiles/sunset.jpg");
}
.bg-pines {
    background-image: url("../img/tiles/pines.gif");
}
.bg-wood {
    background-image: url("../img/tiles/wood.jpg");
}
.bg-wood-alt {
    background-image: url("../img/tiles/wood_alt.jpg");
}
.bg-matzo {
    background-image: url("../img/tiles/matzo.gif");
}
.bg-chinese {
    background-image: url("../img/tiles/chinese.gif");
}
.bg-jungle-animals {
    background-image: url("../img/clipart/bigpost.jpg");
}
.bg-shells {
    background: url("../img/tiles/shells.gif");
}
.bg-red-cross {
    background: url("../img/tiles/red_cross.jpg");
}
.bg-scroll {
    background: url("../img/tiles/scroll.jpg");
}
.bg-white-paper {
    background: url("../img/tiles/paper_white.gif");
}
.bg-smiley {
    background: url("../img/tiles/smiley.gif");
}
.bg-smiley-animated {
    background: url("../img/tiles/smiley_animated.gif");
}
.bg-waterfall {
    background: url("../img/tiles/waterfall.jpg");
}
.bg-jesus {
    background: url("../img/tiles/jesus.jpg");
}
.bg-village {
    background-image: url("../img/tiles/village.gif");
}
.bg-grass {
    background: url("../img/tiles/grass.gif");
}
.bg-ivy {
    background: url("../img/tiles/ivy.jpg");
}
.bg-fern {
    background: url("../img/tiles/fern.gif");
}
.bg-leaves {
    background: url("../img/tiles/leaves.gif");
}
.bg-turquoise {
    background: url("../img/tiles/0.jpg");
}
.bg-blue-swirl {
    background: url("../img/tiles/blue_swirl.jpg");
}

.bg-blue-swirl a,
.bg-blue-swirl p a {
    color: var(--sun-yellow) !important;
}
.bg-brown-paper {
    background: url("../img/tiles/paper.jpg");
}
.bg-beach-from-above {
    background:
        linear-gradient(rgba(0, 0, 51, 0.6), rgba(0, 0, 51, 0.6)),
        url("../img/tiles/b_fly_02.jpg");
    background-size: 100% 100%;
    background-position: center;
}
.bg-ruled-paper {
    background: url("../img/tiles/ruled_paper.gif");
    padding: 19px 15px 15px 23%;
}
.bg-ruled-paper-header {
    background: url("../img/tiles/ruled_paper_top.gif");
    padding: 19px 15px 15px 23%;
}
.bg-smoky-leaves {
    background: url("../img/tiles/leaves_smoky.jpg");
}
.bg-shore {
    background: url("../img/tiles/shore.jpg");
    background-size: 100% 100%;
}
.bg-water {
    background: url("../img/tiles/water.jpg");
}
.bg-super-nova {
    background: url("../img/tiles/super_nova.jpg");
    background-position: center;
    background-size: contain;
}
.bg-seashore {
    background-image: url("../img/tiles/sea_shore.gif");
}
.bg-dolphins {
    background: url("../img/tiles/dolphins.jpg");
}
.bg-sand {
    background:
        linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.1)),
        url("../img/tiles/sand.jpg");
}
.bg-sand-alt {
    background: url("../img/tiles/bgbeach4.gif");
    background-size: contain;
    background-repeat: repeat;
}
.bg-orchid {
    background: url("../img/tiles/orchid.jpg");
}
.bg-rainbow-paper {
    background: url("../img/tiles/rainbow_paper.gif");
}
.bg-black-smoke {
    background: url("../img/tiles/black_smoke.jpg");
}
.bg-steel-cones {
    background: url("../img/tiles/steel_cones.gif");
}
.bg-beanie-babies {
    background: url("../img/tiles/beanies.gif");
}
.bg-purple {
    background: url("../img/tiles/purple.gif");
}
.bg-teddy {
    background-image: url("../img/tiles/teddy_bear.jpg");
}
.bg-bass {
    background: url("../img/tiles/bass.gif");
    background-repeat: repeat;
    background-size: 40%;
}
.bg-bears {
    background-image: url("../img/tiles/teddy_bears.gif");
}
.bg-polar-bears {
    background-image: url("../img/tiles/polar_bear.gif");
}
.bg-island {
    background: url("../img/tiles/island.jpg");
}
.bg-rbow {
    background: url("../img/tiles/rainbow.jpg");
}
.bg-dark-moon {
    background: url("../img/tiles/dark_moon.gif");
}
.bg-beach-alt {
    background: url("../img/tiles/beach_alt.gif");
}
.bg-hkitty {
    background: url("../img/tiles/hello_kitty.jpg");
}
.bg-grimace {
    background: url("../img/tiles/grimace.gif");
}
.bg-cds {
    background: url("../img/tiles/cds.jpg");
}
.bg-binary-swirl {
    background: url("../img/tiles/binary_swirl.jpg");
}
.bg-green-palm {
    background: url("../img/tiles/palm.gif");
}
.bg-rainbow-clouds {
    background: url("../img/tiles/rainbow_clouds.gif");
}
.bg-bible {
    background: url("../img/tiles/bible.jpg");
}
.bg-smoke-blue {
    background: url("../img/tiles/blue_smoke.gif");
}
.bg-faded-clouds {
    background: url("../img/tiles/clouds_faded.jpg");
}
.bg-egypt {
    background: url("../img/tiles/egypt.gif");
}
.bg-fallen {
    background: url("../img/tiles/fallen.jpg");
    background-position: center;
    background-size: 50%;
}
.bg-floral {
    background: url("../img/tiles/floral.jpg");
}
.bg-eyeball {
    background: url("../img/tiles/eyeball.gif");
}
.bg-text {
    background-image: url("../img/tiles/text.jpg");
}
.bg-faded-paper {
    background: url("../img/tiles/text_faded.jpg");
}
.bg-red-sky {
    background: url("../img/tiles/red_sky.jpg");
}
.bg-fire {
    background: url("../img/tiles/fire.jpg");
}
.bg-metal-water {
    background: url("../img/tiles/water_metal.gif");
}
.bg-panda {
    background: url("../img/tiles/panda.gif");
}
.bg-jungle {
    background-image: url("../img/tiles/jungle.jpg");
    background-size: 100% auto;
    background-position: bottom;
}
.bg-geisha {
    background: url("../img/tiles/geisha.jpg");
}
.bg-rainbow {
    background: url("../img/tiles/rainbow_animated.gif");
}
.bg-clouds {
    background: url("../img/tiles/clouds.gif");
}
.bg-beer {
    background: url("../img/tiles/beer.jpg");
    background-size: 40%;
}

/* ==========================================================================
   8. Component Styles
   ========================================================================== */

/* --- Article Content --- */
article p,
article h1,
article h3,
article ul,
article ol,
article br {
    line-height: 26px;
}

article img {
    width: 80%;
    margin-left: 10%;
    box-shadow: 0 10px 10px 2px rgba(0, 0, 0, 0.3);
    border: 3px solid black;
    cursor: pointer;
    transition: transform 0.3s ease;
}

article img:hover {
    transform: scale(1.02);
}

/* --- Blog Images --- */
.blog-image-container {
    break-inside: avoid;
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 0 auto;
}

.blog-image-label {
    cursor: pointer;
    display: block;
    break-inside: avoid;
    background: white;
    box-shadow: 0 10px 10px 2px rgba(0, 0, 0, 0.3);
    border: 3px solid black;
    padding: 10px 10px 1px 10px;
    transition: transform 0.3s ease;
    width: fit-content;
    margin: 0 auto;
    max-width: 600px;
}

.blog-image-label:hover {
    transform: scale(1.02);
}

.blog-image-label img {
    width: 100%;
    height: 416px; /* 16 lines × 26px */
    cursor: pointer;
    display: block;
    margin-bottom: 0;
    margin-left: 0 !important;
    box-shadow: none !important;
    border: none !important;
}

.image-expand-label.blog-image-label img:hover {
    transform: none;
}

.blog-image-caption {
    text-align: center;
    font-style: italic;
    margin: 0;
    padding: 8px;
    color: black;
    font-size: 14px;
    break-inside: avoid;
    page-break-inside: avoid;
    line-height: 1.4;
    height: 61px; /* Magic number for perfect alignment */
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-expand-label.scale-hover:hover {
    transform: scale(1.02);
    transition: transform 0.2s ease-in-out;
    border: 2px solid red !important;
}

/* --- Image Expand (Modal) --- */
.image-expand-checkbox {
    display: none;
}

.image-expand-label {
    cursor: pointer;
    transition: transform 0.2s ease-in-out;
}

.image-expand-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.image-expand-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    z-index: 1;
}

.image-expand-container .image-expand-checkbox:checked ~ .image-expand-overlay {
    display: flex;
}

.image-expand-content {
    max-width: 90%;
    max-height: 90vh;
    position: relative;
    cursor: default;
    z-index: 1002;
    display: flex;
    flex-direction: column;
    background: #c0c0c0;
    border: 2px outset #c0c0c0;
    box-shadow:
        1px 1px 0px #000000,
        2px 2px 0px #000000,
        3px 3px 0px #000000;
    font-family: "MS Sans Serif", "Microsoft Sans Serif", sans-serif;
    font-size: 11px;
}

.image-expand-titlebar {
    background: linear-gradient(90deg, #000080, #1084d0);
    color: white;
    padding: 3px 2px 3px 8px;
    font-weight: bold;
    font-size: 13px;
    border-bottom: 2px outset #c0c0c0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 22px;
}

.image-expand-title {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 5px;
}

.image-expand-content img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: calc(90vh - 100px);
    margin: 2px;
    display: block;
    object-fit: contain;
    border: 2px inset #c0c0c0;
}

.image-expand-content img:hover {
    transform: none;
}

.image-caption {
    text-align: center;
    font-style: italic;
    margin-top: 10px;
    color: #666;
    font-size: 14px;
}

.image-expand-caption {
    text-align: left;
    font-style: italic;
    color: black;
    font-size: 11px;
    padding: 8px 12px;
    background: #c0c0c0;
    margin: 0 2px 2px 2px;
    border-top: 2px outset #c0c0c0;
}

.image-expand-close {
    color: black;
    font-size: 12px;
    text-decoration: none;
    background: #c0c0c0;
    width: 18px;
    height: 16px;
    border: 1px outset #c0c0c0;
    margin-left: 2px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    cursor: pointer;
    font-family: "MS Sans Serif", "Microsoft Sans Serif", sans-serif;
    line-height: 1;
    flex-shrink: 0;
}

.image-expand-close::before {
    content: "×";
    display: block;
    line-height: 1;
    font-size: 12px;
    margin-top: -1px;
}

.image-expand-close:hover,
.image-expand-close:active {
    border: 1px inset #c0c0c0;
}

/* --- Navigation --- */
nav {
    padding: 10px;
    text-align: center;
}

nav ul {
    justify-content: center;
    flex-wrap: wrap;
    list-style: none;
}

nav li {
    margin: 0 10px;
}

nav img {
    height: 25px;
    vertical-align: text-bottom;
}

nav a {
    display: block;
    padding: 8px 15px;
    margin: 5px;
    border: 2px outset var(--sun-yellow);
    background: linear-gradient(to bottom, var(--neon-pink), #cc0099);
    color: black;
    font-size: 1.2rem;
    font-weight: bold;
    text-decoration: none;
    cursor: pointer;
}

nav a:hover {
    background-color: var(--neon-pink);
    color: black;
    text-decoration: underline;
}

.nav-toggle-label {
    display: none; /* Hidden by default, shown in media query */
    padding: 8px 15px;
    margin: 5px;
    border: 2px outset var(--sun-yellow);
    background: linear-gradient(to bottom, var(--neon-pink), #cc0099);
    color: black;
    font-size: 1.2rem;
    font-weight: bold;
    text-decoration: none;
    cursor: pointer;
}

/* Navigation Hacks */
.rainbow-header-hack {
    margin: 4px 4px 0 4px;
}
.rainbow-nav-hack {
    padding: 0;
    margin-left: 2px;
    margin-right: 2px;
}
.rainbow-footer-hack {
    margin: 2px;
}
.nav-inner {
    margin: -2px -2px;
    padding: 0 2px;
}
.nav-inner-inner {
    margin: 2px -4px;
}
.nav-inner-inner ul {
    padding: 10px;
}
.home-footer-hack {
    padding-top: 21px;
}

/* --- Buttons --- */
.retro-button {
    display: inline-block;
    padding: 8px 15px;
    margin: 5px;
    border: 2px outset var(--sun-yellow);
    color: black;
    font-weight: bold;
    text-decoration: none;
    cursor: pointer;
}

.retro-button:hover {
    border: 2px inset var(--sun-yellow);
}

/* --- Lists --- */
.widget ul {
    list-style-type: none;
    overflow-wrap: break-word;
    padding-left: 0;
}

.widget ul li {
    position: relative;
    padding-left: 2em;
    margin-bottom: 0.5em;
}

.ul-rainbow li::before,
.ul-palm li::before,
.ul-new li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.2em;
    background-size: contain;
    background-repeat: no-repeat;
}

.ul-rainbow li::before {
    width: 1.5em;
    height: 1.5em;
    background-image: url("../img/bullets/rainbow.gif");
}
.ul-palm li::before {
    width: 1.5em;
    height: 1.5em;
    background-image: url("../img/bullets/tree4.gif");
}
.ul-new li {
    padding-left: 3em !important;
    margin-bottom: 0.5em;
}
.ul-new li::before {
    width: 2.5em;
    height: 2.5em;
    background-image: url("../img/bullets/new.gif");
}

/* Bullet Image Lists */
.ul-rainbow-ball {
    list-style-image: url("../img/bullets/aball.gif");
}
.ul-heart {
    list-style-image: url("../img/bullets/aniheart.gif");
}
.ul-paw {
    list-style-image: url("../img/bullets/anipaw.gif");
}
.ul-web {
    list-style-image: url("../img/bullets/ballarrowring.gif");
}
.ul-pin-blue {
    list-style-image: url("../img/bullets/bluepush.gif");
}
.ul-cd {
    list-style-image: url("../img/bullets/cd.gif");
}
.ul-darwin {
    list-style-image: url("../img/bullets/darwinfish.gif");
}
.ul-dolphin {
    list-style-image: url("../img/bullets/dolph.gif");
}
.ul-earth {
    list-style-image: url("../img/bullets/earth.gif");
}
.ul-siren {
    list-style-image: url("../img/bullets/ems20.gif");
}
.ul-gears {
    list-style-image: url("../img/bullets/gears.gif");
}
.ul-hotlist {
    list-style-image: url("../img/bullets/hotlist.gif");
}
.ul-shark {
    list-style-image: url("../img/bullets/imgsharkicon.gif");
}
.ul-jewish {
    list-style-image: url("../img/bullets/jewish.gif");
}
.ul-atom {
    list-style-image: url("../img/bullets/NUC_AN3.GIF");
}
.ul-smile {
    list-style-image: url("../img/bullets/smilei.gif");
}
.ul-torch {
    list-style-image: url("../img/bullets/torch.gif");
}

/* --- Horizontal Rules --- */
.hr {
    height: 20px;
    margin: 15px 0;
    border-top: 1px solid var(--lime-green);
    border-bottom: 1px solid var(--lime-green);
    background:
        linear-gradient(
            45deg,
            var(--neon-pink) 25%,
            transparent 25%,
            transparent 75%,
            var(--neon-pink) 75%
        ),
        linear-gradient(
            45deg,
            var(--neon-pink) 25%,
            transparent 25%,
            transparent 75%,
            var(--neon-pink) 75%
        );
    background-size: 10px 10px;
    background-position:
        0 0,
        5px 5px;
}

[class^="hr-"] {
    height: 20px;
    margin: 15px 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.hr-rainbow {
    background-image: url("../img/hrs/rainbowhr.gif");
}
.hr-rainbow-swirl {
    background-image: url("../img/hrs/swirlbar.gif");
}
.hr-rainbow-paws {
    background-image: url("../img/hrs/rainbow_paws.gif");
}
.hr-island {
    background-image: url("../img/hrs/island.gif");
}
.hr-island-alt {
    background-image: url("../img/hrs/islandpa.gif");
}
.hr-teddies {
    background-image: url("../img/hrs/teddiesb.gif");
}
.hr-dna {
    background-image: url("../img/hrs/DNAdivider.gif");
}
.hr-andes {
    background-image: url("../img/hrs/andes.gif");
    background-size: 100% 86px;
    height: 86px;
}
.hr-jewish {
    background-image: url("../img/hrs/jewish.gif");
}
.hr-stained-glass {
    background-image: url("../img/hrs/stained-glass.gif");
}

/* --- Widgets --- */
.widget {
    margin-bottom: 20px;
    padding: 10px;
}

.widget-flush {
    margin: 0;
}

.widget-title {
    margin-bottom: 10px;
    padding: 5px;
    border-bottom: 2px solid var(--sun-yellow);
    background-color: var(--neon-pink);
    color: var(--sun-yellow);
    font-weight: bold;
    text-align: center;
}

.widget-title-flush {
    padding: 5px;
    border-bottom: 2px solid var(--sun-yellow);
    background-color: var(--neon-pink);
    color: var(--sun-yellow);
    font-weight: bold;
    text-align: center;
}

.widget-inner {
    background-color: var(--background-dark-alpha);
}

.widget-inner-pink {
    margin: 15px;
    background: var(--neon-pink);
    color: var(--sun-yellow);
}

.widget.bg-seashore {
    color: var(--neon-pink);
}
.widget.bg-sand {
    color: black;
}

/* --- Miscellaneous Components --- */
.comment-message {
    max-height: 300px;
    overflow-y: auto;
    line-height: 1.5;
}

.highlight {
    background-color: var(--sun-yellow);
}

.raised {
    box-shadow:
        5px 4px 8px rgba(0, 0, 0, 0.25),
        0 6px 20px rgba(0, 0, 0, 0.25);
    transform: translateY(0);
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.raised:hover {
    box-shadow:
        5px 4px 8px var(--background-black),
        0 6px 20px var(--background-black);
    transform: translateY(-4px);
}

/* Transform Classes */
.tilted {
    transform: rotate(5deg);
}
.tilted-reverse {
    transform: rotate(-5deg);
}
.polaroid {
    min-height: 375px;
}
.flipped {
    transform: scale(-1, 1);
}
.scale-2x {
    transform: scale(2);
}

/* Badge and Counter Components */
.badge {
    display: inline-block;
    width: 88px;
    height: 31px;
    border: 1px solid var(--electric-blue);
    background-color: #333366;
    color: var(--sun-yellow);
    font-size: 0.7rem;
    line-height: 31px;
}

.counter {
    padding: 5px;
    font-family: "Courier New", monospace;
    text-align: center;
    font-weight: bold;
}

.counter-icon {
    height: 25px;
}

.em-dash {
    font-style: italic;
    color: var(--neon-pink);
}

/* Logo Components */
.logo {
    height: 140px;
    width: auto;
    margin-top: 62px;
}

.logo-alt {
    height: 282px;
    width: auto;
}

/* Floating Components */
.fish {
    width: 250px;
    height: 113px;
    padding: 5px;
    background-image: url("../img/hrs/fish.gif");
    transform: rotate(-5deg);
    z-index: 10001;
}

.welcome-wrapper::after {
    content: url("../img/clipart/welcome.gif");
    position: absolute;
}

.mezuzah {
    width: 22px;
    height: 129px;
    background-image: url("../img/clipart/mezuzah.gif");
}
.guestbook-footer-img {
    width: 100px;
    margin: 150px auto 50px auto;
}
.guestbook-baby {
    width: 118px;
    height: 142px;
    background-image: url("../img/clipart/gnome-child.png");
}

/* Guestbook page specific widget title styling */
.guestbook-page .widget-title {
    color: var(--lime-green);
    border-bottom: 2px solid var(--lime-green);
}

.pen {
    width: 100px;
    height: 100px;
    background-image: url("../img/clipart/yo-draw.gif");
}

.camera {
    width: 80px;
    height: 60px;
    background-image: url("../img/clipart/camera.gif");
}

/* ==========================================================================
   9. Animation Keyframes & Classes
   ========================================================================== */

/* --- Keyframes --- */
@keyframes blink {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
}

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

@keyframes fade {
    0% {
        opacity: 0;
    }
    3% {
        opacity: 1;
    }
    15% {
        opacity: 1;
    }
    18% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

@keyframes minecraft-logo {
    0% {
        transform: scale(1) skew(0deg, 0deg);
    }
    25% {
        transform: scale(1.08) skew(1.5deg, -1deg);
    }
    50% {
        transform: scale(1.12) skew(2deg, -1.5deg);
    }
    75% {
        transform: scale(1.08) skew(1.5deg, -1deg);
    }
    100% {
        transform: scale(1) skew(0deg, 0deg);
    }
}

/* --- Animation Classes --- */
.blink {
    animation: blink 1s infinite;
}

.minecraft-logo {
    animation: minecraft-logo 1.5s ease-in-out infinite;
    transform-origin: center;
}

/* --- Marquee --- */
.marquee-container {
    margin: 0;
    padding: 5px 0;
    overflow: hidden;
    white-space: nowrap;
}

.marquee {
    display: inline-block;
    padding-left: 100%;
    color: var(--neon-pink);
    font-weight: bold;
    animation: marquee 15s linear infinite;
    text-shadow:
        1px 1px 0 #000,
        -1px -1px 0 #000,
        1px -1px 0 #000,
        -1px 1px 0 #000;
}

/* Rainbow Marquee */
.rainbow-marquee span:nth-of-type(7n + 1) {
    color: red;
}
.rainbow-marquee span:nth-of-type(7n + 2) {
    color: orange;
}
.rainbow-marquee span:nth-of-type(7n + 3) {
    color: yellow;
}
.rainbow-marquee span:nth-of-type(7n + 4) {
    color: green;
}
.rainbow-marquee span:nth-of-type(7n + 5) {
    color: blue;
}
.rainbow-marquee span:nth-of-type(7n + 6) {
    color: indigo;
}
.rainbow-marquee span:nth-of-type(7n + 7) {
    color: violet;
}

/* --- Slideshow --- */
.slideshow {
    overflow: hidden;
}

.slideshow-face {
    height: 300px;
}
.slideshow-soapbox,
.slideshow-awards,
.slideshow-pets {
    height: 300px;
    margin: 0 auto 20px;
}

.slideshow-face img,
.slideshow-soapbox img,
.slideshow-awards img,
.slideshow-pets img {
    position: absolute;
    top: 0;
    left: 0;
    object-fit: contain;
    opacity: 0;
    animation: fade 35s infinite;
}

.slideshow-face img {
    width: 100%;
    height: auto;
    max-height: 300px;
    object-fit: cover;
}

.slideshow-soapbox img,
.slideshow-awards img,
.slideshow-pets img {
    width: auto;
    height: 300px;
}

/* Slideshow Animation Delays (up to 20 images) */
.slideshow img:nth-child(1) {
    animation-delay: 0s;
}
.slideshow img:nth-child(2) {
    animation-delay: 5s;
}
.slideshow img:nth-child(3) {
    animation-delay: 10s;
}
.slideshow img:nth-child(4) {
    animation-delay: 15s;
}
.slideshow img:nth-child(5) {
    animation-delay: 20s;
}
.slideshow img:nth-child(6) {
    animation-delay: 25s;
}
.slideshow img:nth-child(7) {
    animation-delay: 30s;
}
.slideshow img:nth-child(8) {
    animation-delay: 35s;
}
.slideshow img:nth-child(9) {
    animation-delay: 40s;
}
.slideshow img:nth-child(10) {
    animation-delay: 45s;
}
.slideshow img:nth-child(11) {
    animation-delay: 50s;
}
.slideshow img:nth-child(12) {
    animation-delay: 55s;
}
.slideshow img:nth-child(13) {
    animation-delay: 60s;
}
.slideshow img:nth-child(14) {
    animation-delay: 65s;
}
.slideshow img:nth-child(15) {
    animation-delay: 70s;
}
.slideshow img:nth-child(16) {
    animation-delay: 75s;
}
.slideshow img:nth-child(17) {
    animation-delay: 80s;
}
.slideshow img:nth-child(18) {
    animation-delay: 85s;
}
.slideshow img:nth-child(19) {
    animation-delay: 90s;
}
.slideshow img:nth-child(20) {
    animation-delay: 95s;
}

/* ==========================================================================
   10. Overlay Components
   ========================================================================== */

/* --- Base Overlay Styles --- */
#shabbat-overlay,
#mobile-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    flex-direction: column;
    padding: 20px;
}

body.shabbat-overlay-active,
body.mobile-overlay-active {
    overflow: hidden;
    padding: 0;
}

/* --- Bouncing Elements --- */
.bouncing-shalom,
.bouncing-grass {
    position: fixed;
    z-index: 9998;
}

.bouncing-shalom img,
.bouncing-grass img {
    width: 100%;
    height: auto;
}

/* --- Overlay Content --- */
.shabbat-image,
.mobile-image {
    display: block !important;
    margin: 0 auto 20px auto !important;
    width: 200px;
    height: auto;
    border: none;
}

#shabbat-overlay .image-expand-content,
#mobile-overlay .image-expand-content {
    max-width: 600px;
    z-index: 10000;
}

#shabbat-overlay .shabbat-content,
#mobile-overlay .mobile-content {
    padding: 20px;
    text-align: center;
    overflow-y: scroll;
}

#shabbat-overlay h1,
#mobile-overlay h1 {
    font-size: 2rem;
    margin-bottom: 20px;
    color: black;
}

#shabbat-overlay p,
#mobile-overlay p {
    font-size: 1.2rem;
    margin-bottom: 30px;
    max-width: 600px;
    line-height: 1.6;
    color: black;
}

/* --- Windows 95 Style Switch --- */
.switch-windows95 {
    position: relative;
    display: inline-block;
    width: 170px;
    height: 35px;
    background: #c0c0c0;
    border-top: 2px solid #fff;
    border-left: 2px solid #fff;
    border-right: 2px solid #808080;
    border-bottom: 2px solid #808080;
    box-shadow: 1px 1px 0 0 #000;
    cursor: pointer;
}

.switch-windows95 input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider-windows95 {
    position: absolute;
    cursor: pointer;
    top: 2px;
    right: 2px;
    bottom: 2px;
    width: 50px;
    background-color: #c0c0c0;
    border-top: 2px solid #808080;
    border-left: 2px solid #808080;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transition: 0.4s;
}

.slider-windows95:before {
    position: absolute;
    content: "";
    height: 19px;
    width: 25px;
    left: 0;
    bottom: 0;
    background-color: #c0c0c0;
    border-top: 2px solid #fff;
    border-left: 2px solid #fff;
    border-right: 2px solid #808080;
    border-bottom: 2px solid #808080;
    transition: 0.4s;
}

input:checked + .slider-windows95 {
    background-color: #c0c0c0;
}

input:focus + .slider-windows95 {
    box-shadow: 0 0 1px #2196f3;
}

input:checked + .slider-windows95:before {
    transform: translateX(16px);
}

.slider-text-windows95 {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: black;
    font-family: "MS Sans Serif", "Microsoft Sans Serif", sans-serif;
    font-size: 14px;
    white-space: nowrap;
}

/* --- Button Containers --- */
.shabbat-toggle-container,
.mobile-button-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
}

.enter-button {
    background-color: #c0c0c0;
    color: black;
    border-top: 2px solid #fff;
    border-left: 2px solid #fff;
    border-right: 2px solid #808080;
    border-bottom: 2px solid #808080;
    box-shadow: 1px 1px 0 0 #000;
    padding: 10px 30px;
    font-family: "MS Sans Serif", "Microsoft Sans Serif", sans-serif;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.1s ease;
}

.enter-button:active {
    border-top: 2px solid #808080;
    border-left: 2px solid #808080;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    box-shadow: inset 1px 1px 0 0 #000;
}

.enter-button:hover {
    background-color: #d0d0d0;
}

#dismiss-shabbat-overlay {
    background-color: white;
    color: black;
    border: 2px solid white;
    padding: 10px 20px;
    font-size: 1rem;
    cursor: pointer;
    transition:
        background-color 0.3s,
        color 0.3s;
}

#dismiss-shabbat-overlay:hover {
    background-color: black;
    color: white;
}

/* Shabbat Goy Mode Success Styles */
.shabbat-success {
    text-align: center;
    padding: 10px;
    background-color: #c0c0c0;
    border: 2px solid #808080;
    border-top: 2px solid #fff;
    border-left: 2px solid #fff;
    box-shadow: 1px 1px 0 0 #000;
}

.shabbat-success p {
    margin: 5px 0;
}

.shabbat-small {
    font-size: 0.85rem;
    color: #555;
}

/* Loading state for the toggle */
.shabbat-loading label {
    opacity: 0.7;
    cursor: wait;
}

/* ==========================================================================
   10. Custom Cursors
   ========================================================================== */

.cursor-index {
    cursor: url("../img/cursors/surf.cur"), auto;
}

nav .cursor-index a:hover,
.cursor-index button:hover,
.cursor-index input:hover,
.cursor-index [role="button"]:hover,
.cursor-index [onclick]:hover,
.cursor-index .image-expand-label:hover {
    cursor: url("../img/cursors/surf.cur"), pointer;
}

.cursor-surf {
    cursor: url("../img/cursors/surf.cur"), auto;
}

.cursor-surf a:hover,
.cursor-surf button:hover,
.cursor-surf input:hover,
.cursor-surf [role="button"]:hover,
.cursor-surf [onclick]:hover,
.cursor-surf .image-expand-label:hover {
    cursor: url("../img/cursors/surf-pointer.png"), pointer;
}

.cursor-free {
    cursor: url("../img/cursors/free.cur"), auto;
}

.cursor-free a:hover,
.cursor-free button:hover,
.cursor-free input:hover,
.cursor-free [role="button"]:hover,
.cursor-free [onclick]:hover,
.cursor-free .image-expand-label:hover {
    cursor: url("../img/cursors/free.cur"), pointer;
}

.cursor-download {
    cursor: url("../img/cursors/download.png"), auto;
}

.cursor-download a:hover,
.cursor-download button:hover,
.cursor-download input:hover,
.cursor-download [role="button"]:hover,
.cursor-download [onclick]:hover,
.cursor-download .image-expand-label:hover {
    cursor: url("../img/cursors/download.png"), pointer;
}

.cursor-pics {
    cursor: url("../img/cursors/teddy.png"), auto;
}

nav .cursor-pics a:hover,
.cursor-pics button:hover,
.cursor-pics input:hover,
.cursor-pics [role="button"]:hover,
.cursor-pics [onclick]:hover,
.cursor-pics .image-expand-label:hover {
    cursor: url("../img/cursors/teddy.png"), pointer;
}

.cursor-teddy {
    cursor: url("../img/cursors/teddy.png"), auto;
}

.cursor-teddy a:hover,
.cursor-teddy button:hover,
.cursor-teddy input:hover,
.cursor-teddy [role="button"]:hover,
.cursor-teddy [onclick]:hover,
.cursor-teddy .image-expand-label:hover {
    cursor: url("../img/cursors/kiss-me.png"), pointer;
}

.cursor-bio {
    cursor: url("../img/cursors/jewish.cur"), auto;
}

nav .cursor-bio a:hover,
.cursor-bio button:hover,
.cursor-bio input:hover,
.cursor-bio [role="button"]:hover,
.cursor-bio [onclick]:hover,
.cursor-bio .image-expand-label:hover {
    cursor: url("../img/cursors/jewish.cur"), pointer;
}

.cursor-jewish {
    cursor: url("../img/cursors/jewish.cur"), auto;
}

.cursor-jewish a:hover,
.cursor-jewish button:hover,
.cursor-jewish input:hover,
.cursor-jewish [role="button"]:hover,
.cursor-jewish [onclick]:hover,
.cursor-jewish .image-expand-label:hover {
    cursor: url("../img/cursors/jewish-pointer.cur"), pointer;
}

.cursor-blog {
    cursor: url("../img/cursors/cigarette.png"), auto;
}

nav .cursor-blog a:hover,
.cursor-blog button:hover,
.cursor-blog input:hover,
.cursor-blog [role="button"]:hover,
.cursor-blog [onclick]:hover,
.cursor-blog .image-expand-label:hover {
    cursor: url("../img/cursors/cigarette.png"), pointer;
}

.cursor-cigarette {
    cursor: url("../img/cursors/cigarette.png"), auto;
}

.cursor-cigarette a:hover,
.cursor-cigarette button:hover,
.cursor-cigarette input:hover,
.cursor-cigarette [role="button"]:hover,
.cursor-cigarette [onclick]:hover,
.cursor-cigarette .image-expand-label:hover {
    cursor: url("../img/cursors/beer.cur"), pointer;
}

.cursor-guestbook {
    cursor: url("../img/cursors/gauntlet.cur"), auto;
}

nav .cursor-guestbook a:hover,
.cursor-guestbook button:hover,
.cursor-guestbook input:hover,
.cursor-guestbook [role="button"]:hover,
.cursor-guestbook [onclick]:hover,
.cursor-guestbook .image-expand-label:hover {
    cursor: url("../img/cursors/gauntlet.cur"), pointer;
}

.cursor-gauntlet {
    cursor: url("../img/cursors/gauntlet.cur"), auto;
}

.cursor-gauntlet a:hover,
.cursor-gauntlet button:hover,
.cursor-gauntlet input:hover,
.cursor-gauntlet [role="button"]:hover,
.cursor-gauntlet [onclick]:hover,
.cursor-gauntlet .image-expand-label:hover {
    cursor: url("../img/cursors/gauntlet-pointer.cur"), pointer;
}

.cursor-spam {
    cursor: url("../img/cursors/spam.cur"), auto;
}

.cursor-spam a:hover,
.cursor-spam button:hover,
.cursor-spam input:hover,
.cursor-spam textarea:hover,
.cursor-spam [role="button"]:hover,
.cursor-spam [onclick]:hover,
.cursor-spam .image-expand-label:hover {
    cursor: url("../img/cursors/spam.cur"), pointer;
}

.cursor-japan {
    cursor: url("../img/cursors/japan.cur"), auto;
}

.cursor-japan a:hover,
.cursor-japan button:hover,
.cursor-japan input:hover,
.cursor-japan textarea:hover,
.cursor-japan [role="button"]:hover,
.cursor-japan [onclick]:hover,
.cursor-japan .image-expand-label:hover {
    cursor: url("../img/cursors/japan.cur"), pointer;
}

.cursor-onepiece {
    cursor: url("../img/cursors/onepiece.gif"), auto;
}

.cursor-onepiece a:hover,
.cursor-onepiece button:hover,
.cursor-onepiece input:hover,
.cursor-onepiece textarea:hover,
.cursor-onepiece [role="button"]:hover,
.cursor-onepiece [onclick]:hover,
.cursor-onepiece .image-expand-label:hover {
    cursor: url("../img/cursors/onepiece.gif"), pointer;
}

.cursor-naruto {
    cursor: url("../img/cursors/naruto.png"), auto;
}

.cursor-naruto a:hover,
.cursor-naruto button:hover,
.cursor-naruto input:hover,
.cursor-naruto textarea:hover,
.cursor-naruto [role="button"]:hover,
.cursor-naruto [onclick]:hover,
.cursor-naruto .image-expand-label:hover {
    cursor: url("../img/cursors/naruto.png"), pointer;
}

.cursor-deathnote {
    cursor: url("../img/cursors/deathnote.cur"), auto;
}

.cursor-deathnote a:hover,
.cursor-deathnote button:hover,
.cursor-deathnote input:hover,
.cursor-deathnote textarea:hover,
.cursor-deathnote [role="button"]:hover,
.cursor-deathnote [onclick]:hover,
.cursor-deathnote .image-expand-label:hover {
    cursor: url("../img/cursors/deathnote.cur"), pointer;
}

.cursor-aot {
    cursor: url("../img/cursors/aot.cur"), auto;
}

.cursor-aot a:hover,
.cursor-aot button:hover,
.cursor-aot input:hover,
.cursor-aot textarea:hover,
.cursor-aot [role="button"]:hover,
.cursor-aot [onclick]:hover,
.cursor-aot .image-expand-label:hover {
    cursor: url("../img/cursors/aot.cur"), pointer;
}

.cursor-neongenesis {
    cursor: url("../img/cursors/neongenesis.cur"), auto;
}

.cursor-neongenesis a:hover,
.cursor-neongenesis button:hover,
.cursor-neongenesis input:hover,
.cursor-neongenesis textarea:hover,
.cursor-neongenesis [role="button"]:hover,
.cursor-neongenesis [onclick]:hover,
.cursor-neongenesis .image-expand-label:hover {
    cursor: url("../img/cursors/neongenesis.cur"), pointer;
}

.cursor-garbage {
    cursor: url("../img/cursors/garbage.cur"), auto;
}

.cursor-garbage a:hover,
.cursor-garbage button:hover,
.cursor-garbage input:hover,
.cursor-garbage textarea:hover,
.cursor-garbage [role="button"]:hover,
.cursor-garbage [onclick]:hover,
.cursor-garbage .image-expand-label:hover {
    cursor: url("../img/cursors/garbage.cur"), pointer;
}

.cursor-dbz {
    cursor: url("../img/cursors/dbz.cur"), auto;
}

.cursor-dbz a:hover,
.cursor-dbz button:hover,
.cursor-dbz input:hover,
.cursor-dbz textarea:hover,
.cursor-dbz [role="button"]:hover,
.cursor-dbz [onclick]:hover,
.cursor-dbz .image-expand-label:hover {
    cursor: url("../img/cursors/dbz.cur"), pointer;
}

/* ==========================================================================
   11. Media Queries
   ========================================================================== */

/* --- Tablet and Below --- */
@media (max-width: 768px) {
    /* Typography */
    h1 {
        font-size: 2.2rem;
    }
    h2 {
        font-size: 1.8rem;
    }
    h3 {
        font-size: 1.5rem;
    }

    /* Spacing Adjustments */
    .p-20 {
        padding: 15px;
    }
    .p-25 {
        padding: 20px;
    }
    .p-50 {
        padding: 30px;
    }
    .p-75 {
        padding: 40px;
    }
    .p-80 {
        padding: 40px;
    }

    /* Layout Adjustments */
    .grid-2,
    .grid-3 {
        grid-template-columns: 1fr;
    }

    .main-content,
    .flex.p-15 {
        flex-direction: column;
    }

    .sidebar {
        width: 100%;
        margin-right: 0;
        margin-bottom: 20px;
    }

    .photo-grid {
        grid-template-columns: 1fr;
    }

    .w-30,
    .flex-1 {
        width: 100%;
    }

    .min-w-180 {
        min-width: auto;
    }

    .m-r-15 {
        margin-right: 0;
        margin-bottom: 15px;
    }

    /* Logo Adjustments */
    .logo {
        width: 100%;
        height: auto;
        margin-top: 90px;
        max-width: 400px;
    }

    .logo-alt {
        width: 100%;
        height: auto;
        max-width: 400px;
    }

    /* Position Adjustments */
    .pinned-top {
        top: 10px;
    }
    .pinned-right {
        right: 15px;
    }

    /* Tier list mobile stacking */
    .flex.m-b-10.border-solid.border-rainbow {
        flex-direction: column;
    }

    .flex.m-b-10.border-solid.border-rainbow
        > .flex.items-center.justify-center.w-100px,
    .flex.m-b-10.border-solid.border-rainbow > .flex.justify-center.w-100px {
        width: 100%;
        min-height: 40px;
    }

    .flex.m-b-10.border-solid.border-rainbow
        > .flex-1.flex-wrap.p-5.bg-black.items-center {
        width: 100%;
    }

    /* Footer images mobile sizing */
    footer img {
        max-width: 200px;
        height: auto;
    }

    /* Bio page mobile reordering */
    .bio-page .flex.p-15 {
        flex-direction: column;
    }

    .bio-page .w-30.min-w-180.m-r-15.p-15 {
        order: 2;
        width: 100%;
        margin-right: 0;
        margin-top: 20px;
    }

    .bio-page .flex-1.p-15 {
        order: 1;
        width: 100%;
    }

    /* Home page mobile reordering */
    .home-page .flex.p-15 {
        flex-direction: column;
    }

    .home-page .w-30.min-w-180.m-r-15.p-15 {
        order: 2;
        width: 100%;
        margin-right: 0;
        margin-top: 20px;
    }

    .home-page .flex-1.p-15 {
        order: 1;
        width: 100%;
    }

    /* Hide floating elements on mobile */
    .fish,
    .camera,
    .pen,
    .guestbook-baby {
        display: none;
    }

    /* Hide specific margin on mobile */
    .political-compass-title.m-r-50 {
        margin-right: 0;
    }

    /* Mobile Navigation Toggle */
    .nav-toggle-label {
        display: block;
    }

    .nav-links {
        display: none;
    }

    #nav-toggle:checked + .nav-toggle-label + .nav-links {
        display: block;
    }

    nav ul {
        flex-direction: column;
        padding: 0;
    }

    nav li {
        margin: 0;
    }

    .nav-inner-inner ul {
        padding: 0;
    }

    /* Hide active nav link on its own page for mobile */
    .home-page nav a[href="index.html"],
    .bio-page nav a[href="bio.html"],
    .pics-page nav a[href="pics.html"],
    .freebies-page nav a[href="freebies.html"],
    .blog-page nav a[href="blog.html"],
    .guestbook-page nav a[href="guestbook.html"] {
        display: none;
    }

    /* Page-specific mobile menu button styles */
    .home-page .nav-toggle-label {
        background: url(../img/tiles/orchid.jpg);
    }

    .bio-page .nav-toggle-label {
        background: url("../img/tiles/clouds.gif");
    }

    .pics-page .nav-toggle-label {
        background: url("../img/tiles/beanies.gif");
    }

    .blog-page .nav-toggle-label {
        background-image: url(../img/tiles/text.jpg);
    }

    .guestbook-page .nav-toggle-label {
        background: url("../img/tiles/scroll.jpg");
    }

    /* Add icons to mobile menu button */
    .nav-toggle-label::before {
        content: "";
        display: inline-block;
        width: 25px;
        height: 25px;
        vertical-align: text-bottom;
        margin-right: 10px;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }

    .home-page .nav-toggle-label::before {
        background-image: url(../img/bullets/dolph.gif);
    }

    .bio-page .nav-toggle-label::before {
        background-image: url("../img/bullets/jewish.gif");
    }

    .pics-page .nav-toggle-label::before {
        background-image: url("../img/bullets/smilei.gif");
    }

    .blog-page .nav-toggle-label::before {
        background-image: url("../img/bullets/hotlist.gif");
    }

    .guestbook-page .nav-toggle-label::before {
        background-image: url("../img/bullets/gbook.gif");
    }

    /* Welcome wrapper mobile adjustments */
    .welcome-wrapper img {
        max-width: 80%;
        height: auto;
    }

    .welcome-wrapper::after {
        max-width: 80%;
        height: auto;
        right: 15%;
    }

    /* Tablet-optimized ruled paper - use mobile background and no left margin */
    .bg-ruled-paper {
        background-image: url("../img/tiles/ruled_paper_mobile.gif");
        background-size: 1600px 26px; /* Keep original dimensions */
        background-repeat: repeat-y;
        background-position: top left;
        background-color: #ffffcc;
        padding: 26px 15px 15px 15px; /* Remove left margin - use normal padding */
        position: relative;
    }

    .bg-ruled-paper-header {
        background-image: url("../img/tiles/ruled_paper_top_mobile.gif"); /* Use mobile header without red line */
        background-size: 1600px auto; /* Keep original width, auto height */
        background-repeat: no-repeat;
        background-position: top left;
        background-color: #ffffcc;
        padding: 26px 15px 15px 15px; /* Remove left margin - match main paper */
        position: relative;
    }

    /* Keep consistent line-height for tablet alignment */
    .bg-ruled-paper article p,
    .bg-ruled-paper article h1,
    .bg-ruled-paper article h3,
    .bg-ruled-paper article ul,
    .bg-ruled-paper article ol,
    .bg-ruled-paper article br {
        line-height: 26px; /* Match the background tile height exactly */
    }

    /* Position text to sit on blue lines for tablet */
    .bg-ruled-paper article {
        margin-top: 18px; /* Start text at the first blue line */
    }

    /* Form field adjustments */
    #display-name {
        width: 100%;
    }

    #comment {
        width: 100%;
    }

    .comment-form {
        width: 100%;
    }
}

/* --- Mobile Phones --- */
@media (max-width: 480px) {
    /* Typography */
    h1 {
        font-size: 1.5rem;
    }
    h2 {
        font-size: 1.25rem;
    }
    h3 {
        font-size: 1rem;
    }

    /* Spacing */
    .p-15 {
        padding: 10px;
    }
    .p-20 {
        padding: 10px;
    }
    .p-25 {
        padding: 15px;
    }
    .p-50 {
        padding: 20px;
    }
    .p-75 {
        padding: 25px;
    }
    .p-80 {
        padding: 25px;
    }

    body {
        padding: 15px;
    }

    /* Mobile-optimized ruled paper - use mobile background and no left margin */
    .bg-ruled-paper {
        background-image: url("../img/tiles/ruled_paper_mobile.gif");
        background-size: 1600px 26px; /* Keep original dimensions */
        background-repeat: repeat-y;
        background-position: top left;
        background-color: #ffffcc;
        padding: 26px 15px 15px 15px; /* Remove left margin - use normal padding */
        position: relative;
    }

    .bg-ruled-paper-header {
        background-image: url("../img/tiles/ruled_paper-top_mobile.gif"); /* Use mobile header without red line */
        background-size: 1600px auto; /* Keep original width, auto height */
        background-repeat: no-repeat;
        background-position: top left;
        background-color: #ffffcc;
        padding: 26px 15px 15px 15px; /* Remove left margin - match main paper */
        position: relative;
    }

    /* Align text to blue lines - text should sit on the 19px mark (18px yellow + 1px blue) */
    .bg-ruled-paper article p,
    .bg-ruled-paper article h1,
    .bg-ruled-paper article h3,
    .bg-ruled-paper article ul,
    .bg-ruled-paper article ol,
    .bg-ruled-paper article br {
        line-height: 26px; /* Match the background tile height exactly */
    }

    /* Adjust text positioning to sit on the blue line */
    .bg-ruled-paper article {
        margin-top: 18px; /* Start text at the first blue line */
    }

    /* Hide elements on very small screens */
    .hide-mobile {
        display: none;
    }
}

/*
==========================================================================
  End of Stylesheet
==========================================================================
*/