/*inicio da animação*/
html {
  height:100%;
  background:#ACE6FF;
}
body{
  margin:0;
  padding:0;
  background-color:#ACE6FF;
  height:100%;
}
#clouds{
  background:url("../img/Sprite-NuvemSite.png") repeat-x 0 bottom #ACE6FF;
  }  
#grass {
  background:url("../img/Sprite-GramaSite.png") repeat-x 0 0 transparent;
}
.contem_nuvem, .contem_grama {
  display: block;
  width:100%;
  overflow: hidden;
  height: 185px;
}
#clouds{
	background:url("../img/Sprite-NuvemSite.png") repeat-x 0 / 100% auto;
	animation: ani2 10s linear infinite ;
  Height: 185px;
}

#grass{
        animation: skew 3s infinite;
        transform: skew;
        animation-direction: alternate;
        width: 120%;
        height: 190px;
        margin-left: -10%;
        z-index: 1;
        border: 0 none transparent;
        outline:  0 none transparent;
        -webkit-transform:translate3d(0,0,0.01);
        transform:translate3d(0,0,0.01);
        will-change: transform;
}
@keyframes skew {
  0% {
    transform: skewX(13deg) translate(-7px);
  }
  100% {
    transform: skewX(-13deg) translate(7px);
  }
} 
@keyframes ani2{
	100%{background-position: 0 0;}
	0%{background-position: 100vw 0;}
}
/*botaos*/
.botao {
  padding: 2px;
  transition: transform .2s;
}
.roll {
  position: absolute;
  float: left;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.botao:hover {
  -ms-transform: scale(1.2); /* IE 9 */
  -webkit-transform: scale(1.2); /* Safari 3-8 */
  transform: scale(1.2);
}
.botao:active {
transform: translateY(4px);
}
/*botaos fim*/
/*texto inicio*/
.texto {
  max-width: 1200px;
  border: 15px;
  padding: 50px;
  margin: 20px;
}
/*texto final*/
/*tabela*/
table {
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}
th{ color: white;
  background: black;
}
tr:nth-child(even) {
  background-color: #dddddd;
}
tr:hover {
  background-color: #f1f0f0;
}
/*final da tabela*/

/*ficha de reino*/
.fichareino {
  background-color: white;
  max-width: 900px;
  margin: 50px;
}
/*fim da ficha de reino*/
/*grid ficha de reino*/
.container_reinos {
  display: grid;
  width: 100%;
  height: 100%;
  grid-template-areas: 
  "Descriptionreinos Descriptionreinos"
  "bonusreinos bonusreinos"
  "famainfama famainfama"
  "ongoingevents leadershipreino"
  "ongoingevents leadershipreino"
  "unrestconsumptiontreasury leadershipreino"
  "traderoutes traderoutes";
  grid-gap: 10px;;
  padding: 10px;
}
.container_reinos > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: left;
  padding: 20px 0;
  font-size: 14px;
}

.Descriptionreinos {
  grid-area: Descriptionreinos;
}
.bonusreinos {
  grid-area: bonusreinos;
}
.famainfama {
  grid-area: famainfama;
}
.ongoingevents {
  grid-area: ongoingevents;
}
.leadershipreino {
  grid-area: leadershipreino;
}
.unrestconsumptiontreasury {
  grid-area: unrestconsumptiontreasury;
}
.traderoutes {
  grid-area: traderoutes;
}
/*grid da ficha de reino*/

/*fontes inicio*/
@font-face {
  font-family: Almendra;
  src: url(../fontes/Almendra-Regular.ttf);
}
@font-face {
  font-family: GrenzeGotish;
  src: url(../fontes/GrenzeGotisch-Regular.ttf);
}
@font-face {
  font-family: IMFellDoublePica;
  src: url(../fontes/IMFellDoublePica-Regular.ttf);
}
@font-face {
  font-family: LongCang;
  src: url(../fontes/LongCang-Regular.ttf);
}
@font-face {
  font-family: MedievalSharp;
  src: url(../fontes/MedievalSharp-Regular.ttf);
}
@font-face {
  font-family: NewRocker;
  src: url(../fontes/NewRocker-Regular.ttf);
}
h1, h2, a {
  font-family: 'NewRocker', Times, serif;
}
h3, h4, h5, h6 {
  font-family: 'Almendra', Times, serif;

}
p, li {
  font-family: 'MedievalSharp', Times, serif;
}
.titulo-principal{
  font-family: 'NewRocker', Times, serif;
  font-size: 6em;
}
/*fontes final*/
.contem-deuses{
  margin: 30px;
  background-color:antiquewhite;
  background-size: 300px;
  min-width: 320px;
  padding: 10px;
  align-content: center;
  border-radius: 6px;
}
.imagem{
  width: 150px; 
  height: 150px;
  background-color: darkslateblue;
  border-radius: 6px;
}
#tituloreino{ 
  text-align: center;
}
.imgtitulo{
  width: 300px;
}
.conteudo-reino {
  padding: 10px;
  background-color: antiquewhite;
  min-width: 300px;
  max-width: 80%;
  border-radius: 6px;
}