:root {
    --sf-pink: #FF69B4;
    --sf-hot-pink: #FF1493;
    --sf-yellow: #FFD700;
    --sf-lime: #32CD32;
    --sf-cyan: #00CED1;
    --sf-orange: #FF6347;
    --sf-purple: #DA70D6;
    --sf-blue: #1E90FF;
    --sf-red: #FF4500;
}

@keyframes wobble {
    0%, 100% { transform: rotate(-3deg) scale(1); }
    25% { transform: rotate(3deg) scale(1.02); }
    50% { transform: rotate(-2deg) scale(0.98); }
    75% { transform: rotate(2deg) scale(1.01); }
}

@keyframes rainbow-shift {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

@keyframes hue-shift {
    0% { filter: hue-rotate(0deg) saturate(1.5); }
    100% { filter: hue-rotate(360deg) saturate(1.5); }
}


@keyframes text-glow {
    0%, 100% { text-shadow: 0 0 10px var(--sf-pink), 0 0 20px var(--sf-hot-pink); }
    50% { text-shadow: 0 0 20px var(--sf-yellow), 0 0 30px var(--sf-orange); }
}

* {
    font-family: "Comic Sans MS", "Comic Sans", "Marker Felt", cursive !important;
}

body {
    background: linear-gradient(45deg, 
        var(--sf-pink) 0%, 
        var(--sf-yellow) 20%, 
        var(--sf-lime) 40%, 
        var(--sf-cyan) 60%, 
        var(--sf-purple) 80%, 
        var(--sf-pink) 100%) !important;
    background-size: 400% 400% !important;
    animation: rainbow-shift 20s ease infinite !important;
    zoom: 0.9 !important;
}

img, video {
    filter: none !important;
    animation: none !important;
}

a img {
    animation: none !important;
    transition: none !important;
}

.expanded {
    animation: none !important;
}

[class*="-panel"], [id*="-panel"] {
    animation: none !important;
}

[class*="banner-"], [id*="banner-"] {
    animation: none !important;
}

.popup-menu {
    background: linear-gradient(135deg, #FFE4E1, #F0E68C) !important;
    border: 5px solid var(--sf-hot-pink) !important;
    border-radius: 30px !important;
    box-shadow: 0 0 50px rgba(255, 105, 180, 0.7) !important;
    animation: none !important;
}

.popup-menu * {
    color: var(--sf-purple) !important;
    font-weight: 900 !important;
    text-shadow: 
        -1px -1px 0 white,
        1px -1px 0 white,
        -1px 1px 0 white,
        1px 1px 0 white,
        2px 2px 5px rgba(255, 105, 180, 0.8) !important;
}

article.p, article.op, article.r {
    background: linear-gradient(135deg, #FFE4E1, #F0E68C) !important;
    border: 4px solid var(--sf-hot-pink) !important;
    border-radius: 25px !important;
    box-shadow: 8px 8px 0px var(--sf-purple), 
                16px 16px 0px rgba(255, 105, 180, 0.3) !important;
    margin: 10px 15px !important;
    transform: rotate(0.5deg);
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
}

article.p:hover, article.op:hover, article.r:hover {
    animation: wobble 0.5s ease-in-out !important;
    transform: rotate(-1deg) scale(1.05) !important;
    border-color: var(--sf-yellow) !important;
    box-shadow: 12px 12px 0px var(--sf-cyan), 
                24px 24px 0px rgba(255, 215, 0, 0.4) !important;
}

article header {
    background: linear-gradient(90deg, var(--sf-orange), var(--sf-pink)) !important;
    padding: 10px !important;
    border-radius: 20px 20px 0 0 !important;
    border-bottom: 3px dashed var(--sf-blue) !important;
}

blockquote {
    color: #2E0854 !important;
    font-size: 18px !important;
    font-weight: bold !important;
    text-shadow: 2px 2px 0px rgba(255, 105, 180, 0.3) !important;
    background: rgba(255, 255, 255, 0.7) !important;
    padding: 15px !important;
    border-radius: 15px !important;
    border-left: 8px solid var(--sf-pink) !important;
    min-height: 50px;
    height: auto;
}

.post-container {
    min-height: auto !important;
    height: auto !important;
}

textarea {
    min-height: 100px !important;
    height: auto !important;
    resize: vertical !important;
}

#account-panel-userid {
    background: linear-gradient(90deg, 
        var(--sf-red), var(--sf-orange), var(--sf-yellow), 
        var(--sf-lime), var(--sf-blue), var(--sf-purple)) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    font-size: 20px !important;
    font-weight: 900 !important;
    animation: text-glow 2s ease-in-out infinite !important;
}


.greentext {
    background: linear-gradient(90deg, 
        var(--sf-red), var(--sf-orange), var(--sf-yellow), 
        var(--sf-lime), var(--sf-blue), var(--sf-purple)) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    font-size: 20px !important;
    font-weight: 900 !important;
    animation: text-glow 2s ease-in-out infinite !important;
}

a {
    color: var(--sf-blue) !important;
    text-decoration: none !important;
    font-weight: bold !important;
    transition: all 0.2s !important;
}

a:hover {
    color: var(--sf-hot-pink) !important;
    text-shadow: 0 0 10px currentColor !important;
    display: inline-block;
}

#banner-watcher:hover, #banner-identity:hover, #banner-account:hover, #banner-FAQ:hover, #banner-options:hover {
    transform: rotate(-3deg) !important;
    display: inline !important;
    filter: hue-rotate(90deg) saturate(2) !important;
}

a.quote {
    background: var(--sf-yellow) !important;
    color: var(--sf-purple) !important;
    padding: 2px 8px !important;
    border-radius: 10px !important;
    border: 2px solid var(--sf-orange) !important;
    animation: none !important;
}

button, input[type="button"], input[type="submit"], .form-buttons a {
    background: linear-gradient(135deg, var(--sf-pink), var(--sf-orange)) !important;
    color: white !important;
    border: 3px solid var(--sf-purple) !important;
    border-radius: 20px !important;
    padding: 10px 20px !important;
    font-size: 16px !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    box-shadow: 4px 4px 0px var(--sf-blue) !important;
    transition: all 0.2s !important;
    cursor: pointer !important;
}

button:hover, input[type="button"]:hover, input[type="submit"]:hover {
    transform: translateY(-3px) rotate(3deg) !important;
    box-shadow: 6px 6px 0px var(--sf-cyan) !important;
    background: linear-gradient(135deg, var(--sf-yellow), var(--sf-lime)) !important;
}

button:active, input[type="button"]:active {
    transform: translateY(2px) !important;
    box-shadow: 2px 2px 0px var(--sf-blue) !important;
}

input[type="text"], textarea, select {
    background: rgba(255, 255, 255, 0.9) !important;
    border: 3px solid var(--sf-pink) !important;
    border-radius: 15px !important;
    padding: 8px !important;
    color: var(--sf-purple) !important;
    font-weight: bold !important;
    transition: all 0.3s !important;
}

input[type="text"]:focus, textarea:focus {
    border-color: var(--sf-cyan) !important;
    background: linear-gradient(135deg, #FFF, #FFE4E1) !important;
    box-shadow: 0 0 20px rgba(0, 206, 209, 0.5) !important;
    transform: scale(1.02) !important;
}

#banner {
    background: linear-gradient(90deg, 
        var(--sf-hot-pink), var(--sf-yellow), var(--sf-lime), 
        var(--sf-cyan), var(--sf-purple), var(--sf-hot-pink)) !important;
    background-size: 200% 100% !important;
    animation: rainbow-shift 10s linear infinite, hue-shift 15s ease infinite !important;
    border-bottom: 5px solid var(--sf-orange) !important;
    box-shadow: 0 5px 20px rgba(255, 105, 180, 0.5) !important;
}

article.p {
    animation: gloop-wiggle 6s ease-in-out infinite !important;
    transform-origin: center !important;
}

article.p > * {
    animation: inner-wobble 4s ease-in-out infinite !important;
}

article.p > *:nth-child(odd) {
    animation-delay: -1s !important;
    animation-duration: 4.5s !important;
}

article.p > *:nth-child(even) {
    animation-delay: -2s !important;
    animation-duration: 3.8s !important;
}

article.p > *:nth-child(3n) {
    animation-delay: -0.5s !important;
    animation-duration: 5s !important;
}

article.p > *:nth-child(4n) {
    animation-delay: -3s !important;
    animation-duration: 3.2s !important;
}

@keyframes inner-wobble {
    0%, 100% { transform: rotate(1deg) scale(1); }
    20% { transform: rotate(-1.5deg) scale(1.01); }
    40% { transform: rotate(1.2deg) scale(0.99); }
    60% { transform: rotate(-1deg) scale(1.01); }
    80% { transform: rotate(0.8deg) scale(1); }
}

@keyframes gloop-wiggle {
    0%, 100% { 
        transform: rotate(0.5deg) skewX(0deg) skewY(0deg);
    }
    25% { 
        transform: rotate(-0.3deg) skewX(0.5deg) skewY(-0.3deg);
    }
    50% { 
        transform: rotate(0.3deg) skewX(-0.5deg) skewY(0.3deg);
    }
    75% { 
        transform: rotate(-0.5deg) skewX(0.3deg) skewY(-0.5deg);
    }
}

#banner b, #banner span, #banner-center, [class^="banner-"], [id^="banner-"] {
    color: white !important;
    font-weight: 900 !important;
    text-shadow: 
        -2px -2px 0 #000,
        2px -2px 0 #000,
        -2px 2px 0 #000,
        2px 2px 0 #000,
        3px 3px 8px rgba(255, 105, 180, 0.8) !important;
}

