@media only screen and (-webkit-min-device-pixel-ratio: 3) {
  /* CSS */
}
@font-face{font-family: "Red-Rose-Medium";
  src: url(./fontsInfinita/RedRose-VariableFont_wght.ttf);}
@font-face{
  font-family: "Garet-Heavy";
  src: url(fontsInfinita/garet/Garet-Heavy.ttf);
  src: url(fontsInfinita/garet/Garet-Heavy.woff);}
@font-face {
  font-family: "Montserrat-Black";
  src: url(fontsInfinita/Montserrat/Montserrat-Black.ttf);}
  @font-face {
    font-family: "Montserrat-Medium";
    src: url(fontsInfinita/Montserrat/Montserrat-Medium.ttf);}
@font-face {
  font-family: "Montserrat-ExtraBold";
  src: url(fontsInfinita/Montserrat/Montserrat-Bold.ttf);}
@font-face {
  font-family: "Montserrat-Italic";
  src: url(fontsInfinita/Montserrat/Montserrat-Italic.ttf);}
  @font-face {
    font-family: "Montserrat-Light";
  src: url(fontsInfinita/Montserrat/Montserrat-Light.ttf);}
  @font-face {
    font-family: "Montserrat-ExtraLight";
  src: url(fontsInfinita/Montserrat/Montserrat-ExtraLight.ttf);}
@font-face{
  font-family: "Garet-Book";
  src: url(fontsInfinita/garet/garet-book.ttf);}

html {
  scroll-behavior: smooth;
}

body {
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.titulo p,
.autor-a p,
.pie p {
  margin-left: 1vw;
  margin-top: 0.5vh;
  margin-bottom: 0.5vh;
}

/*PAGINA SUPERIOR*/

#container {
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template-columns: repeat(98, 1vw);
  grid-template-rows: repeat(94, 1vh);
}

.dedoIzq {
  grid-area: 2 / 6 / 5 / 10;
}

.dedoIzq img {
  width: 7vh;
  padding: 0.3vw;
}

  .dedoDer {
    grid-area: 2 / 2 / 5 / 10; 
  }
  
  .dedoDer img {
    width: 7vh;
    padding: 0.3vw;
    transform: scaleX(-1);
  }

  .blogAntiguo{
    grid-area: 2 / 82 / 8 / 92; /*3*/
}
  
.blogAntiguo img{
  width: 70%;
}
.blogTexto{
  grid-area: 3 / 88 / 8 / 96; /*3*/
  font-family: "Montserrat";
  font-weight: bolder;
  font-size: 0.8vw;
  color:blue
}

.item {
  align-self: center;
}

.titulo {
  grid-area: 7 / 1 / 10/ 33; /*3*/
  background-color: rgba(163, 73, 164);
  font-family: "Faustina";
  font-size: 1vw;
  color: white;
}

.autor-a {
  grid-area: 11/ 1 /14 / 33; /*4*/
  background-color: black;
  font-family: "Faustina";
  font-size: 1vw;
  color: white;
}

.avatar img{
  -webkit-backdrop-filter: blur;
  backdrop-filter: blur;

  width: 3vw;
  border-radius: 50%;
  border: 2px solid white;
}

.avatar {
  grid-area: 10 / 25 / 10 / 30; /*55*/
}

#portada img{
  width: 36vh;
  box-shadow: 2px 2px 2px black;
}

a{
  font-style: italic;
  text-decoration: none;
}

#portada {
  grid-area: 17 / 1 / 70 / 33; /*55*/
  margin-left: -50vw;
  animation-name: muevePortada;
  animation-delay: 400ms;
  animation-duration: 2s;
  animation-fill-mode: forwards;
  transition: 200ms;
}

#resumen {
  grid-area: 75 / 1 /95 /53; 
  background-color: rgb(43, 126, 108);
  font-size: 1vw;
  color: white;
  padding: 0.8em;
  opacity: 0;
  animation-name: transiciones;
  animation-delay: 1s;
  animation-duration: 4s;
  animation-fill-mode: forwards;
  transition: 1s;
}

.imgCentro img{
  width: 28vw;
  box-shadow: 2px 2px 2px black;
  opacity: 0;
  animation-name: transImg;
  animation-delay: 1s;
  animation-duration: 4s;
  animation-fill-mode: forwards;
  transition:1s;
}

.imgCentro {
  grid-area: 24 / 25 / 60 /50;
}

.pieImgCentro{
  grid-area: 64 / 25 / 68 / 40;
  width: 28vw;
  font-family: "Faustina";
  color: black;
  font-weight: bolder;
  font-size: 0.7vw;
margin-top: 0.5hw;

  opacity: 0;
  animation-name: transiciones;
  animation-delay: 1s;
  animation-duration: 4s;
  animation-fill-mode: forwards;
  transition:1s;
}

