/* colores #c1f0af #9FCC8E #79AB66 #2E6B30 #0A491B #0E4314 #113D0D */
/* fuentes: Indie Flower, Amatic CS*/
@import url(https://fonts.googleapis.com/css?family=Indie+Flower);
@import url(https://fonts.googleapis.com/css?family=Amatic+SC);

body{
    background-image: url("https://www.thisiscolossal.com/wp-content/uploads/2020/09/ghibli-9.jpg");
    background-size: auto;
    background-position: center center;
    background-attachment: fixed;
}
/* Menú inicial */
.nombre{
  font-family: 'Indie Flower';
  font-size: 5vh;
  background-color:#c1f0af;
  color:#113D0D;
  display: flex;
  justify-content: center;
  align-items: flex-start; 
  margin: 6vh 75vh 16vh;
}
.contenedor {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.seccion {
  width: 45vw;
  height: 35vh;
  margin: 1vh 0;
  display: inline-flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
.myButton {
	background-color:#c1f0af;
	cursor:pointer;
	color:#0e4314;
	font-family:'Amatic SC';
	font-size:4vh;
	padding:1vh;
}
.myButton:hover{
	background-color:#c1f0af;
}
.myButton:active {
	position:relative;
	top:1.25vh;
}
.totoro{
  max-height:30vh;
}
.kodama{
  max-height:30vh;
}
.sincara{
  max-height:30vh;
}
.lapuntu{
  max-height:30vh;
}
.calcifer{
  max-height: 25vh;
}
#seccion1,#seccion2 {top: 0}
#seccion3,#seccion4 {bottom: 0}
#seccion1,#seccion3 {left: 0}
#seccion2,#seccion4 {right: 0}


/* Menú general a todas las secciones*/
.menu a{
    color:#0E4314;
    font-size:4vh;
    font-family: 'Indie Flower';    
} 
nav ul{   
    background-color:#9FCC8E;
    display:flex;
    justify-content: space-around;
    align-items: center;
    margin:0.5vw 0vw;
    padding:0;
}
.myButton:active {
	position:relative;
	top:1.5vh;
}

/* Sección 1 "Presentación" */
.seccion1{
  background-color:#c1f0af;
  display:flex;
  flex-direction:column; 
}
h1{
  font-size: 6.5vh;
  font-family: 'Indie Flower';
  color: #0E4314;
  align-self: flex-start;
  margin: 1vw 0vw 0vw 2vw;
}
.textoEImagen{
  margin: 0vh 3vh;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.presentacion{
  font-size: 5vh;
  color: #113D0D;
  text-align: justify;
  font-family: 'Amatic SC';
  max-width: 60vw;
}
.yo{
  height: 70vh;
  width: auto;
}
.saludo{
  font-size: 5vh;
  color: #113D0D;
  justify-content: center;
  align-self: center;
  font-family: 'Amatic SC';
  margin-top: 1.5vh;
  margin-bottom: 2.5vh;
}

/* Sección 2 "Mi paso por el Illia*/
.seccion2{
  margin: 0;
}
* {
  box-sizing: border-box;
}
.paso{
  background-color:#0A491B;
	color:#c1f0af;
  display:flex;
  justify-content: center;
	font-family:'Amatic SC';
	font-size:4vh;
	padding:1vh;
  margin: 0vh 50vh;
}
.row {
  display: flex;
  flex-wrap: wrap; /*this matters so when screen shrinks then can roll over*/
  flex-direction: row;
  padding: 0 1vh;  
}
.column {
  flex-basis: 25%; /*seems like we don't need width if we have flex-basis*/
  padding: 0 2vh;
}
.column img {
  width: 100%; /*this is important so images keep to width of div .column*/
  margin-top: 2vh;
}
/* Sección 3 "Sobre mi"*/
.seccion3{
  background-color:#c1f0af;
  display:flex;
  flex-direction:column; 
}
.titulo{
  font-size: 6.5vh;
  font-family: 'Indie Flower';
  color: #0E4314;
  align-self: center;
  margin: 1vw 0vw -2vw 0vw; 
}
.mg{
  font-family: 'Amatic SC';
  color:#0E4314;
  font-size: 5.5vh;
  display: flex;
  align-self: center;
  background-color:#c1f0af;
}
.info{
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 5vh 0vh 2vh 7vh;
}
.linkedin{
  max-width: 9.5vh;
}
.instagram{
  max-width: 9.5vh;
}
.wsp{
  max-width: 9.5vh;
}
.spotify{
  max-width: 9.5vh;
}
main{
  max-width: 35vh;
  padding: 1rem;
  margin: -48vh 0vh -15vh 36vh;
  display: grid;
  grid-template-columns: 11vw 12vw 10vw 9vw 13vw 10vw;
  grid-template-rows: 10vw 9vw 9vw;
  grid-gap: 1rem;
}
.fotitos{
  object-fit: cover;
  width: 100%;
  height: 100%;
  border-radius: 3vh;
}

/* Sección 4 "De cara al futuro"*/
.futuro{
  background-color:#0e4314;
  color:#c1f0af;
  display:flex;
  justify-content: space-around;
  font-family:'Amatic SC';
  font-size:4vh;
  padding:1vh;
  margin: 3vh 75vh 3vh;
}
.collage{
  max-width: 121.5vh;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0vh 40vh;
}

/* Footer general a todas las secciones */
footer{
  height: 7vh;
  background-color:#9FCC8E;
  color:#0E4314;
  font-size:5vh;
  margin:0.5vw 1vw;
  display:flex;
  align-items: center;
  justify-content: space-around;
  font-family: 'Amatic SC';
}
.ig{
  max-width:6vh;
  display:flex;
  align-self: center;
}