*{
    margin: 0;
    padding: 0;
}
body{
    background-color: #2B3E53;
}

h1 {
    font-family:'Sahitya', serif;
    color:#BAB8B4;
	text-align: center;
	font-size: 55px;
}

p{
    font-family:'Roboto Slab', serif;
    color:#BAB8B4;
	text-align: center;
	font-size: 25px;
}

.ContainerPpal{
    background-color: #2B3E53;
    width: 100%;
    box-sizing: border-box;
}

header{
    background-color: #2B3E53;
    height: inherit;
    width: inherit;
    display: grid;
    grid-template-columns: auto auto;
    padding: 10px;
}
  

header .Logo{
    margin-top: 1%;
}

header img{
    width: 80px;
    height: auto;
    margin-top: 20px;
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: 20px;
}

header .RedesSociales{
    display: flex;
	align-content: center;
    justify-content: right;
    text-align: right;
	padding: 20px;
    flex-wrap: wrap;
    box-sizing: border-box;
    width: 100%;
}

header .RedesSociales a{
    display: block;
	width: 40px;
	height: 40px;
	background: hsl(0, 4%, 63%);
	color: #fff;
	margin: 20px;
	text-align: center;
	border-radius: 100px;
	transition: .3s ease all;
}

header .RedesSociales a i {
	font-size: 15px;
	line-height: 40px;
}

#pag2,#pag3, #pag4, #pag5{			
	display: none;
}

.Content{
    text-align: center;
    width: 100%;
    box-sizing: border-box;
}

.Content h1{
    size: 60px;
    margin:50px;
}
.Content .start{
    margin-top: 50px;
	padding: 20px;
	text-align:center ;
	border-radius: 9px;
	border-style: solid;
	border-color: #796B07;	
}

.ContentMainPage{
    width: 60%;
    margin-left: 20%;
    margin-right: 20%;
    background-image: url(https://user-images.githubusercontent.com/66574419/87886404-8f2f6680-c9ea-11ea-97b1-539efb7932b0.png),
}

.ContentMainPage .btonesInicio #Personajes, #Casas, #Varitas {
    width:10%;
    height: auto;
    margin:5%;
	padding: 5%;
	border-radius: 9px;
	border-style: solid;
    border-color: #796B07;
}

/*aqui agrege esto de display para que se vea*/

.ContentMainPage .btonesInicio p{
    text-align: center;
    margin:3%;
    display: inline-block;
}

.ContentOptions{
    width: 60%;
    margin-left: 20%;
    margin-right: 20%;
    box-sizing: border-box;
    background-color: #2B3E53;
}

.ContentCentral .roles {
    align-items: left;
    margin-left: 0%;
    margin-right: 0%;
    margin-top: 5%;
    margin-bottom: 10%;
    background-color:#323F5A ;
    color: #BAB8B4;
    font-family:'Roboto Slab', serif;
    font-size: 15px;
}
  
.ContentCentral .house {
    align-items: left;
    margin-left: 0%;
    margin-right: 0%;
    margin-top: 5%;
    margin-bottom: 10%;
    background-color:#323F5A ;
    color: #BAB8B4;
    font-family:'Roboto Slab', serif;
    font-size: 15px;
}

.ContentCentral .core {
    align-items: left;
    margin-left: 0%;
    margin-right: 0%;
    margin-top: 5%;
    margin-bottom: 10%;
    background-color:#323F5A ;
    color: #BAB8B4;
    font-family:'Roboto Slab', serif;
    font-size: 15px;
}

.ventanaDePersonajes {
	justify-content: center;
	flex-wrap: wrap;
    width: 60%;
    height: auto;
	max-width: 100%;
	margin: auto;
	text-align: center;
    padding: 15px;    
  }

/*Especificaciones de Data con HTML dinamico de main.js*/

.imagenes img {
	width: 50%;
    height: 40%;
    margin: 5%;
	border-radius: 9px;
	border-style: solid;
	border-color: #796B07;
  }

 /* tarjetas front y back*/
.card{
    background-color: transparent;
    width: 300px;
    height: 350px;
    perspective: 1000px;
    margin: 20px;
    display: inline-block;
}

.cardFull{
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    box-shadow:0 4px 8px 0 rgba(0,0,0,0.2) ;
    border-radius: 9px;
	border-style: solid;
	border-color:  #796B07;
}

.card:hover .cardFull{
    transform: rotateY(180deg);
}

.front,.back{
    position: absolute;
    width: 100%;
    height:100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.front{
    background-image: url(https://user-images.githubusercontent.com/66574419/87886404-8f2f6680-c9ea-11ea-97b1-539efb7932b0.png);
}

.front h1{
    font-size: 25px;
}

.back{
    background-image: url(https://user-images.githubusercontent.com/66574419/87886404-8f2f6680-c9ea-11ea-97b1-539efb7932b0.png);
    color: whitesmoke;
    transform: rotateY(180deg);
}

.back p{
    font-size: 20px;
    text-align: left;
    margin-right: 20px;
    margin-left: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
}

.imagenlogo{
    width: 15px;
    height: 15px;
    margin-top: 20px;
    margin-right: 20px;
    margin-left: 20px;
    margin-bottom: 20px;
}

footer {
    background:#BAB8B4;
    text-align:  center;
    font-size: 18px;
    font-family:'Roboto Slab', serif;;
    padding-top: 30px;
    padding-bottom: 30px;
    margin-top:25px;
    color:#323F5A ;
}