*{
  margin: 0%;
  padding: 0%;
  box-sizing: border-box;
}

#pagina1 {
    background-image: url("img/fondo.gif");
    background-repeat: repeat;
    display:flex;
    /*posibilidad de modificacion*/
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
  /*  height: 1024px; para resposibe ipad eliminar flexwrap*/

}

header{
width:35%;
height:50%;
color: #FCEA04;
font-family:"HARRYP";
text-align:center;
font-size: 4em;
padding-top: 5%;
display:flex;
align-items: center;
flex-direction: column;
}


@font-face {
  font-family:"HARRYP" ;
  src: url("./HARRYP__.TTF");
  }
  .harrilogo{
    width:50%;
    height:50%;
  }
#saludoPag1{
color:#F1F4C2;
width:90%;
height:70%;
font-family: 'Fontdiner Swanky';
text-align:center;
font-size: 50%
align-self: flex-end;

}

.snich{
  width:30%;
  height:30%;
}

#HedwigPresentacion{
  color:#efb810;
  font-family: 'Fontdiner Swanky', cursive;*/
  width:100%;
  height:70%;
  display: flex;
  flex-wrap: wrap;
}
#texto{
  width:50%;
  height:50%;
  font-size: 120%;
  text-align:center;
}

.inputName{

  border:thin solid rgb(30, 238, 238);
	font-size:1.5em;;
	/*padding:10%, 5%;*/
	color:rgb(34, 236, 236,.8);
	border-radius:5px;
	background:transparent;
  transition:all .100s;
  font-family: 'Fontdiner Swanky', cursive;
  width: 45%;
  height: 50px;
  align-self: center;
  text-align: center;

}
.HedwigInstruccion{
  color: azure;
  font-family: 'Fontdiner Swanky', cursive;
  font-size: 100%;
  display: flex;

}

.alohomora{
  width: 100%;
  height: 50px;
  display: flex;
justify-content: center;
}
.buttonAlohomora{
  background-color: rgb(24, 22, 22,0.9);
  border: 1px solid  rgb(30, 238, 238,0.5);
  color: white;
  padding: 2% 1%;
  text-align: center;
  text-decoration: none;
  display: block;
  font-size: 36px;
  margin: 4px 2px;
  cursor: pointer;
  font-family:"HARRYP" ;
  width: 150px;
  margin-right: 20px;
}
button:hover{
  background:  rgb(30, 238, 238,0.3);
}


#pagina2 {
  background-image: url("img/fondo.gif");
  background-repeat: repeat;
  display: none;

}
/*paguina2*/
#contenedor {
  display:flex;
  background-color: : #339966;
  width: 100%;
  height: 1000px;
  text-align: center;
  align-items: flex-start;
  flex-wrap: wrap;
  justify-content: center;
}

#user{
  width:100%;
  color: #FCEA04;
  font-family:"HARRYP";
  text-align:center;
  font-size: 6em;
  padding-top: 10%;
  justify-content: center;
}
.hedwigPag2{
  color: #ffffff;
  width: 50%;
  font-family: 'Fontdiner Swanky';
  font-size: 2em;
  /*align-self: flex-start;
  text-align: center;*/
}

#menu{
  display: flex;
  width:100%;
  height:35%;
  /*justify-content: space-around;/*
  */align-items: flex-start;*/modificaresto
}
#HogwartsyCasas{
  width:60%;
  height:60%;
}
.hogwarts{
  top:120%;
  left:10%;*/

}
#patronus{
  width:42%;
  height:42%;
}
.patronum{
/*  position: relative;
  left:10%;
  top:120%;*/
}
#varitas{
  height:85%;
  width:85%;
}
.varitas2{
  /*position: relative;
  left:400px;
  top: 30px;*/
}
#linaje{
  height:80%;
  width:80%;
}
.sangre{
  /*position: relative;
  left:500px;
  top:30px;*/
}
#magosmaster{
/*  align-self: center;
  position: relative;*/
  height:60%;
  width:60%;
}
.maestros{
/*  position: relative;
  left:400px;
  top: 5px;*/
}


#pagina3 {
  background-image: url("img/fondo.gif");
  background-repeat: repeat;
  width: 100%;
  display:none;
  display: flex;
  flex-direction:column;
  align-content: center;
  flex-wrap: wrap;
 	margin:0%;
    display:none;
}

/*PAG3*/

