/* Custom styles for GeoCities nostalgia */

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

body {
    font-family: 'Comic Neue', 'Comic Sans MS', cursive;
    overflow-x: auto;
}

/* Animated starfield background */
.starfield-bg {
    background: 
        radial-gradient(2px 2px at 20px 30px, yellow, transparent),
        radial-gradient(2px 2px at 40px 70px, white, transparent),
        radial-gradient(1px 1px at 90px 40px, cyan, transparent),
        radial-gradient(1px 1px at 130px 80px, pink, transparent),
        radial-gradient(2px 2px at 160px 30px, orange, transparent);
    background-repeat: repeat;
    background-size: 200px 100px;
    animation: sparkle 4s linear infinite;
}

@keyframes sparkle {
    from { background-position: 0 0; }
    to { background-position: -200px -100px; }
}

/* Rainbow banner effect */
.rainbow-banner {
    background: linear-gradient(45deg, 
        #ff0000, #ff7f00, #ffff00, #00ff00, 
        #0000ff, #4b0082, #9400d3, #ff0000);
    background-size: 400% 400%;
    animation: rainbow 3s ease-in-out infinite;
}

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

/* Blinking text animation */
.blink-animation {
    animation: blink 1.5s linear infinite;
}

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

/* Scrolling marquee effect */
.marquee {
    white-space: nowrap;
    overflow: hidden;
    position: relative;
}

.marquee span {
    display: inline-block;
    animation: scroll 15s linear infinite;
}

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

/* Custom checkbox styling */
.form-checkbox {
    appearance: none;
    width: 1rem;
    height: 1rem;
    border: 2px solid currentColor;
    border-radius: 0.25rem;
    background: transparent;
    position: relative;
}

.form-checkbox:checked {
    background: currentColor;
}

.form-checkbox:checked::after {
    content: '✓';
    position: absolute;
    top: -2px;
    left: 1px;
    color: black;
    font-weight: bold;
    font-size: 0.8rem;
}

/* Retro button effects */
button {
    position: relative;
    overflow: hidden;
}

button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transition: left 0.5s;
}

button:hover::before {
    left: 100%;
}

/* Retro input styling */
input[type="range"] {
    appearance: none;
    background: linear-gradient(to right, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff);
    height: 8px;
    border-radius: 4px;
    outline: none;
}

input[type="range"]::-webkit-slider-thumb {
    appearance: none;
    width: 20px;
    height: 20px;
    background: #fff;
    border: 2px solid #000;
    border-radius: 50%;
    cursor: pointer;
}

input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: #fff;
    border: 2px solid #000;
    border-radius: 50%;
    cursor: pointer;
}

/* Scrollbar styling for webkit browsers */
::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    background: #000;
    border: 1px solid #333;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(45deg, #ff00ff, #00ffff);
    border-radius: 6px;
    border: 1px solid #fff;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(45deg, #ffff00, #ff0000);
}

/* Retro selection styling */
::selection {
    background: #ff00ff;
    color: #ffff00;
}

/* Animated GIF-style loading */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.loading {
    animation: spin 2s linear infinite;
}

/* Under construction banner style */
.construction-banner {
    background: repeating-linear-gradient(
        45deg,
        #ffff00,
        #ffff00 10px,
        #000 10px,
        #000 20px
    );
    color: #000;
    font-weight: bold;
    text-align: center;
    padding: 5px;
    border: 2px solid #ff0000;
}

/* Retro text shadow effects */
.neon-text {
    text-shadow: 
        0 0 5px currentColor,
        0 0 10px currentColor,
        0 0 15px currentColor,
        0 0 20px currentColor;
}

/* Mobile responsiveness while maintaining retro charm */
@media (max-width: 768px) {
    .starfield-bg {
        background-size: 100px 50px;
    }
    
    .rainbow-banner h1 {
        font-size: 2rem;
    }
    
    .rainbow-banner p {
        font-size: 1rem;
    }
}

/* Classic GeoCities visitor counter styling */
.visitor-counter {
    background: #000;
    color: #00ff00;
    font-family: 'Courier New', monospace;
    border: 2px inset #ccc;
    padding: 2px 5px;
    display: inline-block;
}