body{
margin:0;
height:100vh;

font-family:'Playfair Display',serif;

background-image:url("img/paper.jpg");
background-size:cover;

display:flex;
justify-content:center;
align-items:center;
}


/* enveloppe */
#envelope-container{
position:absolute;
}

.envelope{
width:320px;
height:220px;
position:relative;
cursor:pointer;
}

.envelope-body{
position:absolute;
width:100%;
height:100%;
background:white;
border:1px solid #ddd;
box-shadow:0 10px 40px rgba(0,0,0,0.2);
}

.flap{
position:absolute;
width:0;
height:0;
border-left:160px solid transparent;
border-right:160px solid transparent;
border-top:110px solid #e6e6e6;
top:0;
transform-origin:top;
transition:transform 1s;
z-index:3;
}

.envelope.open .flap{
transform:rotateX(180deg);
}

/* lettre */
.letter{
position:absolute;
width:100%;
height:100%;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
transition:transform 1.2s;
}

.envelope.open .letter{
transform:translateY(-120px);
}

.letter-card{
width:240px;
height:140px;
background:white;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
box-shadow:0 10px 30px rgba(0,0,0,0.15);

}

.letter-paper{
width:260px;
height:160px;
background:white;
box-shadow:0 10px 30px rgba(0,0,0,0.15);
border-radius:2px;
}

/* site */
.hidden{
display:none;
}

.book{
width:520px;
height:520px;
background:white;
box-shadow:0 20px 60px rgba(0,0,0,0.15);
position:relative;
overflow:hidden;
}


/* pages */
.page{
position:absolute;
width:100%;
height:100%;
padding:60px;
box-sizing:border-box;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;
transform:translateX(100%);
transition:transform 0.8s ease;
}

.page.active{
transform:translateX(0);
}


/* textes */
.or{
font-family:'Great Vibes',cursive;
font-size:30px;
color:#C6A25A;
margin:0px;
}

.menu{
margin:20px;
line-height:1.6;
}

.titre{
font-family:'Playfair Display',cursive;
font-size:40px;
margin-top: 0px;
margin-bottom: 15px;
}

.titre-or{
font-family:'Playfair Display',cursive;
font-size:40px;
margin-top: 0px;
margin-bottom: 15px;
color:#c29234;
}

/* boutons */
button{
background:#C6A25A;
color:white;
border:none;
padding:10px 25px;
margin-top:20px;
cursor:pointer;
}

.alt{
background:#777;
}

.buttons{
display:flex;
gap:10px;
}


/* input */
input{
padding:10px;
text-align:center;
letter-spacing:3px;
margin-top:20px;
border:1px solid #ccc;
}

#error{
color:rgb(206, 114, 114);
display:none;
}


/* ornement */
.ornament{
width:350px;
margin:0px;
/*margin-left: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-top: 0px;*/
animation:draw 2s ease forwards;
}

@keyframes draw{

from{
opacity:0;
transform:scale(0.8);
}

to{
opacity:1;
transform:scale(1);
}

}