.contenedorTitle{
  width: 80%;
  margin-top:8%;
  margin-left: 10%;
  text-align:center;
  font-family:"HARRYP" ;
  font-size:250%;
  color: rgb(221, 177, 54);
  /*background-color: salmon;*/

}
.contenedorSnitch{
  width:90%;
  /*background-color: aquamarine;*/
  margin-left: 5%;
}
.snitch{
 transition: all 0.2s;
 width: 25%;

}
.contenedorSnitch:hover .snitch{
  /*transform:translate(300px);*/
 -webkit-transform:rotate(360deg);transform: rotate(360deg);
}
.contenedorBtn3{
  display: flex;
  /*background-color: fuchsia;*/
  justify-content:flex-end;
}
.btnRegresarPag3{
  width:10%;
  height: 10%;
  cursor: pointer;

}

.explicacionDeHogwarts{
  color: white;
  font-family: 'Fontdiner Swanky', cursive;
  font-size: 88%;
  width:80%;
  height: auto;
  margin-top: 3%;
  margin-left: 10%;
  text-align:justify;
  /*background-color: aquamarine;*/
}
.imgHogwartsAnimado{
  float: left;
  width: 25%;
  border-radius: 5%;

}
.git_sombreroseleccionador{
  font-family: 'Fontdiner Swanky', cursive;
  font-size: 88%;
  color:white;
  text-align: justify;
  width: 80%;
  margin-top: 3%;
  margin-left: 10%;
  /*background-color: salmon;*/

}
.imgSombreroSeleccionador{
  float: right;
  width: 20%;
  border-radius: 5%;
}
.preguntaPag3{
  color: rgb(231, 194, 26);
  font-size: 150%;
}
.existenPag3{
  color: rgb(231, 194, 26);
  font-size: 210%;
}
.casas_de_hogwarts{
  display: flex;
  flex-direction: column;
  width: 80%;
  justify-content: space-between;
  overflow:hidden;
  margin-top: 3%;
  margin-left: 10%;
  font-family:"HARRYP" ;
  color: aliceblue;
  font-size:200%;

 }
.imglogos{
  border-radius: 200px 200px 200px 200px;
  border: 1px solid #e0dadaa9;
  cursor: pointer;

}
.imglogos:hover  {
  -webkit-transform:scale(1.3);transform:scale(1.3);
}
.casaGryffindor{
  text-align: center;
  margin-top: 3%;
  margin-left: 10%;

}
.casaHufflepuff{
 text-align:center;
 margin-top: 3%;
 margin-left: 10%;

}
.casaRavenclaw{
  text-align: center;
  margin-top: 3%;
  margin-left: 10%;

}
.casaSlytherin{
  text-align:center;
  color:whitesmoke;
  margin-top: 3%;
  margin-left: 10%;
}
.span_gryffindor{
  display: flex;
	flex-wrap: wrap;
	align-items: space-between;
  justify-content: center;
	margin:3%;
  max-width: 1200px;

}
.element_name{
  background-color: rgb(182, 22, 22);
	border-radius: 10px;
	box-shadow: 0 3px 15px rgba(233, 235, 228, 0.5);
	margin: 10px;
	padding: 20px;
  text-align: center;
  color: aliceblue;
}
.img_potter{
  background-color: rgba(192, 51, 51, 0.6);
	border-radius: 5%;
	width: 120px;
	height: 150px;
	text-align: left;
}
/*SE TRANSFORMA A ESCALA */
.img_potter:hover {
  -webkit-transform:scale(1.3);transform:scale(1.3);
}
.element_name.img_potter img{
  margin-top: 2px;
	max-width: 20%;
}
.span_hufflepuff{
  display: flex;
	flex-wrap: wrap;
	align-items: space-between;
  justify-content: center;
	margin:3%;
  max-width: 1200px;
}
.element_nameH{
  background-color: rgb(209, 156, 40);
	border-radius: 10px;
	box-shadow: 0 3px 15px rgba(233, 235, 228, 0.5);
	margin: 10px;
	padding: 20px;
  text-align: center;
  color: aliceblue;
}
.span_ravenclaw{
  display: flex;
	flex-wrap: wrap;
	align-items: space-between;
  justify-content: center;
	margin:3%;
  max-width: 1200px;
}
.element_nameR{
  background-color: rgb(25, 129, 155);
	border-radius: 10px;
	box-shadow: 0 3px 15px rgba(233, 235, 228, 0.5);
	margin: 10px;
	padding: 20px;
  text-align: center;
  color: aliceblue;
}
.span_slytherin{
  display: flex;
	flex-wrap: wrap;
	align-items: space-between;
  justify-content: center;
	margin:3%;
  max-width: 1200px;
}
.element_nameS{
  background-color: rgb(8, 70, 5);
	border-radius: 10px;
	box-shadow: 0 3px 15px rgba(233, 235, 228, 0.5);
	margin: 10px;
	padding: 20px;
  text-align: center;
  color: aliceblue;
}