/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap');
        
        body, html {
            width: 100%;
            min-height: 100vh;
            margin: 0;
            padding: 0;
            font-family: 'VT323', monospace;
            background-color: #000;
            color: #0f0;
            background-image: 
                linear-gradient(45deg, rgba(255,0,0,0.05) 25%, transparent 25%),
                linear-gradient(-45deg, rgba(255,0,0,0.05) 25%, transparent 25%),
                linear-gradient(45deg, transparent 75%, rgba(0,0,255,0.05) 75%),
                linear-gradient(-45deg, transparent 75%, rgba(0,0,255,0.05) 75%);
            background-size: 20px 20px;
            background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
            overflow-x: hidden;
        }
        
        .borda-retro {
            border: 4px solid;
            border-image: linear-gradient(45deg, red, blue, green) 1;
            animation: pulsar-borda 5s infinite;
        }
        
        .botao-retro {
            background: linear-gradient(45deg, red, blue);
            color: white;
            text-shadow: 2px 2px 0px #000;
            box-shadow: 4px 4px 0px #0f0;
            transition: all 0.2s;
        }
        
        .botao-retro:hover {
            transform: translate(2px, 2px);
            box-shadow: 2px 2px 0px #0f0;
        }
        
        .texto-pixel {
            text-shadow: 3px 3px 0px red, 6px 6px 0px blue;
        }
        
        .texto-rgb {
            background: linear-gradient(45deg, red, blue, green);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }
        
        .linhas-varredura {
            position: relative;
        }
        
        .linhas-varredura:before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(
                to bottom,
                transparent 50%,
                rgba(0, 255, 0, 0.1) 51%
            );
            background-size: 100% 4px;
            pointer-events: none;
        }
        
        .piscar {
            animation: piscar 1s step-end infinite;
        }
        
        @keyframes piscar {
            50% { opacity: 0; }
        }
        
        @keyframes pulsar-borda {
            0% { border-image: linear-gradient(45deg, red, blue, green) 1; }
            33% { border-image: linear-gradient(45deg, blue, green, red) 1; }
            66% { border-image: linear-gradient(45deg, green, red, blue) 1; }
            100% { border-image: linear-gradient(45deg, red, blue, green) 1; }
        }
        
        .rolagem {
            display: inline-block;
            animation: rolagem 10s linear infinite;
            padding-left: 100%;
            white-space: nowrap;
        }
        
        @keyframes rolagem {
            0% { transform: translate(0, 0); }
            100% { transform: translate(-100%, 0); }
        }
        
        /* Cursor de máquina de escrever */
        .cursor-digitacao {
            opacity: 1;
            animation: piscar-cursor 0.7s infinite;
        }
        
        @keyframes piscar-cursor {
            50% { opacity: 0.0; }
        }
        
        /* Placeholder para GIFs */
        .placeholder-gif {
            width: 100px;
            height: 100px;
            background: 
                linear-gradient(45deg, #000 25%, transparent 25%) 0 0,
                linear-gradient(-45deg, #000 25%, transparent 25%) 0 0,
                linear-gradient(45deg, transparent 75%, #000 75%),
                linear-gradient(-45deg, transparent 75%, #000 75%);
            background-size: 20px 20px;
            border: 2px solid #0f0;
        }

        /* Efeito de fogo */
        .overlay-fogo {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(255, 100, 0, 0.2);
            z-index: 1000;
            display: none;
            pointer-events: none;
            overflow: hidden;
        }
        .particula-fogo {
            position: absolute;
            width: 20px;
            height: 20px;
            background: radial-gradient(circle, #ff6600 0%, #ff3300 70%, transparent 100%);
            border-radius: 50%;
            filter: blur(1px);
            animation: subir-fogo linear;
            pointer-events: none;
        }
        @keyframes subir-fogo {
            0% { transform: translateY(0) scale(1); opacity: 1; }
            100% { transform: translateY(-100vh) scale(0.3); opacity: 0; }
        }

        /* Efeito de gelo */
        .overlay-gelo {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(200, 240, 255, 0.3);
            backdrop-filter: blur(2px);
            z-index: 1000;
            display: none;
            pointer-events: none;
        }
        .cristal-gelo {
            position: absolute;
            width: 30px;
            height: 30px;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path fill="rgba(200,240,255,0.7)" d="M50 0 L75 25 L100 0 L75 50 L100 100 L75 75 L50 100 L25 75 L0 100 L25 50 L0 0 L25 25 Z"/></svg>');
            background-size: contain;
            animation: cair-gelo linear;
            pointer-events: none;
        }
        @keyframes cair-gelo {
            to { transform: translateY(100vh) rotate(360deg); }
        }

        /* Estilos responsivos */
        @media (max-width: 768px) {
            .conteudo-cabecalho {
                flex-direction: column;
                text-align: center;
            }
            
            .container-logo {
                margin-bottom: 1rem;
            }
            
            .contador-visitas {
                width: 100%;
                text-align: center;
            }
            
            .container-rolagem {
                overflow: hidden;
                white-space: nowrap;
            }
            
            .rolagem {
                animation: rolagem 15s linear infinite;
            }
            
            .grade-principal {
                grid-template-columns: 1fr;
            }
            
            .barra-lateral {
                order: 2;
            }
            
            .conteudo-principal {
                order: 1;
            }
            
            .grade-links {
                grid-template-columns: 1fr;
            }
            
            .botao-retro {
                padding: 0.5rem 1rem;
                font-size: 1rem;
            }
            
            h1 {
                font-size: 2rem;
            }
            
            h2 {
                font-size: 1.5rem;
            }
            
            .placeholder-gif {
                width: 80px;
                height: 80px;
            }
        }

        @media (max-width: 480px) {
            body {
                font-size: 16px;
            }
            
            .borda-retro {
                border-width: 2px;
            }
            
            .cabecalho, .rodape {
                padding: 1rem;
            }
            
            .rolagem {
                font-size: 0.9rem;
                animation: rolagem 20s linear infinite;
            }
            
            .grupo-botoes {
                flex-direction: column;
                gap: 0.5rem;
            }
            
            .botao-retro {
                width: 100%;
            }
        }