/* Custom animations and retro styling */
@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

.retro-glow {
    text-shadow: 0 0 10px #00ff00, 0 0 20px #00ff00, 0 0 30px #00ff00;
}

.nokia-screen {
    background: linear-gradient(45deg, #9bb64a, #8ba842);
    border: 3px solid #333;
    border-radius: 4px;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.3);
}

.retro-button {
    background: linear-gradient(45deg, #666, #999);
    border: 2px outset #888;
    border-radius: 3px;
    transition: all 0.1s;
}

.retro-button:active {
    border: 2px inset #888;
    transform: translateY(1px);
}

.pixel-perfect {
    image-rendering: -moz-crisp-edges;
    image-rendering: -webkit-crisp-edges;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

/* Early 2000s web styling */
.early-2000s {
    background: linear-gradient(45deg, #e0e0e0, #f0f0f0);
    border: 3px ridge #ccc;
    font-family: 'Times New Roman', serif;
}

.blink-text {
    animation: blink 1s infinite;
}

.marquee {
    overflow: hidden;
    white-space: nowrap;
}

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

@keyframes marquee {
    0% { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}

/* Retro gaming aesthetic */
.game-border {
    border: 4px solid #333;
    border-top-color: #666;
    border-left-color: #666;
    border-radius: 8px;
    background: #222;
}

.neon-glow {
    box-shadow: 0 0 5px currentColor, 0 0 10px currentColor, 0 0 15px currentColor;
}

/* Nokia-specific styling */
.nokia-blue {
    background: linear-gradient(135deg, #124191, #1e5fa3);
}

.nokia-green {
    color: #41A317;
}

/* Vintage computer monitor effect */
.crt-effect {
    background: radial-gradient(ellipse at center, transparent 0%, rgba(0,255,0,0.1) 100%);
    position: relative;
}

.crt-effect::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0,0,0,0.1) 2px,
        rgba(0,0,0,0.1) 4px
    );
    pointer-events: none;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .retro-button {
        font-size: 14px;
        padding: 8px 12px;
    }
    
    .pixel-perfect {
        max-width: 100%;
        height: auto;
    }
}