#banner a[id^="banner-"] {
    background: var(--sf-yellow) !important;
    padding: 5px 10px !important;
    border-radius: 15px !important;
    border: 3px solid var(--sf-hot-pink) !important;
    opacity: 1 !important;
}

#banner a[id^="banner-"] svg {
    fill: var(--sf-purple) !important;
    width: 20px !important;
    height: 20px !important;
    filter: drop-shadow(1px 1px 0px white) !important;
}

#board-navigation a {
    background: rgba(255, 255, 255, 0.8) !important;
    color: var(--sf-purple) !important;
    padding: 5px 10px !important;
    margin: 2px !important;
    border-radius: 10px !important;
    border: 2px solid var(--sf-pink) !important;
    display: inline-block !important;
    transition: all 0.2s !important;
}

#board-navigation a:hover {
    background: var(--sf-yellow) !important;
    color: var(--sf-hot-pink) !important;
    transform: rotate(-5deg) scale(1.1) !important;
    border-color: var(--sf-cyan) !important;
}

#threads {
    background: rgba(255, 255, 255, 0.5) !important;
    border-radius: 30px !important;
    padding: 20px !important;
    margin: 20px !important;
    backdrop-filter: blur(5px) !important;
}

figure {
    background: white !important;
    padding: 10px !important;
    border: 3px solid var(--sf-pink) !important;
    border-radius: 15px !important;
    transform: rotate(-2deg) !important;
    box-shadow: 5px 5px 0px var(--sf-purple) !important;
    transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s !important;
}

