h1 {
  font-family: 'Montserrat', sans-serif;
}
#perfil h1, #paso-colegio h1, #galeria h1, #futuro h1, #random h1{
  font-size: 2rem;
}

#zona_botones {
  display: flex;
  flex-direction: row;
  width: 100%;
  margin-bottom: 2%;
  justify-content: space-evenly;
  background-color: #a2b9bc;
}
.boton {
  border: 10px inset lightblue;
  color: blue; 
  text-decoration: none;
  font-size: 30px;
  transition: 0.5s;
}
.boton:hover {
  background-color: #9be8d8;
  font-weight: bold;
  border: 16px inset lightblue;
  opacity: 0.6; 
}

#bajo-botones {
  background: linear-gradient(blue, lightblue);
  background-size: 100% 84%;
  display: flex;
  flex-direction: column;
}
#nombre {
  text-align: right;
  padding-right: 1%;
}
#colegio {
  width: 100%;
  text-align: center;
  transition: 1s all ease-in-out;
}
#colegio:hover{
  transform: scale(1.1);
}
#promo {
  text-align: right;
  padding-right: 1%;
}
#perfil{
  position: absolute;
  top: 100%;
  width: 100%;
  height: 100%;
  background: url(https://img.freepik.com/free-vector/modern-flowing-blue-wave-banner-background_1035-19859.jpg?w=2000);
  background-size: cover;
}
#titulo{
  width: 98%;
  border-radius: 25px;
  border: 10px ridge #008090;
  background-color: #006699;
  text-align: center;
}
.contenedor{
  width: 100%;
  height: 100%;
  display: flex;
  font-size: 1.4rem;
}
#p {
  margin: auto;
  height: 50%;
  margin-top: 20vh;
  font-weight: bold;
}
#fotoPerfil {
  margin: auto;
  margin-top: 5vh;
}
#perfil img{
  box-shadow: 20px 15px 9px #003366;
}
#paso-colegio {
  font-size: 1.2rem;
  position: absolute;
  width: 98%;
  top: 200%;
  height: 100%;
  background: url(https://img.freepik.com/free-vector/modern-flowing-blue-wave-banner-background_1035-19859.jpg?w=2000);
  background-size: cover;
  text-align: justify;
  font-weight: bold;
  margin: 0 0 0 5px;
}
#fotosColegio {
  display: flex;
  flex-direction: row;
  height: 60%;
  left: 10%;
  gap: 15px;
}
#paso-colegio img{
  width: 32%;
  height: 38vh;
  border: 5px outset blue;
}
#colegio1, #colegio3 {
  align-self: flex-end;
}
#galeria {
  position: absolute;
  width: 100%;
  height: 120%;
  top: 300%;
  background: url(https://img.freepik.com/free-vector/modern-flowing-blue-wave-banner-background_1035-19859.jpg?w=2000);
  background-size: cover;
}
@import "compass/css3";
.collection{
  float: center;
  clear: both;
  position: relative;
  width: 850px;
  height: 250px;
  margin: 0 auto;
  margin-top: 60px;
  padding-left: 10%;
}
  &:hover .card:hover{
    z-index: 10;
    -webkit-transform: rotate(0deg);
    width: 260px;
    height: 280px;
    top: -8px;
    opacity: 1;
  } 
  .card {
    position: relative;
    float: center;
    
    width: 180px;
    height: 200px;
    
    -webkit-box-shadow: 0px 0px 8px 1px rgba(0, 0, 0, 0.2);
    -webkit-transition: all 0.3s ease-out;
    
    &:nth-child(1){
      -webkit-transform: rotate(-6deg);
      top: 40px;
      left: 9px;
      z-index: 5;
    }
    &:nth-child(2){
      -webkit-transform: rotate(-2deg);
      left: -9px;
      z-index: 3;
    
    }
    &:nth-child(3){
      -webkit-transform: rotate(-5deg);
      top: 26px;
      left: -36px;
      z-index: 1;
    }
    &:nth-child(4){
      -webkit-transform: rotate(7deg);
      top: 15px;
      left: -46px;
      z-index: 3;
    }
  }
}

#futuro {
  position: absolute;
  width: 100%;
  top: 100%;
  background: url(https://img.freepik.com/free-vector/modern-flowing-blue-wave-banner-background_1035-19859.jpg?w=2000);
  background-size: cover;
}
.container{
  display: flex;
  flex-direction: column;
  height: 100%;

}
#random {
  position: absolute;
  width: 100%;
  top: 210%;
  height: 70%;
  background: url(https://img.freepik.com/free-vector/modern-flowing-blue-wave-banner-background_1035-19859.jpg?w=2000);
  background-size: cover;
}
#random .container{
  display: flex;
  flex-direction: row;
  margin: auto;
  width: 90%;
  gap: 20px;
  align-items: center;
}
.subir{
  position: fixed;
    bottom: 0;
    right: 0;
    margin-right: 2.5vw;
    margin-bottom: 1.5vw;
    z-index:2;
}