/* GeoCities MAX — 1997 personal homepage energy at maximum intensity; Comic Sans mandatory */

@keyframes blink {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

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

@keyframes marquee-scroll {
    from { transform: translateX(100%); }
    to   { transform: translateX(-100%); }
}

@keyframes spin-star {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@keyframes pulse-border {
    0%, 100% { box-shadow: 4px 4px 0 #888, -2px -2px 0 #fff, 0 0 8px #f0f, 0 0 16px #f0f; }
    50%       { box-shadow: 4px 4px 0 #888, -2px -2px 0 #fff, 0 0 20px #0ff, 0 0 40px #0ff; }
}

@keyframes bg-pulse {
    0%, 100% { background-color: #000033; }
    33%       { background-color: #110022; }
    66%       { background-color: #000044; }
}

body, input, button, textarea, select {
    background-color: #000033;
    color: #ffff99;
    font-family: 'Comic Sans MS', 'Chalkboard SE', 'Bradley Hand', cursive;
    font-size: 12pt;
}

body {
    animation: bg-pulse 5s ease-in-out infinite;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpolygon points='30,2 36,22 57,22 40,34 47,55 30,42 13,55 20,34 3,22 24,22' fill='none' stroke='%23ffff0022' stroke-width='1'/%3E%3C/svg%3E");
    background-size: 60px 60px;
}

/* Scrolling ticker above everything */
body::before {
    content: '★ WELCOME TO MY FORUM ★ BEST VIEWED IN 800×600 ★ NO HOT-LINKING ★ SIGN MY GUESTBOOK ★ YOU ARE VISITOR #00042069 ★';
    display: block;
    position: sticky;
    top: 0;
    z-index: 9999;
    background: #000;
    color: #00ff00;
    font-family: 'Courier New', monospace;
    font-size: 9pt;
    white-space: nowrap;
    overflow: hidden;
    padding: 3px 0;
    border-bottom: 2px solid #00ff00;
    animation: marquee-scroll 18s linear infinite;
    pointer-events: none;
}

header {
    background: linear-gradient(135deg, #330066 0%, #660099 30%, #000099 60%, #330066 100%);
    border-top: none;
    border-bottom: 4px ridge #cc00ff;
    border-radius: 0;
    box-shadow: 0 4px 0 #6600cc, inset 0 1px 0 rgba(255,255,255,.3);
    padding: 12px;

    a {
        color: transparent;
        text-decoration: none;
        background: linear-gradient(90deg, #ff0000,#ff8800,#ffff00,#00ff00,#00ffff,#0066ff,#cc00ff,#ff0000);
        -webkit-background-clip: text;
        background-clip: text;
        background-size: 400%;
        animation: rainbow-text 4s linear infinite;
        font-weight: bold;
        font-size: 16pt;
        -webkit-text-stroke: 1px rgba(0,0,0,.3);
    }
}

.subheader {
    background: linear-gradient(90deg, #000066, #000099, #000066);
    border-bottom: 3px ridge #cc00ff;
    box-shadow: 0 3px 0 #3300aa;

    .title, .title a {
        color: transparent;
        background: linear-gradient(90deg, #ff0,#f0f,#0ff,#0f0,#ff0);
        -webkit-background-clip: text;
        background-clip: text;
        background-size: 300%;
        animation: rainbow-text 3s linear infinite;
        font-weight: bold;
        font-size: 14pt;
        -webkit-text-stroke: 0.5px rgba(0,0,0,.2);
    }
}

.board, .post, .thread, .thread-warning, .flashed-message, .recent-post {
    background: linear-gradient(135deg, #000044 0%, #110033 100%);
    border-top: 3px ridge #cc00ff;
    border-bottom: 3px groove #6600cc;
    border-left: 3px ridge #9900cc;
    border-right: 3px groove #9900cc;
    color: #ffff99;
    margin-bottom: 10px;
    animation: pulse-border 3s ease-in-out infinite;
    position: relative;

    &:nth-child(4n+1) { background: linear-gradient(135deg, #001133, #002200); border-color: #00cc66; }
    &:nth-child(4n+2) { background: linear-gradient(135deg, #330000, #110011); border-color: #ff3366; }
    &:nth-child(4n+3) { background: linear-gradient(135deg, #221100, #110022); border-color: #ff9900; }
    &:nth-child(4n+0) { background: linear-gradient(135deg, #001122, #002233); border-color: #00ccff; }

    /* Spinning star decoration */
    &::before {
        content: '★';
        position: absolute;
        top: 4px;
        right: 6px;
        font-size: 10pt;
        color: #ff0;
        animation: spin-star 4s linear infinite;
    }
}

.board .name, .thread .name, .recent-post .name,
.recent-posts-header h2 a, .recent-attachments h2 a,
.subheader .title a {
    font-size: 13pt;
    font-weight: bold;
    color: transparent;
    background: linear-gradient(90deg, #ff0,#f0f,#0ff,#ff0);
    -webkit-background-clip: text;
    background-clip: text;
    background-size: 200%;
    animation: rainbow-text 3s linear infinite;
    text-decoration: none;
    animation-name: blink, rainbow-text;
    animation-duration: 2s, 3s;
    -webkit-text-fill-color: transparent;
}

.board .description, .thread .author, .thread .time,
.thread .reply-count, .thread .view-count { color: #aaffaa; }

.post .author {
    color: #ff0;
    font-weight: bold;
    font-size: 12pt;
    text-shadow: 2px 2px 0 #f0f, -1px -1px 0 #0ff;
}
.post .time { color: #88ff88; }
.post .time a { color: #88ff88; text-decoration: none; }
.thread .time a { color: #aaffaa; text-decoration: none; }

:is(.subheader .right .button, form input[type=submit]) {
    background: linear-gradient(180deg, #ff6600 0%, #cc0000 100%);
    border: 3px outset #ff9900;
    color: #fff;
    font-family: inherit;
    font-size: 11pt;
    font-weight: bold;
    text-shadow: 1px 1px 0 #000;
    box-shadow: 3px 3px 0 #660000, inset 2px 2px 0 rgba(255,255,255,.3);
    border-radius: 0;
    text-transform: uppercase;

    &:hover {
        background: linear-gradient(180deg, #cc0000 0%, #ff6600 100%);
        box-shadow: 1px 1px 0 #660000, inset 2px 2px 0 rgba(0,0,0,.3);
        border-style: inset;
    }
    &:active { box-shadow: inset 3px 3px 0 rgba(0,0,0,.4); border-style: inset; }
}

a {
    color: #00ffff;
    text-decoration: underline;
    text-shadow: 0 0 6px #00ffff;
    font-weight: bold;

    &:hover { color: #ff0; text-shadow: 0 0 8px #ff0; }
}
a:visited { color: #cc00ff; text-shadow: 0 0 4px #cc00ff; }

.sort-bar {
    color: #aaffaa;
    a { color: #ff0; font-weight: bold; text-shadow: 1px 1px 0 #f0f; &.sort-active { color: #0ff; } }
}

.pager {
    a, span, span.current {
        background: linear-gradient(180deg, #330066, #110033);
        border: 3px outset #cc00ff;
        color: #ffff99;
        border-radius: 0;
        box-shadow: 2px 2px 0 #330066;
        font-weight: bold;
    }
    span.current {
        background: linear-gradient(180deg, #cc0000, #660000);
        border-style: inset;
        color: #ffff99;
        box-shadow: inset 2px 2px 0 rgba(0,0,0,.4);
    }
    a:hover { background: linear-gradient(180deg, #660099, #330066); }
}

.posts .post-meta {
    background: rgba(0,0,100,.4);
    border-top: 2px ridge #cc00ff;

    a { color: #00ffff; text-shadow: 0 0 4px #00ffff; }
}

.recent-attachments-gallery .recent-attachment {
    background: #000044;
    border: 3px ridge #cc00ff;
    box-shadow: 2px 2px 0 #660099;
}

.form, form {
    background: #000033;
    border: 3px ridge #cc00ff;
    box-shadow: 4px 4px 0 #330066;
}

input[type=text], input[type=password], input[type=number], textarea, select {
    background: #000022;
    border: 2px inset #9900cc;
    color: #ffff99;
    font-family: 'Courier New', monospace;
}
select { color-scheme: dark; }
::placeholder { color: #556688; }

.post .text { .greentext { color: #00ff88; font-weight: bold; } .title { color: #ff0; } }
mark { background: #ff0; color: #000; border: 1px solid #f0f; }
footer, footer a { color: #aaaacc; font-size: 9pt; }

.thread-warning {
    background: linear-gradient(135deg, #220000, #330000);
    border: 3px ridge #ff3333;
    color: #ff9999;
}

h3 { color: #00ffff; text-shadow: 0 0 6px #00ffff; }
.boards h2, .recent-posts-header h2, .recent-attachments h2 {
    color: transparent;
    background: linear-gradient(90deg, #f00,#ff0,#0f0,#0ff,#00f,#f0f);
    -webkit-background-clip: text;
    background-clip: text;
    background-size: 300%;
    animation: rainbow-text 4s linear infinite;
    -webkit-text-fill-color: transparent;
    font-size: 16pt;
}
.ip_hash { background: rgba(0,255,0,.1) !important; color: #00ff66 !important; }