@font-face {
  font-family: "MixYonder";
  src: url("../fonts/MixYonder.woff2") format('woff2'),
       url("../fonts/MixYonder.woff") format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "LibreFranklin";
  src: url("../fonts/librefranklin-medium-webfont.woff2") format("woff2"),
  url("../fonts/librefranklin-medium-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

body {
  background-image: url("../assets/img/palabras_suelo.png"),
    url("../assets/img/Ami.png");
  background-size: auto 50px, 75px;
  background-repeat: no-repeat, no-repeat;
  background-position: 50% calc(100% - 50px), 85px calc(100% - 50px);
  padding-top: 65px;
  min-height: 100vh;
  position: relative;
  padding-bottom: 115px;
}

.roboto {
  font-family: "Roboto";
  font-size: 0.85em;
}

#header {
  padding-top: 25px;
  padding-bottom: 0;
}

#header span {
  font-family: "MixYonder";
  font-size: 2em;
  color: #3e4342;
  padding-bottom: 0;
}

#contenedor {
  /* 50px del footer, 65px del navbar, 48px del header y 25 de su padding */
  min-height: calc(100vh - 50px - 65px - (48px + 25px));
  display: flex;
  justify-content: center;
  margin-bottom: 4rem;
  color: #3e4342;
  font-size: 14px;
  padding-top: 64px;
}

a.bloque-personajes div.titulo-personaje.vimana {
  background-color: #9494d1;
}

a.bloque-personajes div.titulo-personaje.inuit {
  background-color: #b9bb15;
}

a.bloque-personajes div.titulo-personaje.ami {
  background-color: #3e4342;
}

a.bloque-personajes div.titulo-personaje.yaku {
  background-color: #70b1c8;
}

a.bloque-personajes div.titulo-personaje.sua {
  background-color: #e46953;
}

.bloque-personajes {
  text-decoration: none;
}

.bloque-personajes.bloqueado {
  cursor: not-allowed;
  opacity: 0.5;
}

.bloque-personajes img.portadaPersonajes {
  width: 90%;
  position: relative;
  z-index: 1;
  box-shadow: 7px -6px 13px 0px lightgray;
  border-radius: 8px;
}

.bloque-personajes div.titulo-personaje {
  margin-top: -0.25rem;
  border-radius: 4px;
}

.bloque-personajes div.titulo-personaje span {
  color: white;
  font-size: 1em;
}

.personajes {
  display: flex;
  justify-content: center;
}

.contenedorImg {
  display: flex;
  background-color: white;
  box-shadow: 3px 5px 13px 6px rgba(0,0,0,0.09);
  width: 30%;
  justify-content: center;
  margin-bottom: 2rem;
  position: relative;
  left: 22rem;
  /* background-image: url("../../images/ver_presentacion_personajes2.png");
  background-repeat: no-repeat; */
}

.contenedorImgPresentacion {
  color: #70b1c8;
  text-decoration: none;
  font-style: italic;
  display: flex;
  width: 17rem;
  align-items: center;
  background-color: transparent;
  border: none;
}

.contenedorImgPresentacion:hover {
  font-weight: bolder;
}

.contenedorImgCasiopea img {
  width: 5rem;
}

li,
em {
  font-weight: bold;
}

.tituloContexto {
  color: #b9bb15;
  font-weight: bold;
}

.contenedorImgCasiopea {
  display: flex;
  justify-content: center;
}

.contenedorImgCasiopea img {
  width: 24rem;
}