body {
  background-color: #2d142c;
}
#prin{
  position:absolute;
  top: -10px;
}

#menu{
  border: 5px solid #B39DDB;
  transition: transform 1s;
  position:absolute;
  top:12%;
  left:27%;
}
#menu:hover {
	transform: scale(1.1);
  }
#zona1 {
  text-align: center;
  line-height: 42px;
  position: absolute;
  width: 17%;
  top: 13%;
 
}

#zona2 {
  text-align: center;
  line-height: 42px;
  position: absolute;
  width: 17%;
  top: 27%;
}

#zona3 {
  text-align: center;
  line-height: 42px;
  position: absolute;
  width: 17%;
  top: 41%;
 
}

#zona4 {
  text-align: center;
  line-height: 42px;
  position: absolute;
  width: 17%;
  top: 55%;
 
}

#zona5 {
  text-align: center;
  line-height: 42px;
  position: absolute;
  width: 17%;
  top: 70%;

}

.boton {
  text-transform: uppercase;
  text-align: center;
  align-items: center;
  background-color: #801336;
  border: 2px solid #510a32;
  border-radius: 8px;
  box-sizing: border-box;
  cursor: pointer;
  display: block;
  font-family: arial;
  font-size: 16px;
  height: 50px;
  line-height: 25px;
  position: absolute;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}
.boton a{
  text-decoration:none; 
  color: white;
}

.boton a:hover{
  color:#510a32;
}

.boton:after {
  background-color: #510a32;
  border-radius: 8px;
  content: "";
  display: flex;
  height: 48px;
  left: 0;
  width: 100%;
  position: absolute;
  top: -2px;
  transform: translate(8px, 8px);
  transition: transform 0.3s ease-out;
  z-index: -1;
}

.boton:hover:after {
  transform: translate(0, 0);
}

.boton:active {
  background-color: #c73866;
  outline: 0;
}

.boton:hover {
  outline: 0;
}

@media (min-width: 768px) {
  .boton {
    padding: 0 40px;
  }
}

#volver63 {
  position: absolute;
  left: 93%;
  border-radius: 50%;
  filter: invert(90%);
}
#volver63:hover {
  filter: invert(90%);
}
#volver63:active {
  background-color:white;
  outline: 0;
}

#perfil {
  font-family:'Amita', cursive;
  text-align: center;
  color: #871336;
  font-size: 2.7vw;
  background-color: #ee4540;
  position: absolute;
  width: 100%;
  top: 110%;
  right: 0%;
  left: 0%;
}

#nombre {
  font-family:'Amita', cursive;
  color:#F06292;
  font-size:30px;
  position:absolute;
  top:123%;
  left:2%;
}
.texto1{
  font-family:'Amita', cursive;
  color:#F06292;
  font-size:23px;
  position:absolute;
  top:133%;
  left:2%;
  width:54%;
  }
#perfilfoto {
  position:absolute;
  width: 30%; top: 125%; left: 62%;right:7%;
}

#galeria {
  font-family:'Amita', cursive;
  text-align: center;
  color: #871336;
  font-size: 2.7vw;
  background-color: #ee4540;
  position: absolute;
  width: 100%;
  top: 210%;
  right: 0%;
  left: 0%;
}
.container {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
#galeria1 {
	width: 200px;
	height: 200px;
	margin: 15px;
	transition: transform 1s;
	border: 5px solid #B39DDB;
position:absolute;top:222%;right:65%;
}
#galeria1:hover {
	transform: scale(1.1);
  }
#galeria2 {
	width: 200px;
	height: 200px;
	margin: 15px;
	transition: transform 1s;
	border: 5px solid #B39DDB;
  position:absolute;top:222%;text-align:center;
}
#galeria2:hover {
	transform: scale(1.1);
}
#galeria3 {
	width: 200px;
	height: 200px;
	margin: 15px;
	transition: transform 1s;
	border: 5px solid #B39DDB;
  position:absolute;top:222%;left:66%;
}
#galeria3:hover {
	transform: scale(1.1);
}
#galeria6 {
	width: 200px;
	height: 200px;
	margin: 15px;
	transition: transform 1s;
	border: 5px solid #B39DDB;
  position:absolute;
  top:270%;left:66%;
}
#galeria6:hover {
	transform: scale(1.1);
}
#galeria7 {
	width: 200px;
	height: 200px;
	margin: 15px;
	transition: transform 1s;
	border: 5px solid #B39DDB;
  position:absolute;
  top:270%;right:65%;
}
#galeria7:hover {
	transform: scale(1.1);
}
#galeria8 {
	width: 200px;
	height: 200px;
	margin: 15px;
	transition: transform 1s;
	border: 5px solid #B39DDB;
  position:absolute;top:270%;text-align:center;
}
#galeria8:hover {
	transform: scale(1.1);
}

#colegio {
  font-family:'Amita', cursive;
  text-align: center;
  color: #871336;
  font-size: 2.7vw;
  background-color: #ee4540;
  position: absolute;
  width: 100%;
  top: 320%;
  right: 0%;
  left: 0%;
}
.texto2 {
  font-family:'Amita', cursive;
  text-align: justify;
  color:#F06292;
  font-size:25px;
  position:absolute;
  top:330%;
  left:2%;
  right:2%;
  }
