/* 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(255, 0, 140);



}

/* 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*/

    padding: 0.1em 0.25em;

    background-color: rgb(167, 33, 44);

    border-radius: 0.3em;

    font-size: 12px;

    margin-bottom: 3%;

    margin: 0.5%;

    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

    color: rgb(170, 38, 152);

  }

  /* AYUDA PROFE NO ME DA BOLA NI CON EL COLOR DE LAS LETRAS, NI LA FONT FAMILY, NI EL BORDE ESE NEGRO QUE QUIERO SACAR Y NO PUEDO*/

  button span {

    position: relative;

    display: flex;

    justify-content: center;

    align-items: center;

    bottom: 0.4em;

    width: 8.25em;

    height: 2.5em;

    background-color: rgb (287, 184, 178);

    border-radius: 0.2em;

    font-size: 1.5em;

    border: 0.00em rgb(285, 221, 187);

    box-shadow: 0 0.4em 0.1em 0.019em rgb(247, 132, 0);

  }

  

  button span:hover {

    transition: all 0.5s;

    transform: translate(0, 0.4em);

    box-shadow: 0 0 0 0 rgb(255, 82, 2);

  }

  

  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(167, 33, 44);

    font-size: 100%;

    color: rgb(255, 255, 255);

    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: rgb(255, 255, 255);

    text-align: justify;

}



.foto{

    /* ancho */

    width: 25%;

}



.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; 

}