@font-face {
  font-family: "Rose";
  src: url(fontsInfinita/RedRose-VariableFont_wght.ttf);
}
@font-face {
	font-family: "Faustina";
	src: url(fontsInfinita/Faustina/Faustina-Italic-VariableFont_wght.ttf);
	scr: url(fontsInfinito/Faustina/Faustina-VariableFont_wght.ttf);
  }
  @font-face{
    font-family: "Montserrat-bold";
    src: url(fontsInfinita/Montserrat/Montserrat-Bold.ttf);
    font-family: "Montserrat-regular";
    src: url(fontsInfinita/Montserrat/Montserrat-Regular.ttf);
    font-family: "Montserrat-light";
    src: url(fontsInfinita/Montserrat/Montserrat-ExtraLight.ttf);
  }

  @font-face {
    font-family: "Oswald";
    src: url(fontsInfinita/Oswald/Oswald-VariableFont_wght.ttf);
  }

* {
  margin: auto;
}

body {
  background-image: url(./imgInfinita/Quijoterecortado.png);
  background-repeat: no-repeat;
  background-position: 2vw 20vw;
  background-attachment: fixed;

  }

.textoinicial{
  position: absolute;
  width: 80vw;
  height: 20vh;
  font-family: "Montserrat";
  font-size: 3vw;
  margin-left:15vw;
  margin-top: 45vh;
  color: white;
  animation-name: cambiocolor;
  animation-delay: 1s;
  animation-duration:3.5s;
  animation-fill-mode: backwards;
  transition: color 400ms ease-out;

}

#contenedor1 {
  margin-top: 2vh;
  display: grid;
  grid-template-columns: repeat(3, 17vw);
  grid-template-rows: auto;
  grid-template-areas:
    "cabecera cabecera cabecera cabecera"
    "libro1 libro2 libro3 libro4"
    "libro5 libro6 libro7 libro8"
    "libro9 libro10 libro11 libro12"
    "libro13 libro14 libro15 libro16 "
    "libro17 libro18 libro19 libro20 "
    "libro21 libro22 libro23 libro24"
    "libro25 libro26 libro27 libro28"
    "libro29 libro30 libro31 libro32"
    "libro33 libro34 libro35 libro36"
    "libro37 libro38 libro39 libro40"
    "libro41 libro42 libro43 libro44"
    "libro45 libro46 libro47 libro48"
    "libro49 libro50 libro51 libro52"
    "libro53 libro54 libro55 libro56"
    "libro57 libro58 libro59 libro60"
    "libro61 libro62 libro63 libro64"
    "libro65 libro66 libro67 libro68"
    "libro69 libro70 libro71 libro72"
    "libro73 libro74 libro75 libro76"
    "libro77 libro78 libro79 libro80"
    "libro81 libro82 libro83 libro84"
    "libro85 libro86 libro87 libro88"
    "libro89 libro90 libro91 libro92"
    "libro93 libro94 libro95 libro96"
    "libro97 libro98 libro99 libro100"
    "libro101 libro102 . ."

    "manos manos manos manos"
    "pie pie pie pie";
width: 68vw;
height: auto;
  opacity: 0;
  animation-name:opaBody;
  animation-delay:4s;
  animation-duration: 2s;
  animation-fill-mode: forwards;
  transition: opacity 2ms ease-out;
}

.cabecera {
  width: 68vw;
  margin-top: 2vh;
  font-family: "Montserrat";
  font-size: 2vw;
  color: black;
  text-align: center;
  opacity: 0;
  animation-name: titular2;
  animation-delay: 4s;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  transition: opacity 200ms ease-out;
}

.titulos {
  color: rgb(126, 58, 128);
}

.autoras,
.fechas,
.socias {
  color: black;
}

.titulos,
.autoras {
  font-family: "Oswald";
}

.fechas,
.socias {
  font-family: "Oswald", sans-serif;
  font-size: 0.9vw;
  font-weight: lighter;
}

.titulos,
.autoras,
.fechas,
.socias {
  text-align: center;
  font-size: 1vw;
}

.socias {
  width: 17vw;
    border-bottom: 10px solid;
    border-image-slice: 3;
    border-width: 5px;
    border-image-source: linear-gradient(to left, white, rgba(126, 58, 128, 50%), white);
  grid-area: areasocia;
}

