/* ============================ ESTILOS GERAIS ============================ */
body {
    background: linear-gradient(135deg, #0b0336, #2a5298);
}

/* ============================ CABEÇALHO (NAV) ============================ */

nav ul li {
    background-color: #ff4081;
}

nav ul li a {
    color: white;
    transition: transform 0.3s ease, background-color 0.3s ease;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
}

nav ul li a:hover {
    background-color: #007BFF;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

nav ul li a.disabled {
    color: grey;
}

/* 🌤️ Tema Claro */
.weather-info {
    color: white;
    background: radial-gradient(circle at top left, #070320, #192f6b, #0e42b3, #f5d76e, #a0a0a0);
    background-size: 300% 300%;
}

/* 🌙 Tema Escuro */
body.tema-escuro .weather-info {
    background: radial-gradient(circle at bottom right, #000000, #1a1a2e, #16213e, #0f3460, #53354a);
    color: #e0e0e0;
}

.btn-local {
    background-color: #45a049;
    color: white;
}

/* Containers específicos */
.container-trabalhando { background-color: green; }
.container-tecnologia { background-color: transparent; }
.container-tecnologias-exploradas { background-color: white; color: #007BFF; font-size: clamp(0.8rem, 3vw, 2rem); }
.container-atualizando { background-color: green; color: yellow; font-size: clamp(1rem, 5vw, 2.5rem); }
.container-serigrafia { background-color: transparent; }
.container-habilidades { background-color: green; color: yellow; font-size: clamp(1rem, 5vw, 2.5rem); }
.container-casoseja { background-color: transparent; }
.container-gestores { background-color: #363636; }
.container-doações { background-color: #008080; }
.container-formulario { background-color: white; }
.form-container-formulario { background-color: #f9f9f9; }
.form-field input,
.form-field textarea {
    border: 1px solid #ccc; }

/* ============================ TÍTULOS ============================ */
h1 { color: white; }
h2 { color: yellow; }
h3 { color: brown; }
h4 { color: white; }
h5 { color: #007BFF; }

/* ============================ PARÁGRAFOS ============================ */
.pass { color: #87CEEB; }
.p1 { color: gold; }
.p2 { color: red; }
.p3 { color: #007BFF; }
.p4 { color: white; }

/* ============================ BOTÕES ============================ */
.btn-tecnologia,
.btn-serigrafia,
.btn1,
.btn2 {
    color: white;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
}

.btn-tecnologia:hover,
.btn-serigrafia:hover,
.btn1:hover,
.btn2:hover {
    background-color: #007BFF;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.btn1:hover,
.btn2:hover {
    background-color: #45a049;
}

.btn3 {
    background-color: #28A745;
    color: white;
    transition: background-color 0.3s ease, transform 0.3s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.btn3:hover {
    background-color: #218838;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.btn-enviar {
    background-color: #45a049;
    color: white;
    transition: background-color 0.3s ease, transform 0.3s ease;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
}

.btn-enviar:hover {
    background-color: #007BFF;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

/* ============================ ANIMAÇÃO DE ALERTA ============================ */
@keyframes blinkAlert {
    0% {
        background-color: green;
    }

    100% {
        background-color: white;
        color: blue;
    }
}

/* ============================ RODAPÉ ============================ */
footer {
    background-color: blue;
    color: white;
}