@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
  3.  Typography
  4.  Layout Utilities
  5.  Spacing Utilities
  6.  Border Utilities
  7.  Background Utilities
  8.  Component Styles
  9.  Animation Keyframes & Classes
  10. 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
   ========================================================================== */

* {
    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;
}

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

.text-left {
    text-align: left;
}
.text-center {
    text-align: center;
}
.text-justify {
    text-align: justify;
}
.no-decoration {
    text-decoration: none;
}
.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-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 {
    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;
}

.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;
}

.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;
}

@media (max-width: 768px) {
    .political-compass-title.m-r-50 {
        margin-right: 0;
    }
}
.m-r-a {
    margin-right: auto;
}

.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;
}

.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;
}

.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;
}

.p-r-0 {
    padding-right: 0;
}
.p-r-15 {
    padding-right: 15px;
}
.p-r-20 {
    padding-right: 20px;
}
.p-r-80 {
    padding-right: 80px;
}

.p-b-0 {
    padding-bottom: 0;
}
.p-b-20 {
    padding-bottom: 20px;
}
.p-b-50 {
    padding-bottom: 50px;
}
.p-b-80 {
    padding-bottom: 80px;
}

.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 Style */
.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);
}

.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 Color */
.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;
}

/* 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-lightning {
    background: url("../img/tiles/light.jpg");
}
.bg-cardboard {
    background-image: url("../img/tiles/cardbd.jpg");
}
.bg-ocean {
    background-image: url("../img/tiles/strand.jpg");
}
.bg-feet {
    background:
        linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
        url("../img/tiles/bgfeet.gif");
}
.bg-cloudy {
    background-image: url("../img/tiles/bgsuncloud.jpg");
}
.bg-sunset {
    background: url("../img/tiles/bgsunset.jpg");
}
.bg-pines {
    background-image: url("../img/tiles/bgpinetrees.gif");
}
.bg-wood {
    background-image: url("../img/tiles/wood.jpg");
}
.bg-wood-alt {
    background-image: url("../img/tiles/wood2.jpg");
}
.bg-mountain {
    background-image: url("../img/tiles/mountain.gif");
}
.bg-matzo {
    background-image: url("../img/tiles/matzo.gif");
}
.bg-chinese {
    background-image: url("../img/tiles/bgchinese.gif");
}
.bg-jungle-paper {
    background-image: url("../img/tiles/jungle.gif");
}
.bg-jungle-paper-alt {
    background-image: url("../img/tiles/junglepap1.jpg");
}
.bg-jungle-animals {
    background-image: url("../img/clipart/bigpost.jpg");
}
.bg-shells {
    background: url("../img/tiles/bgshells.gif");
}
.bg-stars {
    background: url("../img/tiles/stars.gif");
}
.bg-marijuana {
    background: url("../img/tiles/starfeil.gif");
}
.bg-shobu {
    background: url("../img/tiles/bgshobu.jpg");
}
.bg-white-paper {
    background: url("../img/tiles/whitepaper.gif");
}
.bg-smiley {
    background: url("../img/tiles/bgsmiley2.gif");
}
.bg-smiley-animated {
    background: url("../img/tiles/smileys03.gif");
}
.bg-parrots {
    background: url("../img/tiles/bgparrots.gif");
}
.bg-waterfall {
    background: url("../img/tiles/waterfall.jpg");
}
.bg-jesus {
    background: url("../img/tiles/bgjesus.jpg");
}
.bg-village {
    background-image: url("../img/tiles/bgoz.gif");
}
.bg-grass {
    background: url("../img/tiles/grass.gif");
}
.bg-slime {
    background: url("../img/tiles/bgM003.gif");
}
.bg-ivy {
    background: url("../img/tiles/ivy.jpg");
}
.bg-fern {
    background: url("../img/tiles/fern.gif");
}
.bg-leaves {
    background: url("../img/tiles/leaves2.gif");
}
.bg-turquoise {
    background: url("../img/tiles/0.jpg");
}
.bg-blue-swirl {
    background: url("../img/tiles/1w.jpg");
}
.bg-brown-paper {
    background: url("../img/tiles/paper.jpg");
}
.bg-water-bright {
    background: url("../img/tiles/bgblue.png");
}
.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-concha {
    background:
        linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.1)),
        url("../img/tiles/concha.gif");
    background-repeat: repeat;
    background-size: contain;
}
.bg-ruled-paper {
    background: url("../img/tiles/ruledpaper.gif");
    padding: 19px 15px 15px 23%;
}
.bg-ruled-paper-header {
    background: url("../img/tiles/ruledpaper-top.gif");
    padding: 19px 15px 15px 23%;
}
.bg-smoky-leaves {
    background: url("../img/tiles/bgcoleaves.jpg");
}
.bg-shore {
    background: url("../img/tiles/b_fly_02.jpg");
    background-size: 100% 100%;
}
.bg-indian-pattern {
    background: url("../img/tiles/indian_bk.gif");
}
.bg-coffee-plant {
    background: url("../img/tiles/coffeeplant.jpg");
}
.bg-flag-paper {
    background: url("../img/tiles/flagpaper.jpg");
}
.bg-water {
    background: url("../img/tiles/water.jpg");
}
.bg-super-nova {
    background: url("../img/tiles/bg_index.jpg");
    background-position: center;
    background-size: contain;
}
.bg-seashore {
    background-image: url("../img/tiles/seashore.gif");
}
.bg-blue-star-paper {
    background: url("../img/tiles/t5.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_bkg.jpg");
}
.bg-sand-alt {
    background: url("../img/tiles/bgbeach4.gif");
    background-size: contain;
    background-repeat: repeat;
}
.bg-green-sand {
    background: url("../img/tiles/sand.jpg");
    background-size: contain;
    background-repeat: repeat;
}
.bg-orchid {
    background: url("../img/tiles/orchid12.jpg");
}
.bg-rainbow-paper {
    background: url("../img/tiles/qnet-bg.gif");
}
.bg-pastel-paper {
    background: url("../img/tiles/pastelpap.jpg");
}
.bg-black-smoke {
    background: url("../img/tiles/bgblacksmoke.jpg");
}
.bg-gold-bars {
    background: url("../img/tiles/goldbarpattern.png");
}
.bg-steel-cones {
    background: url("../img/tiles/bgsteelcones.gif");
}
.bg-hearts {
    background: url("../img/tiles/bgcolhearts2.gif");
}
.bg-beanie-babies {
    background: url("../img/tiles/bgbeanies.gif");
}
.bg-purple {
    background: url("../img/tiles/purple.gif");
}
.bg-teddy {
    background-image: url("../img/tiles/bgteddy.jpg");
}
.bg-bass {
    background: url("../img/tiles/bass.gif");
    background-repeat: repeat;
    background-size: 40%;
}
.bg-bears {
    background-image: url("../img/tiles/bgteddy.gif");
}
.bg-polar-bears {
    background-image: url("../img/tiles/bgpolar.gif");
}
.bg-cotton-swirl {
    background: url("../img/tiles/bgcottonpadtwisted.gif");
}
.bg-island {
    background: url("../img/tiles/island.jpg");
}
.bg-rbow {
    background: url("../img/tiles/bgrbow.jpg");
}
.bg-rbow-swirl {
    background: url("../img/tiles/bgrbowswirl.gif");
}
.bg-dark-moon {
    background: url("../img/tiles/darkmoon.gif");
}
.bg-beach-alt {
    background: url("../img/tiles/bgbeach4.gif");
}
.bg-hkitty {
    background: url("../img/tiles/hkitty.jpg");
}
.bg-grimace {
    background: url("../img/tiles/grimace.gif");
}
.bg-mcd {
    background: url("../img/tiles/nomcd.gif"), black;
}
.bg-cds {
    background: url("../img/tiles/bgcds.jpg");
}
.bg-binary-swirl {
    background: url("../img/tiles/binaryswirl.jpg");
}
.bg-shark-tooth {
    background: url("../img/tiles/sharktooth.jpg");
}
.bg-green-palm {
    background: url("../img/tiles/bgreenpalm.gif");
}
.bg-paper-con {
    background: url("../img/tiles/conbg.jpg");
}
.bg-paper-questionmark {
    background: url("../img/tiles/interrogante.gif");
}
.bg-paper-leaf {
    background: url("../img/tiles/leafpaper.gif");
}
.bg-paper-flowers {
    background: url("../img/tiles/Backgd03.jpg");
}
.bg-square-tile {
    background: url("../img/tiles/a1.gif");
}
.bg-atoms {
    background: url("../img/tiles/atoms.jpg");
}
.bg-rainbow-clouds {
    background: url("../img/tiles/b30.gif");
}
.bg-bible {
    background: url("../img/tiles/bgbible.jpg");
}
.bg-smoke-blue {
    background: url("../img/tiles/bgblueop.gif");
}
.bg-ethereal {
    background: url("../img/tiles/bgbluewh.gif");
}
.bg-faded-clouds {
    background: url("../img/tiles/bgclouds44.jpg");
}
.bg-egypt {
    background: url("../img/tiles/bgegypt.gif");
}
.bg-fallen {
    background: url("../img/tiles/bgfallen.jpg");
    background-position: center;
    background-size: 50%;
}
.bg-floral {
    background: url("../img/tiles/bgfloral.jpg");
}
.bg-purple-sky {
    background: url("../img/tiles/bgpurpclouds.gif");
}
.bg-blue-circuit {
    background: url("../img/tiles/bluecircuit.jpg");
}
.bg-eyeball {
    background: url("../img/tiles/blackball0011.gif");
}
.bg-text {
    background-image: url("../img/tiles/text.jpg");
}
.bg-faded-paper {
    background: url("../img/tiles/fadedtext.jpg");
}
.bg-red-sky {
    background: url("../img/tiles/redsky.jpg");
}
.bg-checkered-swirl {
    background: url("../img/tiles/checkbig.gif");
}
.bg-crystal {
    background: url("../img/tiles/ESCENE42.gif");
}
.bg-fire {
    background: url("../img/tiles/fire.jpg");
}
.bg-metal-water {
    background: url("../img/tiles/bgwaterdrops.gif");
}
.bg-panda {
    background: url("../img/tiles/Panheart.gif");
}
.bg-jungle {
    background-image: url("../img/tiles/Jungle.jpg");
    background-size: 100% auto;
    background-position: bottom;
}
.bg-jungle-alt {
    background: url("../img/tiles/sfondo10.jpg");
}
.bg-tiger {
    background: url("../img/tiles/bgtigerface.gif");
}
.bg-veg {
    background-image: url("../img/tiles/set23b_backb.jpg");
    background-size: 100% auto;
    background-repeat: repeat-y;
}
.bg-okinawa {
    background: url("../img/tiles/okinawa.gif");
}
.bg-eagle {
    background: url("../img/tiles/eaglebkgd2.jpg");
}
.bg-flakes {
    background: url("../img/tiles/flakes.gif");
}
.bg-rainbow {
    background: url("../img/tiles/rainbow-background.gif");
}
.bg-clouds {
    background: url("../img/tiles/clouds.gif");
}
.bg-clouds-alt {
    background: url("../img/tiles/clouds4.jpg");
}
.bg-summer {
    background: url("../img/tiles/summer_p.gif");
}
.bg-crossing-man {
    background: url("../img/tiles/backs.gif");
}
.bg-purple-star {
    background: url("../img/tiles/pentback.gif");
}
.bg-beer {
    background: url("../img/tiles/budglass.jpg");
    background-size: 40%;
}

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

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

/* --- Article --- */
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;
}