.libros {
  margin-top: 4vh;
  display: grid;
  grid-template-columns: 17vw;
  grid-template-rows: 3vh 3vh 40vh 3vh 2vh;
  grid-template-areas:
    "areatitulo"
    "areaautor"
    "areaportada"
    "areafecha"
    "areasocia";
  margin-bottom: 2vh;
}

.titulos {
  grid-area: areatitulo;
}

.autoras {
  grid-area: areaautor;
}

.portadas img {
  width: 12vw;
  border: 0.1px solid rgba(158, 156, 156,0.5);
  transition-duration: 500ms;
  transition-timing-function: ease-in-out;
  grid-area: areaportada;
}

.fechas {
  grid-area: areafecha;
}

.socias{
  grid-area: areasocia;
  height: 5vh;
}

.manos {
  display: grid;
  grid-area: manos;
  margin-top: 5vh;
}

.cajamanos {
  display: flex;
  align-items: center;
}

.manoder img {
  position: relative;
  width: 3vw;
  transform: scaleX(-1);
}

.manoizq img {
  position: relative;
  width: 3vw;
}
.manoder img:hover,
.manoizq img:hover{
  filter: drop-shadow(2px 2px 5px black);
}

.pie {
  background-size: 10%;
  grid-area: pie;
  font-size: 0.7rem;
  margin-top: 3vh;
  margin-bottom: 2vh;
}

.portadas img:hover{
  transform: scale(1.1, 1.1);
  filter: sepia(50%);
  box-shadow: 0px 0px 20px rgb(65, 59, 59), 2px 2px rgb(146, 141, 141),
    4px 4px rgb(104, 99, 99);
}


@keyframes titular2 {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

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

@keyframes cambiocolor{
  0% {color: white;}
50% {color:black}
100% {color:white}}

@media (max-width: 1300px){

  #contenedor2 {
    margin-left: 20vw;
    grid-template-columns: repeat(3, 25vw);
    grid-template-areas:
      "cabecera cabecera cabecera"
      "libro1 libro2 libro3"
      "libro4 libro5 libro6"
      "libro7 libro8 libro9"
      "libro10 libro11 libro12"
      "libro13 libro14 libro15"
      "libro16 libro17 libro18"
      "libro19 libro20 libro21"
      "libro22 libro23 libro24"
      "libro25 libro26 libro27"
      "libro28 libro29 libro30"
      "libro31 libro32 libro33"
      "libro34 libro35 libro36"
      "libro37 libro38 libro39"
      "libro40 libro41 libro42"
      "libro43 libro44 libro45"
      "libro46 libro47 libro48"
      "libro49 libro50 libro51"
      "libro52 libro53 libro54"
      "libro55 libro56 libro57"
      "libro58 libro59 libro60"
      "libro61 libro62 libro63"
      "libro64 libro65 libro66"
      "libro67 libro68 libro69"
      "libro70 libro71 libro72"
      "libro73 libro74 libro75"
      "libro76 libro77 libro78"
      "libro79 libro80 libro81"
      "libro82 libro83 libro84"
      "libro85 libro86 libro87"
      "libro88 libro89 libro90"
      "libro91 libro92 libro93"
      "libro94 libro95 libro96"
      "libro97 libro98 libro99"
      "libro100 libro101 libro102"

      "manos manos manos"
      "pie pie pie";
  }
  
  .cabecera {
    margin-left: 20vw;
    width: 75vw;
    font-size: 2.5vw;
  }

  .fechas,
  .socias {
    font-family: "Oswald", sans-serif;
    font-size: 1.2vw;
    font-weight: lighter;
  }
  
  .titulos,
  .autoras,
  .fechas,
  .socias {
    text-align: center;
    font-size: 1.5vw;
  }
  
  .socias {
    grid-area: areasocia;
    width: 22vw;
    border-bottom: 10px solid;
    border-image-slice: 3;
    border-width: 5px;
    border-image-source: linear-gradient(to left, white, rgba(126, 58, 128, 50%), white);
  }
  
  .libros {
    margin-top: 4vh;
    display: grid;
    grid-template-columns: 22vw;
    grid-template-rows: 3vh 4vh 52vh 3vh 4vh;
    grid-template-areas:
      "areatitulo"
      "areaautor"
      "areaportada"
      "areafecha"
      "areasocia";
  }

  .portadas img {
    width: 18vw;
  }
}