html{
  scroll-behavior: smooth; 
  
}
*{
  margin: 0; border: 0; padding: 0
}
#menu {
  animation-name: bottomappear;
  animation-duration: 3s;
  position: absolute;
  left: 20.5vw;
  bottom: 10%; 
  
}
.lol{
  text-decoration: none;
  font-size: 4.3vw;
  color: white;
  transition:1s;
}
.lol:hover{
  font-size: 6vw;

}
#boton:hover {
  text-decoration: none;
  font-size: 3vw;
  color: white;
  position: fixed;
  top: 88%;
  left: 88%;
  background-color: darkblue;
  border-radius: 20%;
  padding: 0.2vw;
  opacity: 3; 
 transition: all 0.5s ease-out;
}
#boton{
  text-decoration: none;
  font-size: 2vw;
  color: white;
  position: fixed;
  top: 92%;
  left: 92%;
  background-color: darkblue;
  border-radius: 20%;
  padding: 0.2vw;
  opacity: 40%;
}

#fotosPerfil{
  margin-left: 8vw;
}

.blurPictures{
  filter: grayscale(70%);
}

.blurPictures:hover{
  filter: grayscale(0%);
}

#upd {
  width: 40vw;
  height: 60vh;
  margin-right: 2vw;
  margin-bottom: 4vh;
  margin-top: 2vh;
}
#fotoSinBasu{
  width: 40vw;
  height: 60vh;
  margin-bottom: 4vh;
  margin-top: 2vh;
}
#cuadraditos{
   width: 40vw;
  height: 60vh;
   margin-right: 2vw;
   margin-bottom: 2vh;
  }
#modelo{
   width: 40vw;
  height: 60vh;
   margin-bottom: 2vh;
  }

#anuario{
  text-align: center;
  font-family: 'Oswald', sans-serif;
  font-weight: bold;
  font-size: 10vw;
  background-color: darkblue;
  color: white;
  width: 100vw;
  height: 100vh;
  padding-top: 30vh;
}




#perfil {
    text-align: center;
  font-family: 'Smooch', cursive, cursive;
  font-size: 130%;
  color: black;
  background-color: white
}


.h1{ text-align:center;
  padding-top: 2vw;
}
#perfil p{
  text-align: justify;
  font-family: 'Roboto Flex', sans-serif;
  font-size: 130%;
  color: black;
  background-color: white;
  margin-left: 2vw;
  margin-right: 2vw;
}
#futuro{
  text-align: center;
  font-family:  'Smooch', cursive, cursive;
  font-size: 130%;
  color: black;
  background-color: white
  
}
#futuro p{
  text-align: justify;
  font-family: 'Roboto Flex', sans-serif;
  font-size: 130%;
  color: black;
  background-color: white;
  margin-left: 2vw;
  margin-right: 2vw;
}

#felicidad{
  height: 100vh;
  width: 30vw;
  padding-bottom: 2vw
}

#miPaso{
  text-align: center;
  font-family:  'Smooch', cursive, cursive;
  font-size: 130%;
  color: white;
  background-color: darkblue
  
}
#miPaso p{
  text-align: justify;
  font-family: 'Roboto Flex', sans-serif;
  font-size: 130%;
  color: white;
  background-color: darkblue;
  margin-left: 2vw;
  margin-right: 2vw;
}

#beach{
  height: 70vh;
  width: 40vw;
  padding-right: 3vw;
  padding-bottom: 2vw
}

#remate{
  height: 70vh;
  width: 40vw;
  padding-bottom: 2vw;
  padding-leftt: 3vw;
}

#vida{
  width: 60vw;
  height: 80vh;
  padding-bottom: 2vw;
  padding-top: 2vw;
}

#random{
  text-align: center;
  width: 100vw;
  font-family:  'Smooch', cursive, cursive;
  font-size: 140%;
  color: white;
  background-color: darkblue;
}

#random p{
  text-align: justify;
  font-family: 'Roboto Flex', sans-serif;
  font-size: 200%;
  color: white;
  margin-left: 4vw;
  margin-right: 4vw;
}


div#corteBasu {
  width: 24.5vw;
  height: 70vh;
  background-size: cover;
  background-image: url("https://i.imgur.com/CSWN1MN.jpg");
  margin-top: 5vh;
/*  margin-left: 24vw;
  margin-bottom: 5vh;*/
}

div#infoCorteBasu {
  position:absolute;
  overflow:hidden;
  width: 24.5vw;
  height: 70vh;
  background-color: rgba(31, 31, 31, 0.9);
  opacity:0;
  transition: opacity 0.3s;
}

div#corteBasu:hover div#infoCorteBasu {
  opacity:1;
}

p#headlineCorteBasu {
  font-size: 100%;
  margin-left: -20vw;
  margin-top: 3vh;
  transition: margin-left 0.3s;
}

