body{
  
    margin: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;

}


@font-face {
  font-family: "MiFuente";
  src: url("tipografia/m6x11.ttf") format("truetype");
}



#bg-video {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  z-index: -100; 
  pointer-events: none;
}







.container{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 35px; /* espacio entre logo y cartas */
 margin-bottom: auto;
 max-width: 500px; /* límite */
    width: 100%;
}




.titulo img {
    width: 390PX;
    max-width: 500px; /* tamaño máximo */
    height: auto;
}
   






.deck{
    position: relative;
    cursor: pointer;
    height: 200px;
    width: 150px;
    
}

.card{
   position: absolute;
   width: 100%;
   height: 100%;
   border-radius: 20px;
    display: flex;
    align-items: center; 
    justify-content: center;
    font-weight: bold;
    font: sans-serif;
    
    transition: all 0.6s cubic-bezier(0.75, -0.5, 0.27, 1.55);
    transform-origin: bottom center;
}


.deck:hover .c1{ 
    transform: rotate(-30deg) translate(-180px, -40px);
}
.deck:hover .c2{
    transform: rotate(-15deg) translate(-90px, -20px);
}
.deck:hover .c3{
    transform: rotate(0deg) translate(0px, -55px);
}
.deck:hover .c4{
    transform: rotate(15deg) translate(90px, -20px);
}
.deck:hover .c5{
    transform: rotate(30deg) translate(180px, -40px);
}


.deck:hover section{
    
    color: white !important;
    z-index: 10 !important;  

}





.card img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
}

.card:hover img{
    transform: scale(1.1);
}








@font-face {
  font-family: "balatro";
  src: url("tipografia/balatro.otf") format("truetype");
}

#titulo-dinamico {
  font-family: "balatro", fantasy !important;
  font-size: 36px;
  color: rgb(255, 255, 255);
  background: #008efd  ;
    padding: 15px 25px;
    box-shadow:
    0 -8px 0 #1b5fbf,
    0 8px 0 #1b5fbf,
    -8px 0 #1b5fbf,
    8px 0 #1b5fbf;

  transition: 0.2s;
  image-rendering: pixelated;
  font-style: normal;
  margin: 40px ;
}