@import url(https://fonts.googleapis.com/css?family=Signika:700,300,600);

* {
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  
}


.cabecera {
  background-color:hsl(30, 60%, 68%);
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
  font-size: 20px;
}

.botones {
  display: flex;
  flex-direction: row-reverse;
  width: 100vw;
  height: 10vh;
  background-color:hsl(155, 35%, 62%);
  display: flex;
  flex-direction: row;
  align-items: center;
}

nav a {
  transition: background-color .25s ease-in;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
  font: size 18px;
  text-decoration: none;
  color: black;
  height: 10vh;
  width: auto;
  padding: 0 3vw;
  margin: 0 1vw;
}

nav a:hover {
  background-color: hsl(155, 23%, 43%);
}

#navLeft>img {
  height: 3em;
}


.textoanimado {
    display: flex; 
    justify-content: center; 
    align-items: center; 
    margin:20px 0; 
    margin-bottom: 2.7vmax;
    text-align:center; 
    overflow:hidden; 
    size: 2px;
    font: bold 5.5vw/1.6 'Signika', sans-serif;
    user-select:none;
 }
 

h1 span { display:inline-block; animation:float .2s ease-in-out infinite; }
 @keyframes float {
  0%,100%{ transform:none; }
  33%{ transform:translateY(-1px) rotate(-2deg); }
  66%{ transform:translateY(1px) rotate(2deg); }
}
body:hover span { animation:bounce .6s; }
@keyframes bounce {
  0%,100%{ transform:translate(0); }
  25%{ transform:rotateX(20deg) translateY(2px) rotate(-3deg); }
  50%{ transform:translateY(-20px) rotate(3deg) scale(1.1);  }
}

span:nth-child(4n) { color:hsl(50, 75%, 55%); text-shadow:1px 1px hsl(50, 75%, 45%), 2px 2px hsl(50, 45%, 45%), 3px 3px hsl(50, 45%, 45%), 4px 4px hsl(50, 75%, 45%); }
span:nth-child(4n-1) { color:hsl(135, 35%, 55%); text-shadow:1px 1px hsl(135, 35%, 45%), 2px 2px hsl(135, 35%, 45%), 3px 3px hsl(135, 35%, 45%), 4px 4px hsl(135, 35%, 45%); }
span:nth-child(4n-2) { color:hsl(155, 35%, 60%); text-shadow:1px 1px hsl(155, 25%, 50%), 2px 2px hsl(155, 25%, 50%), 3px 3px hsl(155, 25%, 50%), 4px 4px hsl(140, 25%, 50%); }
span:nth-child(4n-3) { color:hsl(30, 65%, 60%); text-shadow:1px 1px hsl(30, 45%, 50%), 2px 2px hsl(30, 45%, 50%), 3px 3px hsl(30, 45%, 50%), 4px 4px hsl(30, 45%, 50%); }

h1 span:nth-child(2){ animation-delay:.05s; }
h1 span:nth-child(3){ animation-delay:.1s; }
h1 span:nth-child(4){ animation-delay:.15s; }
h1 span:nth-child(5){ animation-delay:.2s; }
h1 span:nth-child(6){ animation-delay:.25s; }
h1 span:nth-child(7){ animation-delay:.3s; }
h1 span:nth-child(8){ animation-delay:.35s; }
h1 span:nth-child(9){ animation-delay:.4s; }
h1 span:nth-child(10){ animation-delay:.45s; }
h1 span:nth-child(11){ animation-delay:.5s; }
h1 span:nth-child(12){ animation-delay:.55s; }
h1 span:nth-child(13){ animation-delay:.6s; }
h1 span:nth-child(14){ animation-delay:.65s; }


body{
  background-color: rgb(189, 183, 107);
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}

.contenido{
  position: absolute;
  top: 15vh;
}

main{
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  margin: auto;
  font-size: 40px;
}

.imgpresen {
  display: flex;
  width: 35vmax;
  height: 25vmax;
  position: left;
  margin-top: 2vmax;
  margin-bottom: 10vmax;
  margin-left: 6vmax;
  margin-right: auto;
  border-style: dotted;
  

  }

.imgpresen img{
  width:200%;
  height:160%;
  padding: 3%;
}

.texto{
  padding: 3%;
  width: 60%;
  height: 50%;
  border: 3.5px solid rgba(173, 130, 130, 0.596);
  margin: auto;
  margin-left: 5vmax;
  margin-right: 9vmax;
  margin-top: 3vmax;
  margin-bottom: 15vmax;
  align-items: flex-end;
  font-size: 20px;
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
  color: rgb(0, 0, 0);
  font-size:24px;
}

h2{
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
  color: rgb(0, 0, 0);
  font-size: 38px;
  position: absolute;
  margin-left: 4vmax;
  font-style: bold;
  margin-bottom: 3vmax;
}

.boton{
  position: fixed;
  bottom: 2vh;
  right: 0%;
}
.boton a {
  transition: .25s ease-in;
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
  font-style: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: rgb(0, 0, 0);
  height: 10vh;
  width: auto;
  padding: 0 3vw;
  margin: 0 1vw;
  background-color: hsl(135, 36%, 55%);
}

.boton a:hover {
  background-color: hsl(135, 32%, 41%);
}

.pie {
  background-color: hsl(30, 60%, 68%);
  font-size: 20px;
  bottom: 0vh;
  width: 100vw;
  height: 12vh;
  color: #000;
}
.pie a:link, nav a:visited {
  background-color: hsl(30, 34%, 55%);
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
  color: #000;
}