/*Estis estilos es más que nada darle los datos iniciales que no cambiaran como tal*/

/*cuando veamos display grid o flex se maneja el concepto de la siguiente manera las propiedades a continuación*/
/*RESUMEN*/

/*
    justify-items: stretch
alinear el hijo, el contenido dentro de la celda en el eje horizontal

    justify-content: center
para alinear la celda en el eje horizontal

    align-items: stretch
Para alinear el hijo o el contenido del hijo dentro de la celda en el eje vertical

    align-content: center
para alinear la celda en el eje vertical

de las 4 anteriores la diferencia es el contenido es el que mueve o la celda es la que mueve

place-content: center es la abreviada de las 2 de content
place-item: center es la abreviada de las 2 de item


*/

/* Reset y box-sizing */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

* {
    user-select: none;
}

/* Tipografía global */
html {
    font-family: var(--font-base);
    background-color: var(--color-bg-primary);
    color: var(--color-text);
    line-height: 1.5;
    scroll-behavior: smooth;/*este valor nos sirve para que no sea brusco al estar en una pagina de inicio de sesion o acerca de (ejemplos) y al regresar al index, no sea brusco*/
}

/* Imágenes fluidas */
img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Enlaces neutros */
a {
    color: inherit;
    text-decoration: none;
}

.site {
    display: flex;
    flex-direction: column;/*este es para colocarlo en una sola columna, ya que por defecto esta en fila (que se vería varias columnas jaja pero si) */
    min-height: 100vh;
}

.gallery,
.register {
    flex: 1; 
    /*este es llamado shorthand el cual es simplicar las 3 propiedades
    flex-grow: 1
    flex-shrink: 1
    flex-basis: 0

    significan en ese orden  que ope todo el ancho de la pantalla
    es indicarle que ocupe todo el ancho de la pantalla, pero como esta en columna pues ocupara todo lo alto de la columna

    el segundo es para indicarle que se debe encoger lo que pueda si lo permite

    el tercero indica que por defecto llegará a 0 como minimo para encongerse
    */
}