body {
  background: linear-gradient(
    to right,
    #FFA07A,
    #E9967A,
    #FA8072,
    #F08080,
    #CD5C5C,
    #CD5C5C	
  );
  background-size: 500% 500%;
} 

#inicio:hover{filter: grayscale(1);}

#zona1{
  z-index: 2;
  position: absolute;
  top: 5%;
  left: 1%;
  background-color: white;
   font-size: 3vw;
}
#zona1 a{
  font-family: Oswald;
  color: #FFA07A;
  text-decoration: none;
}
#zona2{
  z-index: 2;
  position: absolute;
  top: 5%;
  left: 21%;
  background-color: white;
   font-size: 3vw;
}

#zona2 a{
  font-family: oswald;
  color: #FFA07A;
  text-decoration: none;
}

#zona3{
  z-index: 1;
  position: absolute;
  top: 5%;
  left: 42%;
  background-color: white;
   font-size: 3vw;
}

#zona3 a{
  font-family: oswald;
  color: #FFA07A;
  text-decoration: none;
}

#zona4{
  z-index: 3;
  position: absolute;
  top: 5%;
  left: 63%;
  background-color: white;
   font-size: 3vw;
 }
  
#zona4 a{
  font-family: oswald;
  color: #FFA07A;
  text-decoration: none;
}

#zona5{
  z-index: 3;
  position: absolute;
  top: 5%;
  left: 83%;
  background-color: white;
   font-size: 3vw;
 }

#zona5 a{
  font-family: oswald;
  color: #FFA07A;
  text-decoration: none;
}

 #zona1:hover{
  background-color:#FFA07A;
  text-align: center;
}

#zona1 a:hover{ 
  color: white;
  font-size: 40px;
  font-family: oswald;
}

#zona2:hover{
  background-color:#FFA07A;
  text-align: center;
}

#zona2 a:hover{ 
  color: white;
  font-size: 40px;
  font-family: oswald;
}

#zona3:hover{
  background-color:#FFA07A;
  text-align: center;
}

#zona3 a:hover{ 
  color: white;
  font-size: 40px;
  font-family: oswald;
}

#zona4:hover{
  background-color:#FFA07A;
  text-align: center;
}

#zona4 a:hover{ 
  color: white;
  font-size: 40px;
  font-family: oswald;
}

#zona5:hover{
  background-color:#FFA07A;
  text-align: center;
}

#zona5 a:hover{ 
  color: white;
  font-size: 40px;
  font-family: oswald;
}
.botones{
  width: 200px;
  height: px;
  padding-top: 20px;
  text-align: center;
  font-size: 1.5rem;
  border-radius: 20px;
}
.botones:hover{
  border-radius: 20px;
  cursor: pointer;
  padding-top: 5px;
  height: 70px;
  box-shadow: 10px 8px 20px black;
}

#inicio {
  position:absolute; width: 55%; top: 35%; left: 20%;right:150%;
}  

#perfil{ 
 font-family: fjalla one;
text-align:center;
  color:white;
  font-size:5vw;
  background-color:#D87A55;
  box-shadow: 1px 1px 2px white;
position: absolute; width: 100%; top: 110%; right: 0%; left: 0%;}

#fotodeperfil {
  position:absolute; top: 130%; left: 70%;right:9%;
	border: 5px solid white;
}

.texto1{font-family: oswald;
  color:white;
  font-size:35px;
  text-shadow: 1px 1px 1px black;
  position:absolute;top:120%;
  left:2%;
  }

#Galeria {
  font-family: fjalla one;
text-align:center;
  color:white;
  font-size:5vw;
  background-color:#D87A55;
  box-shadow: 1px 1px 2px white;
  position: absolute; width: 100%; top: 235%; right: 0%; left: 0%;
}

.container {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

#galeria1 {
	height: 250px;
	margin: 15px;
	transition: transform 1s;
	border: 5px solid white;
position:absolute;top:270%;right:%;left:7%;
}

#galeria1:hover {
	transform: scale(1.1);
  }

#galeria2 {
	height: 700px;
	margin: 15px;
	transition: transform 1s;
	border: 5px solid white;
position:absolute;top:270%;right:0%;left:38%;
}
#galeria2:hover {
	transform: scale(1.1);
  }

#galeria3 {
	height: 260px;
	margin: 15px;
	transition: transform 1s;
	border: 5px solid white;
position:absolute;top:270%;right:0%;left:73%;
}
#galeria3:hover {
	transform: scale(1.1);
  }

#galeria4 {
  width: 350px;
	height: 260px;
	margin: 15px;
	transition: transform 1s;
	border: 5px solid white;
position:absolute;top:325%;right:0%;left:73%;
}
#galeria4:hover {
	transform: scale(1.1);
  }

