/*ESTILO GENERAL*/
* {
    margin: 0;               /* Quitamos los márgenes predeterminados */
    padding: 0;              /* Quitamos el relleno predeterminado */
    box-sizing: border-box;  /* Incluye el borde y el padding en el tamaño total del elemento */
}


/* BODY / FONDO DE PÁGINA */

body {
    background-image: url(https://art.pixilart.com/8ebf216d8b6c2f3.gif); /* GIF de fondo */
    background-repeat: no-repeat;      /* No repetir la imagen */
    background-size: cover;            /* Cubrir toda la pantalla */
    background-position: center center; /* Centrar la imagen */
    overflow-x: hidden;                 /* Evita scroll horizontal */
    margin: 0;                          /* Sin márgenes externos */
    font-style: oblique;                /* Texto ligeramente inclinado */
}

/* HEADER / ENCABEZADO */

header {
    background-color: transparent;     /* Fondo transparente */
    border: 2px solid #d580ff;        /* Borde morado */
    color: #d580ff;                   /* Texto morado */
    font-size: 16px;                  /* Tamaño del texto */
    padding: 10px 20px;               /* Espaciado interno */
    border-radius: 25px;              /* Bordes redondeados */
    position: relative;               /* Posición relativa para z-index */
    z-index: 1;                       /* Se coloca encima de otros elementos */
    text-align: center;               /* Centrado de texto */
}

/* TITULOS PRINCIPALES */

h1 {
    color: #d580ff;                   /* Título morado */
    text-align: center;                /* Centrado */
    font-size: 100px;                  /* Tamaño gigante */
    font-style: inherit;               /* Mantiene estilo oblique heredado */
}

/* CONTENEDOR FLEX PARA BOTÓN */

.flex-container {
    display: flex;                     /* Flexbox para alinear elementos */
    justify-content: center;           /* Centra horizontalmente */
    align-items: center;               /* Centra verticalmente */
    height: 100vh;                     /* Ocupa toda la altura de la ventana */
}

/* BOTÓN PRINCIPAL */

#miBoton {
    background-color: transparent;     /* Fondo transparente */
    border: 2px solid white;           /* Borde blanco */
    color: white;                       /* Texto blanco */
    font-size: 16px;                    /* Tamaño de texto */
    padding: 10px 20px;                 /* Espaciado interno */
    border-radius: 25px;                /* Bordes redondeados */
    cursor: pointer;                    /* Cursor de mano */
    position: relative;
    z-index: 1;                         /* Sobre otros elementos */
    margin: 40px;                        /* Separación alrededor */
}

/* Efecto al pasar el mouse sobre el botón */
#miBoton:hover {
    background-color: rgba(128, 0, 128, 0.2); /* Fondo morado transparente */
    border-color: #d580ff;                     /* Borde morado */
}

/* FOOTER / PIE DE PÁGINA */

footer {
    background-color: transparent;       /* Fondo transparente */
    border: 2px solid #d580ff;          /* Borde morado */
    color: rgba(128, 0, 128, 0.2);      /* Texto morado claro */
    border-radius: 20px;                 /* Bordes redondeados */
    width: 90%;                          /* Ocupa la mayoría del ancho */
    margin: 40px auto;                   /* Centrado horizontal con separación */
    padding: 15px;                       /* Espaciado interno */
    text-align: center;                  /* Texto centrado */
    animation: borderPulse 3s infinite ease-in-out; /* Animación de borde pulsante */
}

/* TEXTO ESPECÍFICO EN FOOTER */

#Cote {
    text-align: end;                     /* Alineado a la derecha */
    color: #d580ff;                      /* Color morado */
}

#Andromeda {
    text-align: left;                     /* Alineado a la izquierda */
    color: #d580ff;                       /* Color morado */
}