:root{
  --current-x:0px;
  background-color: #000000;
}
.HP {
  /*border: #000000 solid 1px;*/
  perspective: 600px;
  top :10%;
  left: 0;
  position: fixed;
  justify-content: center;
  align-items:center;
  height: 100vh;
  width: 100vw;
  flex-wrap: 1 ;
  
}

.HP-card{
  left: 15vw;
  width: 75%;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d ;
  animation: rot 10s infinite ;
  
  
}
.HP:hover .HP-card{
  animation-play-state: paused;
  
}
.main-HP {
  position: relative;
  top: 15%;
  margin: 0 auto;
  height: 50%;
  
  border: #ffffff90 solid 10px;
  background-image: linear-gradient(#ffffff,#1a191939);
  aspect-ratio: 16 /9;
}
.me{
  width: 50%;
  display: block;
  font-size:  400%; 
  margin-bottom: 0%;
}
.me-st{
  margin-top: 0px;
  
  font-size: xx-large;
}
.face{
  position: absolute;
  width: 100%; height: 50%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.HP-p2{
  position: relative;
  display: flex;
  top: 15%;
  margin: 0 auto;
  height: 50%;
  align-items: flex-end;
  justify-content: center;
  border: #ffffff90 solid 10px;
  background-image: linear-gradient(#f02c2c,#1a191939);
  aspect-ratio: 16 /9;
  transform: rotateY(180deg);
}
.mel{
  width: 50%;
  font-size:  400%; 
  text-align: center;
 
}
@keyframes rot{
  0%{transform: rotateY(0);}
  5%{transform: rotateY(0);}
  15%{ transform: rotateY(180deg);}
  50%{ transform: rotateY(180deg)}
  65%{transform: rotateY(360deg);}
  100%{transform: rotateY(360deg);}

}