/* Blog-specific image styling */
.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;
}

.image-expand-label.blog-image-label {
    /* Keep minimal styling needed for expand functionality */
    cursor: pointer;
    display: block;
}

.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 {
    /* Ensure expand functionality works */
    cursor: pointer;
}

.blog-image-caption {
    text-align: center;
    font-style: italic;
    margin: 0;
    padding: 8px 8px 8px 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.blog-image-label:hover {
    transform: scale(1.02);
}

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

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

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

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

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

/* --- 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-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 Images */
.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) --- */
.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 --- */
.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);
}

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

.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;
}

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

.counter {
    padding: 5px;
    border: 1px solid var(--blood-red);
    background-color: black;
    color: var(--lime-green);
    font-family: "Courier New", monospace;
    text-align: center;
}

.counter-icon {
    height: 25px;
}

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

.logo {
    height: 140px;
    width: auto;
    margin-top: 62px;
}

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

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

@media (max-width: 768px) {
    .fish {
        display: none;
    }
}

@media (max-width: 768px) {
    .hide-mobile {
        display: none;
    }
}

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

@media (max-width: 768px) {
    .welcome-wrapper img {
        max-width: 80%;
        height: auto;
    }

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

.mezuzah {
    width: 22px;
    height: 129px;
    background-image: url("../img/clipart/mezuzah.gif");
}

.guestbook-baby {
    width: 163px;
    height: 125px;
    background-image: url("../img/clipart/guestbookbeaniebaby.gif");
}

.pen {
    width: 100px;
    height: 100px;
    background-image: url("../img/clipart/yo-draw.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. Media Queries
   ========================================================================== */

#shabbat-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;
}

#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 {
    overflow: hidden;
    padding: 0;
}

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

.bouncing-shalom {
    position: fixed;
    z-index: 9998;
}

.bouncing-grass {
    position: fixed;
    z-index: 9998;
}

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

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

.shabbat-image {
    display: block;
    margin: 0 auto 20px auto;
    width: 200px;
    height: auto;
}

.mobile-image {
    display: block;
    margin: 0 auto 20px auto;
    width: 200px;
    height: auto;
}

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

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

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

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

#shabbat-overlay .shabbat-image {
    display: block;
    margin: 0 auto 20px auto;
    width: 200px;
    height: auto;
    border: none;
}

