body {
    background-color: #fafafa;
    background-image: linear-gradient(#e5e7eb 1px, transparent 1px);
    background-size: 100% 40px;
}

/* Hide scrollbar for mobile nav */
.hide-scrollbar::-webkit-scrollbar {
    display: none;
}

.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Scrapbook Tape */
.tape-translucent {
    position: absolute;
    background: rgba(255, 255, 255, 0.7);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(2px);
    border-radius: 1px;
    z-index: 40;
}

/* Hand-drawn borders (Transparent backgrounds!) */
.drawn-border-yellow {
    border: 2px solid #facc15;
    border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
    background: transparent;
}

.drawn-border-pink {
    border: 2px solid #ec4899;
    border-radius: 15px 255px 15px 225px/225px 15px 255px 15px;
    background: transparent;
}

.drawn-border-blue {
    border: 2px solid #3b82f6;
    border-radius: 225px 15px 255px 15px/15px 255px 15px 255px;
    background: transparent;
}

/* Pill Labels above boxes */
.section-pill {
    display: inline-block;
    font-family: 'VT323', monospace;
    font-size: 1rem;
    padding: 4px 16px;
    margin-bottom: 8px;
    box-shadow: 2px 2px 0px 0px rgba(0, 0, 0, 0.1);
}

/* Smooth slide-down animation for "More Info" */
#more-info-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Human Eye Blinking & Floating Animations */
@keyframes human-blink {

    0%,
    92%,
    98%,
    100% {
        transform: scaleY(1);
    }

    95% {
        transform: scaleY(0.1);
    }

    /* Squints the eye */
}

.eye-blink {
    animation: human-blink 4s infinite;
    transform-origin: center;
}

@keyframes float-gentle {

    0%,
    100% {
        transform: translateY(0px) rotate(0deg);
    }

    50% {
        transform: translateY(-8px) rotate(3deg);
    }
}

.animate-float {
    animation: float-gentle 5s ease-in-out infinite;
}