body{
  background-color: #333333;
  text-align: center;
  font-family: arial;
}

.titulo{
  display: inline-block;
  text-align: center;
  font-size: 30px;
  background-color: white;
  color: black;
  border: blue solid 5px;
  border-radius: 0 15px 0 15px;
  padding: 0 10px 0 10px;
  margin: 20px 0 0px 0;
}
.criador{
  display: inline-block;
  text-align: center;
  font-size: 16px;
  background-color: white;
  color: black;
  border: blue solid 5px;
  border-top: none;
  border-radius: 0 0 15px 15px;
  padding: 0 10px 0 10px;
  margin: 0px 0 35px 0;
}
.capitulo{
  display: inline-block;
  text-align: center;
  font-size: 20px;
  background-color: white;
  color: black;
  border: blue solid 5px;
  border-radius: 0 15px 0 15px;
  padding: 0 10px 0 10px;
  margin: 0px 0 25px 0;
}

/*  Mudança de Capitulos: */
a{
  display: inline-block;
  text-align: center;
  font-size: 25px;
  font-weight: bold;
  font-style: italic;
  background-color: white;
  color: black;
  border: blue solid 5px;
  margin: 20px 0 35px 0;
}
.displayAnteriorProximo{
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: flex-start;
  align-content: flex-start;
}
.proximo{
  border-radius: 0 15px 15px 0px;
  padding: 0 25px 0 5px;
}
.anterior{
  border-radius: 15px 0 0 15px;
  padding: 0 5px 0 25px;
}
.indicadorCapitulo{
  display: inline-block;
  text-align: center;
  background-color: white;
  color: black;
  border: blue solid 5px;
  border-radius: 15px 0 15px 0;
  margin: 0px 0 0px 0;
  padding: 2px 10px 2px 10px;
}

/* ICONES PERSONAGENS PADRAO: */
.divPersonagem{
  margin: 15px 10px 0 10px;
  width: 150px;
  display: flex inline;
  flex-direction: column;
  align-content: space-around;
}
.imgPersonagem{
  margin: 0;
  border: /* COLOQUE A COR */ solid 5px;
  border-radius: 0 50px 0 0px;
}
.spanPersonagem{
  margin: 0;
  text-align: center;
  text-decoration: underline;
  font-weight: bold;
  background-color: /* COLOQUE A COR */;
  color: black;
  padding: 0px 0 5px 0;
  border-radius: 0 0 0 50px;
}
/* ICONES PERSONAGENS INDIVIDUAIS: */
.gatoJoia-img{
  border: yellow solid 5px;
}
.gatoJoia-span{
  background-color: yellow;
}

.mrFresh-img{
  border: lightgreen solid 5px;
}
.mrFresh-span{
  background-color: lightgreen;
}

/* Gatito: */
.gatito-img{
  border: lightyellow solid 5px;
}
.gatito-span{
  background-color: lightyellow;
}

/* Erios: */
.erios-img{
  border: gray solid 5px;
}
.erios-span{
  background-color: gray;
}

/* Zenga: */
.zenga-img{
  border: tomato solid 5px;
}
.zenga-span{
  background-color: tomato;
}

/* Agelub: */
.agelub-img{
  border: saddlebrown solid 5px;
}
.agelub-span{
  background-color: saddlebrown;
}

/* Tadin: */
.tadin-img{
  border: aqua solid 5px;
}
.tadin-span{
  background-color: aqua;
}

/* Alverinda: */
.alverinda-img{
  border: #E881A6 solid 5px;
}
.alverinda-span{
  background-color: #E881A6;
}

/* Remedio: */
.remedio-img{
  border: palevioletred solid 5px;
}
.remedio-span{
  background-color: palevioletred;
}

/* Narrador: */
.narrador-img{
  border: brown solid 5px;
}
.narrador-span{
  background-color: brown;
}

/* Okias: */
.okias-img{
  border: #F55EF9 solid 5px;
}
.okias-span{
  background-color: #F55EF9;
}

/* Telefonista: */
.telefonista-img{
  border: steelblue solid 5px;
}
.telefonista-span{
  background-color: steelblue;
}

/* ALTURA DAS HISTORIAS INDIVIDUAIS: */
.historia1{
  height: 1700px;
}
.historia2{
  height: 200px;
}
.historia3{
  height: 500px;
}
.historia4{
  height: 600px;
}
.historia5{
  height: 800px;
}

/* FALAS PERSONAGENS PADRAO: */
.displayFalas{
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  align-content: center;
  border: dimgrey dotted 4px;
  margin: 20px 0 20px 0;
}
.fala{
  display: inline-block;
  font-size: 18px;
  font-family: times;
  text-align: center;
  border: black solid 3px;
  background-color: white;
  color: black;
  border-radius: 15px;
  padding: 2px 12px 2px 12px;
  margin: 0px 0 0 0;
}

/* FALAS PERSONAGENS INDIVIDUAIS: */
.desconhecido{
  background-color: black;
  color: white;
  border: lightgray solid 3px;
  font-style: italic;
}
.joia-fala{
  background-color: yellow;
}

.mrFresh-fala{
  background-color: lightgreen;
}

.gatito-fala{
  background-color: lightyellow;
}

.erios-fala{
  background-color: gray;
}

.zenga-fala{
  background-color: tomato;
}

.agelub-fala{
  background-color: saddlebrown;
}

.tadin-fala{
  background-color: aqua;
}

.alverinda-fala{
  background-color: #E881A6;
}

.remedio-fala{
  background-color: palevioletred;
}

.narrador-fala{
  background-color: brown;
}

.okias-fala{
  background-color: #F55EF9;
}

.telefonista-fala{
  background-color: steelblue;
}