#mobile-overlay .mobile-image {
    display: block;
    margin: 0 auto 20px auto;
    width: 200px;
    height: auto;
    border: none;
}

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

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

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

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

#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;
}

/* The switch - the box around the slider */
.switch-windows95 {
    position: relative;
    display: inline-block;
    width: 170px; /* Increased width to accommodate text */
    height: 35px; /* Adjusted height */
    background: #c0c0c0; /* Windows 95 gray */
    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;
}

/* Hide default HTML checkbox */
.switch-windows95 input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* The slider */
.slider-windows95 {
    position: absolute;
    cursor: pointer;
    top: 2px;
    right: 2px;
    bottom: 2px;
    width: 50px; /* Width of the slider thumb */
    background-color: #c0c0c0; /* Windows 95 gray */
    border-top: 2px solid #808080;
    border-left: 2px solid #808080;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    -webkit-transition: 0.4s;
    transition: 0.4s;
}

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

input:checked + .slider-windows95 {
    background-color: #c0c0c0; /* Windows 95 gray */
}

input:focus + .slider-windows95 {
    box-shadow: 0 0 1px #2196f3; /* Blue focus for Windows 95 */
}

input:checked + .slider-windows95:before {
    -webkit-transform: translateX(16px); /* Move slider to the right */
    -ms-transform: translateX(16px);
    transform: translateX(16px);
}

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