#galeria5 {
	width: 350px;
	height: 260px;
	margin: 15px;
	transition: transform 1s;
	border: 5px solid white;
position:absolute;top:325%;right:0%;left:7%;
}
#galeria5:hover {
	transform: scale(1.1);
  }

#Colegio{
  font-family: fjalla one;
text-align:center;
  color:white;
  font-size:5vw;
  background-color:#D87A55;
  box-shadow: 1px 1px 2px white;
  position: absolute; width: 100%; top: 380%; right: 0%; left: 0%;
}

.TextoColegio{ position:absolute;top:400%;left:2%;
font-family: Oswald;
text-shadow: 1px 1px 1px black;
color:white;
font-size:2.5vw; 
}

.container1 {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

#colegio1 {
	width: 400px;
	height: 300px;
	margin: 15px;
  border: 5px solid white;
	transition: transform 1s;
position:absolute;top:460%;right:%;left:5%;
}
#colegio1:hover {
	transform: scale(0.95);
  }

#colegio2 {
	width: 400px;
	height: 300px;
	margin: 15px;
   border: 5px solid white;
	transition: transform 1s;
position:absolute;top:460%;right:%;left:35%;
}
#colegio2:hover {
	transform: scale(0.95);
  }

#colegio3 {
	width: 400px;
	height: 300px;
	margin: 15px;
    border: 5px solid white;
	transition: transform 1s;
position:absolute;top:460%;right:%;left:65%;
}
#colegio3:hover {
	transform: scale(0.95);
  }

#colegio4{
	width: 400px;
	height: 300px;
	margin: 15px;
    border: 5px solid white;
	transition: transform 1s;
position:absolute;top:525%;right:%;left:5%;
}
#colegio4:hover {
	transform: scale(0.95);
  }

#colegio5{
	width: 400px;
	height: 300px;
	margin: 15px;
    border: 5px solid white;
	transition: transform 1s;
position:absolute;top:525%;right:%;left:35%;
}

#colegio5:hover {
	transform: scale(0.95);
  }

#colegio6{
	width: 400px;
	height: 300px;
	margin: 15px;
    border: 5px solid white;
	transition: transform 1s;
position:absolute;top:525%;right:%;left:65%;
}

#colegio6:hover {
	transform: scale(0.95);
  }

#Futuro {font-family: fjalla one;
text-align:center;
  color:white;
  font-size:5vw;
  background-color:#D87A55;
  box-shadow: 1px 1px 2px ;white;
  position: absolute; width: 100%; top:578%; right: 0%; left: 0%;}

.texto2{ text-align:center;
position:absolute;top:594%;left:%;
font-family: Oswald;
color:white;
  text-shadow: 1px 1px 1px black;
font-size:2.5vw; 
}

.container2 {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

#Futuro1{
	width: 400px;
	height: 300px;
	margin: 15px;
  border: 5px solid white;
	transition: transform 1s;
position:absolute;top:625%;right:%;left:5%;
}

#Futuro1:hover{filter: grayscale(1);}

#Futuro2{
	width: 400px;
	height: 300px;
	margin: 15px;
  border: 5px solid black;
	transition: transform 1s;
position:absolute;top:625%;right:%;left:65%;
}
#Futuro2:hover{filter: grayscale(0.5);}

#Futuro3{
	width: 400px;
	height: 300px;
	margin: 15px;
	transition: transform 1s;
position:absolute;top:625%;right:%;left:35%;
}

#Futuro3:hover {
	transform: scale(1.15);
  }

#Random
{font-family: fjalla one;
text-align:center;
  color:white;
  font-size:5vw;
  background-color:#D87A55;
  box-shadow: 1px 1px 2px white;
  position: absolute; width: 100%; top: 670%; right: 0%; left: 0%;
}

#Random1{
	width: 400px;
	height: 300px;
	margin: 15px;
  border: 5px solid white;
	transition: transform 1s;
position:absolute;top:695%;right:%;left:5%;
}

#Random2{
	width: 400px;
	height: 300px;
	margin: 15px;
  border: 5px solid white;
	transition: transform 1s;
position:absolute;top:695%;right:%;left:35%;
}

#Random3{
	width: 400px;
	height: 300px;
	margin: 15px;
  border: 5px solid white;
	transition: transform 1s;
position:absolute;top:695%;right:%;left:65%;
}

.sexto
{position:absolute;top:745%;left:41%;
font-family: fJALLA ONE;
text-align:center;
  color:white;
  font-size:3vw;
  text-shadow: 1px 1px 1px black;  
}

.volverup {
    position: fixed;
    bottom: 0;
    right: 0;
    margin-right: 15px;
    margin-bottom: 10px;
  z-index:2;
}