/* Body */
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);
flex-direction:column;
justify-content:center;
align-items:center;
display:flex;
}

.envelope-text{
margin-top:80px;
font-size:25px;
color:#C6A25A;
text-align:center;
}

.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);
}

/* 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);
}


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

.date-or{
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;
}

.recap-invitation{
margin:8px;
}

/* 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;
}

.code-box{
margin-top: 0px;
}

/* Ornement */
.ornament{
width:350px;
margin:0px;
animation:draw 2s ease forwards;
}

/* Menu */
.close-menu{
position:absolute;
top:10px;
right:15px;
font-size:28px;
cursor:pointer;
}

.menu-categories{
display:flex;
flex-wrap:wrap;
gap:15px;
justify-content:center;
}

.menu-categories button{
padding:10px 20px;
border:1px solid #C6A25A;
background:white;
color:#C6A25A;
cursor:pointer;
}

.menu-modal{
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.5);
z-index:1000;
}

.menu-window{
background:white;
max-width:400px;
width:90%;
padding:40px;
border-radius:10px;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}

.menuContent{
display:grid;
gap:20px;
}

.menuContent p{
margin:0;
line-height:1.6;
font-size:16px;
}

.menuContent h2{
color:#C6A25A;
font-size:50px;
font-family:'Great Vibes',cursive;
margin-top:20px;
margin-bottom:0px;
}

.menuContent img{
width:90%;
margin:auto;
}