/* Fuentes tipográficas usadas */
@import url('https://fonts.googleapis.com/css2?family=Kanit&display=swap');

/* Propiedades generales a todos los elementos de la página */
*{
    margin: 0%; 
    padding: 0%;
    box-sizing: border-box;
}

/* Cualidades del "fondo" de toda la página */
.cuerpo{
    background-color: peru; 
    height: 100%;
}

/* Cualidades del "fondo" de la zona superior, que contendrá los dos botones */
.botonera{
    /* Color */
    background-color:black; 

    /* Tamaño/ubicación */
    width: 95%;
    height: 8%;
    margin: auto; 
    margin-top: 1%;

    /* Organizador de contenido */
    display:flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center; 
}
/* Los valores para los estilos de los botones los puse debajo del código CSS, para que no obstruyan 
la parte "general" del código (es bastante largo) */

/* Cualidades del título principal */
.titulo{
    /* Tamaño/ubicación */
    width: 90%;
    height: 20%;
    margin: auto;

    /* Organizador de contenido */
    display:flex;
    flex-direction: row;
    justify-content: center; 
    align-items: center; 
    
    /* Estética */
    background-color:rgb(200, 15, 15); 
    text-align: center;
    font-size: 113%;
    font-family: 'Kanit', sans-serif;
    color: black;
    letter-spacing: 0.6em;
    border: 3px black solid;
}

/* Cualidades de la zona donde irá el texto */
.información{ 
    /* Altura y anchura */
    width: 80%;
    margin: auto;
    margin-top: 3%;

    /* Propiedades / estética */
    display: flex;
    flex-direction: row;
    align-items: center; 
    justify-content: space-between;
}

/* Cualidades del texto en sí */
.texto{
    /* Anchura */
    width: 75%;
    padding-right: 2%;

    /* Propiedades / estética */
    font-size: 1.5rem;
    font-family: 'Kanit', sans-serif;
    color:black;
    text-align: justify;
}

/* Cualidades de la zona donde irá la imagen */
.foto{
    /* Anchura */
    width: 30%;
}

/* Cualidades de la foto en sí */
.primera{
    /* Anchura */
    width: 100%;

    /* Borde */
    border-radius: 10%;
    border: 5% solid red;
}
 
/* Como comenté en la sección "botonera", aquí abajo puse los valores de los botones,
 para que no obstruya en la parte "general" del CSS */
    /* Valores botón "Retornar" (como comenté en el HTML, modifiqué el estilo para que quede "menos atractivo",
     más que nada para que sea menos "tendrador" tocar este botón y el espectador siga dentro de la página en la que ya está)*/
    .retorno{
      display: flex;
      align-items: center;
      font-family: inherit;
      font-weight: 500;
      font-size: 17px;
      padding: 0.8em 1.3em 0.8em 0.9em;
      color: white;
      background-color: white; 
      border: none;
      letter-spacing: 0.05em;
      border-radius: 16px;
    }
    
    button svg {
      margin-right: 3px;
      transform: rotate(30deg);
      transition: transform 0.5s cubic-bezier(0.76, 0, 0.24, 1);
    }
    
    button span {
      transition: transform 0.5s cubic-bezier(0.76, 0, 0.24, 1);
    }
    
    button:hover svg {
      transform: translateX(5px) rotate(90deg);
    }
    
    button:hover span {
      transform: translateX(7px);
    }

    /* Valores botón "Ingresar" (como también comenté en el HTML, este botón sí lo dejé más estético,
     para que sea más llamativo accionarlo a él)*/
.ingresar{
      display: flex;
      align-items: center;
      font-family: inherit;
      font-weight: 500;
      font-size: 17px;
      padding: 0.8em 1.3em 0.8em 0.9em;
      color: white;
      background: #ad5389;
      background: linear-gradient(to right, #0f0c29, #302b63, #24243e);
      border: none;
      letter-spacing: 0.05em;
      border-radius: 16px;
    }
    
    button svg {
      margin-right: 3px;
      transform: rotate(30deg);
      transition: transform 0.5s cubic-bezier(0.76, 0, 0.24, 1);
    }
    
    button span {
      transition: transform 0.5s cubic-bezier(0.76, 0, 0.24, 1);
    }
    
    button:hover svg {
      transform: translateX(5px) rotate(90deg);
    }
    
    button:hover span {
      transform: translateX(7px);
    }