html, body{
  margin: 0;
  scroll-behavior: smooth;
  overflow: hidden;
}
#portada {
  background-color: yellow;
  width: 100vw;
  height: 100vh;
  background-image: url("./img/Screenshot_20230816-233521_Gallery.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  position: center;
  
}
#perfil{
  background-color: #FFB300;
  width: 100vw;
  height: 100vh;
  background-position: relative;
}
#miPasoPorElIllia{
  background-color: #F9A825;
   width: 100vw;
   height: 100vh;
}
#futuro{
  background-color: #FF8F00;
  width: 100vw;
  height: 100vh;
}
#multimedia{
  background-color: #FF6F00;
  width: 100vw;
  height: 100vh;
  background-image: url("./img/e4cd85fb1475114eb7b9d614b0c79e04.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  position: center;
}
#random{
  background-color: #D84315;
    width: 100vw;
    height: 100vh;
  background-image: url("https://i.blogs.es/162076/samsung-onyx/1366_2000.jpg");
   background-repeat: no-repeat;
  background-size: cover;
  position: center;
}
.buttons {
  background-color: #fbeee0;
  border: 2px solid #422800;
  border-radius: 35px;
  box-shadow: #422800 4px 4px 0 0;
  color: #422800;
  cursor: pointer;
  display: inline-block;
  font-weight: 600;
  font-size: 18px;
  padding: 0 18px;
  line-height: 50px;
  text-align: center;
  text-decoration: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  margin-top: 1vh;
  margin-left: 3.5vw;
}
.buttons:hover {
  background-color: #fff;
}
.buttons:active {
  box-shadow: #422800 2px 2px 0 0;
  transform: translate(2px, 2px);
}
@media (min-width: 768px) {
.buttons {
    min-width: 120px;
    padding: 0 25px;
  }
#button1{  
  width: 20vw;
  height: 10vh;
  margin-top: 15vh;
  margin-left: 40vw; 
  position: absolute;   
}
  #button2{
     width: 30vw;
  height: 10vh;
  margin-top: 30vh;
  margin-left: 35vw; 
  position: absolute;  
  }
  #button3{
     width: 20vw;
  height: 10vh;
  margin-top: 45vh;
  margin-left: 40vw; 
  position: absolute;  
  }
  #button4{
     width: 20vw;
  height: 10vh;
  margin-top: 60vh;
  margin-left: 40vw; 
  position: absolute; 
   }
  #button5{
     width: 20vw;
  height: 10vh;
  margin-top: 75vh;
  margin-left: 40vw; 
  position: absolute; 
   }
  
#buttonperfil {
  margin-top: 1vh;
  margin-left: 3vw;
}
#buttonmipasoporelillia{
  margin-top: 1vh;
  margin-left: 3wv;
}
#buttonfuturo{
  margin-top: 1vh;
  margin-left: 3wv;
}
#buttonmultimedia{
  margin-top: 1vh;
  margin-left: 3wv;
}
#buttonrandom{
  margin-top: 1vh;
  margin-left: 3wv;
}
#textoperfil{
  width:70vw;
  height:10vh;
  margin-top: 10vh;
  margin-left: 10vw; 
  font-size: 20px;
}
.contenedor{
  width: 80vw;
  height: 25vh;
  margin-top: 0vh;
  margin-left: 5vw; 
  position: absolute;
}
  #fototexto{
  height: 35vh;
  weith: 30vw;
  margin-left: 38vw;
  margin-top:5vh;
  position: absolute;
}
  #fotocorazón{
  height: 45vh;
  weith: 20vw;
  margin-left: 74vw;
  margin-top: 43vh;
  position: absolute;
  }
  #fotocachete{
   height: 41vh;
  weith: 20vw;
  margin-left: 78vw;
  margin-top: 0vh;
  position: absolute;
    }
    
  #petite{
  height: 40vh;
  weith: 20vw;
  margin-left: 5vw;
  margin-top: 5vh;
  position: absolute;
}
#fotoastetik{
  width: 20vw;
  height: 45vh;
  margin-top: 43vh;
  margin-left: 51vw; 
  position: absolute;
}
#fotomariojos{
  width:20vw;
  height:40vh;
  margin-top: 47vh;
  margin-left: 5vw; 
  position: absolute;
}
  #fotolanín{
  width:20vw;
  height:40vh;
  margin-top: 47vh;
  margin-left: 28vw; 
  position: absolute;
}
#fotoprimerdia{
  width: 18vw;
  height: 43vh;
  margin-top: 2vh;
  margin-left: 3vw; 
  position: absolute;
}
#fotoproa{
  width: 20vw;
  height: 43vh;
  margin-top: 2vh;
  margin-left: 22vw; 
  position: absolute;
}
#fotopandemia{
  width: 23vw;
  height: 45vh;
  margin-top: 2vh;
  margin-left: 43vw; 
  position: absolute;
  
}
#fotodurmiendoX2{
  width: 25vw;
  height: 43vh;
  margin-top: 45vh;
  margin-left: 3vw; 
  position: absolute;
}
#videolatruca{
  width: 55vw;
  height: 57vh;
  margin-top: 9vh;
  margin-left: 23vw; 
  position: absolute;
}
  #fotofacu{
  width: 30vw;
  height: 40vh;
  margin-top: 35vh;
  margin-left: 10vw; 
  position: absolute;
  }
  #fotocarita{
  width: 27vw;
  height: 40vh;
  margin-top: 35vh;
  margin-left: 50vw; 
  position: absolute;
  }
#contenedor {
  display: flex;
  flex-direction: row;
  width: 100vw;
  height: 100vh;
}
.carta-box {
  margin: 60px;
  margin-top: 5px;
  width: 200px;
  height: 250px;
  position: relative;
  perspective: 1000px;
}

.carta-box:hover .carta {
    transform: rotateY(180deg);
}

.carta {
  transform-style: preserve-3d;
  transition: all 0.5s linear;
}

.cara {
  position: absolute;
  backface-visibility: hidden;
}

.cara.detras {
  transform: rotateY(180deg);
}
  #textofuturo {
  margin-top: 5vh;
  margin-left: 3vw; 
  position: absolute;
  font-size: 25px;
  font-family: 'Ysabeau Infant', sans-serif;
  }
  #textomipasoporelillia {
  margin-top:45vh;
  margin-left: 3vw; 
  position: absolute;
  font-size: 25px;
  font-family: 'Ysabeau Infant', sans-serif;
  }