.shabbat-toggle-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
}

.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;
}

@media (max-width: 768px) {
    h1 {
        font-size: 2.2rem;
    }

    h2 {
        font-size: 1.8rem;
    }

    h3 {
        font-size: 1.5rem;
    }

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

    .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 {
        width: 100%;
        height: auto;
        margin-top: 90px;
        max-width: 400px;
    }

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

    .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;
    }

    /* 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/orchid12.jpg);
    }

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

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

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

    .guestbook-page .nav-toggle-label {
        background: url("../img/tiles/bgrbow.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);
    }
}

@media (max-width: 480px) {
    h1 {
        font-size: 1.5rem;
    }

    h2 {
        font-size: 1.25rem;
    }

    h3 {
        font-size: 1rem;
    }

    .p-15 {
        padding: 10px;
    }

    /* Exception for ruled paper background to maintain 15px padding */
    .bg-ruled-paper.p-15 {
        padding: 15px;
    }
    .bg-ruled-paper article {
        margin-top: 3px;
    }
    .p-20 {
        padding: 10px;
    }

    /* Center ruled paper background on mobile */
    .bg-ruled-paper,
    .bg-ruled-paper-header {
        background-position-x: center;
    }

    /* Mobile responsive form field widths */
    #display-name {
        width: 100%;
    }

    #comment {
        width: 300px;
    }

    @media (max-width: 768px) {
        #display-name {
            width: 100%;
        }

        #comment {
            width: 100%;
        }

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

    .p-25 {
        padding: 15px;
    }
    .p-50 {
        padding: 20px;
    }
    .p-75 {
        padding: 25px;
    }
    .p-80 {
        padding: 25px;
    }

    body {
        padding: 15px;
    }
}