/*fuentes a utilizar*/
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Abyssinica+SIL&display=swap');

/* diseño general */
*{
   background-color: #BEFEFC;
   font-size: 1vmax;
   font-family: 'Quicksand', sans-serif;
}

h1{
    font-family:'Abyssinica SIL', serif;
    font-size: 92px;
    padding: 80px 50px;
    text-align: center;
    text-transform: uppercase;
    text-rendering: optimizeLegibility;
}

/*diseño nav*/
.botones{
    display: flex;
    justify-content:space-around;/*distribucion del espacio sobrante*/
    width: 100vw;
    flex-direction: row;
    align-items: initial;
}

header {
    width: 100vw;
    padding-left: 125px;
    padding-top: 15px;
    font-family: "Avenir Next", "Avenir", sans-serif;
  }
  
  body {
    margin: 0;
    padding: 0;
  
    /* background color */
    
    color: #000000;
    font-family: "Avenir Next", "Avenir", sans-serif;
  }
  

/* From uiverse.io by @Voxybuns */
button {
    /* Variables */
   --button_radius: 0.75em;
   --button_color: #59b6d3;
   --button_outline_color: #000000;
   font-size: 17px;
   font-weight: bold;
   border: none;
   border-radius: var(--button_radius);
   background: var(--button_outline_color);
  }
  
  .button_top {
   display: block;
   box-sizing: border-box;
   border: 2px solid var(--button_outline_color);
   border-radius: var(--button_radius);
   padding: 0.75em 1.5em;
   background: var(--button_color);
   color: var(--button_outline_color);
   transform: translateY(-0.2em);
   transition: transform 0.1s ease;
  }
  
  button:hover .button_top {
    /* Pull the button upwards when hovered */
   transform: translateY(-0.33em);
  }
  
  button:active .button_top {
    /* Push the button downwards when pressed */
   transform: translateY(0);
  }


/*organizar texto e imagen*/
.presentacion{
    display: flex;
    flex-direction: row;
    width: 70vw;
    font-weight: bolder;
    margin: auto;
}

.textos{
    font-family: 'Mukta', sans-serif;
    font-size: 4vmin;
    font-style: unset;
    text-align: justify;
    margin: 6vmin;
    width: 55%;
}

.imagenpropia{
    /*formato de la imagen */
    width: 25%;
    max-width: max-content;
    max-height: 30%;
}

.imagenpropia img{
    width: 100%;
}