/* formatos para pagina principal */
/* Fuentes para utilizar */
@import url('https://fonts.googleapis.com/css2?family=Racing+Sans+One&display=swap');


*{
    /*Configuraciones iniciales para todos los elementos */
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* espacio principal */
.cuerpo{
    /* contenedor principal */
    background-color: rgb(245, 221, 187);
    width: 100vw;
    height: 100vh;

}

/* zona de navegación, botones */
.botonera{
  /* diseño */
  width: 100%;
  height: 10%;
  /* organizar contenido */
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
/* ESTO ES LO QUE COPIO DE LA PÁGINA*/
  margin-bottom: 3%;
  margin: 0.5%;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

button {
  padding: 0.1em 0.25em;
  width: 13em;
  height: 4.2em;
  background-color:rgb(245, 221, 187);
  border: 0.08em solid #98794e;
  border-radius: 0.3em;
  font-size: 12px;
}

button span {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  bottom: 0.4em;
  width: 8.25em;
  height: 2.5em;
  background-color: #eabb78;
  border-radius: 0.2em;
  font-size: 1.5em;
  color: sienna;
  border: 0.08em solid #98794e;
  box-shadow: 0 0.4em 0.1em 0.019em #c8a066;
}

button span:hover {
  transition: all 0.5s;
  transform: translate(0, 0.4em);
  box-shadow: 0 0 0 0 #645033;
}

button span:not(hover) {
  transition: all 1s;
}


/* titulo principal, mi nombre */
.titulo{
    /* alto y ancho */
    width: 80%;
    margin: auto;
    height: 20%;

    /* organizar el contenido */
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;


    /* propiedades del texto */
    background-color: rgb(204, 222, 210);
    font-size: 100%;
    color: rgb(161, 128, 147);
    text-align: center;
    font-family: 'Racing Sans One', cursive;
    letter-spacing: 0.2em;
}

/* espacio con informacion personal*/
.info{
    /*  alto y ancho */
    width: 80%;
    margin: auto;
    margin-top: 3%; /* margen externo para separar la info del titulo*/
    /* organizar el contenido */
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;

}

.texto{
    /* ancho */
    width: 75%;
    padding-right: 3%; /* margen interno para separar el texto de la imagen */

    /* propiedades del texto*/
    font-size: 1.5rem; /* tamaño relativo */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: sienna;
    text-align: justify;
}

.foto{
    /* ancho */
    width: 55%;
}

.foto img {
    /* ancho */
    width: 100%; /* el total del tamaño dado a la div foto*/

    /* borde para la foto */
    border-radius: 10%;
    border: 10px #e3b8b2; 
}