#cole1 {
	width: 200px;
	height: 200px;
	margin: 15px;
	transition: transform 1s;
	border: 5px solid #B39DDB;
position:absolute;top:370%;right:65%;
}
#cole1:hover {
	transform: scale(1.1);
  }
#cole2 {
	width: 200px;
	height: 200px;
	margin: 15px;
	transition: transform 1s;
	border: 5px solid #B39DDB;
  position:absolute;top:370%;right:37%;
}
#cole2:hover {
	transform: scale(1.1);
}
#cole3 {
	width: 200px;
	height: 200px;
	margin: 15px;
	transition: transform 1s;
	border: 5px solid #B39DDB;
  position:absolute;top:370%;left:66%;
}
#cole3:hover {
	transform: scale(1.1);
}
#futuro {
  font-family:'Amita', cursive;
  text-align: center;
  color: #871336;
  font-size: 2.7vw;
  background-color: #ee4540;
  position: absolute;
  width: 100%;
  top: 410%;
  right: 0%;
  left: 0%;
}
.texto3 {
  font-family:'Amita', cursive;
  text-align: justify;
  color:#F06292;
  font-size:25px;
  position:absolute;
  right:2%;
  top:420%;
  left:2%;
  }
#futuro1{
  	width: 200px;
	height: 200px;
	margin: 15px;
	transition: transform 1s;
  border: 5px solid #B39DDB;
  position:absolute;
  top:480%;
  right:70%;
}
#futuro1:hover {
	transform: scale(1.1);
}
#futuro2{
  	width: 200px;
	height: 200px;
	margin: 15px;
	transition: transform 1s;
  border: 5px solid #B39DDB;
  position:absolute;
  top:480%;
  right:40%;
}
#futuro2:hover {
	transform: scale(1.1);
}
#futuro3{
  	width: 200px;
	height: 200px;
	margin: 15px;
	transition: transform 1s;
  border: 5px solid #B39DDB;
  position:absolute;
  top:480%;
  right:10%;
}
#futuro3:hover {
	transform: scale(1.1);
}
#futuro4{
  	width: 200px;
	height: 200px;
	margin: 15px;
	transition: transform 1s;
  border: 5px solid #B39DDB;
  position:absolute;
  top:540%;
  right:70%;
}
#futuro4:hover {
	transform: scale(1.1);
}
#futuro5{
  	width: 200px;
	height: 200px;
	margin: 15px;
	transition: transform 1s;
  border: 5px solid #B39DDB;
  position:absolute;
  top:540%;
  right:40%;
}
#futuro5:hover {
	transform: scale(1.1);
}
#futuro6{
  	width: 200px;
	height: 200px;
	margin: 15px;
	transition: transform 1s;
  border: 5px solid #B39DDB;
  position:absolute;
  top:540%;
  right:10%;
  }
#futuro6:hover {
	transform: scale(1.1);
}
.texto4 {
  font-family:'Amita', cursive;
  text-align: justify;
  color:#F06292;
  font-size:25px;
  position:absolute;
  right:2%;
  top:517%;
  left:2%;
  }
#random {
  font-family:'Amita', cursive;
  text-align: center;
  color: #871336;
  font-size: 2.7vw;
  background-color: #ee4540;
  position: absolute;
  width: 100%;
  top: 580%;
  right: 0%;
  left: 0%;
}

.container {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
#r1 {
	width: 200px;
	height: 200px;
	margin: 15px;
	transition: transform 1s;
	border: 5px solid #B39DDB;
position:absolute;top:593%;right:65%;
}
#r1:hover {
	transform: scale(1.1);
  }
#r2 {
	width: 200px;
	height: 200px;
	margin: 15px;
	transition: transform 1s;
	border: 5px solid #B39DDB;
  position:absolute;top:593%;text-align:center;
}
#r2:hover {
	transform: scale(1.1);
}
#r3 {
	width: 200px;
	height: 200px;
	margin: 15px;
	transition: transform 1s;
	border: 5px solid #B39DDB;
  position:absolute;top:593%;left:66%;
}
#r3:hover {
	transform: scale(1.1);
}
#r4 {
	width: 200px;
	height: 200px;
	margin: 15px;
	transition: transform 1s;
	border: 5px solid #B39DDB;
  position:absolute;
  top:630%;left:66%;
}
#r4:hover {
	transform: scale(1.1);
}
#r5 {
	width: 200px;
	height: 200px;
	margin: 15px;
	transition: transform 1s;
	border: 5px solid #B39DDB;
  position:absolute;
  top:630%;right:65%;
}
#r5:hover {
	transform: scale(1.1);
}
#r6 {
	width: 200px;
	height: 200px;
	margin: 15px;
	transition: transform 1s;
	border: 5px solid #B39DDB;
  position:absolute;top:630%;text-align:center;
}
#r6:hover {
	transform: scale(1.1);
}


#volverup {
  position: fixed;
  top: 90%;
  left: 94%;
  border-radius: 50%;
  filter: invert(90%);
}
#fin{
  position:absolute;
  top:680%;
}