.button-89 {
  --b: 3px;   /* border thickness */
  --s: .45em; /* size of the corner */
  --color: #373B44;
  
  padding: calc(.5em + var(--s)) calc(.9em + var(--s));
  color: var(--color);
  --_p: var(--s);
  background:
    conic-gradient(from 90deg at var(--b) var(--b),#0000 90deg,var(--color) 0)
    var(--_p) var(--_p)/calc(100% - var(--b) - 2*var(--_p)) calc(100% - var(--b) - 2*var(--_p));
  transition: .3s linear, color 0s, background-color 0s;
  outline: var(--b) solid #0000;
  outline-offset: .6em;
  font-size: 16px;

  border: 0;

  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.button-89:hover,
.button-89:focus-visible{
  --_p: 0px;
  outline-color: var(--color);
  outline-offset: .05em;
}

.button-89:active {
  background: var(--color);
  color: #fff;
}
#zona1 {
  text-align: center; 
  position: absolute; width: 20%; top: 40%;  right: 70%; 
 border-radius: 5px;
  }
#zona1 a{
  text-decoration:none;
  color:Black;
}
#zona2 {
  text-align: center; 
  position: absolute; width: 20%; top: 50%;  right: 70%; 
 border-radius: 5px;
  }
#zona2 a{
  text-decoration:none;
  color:Black;
}
#zona3 {
  text-align: center; 
  position: absolute; width: 20%; top: 60%;  right: 70%; 
 border-radius: 5px;
  }
#zona3 a{
  text-decoration:none;
  color:Black;
}
#zona4 {
  text-align: center; 
  position: absolute; width: 20%; top: 70%;  right: 70%; 
 border-radius: 5px;
  }
#zona4 a{
  text-decoration:none;
  color:Black;
}
#zona5 {
  text-align: center; 
  position: absolute; width: 20%; top: 80%;  right: 70%; 
 border-radius: 5px;
  }
#zona5 a{
  text-decoration:none;
  color:Black;
}
#zona6 {
   background-color:  #e0e0d1;
  text-align: center; 
  position: absolute; width: 20%; top: 1%;  right: 1%; 
 border-radius: 5px;
  }
#zona6 a{
  text-decoration:none;
  color:Black;
}

#zona7{
text-align:center;
  position: absolute; width: 20%; top: 20%;  right: 1%; 
 border-radius: 5px;
  }  
img {
 max-width: 100%;
 max-height: 100%;
}


#zona7:hover{
text-align:center;
filter: grayscale(1);
position: absolute; width: 20%; top: 20%;  right: 1%

}

#perfil{ 
 font-family: Bebas Neue;
text-align:center;
  color:Black;
  font-size:5vw;
  background-color:#e0e0d1;
  box-shadow: 1px 1px 2px black;
position: absolute; width: 100%; top: 110%; right: 0%; left: 0%;}
#perfilfoto {
  position:absolute; width: 30%; top: 130%; left: 62%;right:7%;
}
.texto1{font-family: Bebas Neue;
  color:Black;
  font-size:25px;
  position:absolute;top:117%;
  left:1%;right: 40%
  }


#Galeria {
  font-family: Bebas Neue;
text-align:center;
  color:black;
  font-size:5vw;
  text-shadow: 1px 1px 1px with;
  background-color:#e0e0d1;
  box-shadow: 1px 1px 2px black;
  position: absolute; width: 100%; top: 235%; 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 black;
position:absolute;top:250%;right:65%;
}
#galeria1:hover {
	transform: scale(1.1);
  }
#galeria2 {
	width: 200px;
	height: 200px;
	margin: 15px;
	transition: transform 1s;
	border: 5px solid black;
  position:absolute;top:250%;text-align:center;
}
#galeria2:hover {
	transform: scale(1.1);
}
#galeria3 {
	width: 200px;
	height: 200px;
	margin: 15px;
	transition: transform 1s;
	border: 5px solid black;
  position:absolute;top:250%;left:70%;
}
#galeria3:hover {
	transform: scale(1.1);
}
#galeria4 {
	width: 200px;
	height: 200px;
	margin: 15px;
	transition: transform 1s;
	border: 5px solid black;
  position:absolute;top:290%;right:65%;
}
#galeria4:hover {
	transform: scale(1.1);
}
#galeria5 {
	width: 200px;
	height: 200px;
	margin: 15px;
	transition: transform 1s;
	border: 5px solid black;
  position:absolute;top:290%;text-align:center;
}
#galeria5:hover {
	transform: scale(1.1);
}
#galeria6 {
	width: 200px;
	height: 200px;
	margin: 15px;
	transition: transform 1s;
	border: 5px solid black;
  position:absolute;top:290%;left:70%;
}
#galeria6:hover {
	transform: scale(1.1);
}
#galeria7 {
	width: 200px;
	height: 200px;
	margin: 15px;
	transition: transform 1s;
	border: 5px solid black;
  position:absolute;top:330%;right:65%;
}
#galeria7:hover {
	transform: scale(1.1);
}
#galeria8 {
	width: 200px;
	height: 200px;
	margin: 15px;
	transition: transform 1s;
	border: 5px solid black;
  position:absolute;top:330%;text-align:center;
}
#galeria8:hover {
	transform: scale(1.1);
}
#galeria9 {
	width: 200px;
	height: 200px;
	margin: 15px;
	transition: transform 1s;
	border: 5px solid black;
  position:absolute;top:330%;left:70%;
}
#galeria9:hover {
	transform: scale(1.1);
}

#Colegio{
  font-family: Bebas Neue;
