/* global.css */
@import 'colors.css';
@import 'keyframes.css';

body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
    background-color: var(--primary-background-color-dark);
    color: var(--highlight-color);
    line-height: 1.6;
}

main {
    padding: 50px 20px;
    text-align: center;
}

section {
    padding: 50px 20px;
    text-align: center;
}

h1, h2, h3 {
    color: var(--primary-color);
    background: var(--gradient-color);
    background-size: 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shine 15s infinite ease-in-out;
}

h2 {
    font-size: 36px;
    color: var(--primary-color);
    margin-bottom: 20px;
}

h3 {
    font-size: 24px;
    margin-bottom: 10px;
}

p {
    font-size: 18px;
    color: var(--primary-text-color-dark);
}

.separador {
    height: 2px; /* Grosor de la línea */
    background: var(--gradient-color); /* Aplica el mismo gradiente */
    background-size: 200%; /* Tamaño para el efecto de animación */
    animation: shine 15s infinite ease-in-out; /* Aplica la animación */
    border: none; /* Asegura que no haya bordes adicionales */
    margin: 20px 0; /* Espaciado vertical para separar elementos */
    width: 80%;
    margin: auto;
    margin-bottom: 40px;
}