div#corteBasu:hover p#headlineCorteBasu {
  text-align:center;
  margin-left: 4vw
}

p#descripcionCorteBasu {
  font-size: 70%;
  text-align: justify;
 margin-top: 60vh;
  transition: margin-top 0.4s;
}

div#corteBasu:hover p#descripcionCorteBasu {
  margin-top: 5vh;
}

div#mastu {
  margin-top: 5vh;;
  width: 24.5vw;
  height: 70vh;
  background-image: url("https://i.imgur.com/CXC0Hps.jpg?3");
  background-size: cover; 
  /*margin-bottom: 5vh;*/
}
  

div#infoMastu {
   position:absolute;
  overflow:hidden;
  width: 24.5vw;
  height: 70vh;
  background-color: rgba(31, 31, 31, 0.9);
  opacity:0;
  transition: opacity 0.3s;
}

div#mastu:hover div#infoMastu {
  opacity:1;
}

p#headlineMastu {
  font-size: 100%;
  margin-left: -20vw;
  margin-top: 3vh;
  transition: margin-left 0.3s;
}

div#mastu:hover p#headlineMastu {
  text-align:center;
  margin-left: 4vw
}

p#descripcionMastu {
 font-size: 70%;
  text-align: justify;
  margin-top: 60vh;
  transition: margin-top 0.4s;
}

div#mastu:hover p#descripcionMastu {
   margin-top: 5vh;
}


div#tomy {
  width: 24.5vw;
  margin-top: 5vh;
  height: 70vh;
  background-image: url("https://i.imgur.com/iXWsHG2.jpg");
  background-size: cover; 
 /* margin-left: 24vw;
  margin-bottom: 5vh; */
}
  

div#infoTomy {
   position:absolute;
  overflow:hidden;
  width: 24.5vw;
  height: 70vh;
  background-color: rgba(31, 31, 31, 0.9);
  opacity:0;
  transition: opacity 0.3s;
}

div#tomy:hover div#infoTomy {
  opacity:1;
}

p#headlineTomy {
   font-size: 100%;
  margin-left:6vw;
  margin-top: 3vh;
  transition: margin-left 0.3s; 
}

div#Tomy:hover p#headlineTomy {
  text-align:center;
}

p#descripcionTomy {
 font-size:70%;
  text-align: justify;
  margin-top: 5vh;
  transition: margin-top 0.4s;
}

div#tomy:hover p#descripcion {
   margin-top: 5vh;
}


div#matesuli {
  margin-top: 5vh;
  width: 24.5vw;
  height: 70vh;
  background-size: cover;
  background-image: url("https://i.imgur.com/jKgkcnH.jpg");
}

div#infoMatesuli {
  position:absolute;
  overflow:hidden;
  width: 24.5vw;
  height: 70vh;
  background-color: rgba(31, 31, 31, 0.9);
  opacity:0;
  transition: opacity 0.3s;
}

div#matesuli:hover div#infoMatesuli {
  opacity:1;
}

p#headlineMatesuli {
  font-size: 100%;
  margin-left: -20vw;
  margin-top: 3vh;
  transition: margin-left 0.3s;
}

div#matesuli:hover p#headlineMatesuli {
  text-align:center;
  margin-left: 4vw
}

p#descripcionMatesuli {
  font-size: 70%;
  text-align: justify;
  margin-top: 5vh;
  transition: margin-top 0.4s;
}

div#matesuli:hover p#descripcionMatesuli {
  margin-top: 7vh;
}

#galeria{
  text-align: center;
  font-family:  'Smooch', cursive, cursive;
  font-size: 130%;
  color: black;
  background-color: white
  
}

#galeria p{
  text-align: justify;
  font-family: 'Roboto Flex', sans-serif;
  font-size: 130%;
  color: black;
  background-color: white;
  margin-left: 2vw;
  margin-right: 2vw;
}
  
#rockNacional{
  width: 96vw;
  margin-left: 1.5vw
}

#angel{
  width: 96vw;
  margin-left: 1.5vw
}

@keyframes bottomappear{
  0%{bottom: -50px
    
  }
  
  100%{bottom: 10%
    
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial;
}

.header {
  text-align: center;
  padding: 32px;
}

.row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}

/* Create four equal columns that sits next to each other */
.column {
  flex: 50%;
  max-width: 50%;
  padding: 2.5vh 11.5vw;
  padding-botom: 2.5vh;
  
}

.column div {
  vertical-align: middle;
  text-align: center;
}

/* Responsive layout - makes a two column-layout instead of four columns */
/*@media (max-width: 800px) {
  .column {
    flex: 50%;
    max-width: 50%;
  }
}*/

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media (max-width: 600px) {
  .column {
    flex: 100%;
    max-width: 100%;
  }
}