text-align:center;
  color:black;
  font-size:5vw;
  text-shadow: 1px 1px 1px white;
  background-color:#e0e0d1;
  box-shadow: 1px 1px 2px black;
  position: absolute; width: 100%; top: 380%; right: 0%; left: 0%;
}
.TextoColegio{ position:absolute;top:397%;left:2%;
font-family: Bebas Neue;
color:dark;
font-size:3vw; 
}
.container1 {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
#colegio1 {
	width: 200px;
	height: 200px;
	margin: 15px;
	transition: transform 1s;
position:absolute;top:420%;right:65%;
}
#colegio1:hover {
	transform: scale(2.2);
  }
#colegio2 {
  width: 200px;
	height: 200px;
	margin: 15px;
	transition: transform 1s;
  position:absolute;top:420%;text-align:center;
}
#colegio2:hover {
	transform: scale(2.2);
}
#colegio3 {
	width: 200px;
	height: 200px;
	margin: 15px;
	transition: transform 1s;
  position:absolute;top:420%;left:70%;
}
#colegio3:hover {
	transform: scale(2.2);
}
#colegio4 {
	width: 200px;
	height: 200px;
	margin: 15px;
	transition: transform 1s;
  position:absolute;top:460%;right:65%;
}
#colegio4:hover {
	transform: scale(2.2);
}
#colegio5 {
	width: 200px;
	height:200px;
	margin: 15px;
	transition: transform 1s;
  position:absolute;top:460%;text-align:center;
}
#colegio5:hover {
	transform: scale(2.2);
}
#colegio6 {
	width: 200px;
	height: 200px;
	margin: 15px;
	transition: transform 1s;
  position:absolute;top:460%;left:70%;
}
#colegio6:hover {
	transform: scale(2.2);
}
#colegio7 {
	width: 200px;
	height: 200px;
	margin: 15px;
	transition: transform 1s;
  position:absolute;top:500%;right:65%;
}
#colegio7:hover {
	transform: scale(2.2);
}
#colegio8 {
	width: 200px;
	height: 200px;
	margin: 15px;
	transition: transform 1s;
  position:absolute;top:500%;text-align:center;
}
#colegio8:hover {
	transform: scale(2.2);
}
#colegio9 {
	width: 200px;
	height: 200px;
	margin: 15px;
	transition: transform 1s;
  position:absolute;top:500%;left:70%;
}
#colegio9:hover {
	transform: scale(2.2);
}

#colegio10 {
	width: 200px;
	height: 200px;
	margin: 15px;
	transition: transform 1s;
  position:absolute;top:540%;right:65%;
}
#colegio10:hover {
	transform: scale(2.2);
}
#colegio11 {
	width: 200px;
	height: 200px;
	margin: 15px;
	transition: transform 1s;
  position:absolute;top:540%;text-align:center;
}
#colegio11:hover {
	transform: scale(2.2);
}
#colegio12 {
	width: 200px;
	height: 200px;
	margin: 15px;
	transition: transform 1s;
  position:absolute;top:540%;left:70%;
}
#colegio12:hover {
	transform: scale(2.2);
}

#Futuro {font-family: Bebas Neue;
text-align:center;
  color:black;
  font-size:5vw;
  text-shadow: 1px 1px 1px with;
  background-color:#e0e0d1;
  box-shadow: 1px 1px 2px black;
  position: absolute; width: 100%; top:590%; right: 0%; left: 0%;}
.texto2
{font-family: Bebas Neue;
  color:black;
  font-size:3vw; position:absolute;top:605%;
  left:2%;
}
#futurofoto
{position:absolute;top:640%;left:25%;}

#Random
{font-family: Bebas Neue;
text-align:center;
  color:black;
  font-size:5vw;
  text-shadow: 1px 1px 1px with;
  background-color:#e0e0d1;
  box-shadow: 1px 1px 2px black;
  position: absolute; width: 100%; top: 700%; right: 0%; left: 0%;
}

#random1 {
	width: 200px;
	height: 200px;
	margin: 15px;
	transition: transform 1s;
position:absolute;top:717%;right:65%;
}
#random1:hover {
	transform: scale(2.2);
  }
#random2 {
  width: 200px;
	height: 200px;
	margin: 15px;
	transition: transform 1s;
  position:absolute;top:717%;text-align:center;
}
#random2:hover {
	transform: scale(2.2);
}
#random3 {
	width: 200px;
	height: 200px;
	margin: 15px;
	transition: transform 1s;
  position:absolute;top:717%;left:70%;
}
#random3:hover {
	transform: scale(2.2);
}
#random4 {
	width: 200px;
	height: 200px;
	margin: 15px;
	transition: transform 1s;
  position:absolute;top:757%;right:65%;
}
#random4:hover {
	transform: scale(2.2);
}
#random5 {
	width: 200px;
	height: 200px;
	margin: 15px;
	transition: transform 1s;
  position:absolute;top:757%;text-align:center;
}
#random5:hover {
	transform: scale(2.2);
}
#random6 {
	width: 200px;
	height: 200px;
	margin: 15px;
	transition: transform 1s;
  position:absolute;top:757%;left:70%;
}
#random6:hover {
	transform: scale(2.2);
}
body {
  background: linear-gradient(
    to right,
     #ffffff,
    #2a2c3c,
    #181827,
    #833ab4,
    #fd1d1d,
     #000000
  );
  background-size: 400% 400%;
}

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

.sexto
{position:absolute;top:800%;left:1%;
font-family: Bebas Neue;
text-align:center;
  color:black;
  font-size:4vw;
  text-shadow: 1px 1px 1px with;  
}