figure:hover {
    transform: rotate(2deg) scale(1.05) !important;
    border-color: var(--sf-yellow) !important;
    box-shadow: 8px 8px 0px var(--sf-cyan) !important;
}

figure img {
    border-radius: 10px !important;
    animation: none !important;
    filter: none !important;
}

.modal {
    background: linear-gradient(135deg, #FFE4E1, #F0E68C) !important;
    border: 5px solid var(--sf-hot-pink) !important;
    border-radius: 30px !important;
    box-shadow: 0 0 50px rgba(255, 105, 180, 0.7) !important;
}

input[type="checkbox"] {
    width: 25px !important;
    height: 25px !important;
    accent-color: var(--sf-hot-pink) !important;
    cursor: pointer !important;
}

.fileinfo {
    background: var(--sf-yellow) !important;
    color: var(--sf-purple) !important;
    padding: 5px 10px !important;
    border-radius: 10px !important;
    border: 2px dashed var(--sf-orange) !important;
    font-weight: bold !important;
}

.name {
    color: var(--sf-hot-pink) !important;
    font-size: 18px !important;
    font-weight: 900 !important;
    text-shadow: 
        -2px -2px 0 var(--sf-yellow),
        2px -2px 0 var(--sf-yellow),
        -2px 2px 0 var(--sf-yellow),
        2px 2px 0 var(--sf-yellow),
        3px 3px 5px rgba(0, 0, 0, 0.3) !important;
}

span.user-name {
    color: var(--sf-cyan) !important;
    font-size: 20px !important;
    font-weight: 900 !important;
    text-shadow: 
        -2px -2px 0 var(--sf-hot-pink),
        2px -2px 0 var(--sf-hot-pink),
        -2px 2px 0 var(--sf-hot-pink),
        2px 2px 0 var(--sf-hot-pink),
        3px 3px 0 var(--sf-yellow),
        4px 4px 8px rgba(0, 0, 0, 0.5) !important;
}

time {
    background: var(--sf-cyan) !important;
    color: white !important;
    padding: 3px 8px !important;
    border-radius: 10px !important;
    font-weight: bold !important;
}

.sticky, .locked {
    fill: var(--sf-hot-pink) !important;
    filter: drop-shadow(2px 2px 0px var(--sf-yellow)) !important;
    width: 20px !important;
    height: 20px !important;
}

.quote {
    font-size: 16px !important;
    animation: none !important;
}

article.highlighted, article.post-hover {
    background: linear-gradient(135deg, #FFB6C1, #FFD700) !important;
    border-color: var(--sf-cyan) !important;
    transform: scale(1.02) rotate(1deg) !important;
}

::-webkit-scrollbar {
    width: 20px !important;
}

::-webkit-scrollbar-track {
    background: linear-gradient(90deg, 
        var(--sf-pink) 0%, var(--sf-pink) 25%, 
        white 25%, white 50%, 
        var(--sf-pink) 50%, var(--sf-pink) 75%, 
        white 75%, white 100%) !important;
    background-size: 40px 40px !important;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, var(--sf-hot-pink), var(--sf-purple)) !important;
    border-radius: 10px !important;
    border: 3px solid white !important;
}

.notification {
    background: var(--sf-yellow) !important;
    color: var(--sf-purple) !important;
    border: 3px solid var(--sf-hot-pink) !important;
    border-radius: 20px !important;
    font-weight: bold !important;
    font-size: 18px !important;
}

#thread-post-counters {
    background: var(--sf-orange) !important;
    color: white !important;
    padding: 5px 10px !important;
    border-radius: 15px !important;
    font-weight: bold !important;
}


