/* RESETEO GENERAL */

* {
    margin: 0;               /* Quitamos los márgenes predeterminados de todos los elementos */
    padding: 0;              /* Quitamos el padding predeterminado */
    box-sizing: border-box;  /* Incluye el padding y borde dentro del tamaño total */
}

body {
    background-image: url();       /* Fondo de la página (vacío por ahora) */
    background-repeat: no-repeat;  /* No repetir la imagen */
    background-size: cover;        /* La imagen cubre toda la pantalla */
    background-position: center center; /* Centrar la imagen */
    overflow-x: hidden;            /* Evita scroll horizontal */
    margin: 0;                      /* Reiniciamos márgenes */
    color: white;                   /* Texto por defecto en blanco */
    font-style: oblique;            /* Texto ligeramente inclinado */
}

/* HEADER */

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;             /* Espacio interno */
    border-radius: 25px;            /* Bordes redondeados */
    position: relative;             /* Para poder usar z-index */
    z-index: 1;                     /* Se muestra encima de otros elementos */
    text-align: center;             /* Texto centrado */
}


/* VIDEO DE FONDO */

#video-fondo {
    position: fixed;               /* Fijo en la pantalla */
    top: 0;
    left: 0;
    width: 100%;                   /* Ocupa todo el ancho */
    height: 100vh;                 /* Altura igual a la ventana */
    object-fit: cover;             /* Ajusta el video sin deformarlo */
    z-index: -1;                   /* Se coloca detrás de todo */
}

/* TEXTO GENERAL */

p {
    font-size: 30px;               /* Texto grande para párrafos */
}

h2 {
    font-size: 30px;               /* Títulos tamaño mediano */
    color: #d580ff;                /* Color morado */
}

/* Texto grande morado */
#Textomorado {
    color: #d580ff;
    text-align: center;
    font-size: 50px;
    font-style: oblique;
}

/* Texto grande blanco */
#textoblanco {
    text-align: center;
    font-size: 50px;
    font-style: oblique;
    color: white;
}

/* BOTONES */

#Login {
    background-color: transparent;
    border: 2px solid white;
    color: white;
    font-size: 16px;
    padding: 10px 20px;
    border-radius: 25px;
    cursor: pointer;
    position: relative;
    z-index: 1;
    display: block;
    margin-left: auto;   /* Empuja el botón a la derecha */
    margin-right: 0;
}

/* Efecto al pasar el mouse */
#Login:hover {
    background-color: rgba(128, 0, 128, 0.2); /* Morado transparente */
    border-color: #d580ff;                     /* Borde morado */
}

#boton {
    background-color: transparent;
    border: 2px solid white;
    color: white;
    font-size: 16px;
    padding: 10px 20px;
    border-radius: 25px;
    cursor: pointer;
    position: relative;
}

#boton:hover {
    background-color: #582443;  /* Fondo oscuro al pasar el mouse */
    border-color: #d580ff;      /* Borde morado */
}

/* CONTENEDOR FLEX CENTRAL */

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

/* FOOTER */

footer {
    background-color: transparent; 
    border: 2px solid white;   /* Borde blanco */
    color: white;              /* Texto blanco */
}

/* Texto dentro del footer */
#Cote {
    text-align: center;
    color: #d580ff;            /* Morado */
}

#Andromeda {
    text-align: left;
    color: #d580ff;            /* Morado */
}