html{  scroll-behavior: smooth}
#gen{
  display: flex;
  position: fixed;
  background-color: white;
  border-radius: 90%;
  opacity: 70%;
  top: 5%;
  left: 1%;
  z-index: 10;
  }
#gen:hover{
  opacity: 100%;
  background-color: red;
  }
body{
  background-image: linear-gradient( 92.7deg,  rgba(245,212,212,1) 8.5%,     rgba(252,251,224,1) 90.2% );
  overflow-x: hidden;
  margin: 0;
  padding: 0
    background-image: radial-gradient( circle farthest-corner at 10.2% 55.8%,  rgba(252,37,103,1) 0%, rgba(250,38,151,1) 46.2%, rgba(186,8,181,1) 90.1% );
}



#name{
  color: white ;
  height: 100vh;
  font-size: 15vh;
  background-color:#1C52B3 ;
  margin: 0px;
  font-weight: 700;

 }

#firstname{
  padding-top: 5vw;
  padding-left:5vw;
  font-family: 'Oswald', sans-serif;
  margin-left:5vw;


 }

#lastname{ 
   padding-top: 5vw;
   padding-left:5vw;
   font-family: 'Oswald', sans-serif;
   margin-left:10vw;
   margin-top:-10vh;
 }

#lastlastname{
  padding-top: 5vw;
  padding-left:5vw;
  font-family: 'Oswald', sans-serif;
  margin-left:15vw;
  margin-top:-10vh;

  
 }

.head {
  display: flex;
  align-items: center;
  justify-content:center;
  height: 5vh;
  background: white;
  position: fixed;
  z-index: 100;
  position: sticky;
  top: 0;
  box-shadow: 0 4px 2px -2px gray;
  

}

.btn{ padding-left:6vw;
padding-right:6vw;
font-size: 4vh;
text-decoration: none;
font-family: 'Pathway Gothic One', sans-serif;
color: #1C52B3;
font-weight: 20; 
  
}




.imagencircular{ 
      width: 30vw;  
      display: block;   
      border:3px solid white;
      border-radius: 100%; 
      transition: ease-out 300ms;
      filter: grayscale(80%);
      position: absolute;
      margin-left: 60vw; 
      top:5vh ;
  
}

.imagencircular:hover {filter: grayscale(0%); border:3px solid purple
}

h1{
  text-align: center; 
  font-size: 20px;
  padding-top: 10vh;
  color: white;
  font-family: arial;
  
} 

h2{
  text-align: center; 
  font-size: 50px;
  padding-top: 10vh;
  color: #1C52B3;
  font-family: arial; 
  
} 
h2{
  text-align: center; 
  font-size: 50px;
  padding-top: 10vh;
  color: #9F9DD6;
  font-family: arial; 
}  

p1{ 
  padding-top: 1vh;
  color: black;
  font-size: 20px;
  font-family: arial;  
}

p2{ 
  padding-top: 5vh;
  color: grey;
  font-size: 20px;
  
}

.seccion{ 
  height:90vh;
  margin-left:10vw;
  margin-right: 10vw; 

}


.texto{
  
  
}
.wrapper { 
  margin-top:400vh;
  position: absolute;
  height: 100vh;
  width: 100vw;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

input{
  display: none;
  left: 100px;
}
.card div {
  position: absolute;
  width: 100vw;
  height: 100vh;
  text-align: center;
  transition: all 1s;
  font-size: 2rem;
  backface-visibility: hidden;
}
.front {
  background: white;
  transform: rotateX(0deg); 
  cursor:pointer;
  color: white;
  background-image: URL("https://imgur.com/QMhoujE.jpg");
  background-size: cover;
   
}
.back {
    background-color: #1C52B3; 
  background-size: cover;
  transform: rotateX(180deg);  
   cursor:pointer;
  color: black;
  
}
:checked ~ label .card .back {
  transform: rotateX(0deg); 
}
:checked ~ label .card .front {
  transform: rotateX(180deg); 
}



.wrapper2 { 
  margin-top:200vh;
  position: absolute;
  height: 100vh;
  width: 100vw;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  
}

#chk2{
  display: none;
  left: 100px;
}
.card2 div {
  position: absolute;
  width: 100vw;
  height: 100vh;
  text-align: center;
  transition: all 1s;
  font-size: 2rem;
  backface-visibility: hidden;
}
.front2 {
  background: white;
  transform: rotateX(0deg); 
  cursor:pointer;
  color: white;
  background-image: URL("https://imgur.com/84OtTFn.jpg");
  background-size: cover;
   
}
.back2 {
    background-image: URL("https://imgur.com/EWu2Kjp.png");
  background-size: cover;
  transform: rotateX(180deg);  
   cursor:pointer;
  color: black;
  
}
:checked ~ label .card2 .back2 {
  transform: rotateX(0deg); 
}
:checked ~ label .card2 .front2 {
  transform: rotateX(180deg); 
}
https://imgur.com/QMhoujE