:root {
    --color-primario: #2C3639;
    --color-secundario: #d5cebb;
    --color-terciario: #a27b5c;
    --color-hoever: #3b5249;
}

body {
    margin: 0;                /* elimina márgene de todo lo que haya en la pagina */
    padding: 0;  /* hace que se elimine el espcacio interno */
    background-color: var(--color-primario); /* permite que el color de la pagina sea negra */
    font-family: Arial, sans-serif; /* cambia el tipo de grafia de lo que escribas*/
}

/* este codigo esta conla intencion de dar diseño al menu fijo */
.menu-fijo {
    position: fixed; /* sirve para que se quede pegado a la pantalla*/
    width: 100%;  /* permite usar el 100% de ancho de algo en este caso un tipo caja */
    height: 95px; /* da la altura del menu fijo */
    background-color: var(--color-secundario); /* hace que el fondo sea blanco en vez de las letras */
    z-index: 100; /* da mayor prioridad el menu fijo que a las demas imagenes */
}

/* es el estilo del logo principal de la pagina web */
.logo {
    max-height: 160px; /* hace que el logo tenga una altura maxima */
    position: fixed;  /* sirve para que se quede pegado a la pantalla*/
    top: -1.5em;  /* este determina la altura del texto */
    left: -1.5em;  /* esto mueve a la izquierda el logo */
}

/* Este codigo esta echo con la intencion de diseñar un boton para cambiar de idioma*/
.boton-idioma {
    position: fixed; /* sirve para que se quede pegado a la pantalla*/
    top: 1.5em; /* este determina la altura del boton de idioma */
    right: 3em;  /* esto mueve a la derecha el boton de idiomas */
    font-size: 1.3em; /* esto determina el tamaño de lo que esta adentro del boton */
    border: none; /* quita el borde del boton original*/
    background-color: var(--color-terciario); /* cambia el color del fondo del boton */
    color: black;     /* pone el color negro del texto */
    cursor: pointer;   /* al poner el raton encima del boton cambia a una tipo mano */
    transition: color 0.3s, text-decoration 0.3s; /* hace una pequeña transsicion al presionar el boton*/
}

/* este es el estilo de un boton al pasar por encima con el cursor y al precionar tambien */
.boton-idioma:hover {
    border-radius: 25px; /* hace que los bordes se encurven */
    box-shadow: 0 4px 8px rgba(0,0,0,0.3); /* al poner el cursor arriba se ve una pequeña sombra */
    background-color: var(--color-hoever); /* cambia el color del fondo del boton */
    border: 2px solid #333;    /* al poner el cursor arriba se ve las orillas visibles */
}

/*este se usa para dar el estilodel contenedor donde se pone todo lo que lleva el inicio de secion*/
.contenedor-de-inicio-de-sesion {
    position: relative;
    background-color: var(--color-secundario); /* cambia el color del fondo de esta caja */
    height: 400px; /* da la altura de este bloque */
    width: 530px;  /*da el ancho total de este bloque*/
    left: 30%; /* esto mueve a la izquierda este texto */
    top: 8em; /* este determina la altura de este bloque */
}

/*este se usa para dar el estilo del bloque donde se pone tu correo*/
#poner-tu-correo-bloque {
    position: absolute;
    top: 5em; /* este determina la altura de este bloque */
    left: 2em; /* esto mueve a la izquierda este texto */
    width: 450px;    /*da el ancho total de este bloque*/
    height: 25px;   /* da la altura de este bloque */
    font-size: 16px; /*cambia el tamaño de las letras*/
    padding: 8px;  /* espacio interno de este bloque */
    border-radius: 5px;
}

/*este se usa para dar el estilo del texto de poner tu correo*/
.poner-tu-correo-texto {
    position: absolute;
    top: 2em; /* este determina la altura de este bloque */
    font-size: 1em;/*cambia el tamaño de las letras*/
    left: 2.3em; /* esto mueve a la izquierda este texto */
}

/*este es el estilo del bloque donde se pone tu contraseña*/
#poner-tu-contraseña-bloque {
    position: absolute;
    top: 12em; /* este determina la altura de este bloque */
    left: 2em; /* esto mueve a la izquierda este texto */
    width: 450px;     /*da el ancho total de este bloque*/
    height: 25px;  /* da la altura de este bloque */
    font-size: 16px; /*cambia el tamaño de las letras*/
    padding: 8px;   /* espacio interno de este bloque */
    border-radius: 5px;
}

/*este es el estilo del texto de contraseña*/
.poner-tu-contraseña-texto {
    position: absolute;
    top: 9em; /* este determina la altura de este bloque */
    font-size: 1em;
    left: 2.3em; /* esto mueve a la izquierda este texto */
}

/*este se usa para dar estilo al boton de incio de sesion*/
#inicio-de-sesion-boton {
    position: absolute;
    top: 14em; /* este determina la altura de este bloque */
    left: 1.6em; /* esto mueve a la izquierda este texto */
    width: 460px;     /*da el ancho total de este bloque*/
    height: 50px;   /* da la altura de este bloque */
    font-size: 20px; /*cambia el tamaño de las letras*/
    padding: 8px;   /* espacio interno de este bloque */
    border-radius: 5px; /*curvea las orillas de este boton*/
    background-color: var(--color-terciario); /* cambia el color del fondo de este boton */
    color: #ffffff; /* cambia el color del texto */
}