/* importamos fuentes a utilizar */
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@600&family=Lobster&family=Oleo+Script+Swash+Caps:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@600&family=Inconsolata:wght@600&family=Indie+Flower&family=Lobster&family=Merriweather:wght@300&family=Nanum+Myeongjo&family=Oleo+Script+Swash+Caps:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@600&family=Inconsolata:wght@600&family=Indie+Flower&family=Lobster&family=Merriweather:wght@300&family=Nanum+Myeongjo&family=Oleo+Script+Swash+Caps:wght@400;700&family=Roboto+Mono:wght@100;400&family=Rubik:wght@400;500&display=swap');

/* Diseño generales */

*{
    background-color:#F7F3D4;
}

h1{
  text-align:center;
  font-family:'Dancing Script', cursive;
  color: rgb(151, 150, 221);
  font-size: 40px;
}

/* Diseño del nav */
.botones {
  display: flex; /* organiza el contenido */
  flex-direction: row; /* distribuye el contenido en línea */
  width: 100vw; /* ancho del contenedor */
  justify-content: space-around; /* distribuye el espacio sobrante */
  align-items: center; /* alinea verticalmente */
  font-size: 20px;
}

.presentacion{
display: flex;
flex-direction: row;
width: 80vw;
margin: auto;
margin-top: 5%;
}
.textos{
  /* formato de los textos */
  width: 80%;
}

h2{
    text-align:justify;
    font-family:Merriweather, cursive;
    color: rgb(222, 150, 231);
    font-size: 20px;
  }

  p{
    text-align:justify;
    font-family: Rubik;
    color: black; 
    font-size: 1.3vmax;
    
  }

  .imagen_propia{
    width: 20%;
    margin-left: 30px;
  
  }

  footer{
    position: fixed;
    bottom:0%;
    width: 100vw;
text-align: center;
font-family:Verdana, Geneva, Tahoma, sans-serif
  }

 /* From uiverse.io by @Madflows */

button {
  position: relative;
  display: inline-block;
  cursor: pointer;
  outline: none;
  border: 0;
  vertical-align: middle;
  text-decoration: none;
  font-family: inherit;
  font-size: 10px;
 }
 
 button.learn-more {
  font-weight: 600;
  color: #382b22;
  text-transform: uppercase;
  padding: 1.25em 2em;
  background: #fff0f0;
  border: 2px solid #b18597;
  border-radius: 0.75em;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transition: background 150ms cubic-bezier(0, 0, 0.58, 1), -webkit-transform 150ms cubic-bezier(0, 0, 0.58, 1);
  transition: transform 150ms cubic-bezier(0, 0, 0.58, 1), background 150ms cubic-bezier(0, 0, 0.58, 1), -webkit-transform 150ms cubic-bezier(0, 0, 0.58, 1);
 }
 
 button.learn-more::before {
  position: absolute;
  content: '';
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #f9c4d2;
  border-radius: inherit;
  -webkit-box-shadow: 0 0 0 2px #b18597, 0 0.625em 0 0 #ffe3e2;
  box-shadow: 0 0 0 2px #b18597, 0 0.625em 0 0 #ffe3e2;
  -webkit-transform: translate3d(0, 0.75em, -1em);
  transform: translate3d(0, 0.75em, -1em);
  transition: transform 150ms cubic-bezier(0, 0, 0.58, 1), box-shadow 150ms cubic-bezier(0, 0, 0.58, 1), -webkit-transform 150ms cubic-bezier(0, 0, 0.58, 1), -webkit-box-shadow 150ms cubic-bezier(0, 0, 0.58, 1);
 }
 
 button.learn-more:hover {
  background: #ffe9e9;
  -webkit-transform: translate(0, 0.25em);
  transform: translate(0, 0.25em);
 }
 
 button.learn-more:hover::before {
  -webkit-box-shadow: 0 0 0 2px #b18597, 0 0.5em 0 0 #ffe3e2;
  box-shadow: 0 0 0 2px #b18597, 0 0.5em 0 0 #ffe3e2;
  -webkit-transform: translate3d(0, 0.5em, -1em);
  transform: translate3d(0, 0.5em, -1em);
 }
 
 button.learn-more:active {
  background: #ffe9e9;
  -webkit-transform: translate(0em, 0.75em);
  transform: translate(0em, 0.75em);
 }
 
 button.learn-more:active::before {
  -webkit-box-shadow: 0 0 0 2px #b18597, 0 0 #ffe3e2;
  box-shadow: 0 0 0 2px #b18597, 0 0 #ffe3e2;
  -webkit-transform: translate3d(0, 0, -1em);
  transform: translate3d(0, 0, -1em);
 }

 

  /* From uiverse.io by @Madflows */

button {
  position: relative;
  display: inline-block;
  cursor: pointer;
  outline: none;
  border: 0;
  vertical-align: middle;
  text-decoration: none;
  font-family: inherit;
  font-size: 10px;
 }
 
 button.learn-more {
  font-weight: 600;
  color: #382b22;
  text-transform: uppercase;
  padding: 1.25em 2em;
  background: #fff0f0;
  border: 2px solid #b18597;
  border-radius: 0.75em;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transition: background 150ms cubic-bezier(0, 0, 0.58, 1), -webkit-transform 150ms cubic-bezier(0, 0, 0.58, 1);
  transition: transform 150ms cubic-bezier(0, 0, 0.58, 1), background 150ms cubic-bezier(0, 0, 0.58, 1), -webkit-transform 150ms cubic-bezier(0, 0, 0.58, 1);
 }
 
 button.learn-more::before {
  position: absolute;
  content: '';
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #f9c4d2;
  border-radius: inherit;
  -webkit-box-shadow: 0 0 0 2px #b18597, 0 0.625em 0 0 #ffe3e2;
  box-shadow: 0 0 0 2px #b18597, 0 0.625em 0 0 #ffe3e2;
  -webkit-transform: translate3d(0, 0.75em, -1em);
  transform: translate3d(0, 0.75em, -1em);
  transition: transform 150ms cubic-bezier(0, 0, 0.58, 1), box-shadow 150ms cubic-bezier(0, 0, 0.58, 1), -webkit-transform 150ms cubic-bezier(0, 0, 0.58, 1), -webkit-box-shadow 150ms cubic-bezier(0, 0, 0.58, 1);
 }
 
 button.learn-more:hover {
  background: #ffe9e9;
  -webkit-transform: translate(0, 0.25em);
  transform: translate(0, 0.25em);
 }
 
 button.learn-more:hover::before {
  -webkit-box-shadow: 0 0 0 2px #b18597, 0 0.5em 0 0 #ffe3e2;
  box-shadow: 0 0 0 2px #b18597, 0 0.5em 0 0 #ffe3e2;
  -webkit-transform: translate3d(0, 0.5em, -1em);
  transform: translate3d(0, 0.5em, -1em);
 }
 
 button.learn-more:active {
  background: #ffe9e9;
  -webkit-transform: translate(0em, 0.75em);
  transform: translate(0em, 0.75em);
 }
 
 button.learn-more:active::before {
  -webkit-box-shadow: 0 0 0 2px #b18597, 0 0 #ffe3e2;
  box-shadow: 0 0 0 2px #b18597, 0 0 #ffe3e2;
  -webkit-transform: translate3d(0, 0, -1em);
  transform: translate3d(0, 0, -1em);
 }