body{
    background-color: lightcyan; 
    width: 100vw;
    height: 100vh;
    border: lavender;
    display: flex;
  }
  /* Una vez elegido el color de fondo pude definir mi paleta de colores para los otros detalles*/

  header{
  display: flex;
  justify-content: left;
  align-items: center;
  height: 5vh;
  font-size: 1vw;
  padding-bottom: 2%;
  position: fixed;
  background-color: lightcyan;
  width: 100vw;
  top: 0;
  z-index: 1000;
}

#logo{
  height: 4vw;
  width: auto;
}
/*Agregué un header, le puse una imagen y el nombre del colegio*/
  
section{
  padding-bottom: 1%;
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
  width: 100%;
}

/*Elegí darle a todaos los textos de las secciones la misma tipografía*/

h1{
  padding-bottom: 1%;
  text-align:center;
  font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}

/*Para los títulos de cada seccion elegí alinearnos a la izquierda y usar la misma tipografia que en los parrafos para mantener la coherencia del diseno*/

h2{
  text-align: left;
  font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
  }

/*Realice lo mismo que en h1 solo que le agregue un subrayado*/
.seccion1{
  background-color:lightsteelblue;
  padding-top: 3%;
  /*display: flex;
  flex-direction: column;
  flex-wrap: nowrap;*/
}

/*Tuve algunos problemas con esta seccion y no pude solucionarlos de ninguna forma*/


.seccion2{
  background-color: mediumaquamarine;
}

.seccion3{
  background-color: mediumpurple;
  
}

.seccion4{
  background-color:rgb(133, 219, 172);
}

/* Decoré las secciones como a mi me gustaban*/


.imagen1 img{
      align-self: center;
      border-radius: 3%;
      box-shadow: 5px 5px blue;
      margin-top: 1%;
      display: flex;
}
/*Tuve un par de inconvenientes con la imagen que no pude solucionar (como verán en la página)*/
ul{
  list-style: none;
}

.menu{
  background-color:lightslategrey;
  display: flex;
  justify-content:space-evenly;
  width: 100%;
  padding-bottom: 1%;
  position:fixed; 
  min-width: 100%;
  top: 5vh;
}
  
/*Hice el menú*/

a:hover{
  color:violet;
}
/*Agregué esta función para que cuando pase por encima las opciones del menú, cambien de color*/

footer{
  text-align: center;
  background-color:lightslategray; 
  color: antiquewhite;
}

#futuro{
  text-align: center;

}

.galeria{
  font-family: 'Open Sans';
}

.linea{
  border-top: 5px solid lightgrey;
  margin-bottom: 40px;
}

.contenedor-imagenes{
  display: flex;
  width: 85%;
  margin: auto;
  justify-content: space-around;
  flex-wrap: wrap;
  border-radius: 3px;
}

.contenedor-imagenes .imagen{
  width: 32%;
  height: 250px;
  margin-bottom: 5px;
  box-shadow: 0px 0px 3px 0px rgba(0, 0,0,75);
  position: relative;
  z-index: 0;
}

.imagen img{
  width: 100%;
  height:100%;
  object-fit: cover;

}

.overlay{
  position: absolute;
  bottom: 0;
  left: 0;
  background:rgba(0, 118,192,0.781);
  width: 100%;
  height: 0;
  transition: .5s ease;
  overflow: hidden;
} 

.overlay h2{
  color: #fff;
  font-size: 30px;
  font-weight: 300;
  position:absolute;
  top: 50%;
  left: 50%;
  text-align: center;
  transform: translate(-50%,-50%);
}

.imagen:hover .overlay{
  height: 100%;
  cursor: pointer; 
} 

@media screen and (max-widht:1000px){
  .contenedor-imagenes{
    width: 95%;
  }
}

@media screen and (max-width: 700px){
  .contenedor-imagenes{
    width: 90%;
  }
  .contenedor-imagenes .imagen{
    width: 48%;
  }
}
 
.redes{
  display: flex;
  width: 100%;
  margin: auto;
  justify-content: space-evenly;
  flex-wrap: wrap;
  flex-direction: row;
  z-index: 1;
}

.logos{
  display: flex; 
  width: 30vw;
  height: 30vh;
  margin: auto;
  position: relative;
}


.logos img{
  /*width: 15vw;
  height: 15vh;*/
  border-radius: 0;
  object-fit: cover;
  width: 100%;
  height:100%;
}

.BotonVolver{
 text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  color:darkblue;
  padding-top: 15px;
  padding-left: 30px;
  padding-right: 30px;
  background-color: transparent;
  border-width: 3px;
  border-style: solid;
  border-color: darkblue;
  text-align: right;
  width: 10px;
  display: flex;
  justify-content: center;
}