: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 es el codigo de diseño para poder entrar al registro */
.inicio-sesion {
    position: fixed; /* sirve para que se quede pegado a la pantalla*/
    top: 1.7em; /* este determina la altura del boton de inicio de sesion */
    right: 0.5em;  /* esto mueve a la derecha el boton de inicio de sesion*/
    font-size: 1.3em; /* cambia el tamaño del texto que esta en el boton */
    border: none; /* quita los bordes de este 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*/
    background-color: var(--color-terciario);
    text-decoration: none; /* quita el subrayado del boton ya que no es boton originalmente si no una palabra que se usa como boton */
}

/* 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: 8em;  /* 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 */
    background-color: var(--color-hoever);
    box-shadow: 0 4px 8px rgba(0,0,0,0.3); /* al poner el cursor arriba se ve una pequeña sombra */
    border: 2px solid #333;    /* al poner el cursor arriba se ve las orillas visibles */
}

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

/*este se usara para dar el estilo del bloque donde lleva todo lo del reegistro*/
.contenedor-del-registro {
    position: relative; /* ayuda a dar una referencia de colocacion a otras posisiones como la absolute*/
    background-color: var(--color-secundario); /* cambia el color del fondo de esta caja */
    width: 530px;/*da el ancho total de este bloque*/
    height: 620px; /* da la altura de esta caja */
    left: 31%; /* esto mueve a la izquierda esta caja */
    top: 150px; /* este determina la altura del boton de idioma */
}

/*este sera el estilo del bloque de nombre*/
#poner-nombre-bloque {
    position: absolute; /* esto hace que las letras se sobreposisione sobre este bloque */
    top: 5.4em; /* este determina la altura del boton de idioma */
    left: 2em; /* esto mueve a la izquierda este bloque */
    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;/*curvea las orillas de este bloque*/
}

/*Este sera el estilo de el texto poner nombre*/
.poner-nombre-texto {
    position: absolute;
    top:  3em; /* este determina la altura del boton de idioma */
    font-size: 1em;/*cambia el tamaño de las letras*/
    left: 2.3em; /* esto mueve a la izquierda esta horacion */
}

/*este sera el estilo del bloque de poner email*/
#poner-email-bloque {
    position: absolute; /* esto hace que las letras se sobreposisione sobre este bloque */
    top: 11.4em; /* este determina la altura de este bloque */
    left: 2em; /* esto mueve a la izquierda este bloque */
    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; /*curvea las orillas de este bloque*/
}

/*Este sera el estilo de el texto ingresar texto*/
.Ingresar-correo-texto {
    position: absolute;
    top: 9em; /* este determina la altura del boton de idioma */
    font-size: 1em;/*cambia el tamaño de las letras*/
    left: 2.3em; /* esto mueve a la izquierda este texto */
}

/*este sera el estilo del bloque de comfirmar email*/
#confirmar-email-bloque {
    position: absolute; /* esto hace que las letras se sobreposisione sobre este bloque */
    top: 17.4em; /* este determina la altura de este bloque */
    left: 2em; /* esto mueve a la izquierda este bloque */
    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; /*curvea las orillas de este bloque*/
}

/*Este sera el estilo de el texto confirmar email*/
.confirmar-email-texto {
    position: absolute;
    top: 15em; /* este determina la altura del boton de idioma */
    font-size: 1em;/*cambia el tamaño de las letras*/
    left: 2.3em; /* esto mueve a la izquierda este texto */
}

/*este sera el estilo del bloque de poner contraseña*/
#poner-contraseña-bloque {
    position: absolute; /* esto hace que las letras se sobreposisione sobre este bloque */
    top: 25em; /* este determina la altura de este bloque */
    left: 2em; /* esto mueve a la izquierda este bloque */
    width: 200px;   /*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; /*curvea las orillas de este bloque*/
}

/*Este sera el estilo de el texto poner contraseña*/
.contraseña-texto {
    position: absolute;
    top: 23em; /* este determina la altura del boton de idioma */
    font-size: 1em;/*cambia el tamaño de las letras*/
    left: 2.3em; /* esto mueve a la izquierda este texto */
}

/*este sera el estilo del bloque de confirmar contraseña*/
#confirmar-contraseña-bloque {
    position: absolute; /* esto hace que las letras se sobreposisione sobre este bloque */
    top: 25em; /* este determina la altura de este bloque */
    left: 17em; /* esto mueve a la izquierda este bloque */
    width: 200px;   /*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; /*curvea las orillas de este bloque*/
}

/*Este sera el estilo de el texto confirmar contraseña*/
.confirmar-contraseña-texto {
    position: absolute;
    top: 23em; /* este determina la altura del boton de idioma */
    font-size: 1em;/*cambia el tamaño de las letras*/
    left: 17em; /* esto mueve a la izquierda este texto */
}

/*este sera el estilo del boton de registrar cuenta*/
#Registrar-cuenta {
    position: absolute; /* esto hace que las letras se sobreposisione sobre este bloque */
    top: 25em; /* 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 del boton */
    color: #ffffff; /* cambia el color del texto */
}

/*Esto es el estilo de la letras que sirven como boton de ya tienes cuenta*/
.Inicio-de-secion {
    position: absolute;
    top: 39em; /* este determina la altura del boton de idioma */
    font-size: 15px; /*cambia el tamaño de las letras*/
    font-weight: normal;
    left: 13.5em; /* esto mueve a la izquierda este texto */
}