#textoBio {
    grid-area: 10 /70 / 95/ 98;
    padding-top: 1vh;
    padding-right: 1.5vw;
    padding-left: 8.5vw;
  background-color: rgb(43, 126, 108);
  font-family: "Faustina";
  font-size: 0.8vw;
  font-style: italic;
  line-height: 2.6vh;
  color: white;
  text-indent: 1vw;
  opacity: 0.8;
  overflow:visible;
  opacity: 0;
  animation-name: transiciones;
  animation-delay: 1s;
  animation-duration: 4s;
  animation-fill-mode: forwards;
  transition:1s;
}

#textobio:hover,
#resumen:hover{
  box-shadow: 2px 2px 6px black;
  transform: scale(1.03);
  transition: 1s ease-in-out;
}

.textoFondo {
  grid-area: 1 / 26 /6/ 76;
  background-color: white;
  border-radius: 1vw;
  padding: 0.3vw;
  font-family: "Montserrat";
  color: black;
  font-size: 0.65vw;
  filter: drop-shadow(2px 2px 5px black);
text-align: center ;
z-index: 99;
}

.popup{
  font-weight: bold;
  color: blue;
  z-index: 99;
}

#imgBio img{
  box-shadow: 2px 2px 2px black;
  width: 12vw;
  opacity: 0;
  animation-name: transImg;
  animation-delay: 1s;
  animation-duration: 4s;
  animation-fill-mode: forwards;
  transition: 1s;
}

#imgBio {
  grid-area: 20 / 64;
  background-size: cover;
  z-index: 1;
}

.dedoIzq img:hover,
.dedoDer img:hover {
filter: drop-shadow(2px 2px 5px black);
}

.dedoIzq img,
.dedoDer img {
animation-name:animadedo;
animation-duration: 1s;
animation-direction: alternate-reverse;
animation-iteration-count: infinite;
transition:2s;
}

.pie {
  grid-area: 95 / 1 / 96 /30; /*5*/
  font-family: "Oswald";
  font-size: 0.6vw;
  text-align: center;
  color:black;
}

.imgReal {
  grid-area: 8 /27 / 80 / 70;
  width: 45vw;
  height: 60vh;
  background-size: cover;
  background-repeat: no-repeat;
  border: 1.5vw solid white;
  z-index: 99;
  opacity: 0;
  }

/* PAGINA INFERIOR */

#contenedorPagInf{
  margin-top: 5vh;
  margin-left: 2vw;
  display: grid;
grid-template-columns: repeat(98, 1vw);
grid-template-rows: repeat(94,1vh);
}

.avatares{
grid-area: 10 /1 /90 / 5;
}

.titPorqueno{
grid-area: 2 / 2 /8 / 11;
font-size: 1vw;
font-weight: 600;
font-family: "Rose";
text-align: center;
z-index: 20;
}

.porqueno p{
font-size: 0.8.5vw;
font-style: italic;
line-height: 1.95vh;
margin: 0.3vw;
}

.porqueno{
padding: 0.5vw;
grid-area: 10 / 6 / 91 / 12;
background: linear-gradient(90deg, #edc0bf 0,#c4caef  58%); 
overflow: hidden;
z-index: 2;
}

.avatares img{
height: 78vh;
  }
  
.glaseado{
grid-area: 10 / 1 / 91 / 12;
opacity: 1;
-webkit-backdrop-filter: blur(3);
backdrop-filter: blur(3px);
z-index: 3;
}

h2{
  text-align: center;
  text-indent: 0vh;
  }

@keyframes desplaza {
  0% {
    width: 0%;
    color: transparent;
  }
  100% {
    width: 100%;
    color: white;
  }
}

@keyframes muevePortada {
  0% {
    margin-left: -50vw;
  }
  50% {
    margin-left: 2vw;
  }
  100% {
    margin-left: 0vw;
  }
}

@keyframes transImg {
  0% {
    opacity: 0;}
  100% {
    opacity: 1;
  }
}

@keyframes transiciones {
  0% {
    opacity: 0;}
  100% {
    opacity: 0.8;
  }
}

@keyframes comienza{
  0% {margin-left: -20vw; }
  100% {margin-left:2vw;  }
}

@keyframes animadedo{
from {filter: drop-shadow(2px 2px 5px rgb(68, 70, 230))};
to{filter: drop-shadow(2px 2px 3px rgb(8, 7, 7))};}

@media only screen and (max-height: 800px) {
  .porqueno p{
    font-size: 0.84vw;
    }
       #textoBio{
      line-height: 2.5vh;
    }
  }
  
  @media only screen and (max-height: 650px) {
    .porqueno p{
      font-size: 0.7vw;
      }
    }