@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital@1&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght@300&family=Open+Sans:ital@1&display=swap');
/*Como primero de todo busque las fuentes que me gustaron y las importe*/ 

*p{font-family: 'Open Sans', sans-serif;
    font-family: 'Open Sans Condensed', sans-serif;
width: 100%;}
/*Luego le di formato a todos los parrafos, "p"*/


body{display: flex;
flex-direction: column;}
/*Aqui indique las dirrecciones de las columnas*/


.seccion1{font-family: 'Open Sans', sans-serif;
background-color: rgba(255, 0, 0, 0.700);
padding-bottom: 3%;
}
/*Le di formato a la primer seccion de todas dandole un fondo el cual luego con respecto a las otras secciones e encuentra en degradee*/

img{margin:auto;
text-align: center;
display: block;
width: 30%;;
}
/*Le di formato a la foto, la centre, le dije que los margenes sean autos, etc*/

.botonvolver{text-decoration:none;
    font-weight: 600;
    font-size: 20px;
    color:#000000;
    padding-top:15px;
    padding-bottom:15px;
    padding-left:40px;
    padding-right:40px;
    background-color: transparent;
    border-width: 3px;
    border-style: solid;
    border-color: #000000;
    }

/*Cree mi boton de volver, el cual esta presente en todas las secciones de la pagina web*/


#menu{background-color:rgba(255, 0, 0, 0.750);
position: fixed;
border:1px solid;
width: 100%;
z-index: 1000;
}

#menu ul{list-style: none;
margin: 0px;
padding: 0px;
}
#menu ul li{display: inline-block;}
#menu ul li a{color:black;
    text-decoration: none;
    display: block;
    padding:1px 80px;
    font-family: 'Open Sans', sans-serif;
    
    }
#menu ul li a:hover{background-color: rgba(0, 204, 255, 0.671);}
/*Toda esta parte es la del menu en la cual me encargue de darle color al fondo, darle color cuando pasamos el mouse por arriba con el hover, me enacrgue de las distancias entre las palabras de las alturas y demas*/



.seccion2{font-family: 'Open Sans', sans-serif;
    background-color: rgba(255, 0, 0, 0.550);
    padding-bottom: 3%;
width: 100%;}
.galeríadeimagenes{
    font-family:'Open Sans', sans-serif;
    }
.galeríadeimagenes h2{ text-align: center;
margin:20px 0px 15px 0px;
font-weight: 300;}

.linea{border-top: 5px solid #0077C0;
    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%;
    position:relative;
    height: 250px;
    margin-top:5px;
    box-shadow: 0px 0px 3px 0px rgba( 0, 0,0,.75);}

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


.overlay{
    position: absolute;
    bottom:0;
    left:0;
    background-color: #0076c0cc;
    width: 100%;
    height: 23%;
}

/*Toda esta parte , es la de la seccion 2 y la de la galería de imagenes, la cual ademas de tener las imagenes ordenadas de una manera en particular, contienen una especie de pie de pagina*/



.seccion3{font-family: 'Open Sans', sans-serif;
    background-color: rgba(255, 0, 0, 0.400);
    padding-bottom: 3%;
width: 100%;}

#agus2{margin:auto;
    text-align: center;
    display: block;
    width: 30%;}
    /*Organice mi seccion y le agregue una foto la cual la centre y organice*/

#redes ul {
    list-style: none;
    display:flex;
    width:60%;
    margin:auto;
    justify-content: space-around;
    flex-wrap: wrap;
    border-radius: 3px;}

#redes li {background-color:rgba(255, 0, 0, 0.137);
    width: 32%;
    position:relative;
    height: 250px;
    margin-top:5px;
    box-shadow: 0px 0px 3px 0px rgba( 0, 0,0,.75);}

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

/*Aqui me encargue de la partes de los logos de las redes sociales, para que ocupen cierto espacio, en determinado lugar,etc*/




.seccion4{font-family: 'Open Sans', sans-serif;
    background-color: rgba(255, 0, 0, 0.250);
    padding-bottom: 3%;
width: 100%;}

.linea2{border-top: 5px solid #0077C0;
    margin-bottom: 40px;}

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

.contenedor-imagenes2 .imagen2{
    width: 32%;
    position:relative;
    height: 250px;
    margin-top:5px;
    box-shadow: 0px 0px 3px 0px rgba( 0, 0,0,.75);}

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

/*Por último en la sección 4 , al igual que en la galería de imagenes y con el tema de mis redes sociales, me encargue de organizar las fotos para que ocupen un lugar determinado en el espacio posible. Ademas agregue una linea la cual actúa de "separador".*/


footer{ background-color: rgba(255, 0, 0, 0.100);
    font-family: 'Open Sans', sans-serif;
    display: flex;
    justify-content:space-around;
    }
    /*Y para finalizar le di formato al pie de pagina, con un fondo mucho mas clarito y utilizando la herramienta space-around para que los elementos queden con la misma separación alrededor de ellos.