/*@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');*/




body {
    margin:0;
    padding:0;
    box-sizing: border-box;


   background-color: #1b1b2a;
   
    height:100vh;
}







h1 {
   
    color:gold;
    text-align: center;
     font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    /*font-size: clamp(0.6rem, 1.6vw + 2.2rem, 4rem);*/
    font-size: 3vw;
    letter-spacing: 2px;
    
   

}

main {
    padding-top: 10px;
    margin:auto;
    max-width:700px;
    width:80%;

   
}

img {
border-radius: 7px;
width:100%;

}


p {
    color:gold;
    text-align: center;
    font-size: clamp(0.4rem, 0.6vw + 0.8rem, 1rem);
    font-style: italic;
    letter-spacing: 1px;
}
span {
    color:white;
}


.button-3D-effect {
display: block;
margin: 0 auto; 
min-width: 180px;
border: none;
background: none;
cursor: pointer;
perspective: 2000px;
padding-left: 16px;

}

.button-3D-effect a{
text-decoration: none;
}

.button-3D-effect span {
    display: block;
    padding: 6px 6px;
    font-weight: 600;
    color: #1d1d1d;
    font-size: 20px;
    /* border: 2px solid #111; */
    box-shadow: 0px 0px 0px 1px rgb(0, 0, 0)
    inset;
    background-color: #fde596;
    position: relative;
transform-style: preserve-3d;
transform-origin: top;
transition:  transform 0.3s ease-out;
}

.button-3D-effect span::after {
content: "PERDU!!!   😃 ";
box-shadow: 0px 0px 0px 1px rgb(0, 0, 0)
inset;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 100%;
transform-origin: top;
background-color: #fd96cd;
transform: rotateX(-90deg);

}

.button-3D-effect:hover span {
    transform: rotateX(90deg) translateY(-50%);
}