/* formato para página principal */
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Lora&display=swap');

/* parámetros iniciales */
*{
  margin: 0;
  box-sizing: border-box;
}

/* espacio principal con imagen de fondo*/
.cuerpo {background-image: url(../img/fondohome.png);
    height: 100vh;
    width: 100vw;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* espacio para botones */
.botonera{
    background-color: none;
    width: 100%;
    height: 10%;
    margin: auto;

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

/* título principal, mi nombre */
.titulo{
    /* alto y ancho */
    width: 100%;
    margin: auto;
    height: 10%;

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

    /* propiedades del texto */
    background-color: rgb(255, 156, 63);
    font-size: 200%;
    color: rgb(0, 0, 0);
    text-align: center;
    font-family: 'EB Garamond', serif;
    letter-spacing: 1em;
}

/* espacio con información personal */
.info{
    /* alto y ancho */
    width: 80%;
    margin: auto;
    margin-top: 3%; /* margen externo para separar la info del título */

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

.texto{
    /* ancho */
    width: 75%;
    padding-right: 3%; /* margen interno */

    /* propiedades del texto */
    font-size: 120%;
    color: rgb(0, 0, 0);
    text-align: justify;
    font-family: 'Abril Fatface', cursive;
    font-family: 'Lora', serif;
}

.foto{
    width: 25%; /* tamaño de la foto */
}

.foto img{
    /* ancho */
    width: 100%;

    /* borde para la foto */
    border-radius: 0%;
    border: 10px solid rgb(255, 156, 63);
}

/* parámetros botones */
.boton{
        font-size: 18px;
        color: #000000;
        font-family: 'Abril Fatface', cursive;
        font-family: 'Lora', serif;
        cursor: pointer;
        position: relative;
        border: none;
        background: none;
        text-transform: uppercase;
        transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
        transition-duration: 400ms;
        transition-property: color;
      }
      
      button:focus,
      button:hover {
        color: rgb(255, 156, 63);
      }
      
      button:focus:after,
      button:hover:after {
        width: 100%;
        left: 0%;
      }
      
      button:after {
        content: "";
        pointer-events: none;
        bottom: -2px;
        left: 50%;
        position: absolute;
        width: 0%;
        height: 2px;
        background-color: rgb(255, 156, 63);
        transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
        transition-duration: 400ms;
        transition-property: width, left;
      }