.redtext {
    color: var(--sf-red) !important;
    font-size: 20px !important;
    font-weight: 900 !important;
    text-shadow: 0 0 5px var(--sf-orange), 0 0 10px var(--sf-red) !important;
    animation: text-glow 1s ease-in-out infinite !important;
}

.board-selection {
    background: linear-gradient(135deg, var(--sf-yellow), var(--sf-lime)) !important;
    color: var(--sf-purple) !important;
    padding: 8px 15px !important;
    border-radius: 20px !important;
    border: 3px solid var(--sf-hot-pink) !important;
    font-weight: 900 !important;
    text-shadow: 1px 1px 0px white !important;
    box-shadow: 4px 4px 0px var(--sf-cyan) !important;
    transition: all 0.2s !important;
}

.board-selection:hover {
    transform: rotate(5deg) scale(1.1) !important;
    background: linear-gradient(135deg, var(--sf-pink), var(--sf-orange)) !important;
    box-shadow: 6px 6px 0px var(--sf-purple) !important;
}

label {
    color: var(--sf-purple) !important;
    font-weight: bold !important;
    font-size: 16px !important;
    text-shadow: 1px 1px 0px rgba(255, 105, 180, 0.3) !important;
}

.aside-container aside {
    background: none !important;
    background-color: transparent !important;
    border: none !important;
}

.reply-form {
    margin-top: 50px !important;
    margin-bottom: 50px !important;
    width: 70% !important;
    max-width: 70% !important;
}

.reply-form .post-container {
    width: 100% !important;
}

.reply-form blockquote, .reply-form textarea, #text-input {
    width: 100% !important;
    box-sizing: border-box !important;
    max-width: 100% !important;
}

hr {
    display: none !important;
}

#watch-panel {
    padding: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

#watch-panel video, #watch-video, #watch-video iframe {
    display: block !important;
    transform: scale(1.03) !important;
    transform-origin: center !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}