body{
    margin: 0;
    height: 100vh;
    overflow: hidden; /* Empêche le défilement */
    /*background: #001f3f; /* Couleur de fond pour le ciel nocturne */
    background: linear-gradient(to right, #1a0e5e, #230d35, #0b001a); /* Dégradé avec trois couleurs */
    font-family: "aladin", serif; /* Utilisation de la police personnalisée */
    /*background-color: rgb(233, 158, 93);
    background-position-x: 1%;*/
}
.aladin-regular {
    font-family: "Aladin", system-ui;
    font-weight: 400;
    font-style: normal;
  }
  
/*@font-face {
    font-family: "aladin" , serif;
    src: url("aladin/Aladin-Regular.ttf") format('truetype');
    font-weight: normal;
    font-style: normal;
}*/

h1{
    position:absolute;
    left:100px;
    font-family: "aladin";
    font-size: 10em;
    color:blanchedalmond;
}

.lampefumee{
    display : inline-block; /* Permet aux images de rester ensemble */
    position: relative;
    /*display: flex;
    flex-direction: row;
    height: 100vh;*/

}

.lampe{
    display: block; /* Affiche l'image de la lampe normalement */
    /*flex-direction: row;*/
    height:18rem;
    margin-left: 30rem;
    margin-top: 25rem;
    /*object-position: center;*/
    flex:0.5;
    /*z-index:6;*/
}

.lampe:hover{
    cursor:url(https://i.imgur.com/Sdb3TfD.png), auto;
    
}

.fumee{
    /*display: flex;
    flex-direction: row;
    height: 38rem;
    margin-left: 25rem;
    margin-bottom: 20rem;
    padding-top: 10rem;*/
    /*object-position: right 150 px;
    position: absolute;
    top: 10px;
    right: 50px;*/
    z-index:2;
    position: absolute; /* Positionne l'image de la fumée par-dessus la lampe */
    top: -72px; /* Alignement avec la lampe */
    right: -220px; /* Alignement avec la lampe */
    opacity: 1; /* Cache la fumée par défaut */
    transition: opacity 0.3s ease; /* Transition douce pour l'apparition */
}

.genie{
    /*display: flex;
    flex-direction: row;*/
    transform: scaleX(-1);
    z-index:1;
    /*object-fit: none;
    object-position: right top;*/
    position: absolute;/* Positionne l'image du génie par-dessus la lampe */
    top: 0; /* Alignement avec la lampe */
    right: -322px; /* Alignement avec la lampe */
    opacity: 0; /* Cache le génie par défaut */
    /*animation: appear 5s forwards; /* Applique l'animation d'apparition */
    transition: opacity 0.3s ease; /* Transition douce pour l'apparition */
}

/*.rectangle {
    width  : 28rem;
    height : 40rem;
    background : green;
    margin-left: 9rem;
    margin-top: 63.5rem;
  }*/


.lampe:hover + .fumee {
    opacity: 0; /* Montre la fumée au survol de la lampe */
    animation: desappear 5s forwards;
}

@keyframes desappear {
    from {
        opacity: 1; /* Commence invisible */
    }
    to {
        opacity: 0; /* Devient visible */
    }
}

.lampe:hover + .fumee + .genie {
    opacity: 1; /* Montre le génie au survol de la lampe */
    animation: appear 5s forwards; /* Applique l'animation d'apparition */
}

@keyframes appear {
    from {
        opacity: 0; /* Commence invisible */
    }
    to {
        opacity: 1; /* Devient visible */
       
    }
}



.night-sky {
    position: relative;
    width: 100%;
    height: 100%;
}

.star {
    position: absolute;
    width: 2px;
    height: 2px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 0 10px white;
}

/* Positionne les étoiles aléatoirement */
.star:nth-child(1) { top: 20%; left: 30%; }
.star:nth-child(2) { top: 50%; left: 70%; }
.star:nth-child(3) { top: 15%; left: 80%; }
.star:nth-child(4) { top: 70%; left: 40%; }
.star:nth-child(5) { top: 40%; left: 10%; }
.star:nth-child(6) { top: 30%; left: 50%; }
.star:nth-child(7) { top: 60%; left: 20%; }
.star:nth-child(8) { top: 80%; left: 60%; }
.star:nth-child(9) { top: 10%; left: 15%; }
.star:nth-child(10) { top: 25%; left: 25%; }
.star:nth-child(11) { top: 35%; left: 45%; }
.star:nth-child(12) { top: 45%; left: 55%; }
.star:nth-child(13) { top: 55%; left: 65%; }
.star:nth-child(14) { top: 65%; left: 35%; }
.star:nth-child(15) { top: 75%; left: 75%; }
.star:nth-child(16) { top: 20%; left: 75%; }
.star:nth-child(17) { top: 50%; left: 70%; }
.star:nth-child(18) { top: 15%; left: 25%; }
.star:nth-child(19) { top: 70%; left: 15%; }
.star:nth-child(20) { top: 40%; left: 50%; }
.star:nth-child(21) { top: 30%; left: 20%; }
.star:nth-child(22) { top: 60%; left: 60%; }
.star:nth-child(23) { top: 80%; left: 55%; }
.star:nth-child(24) { top: 10%; left: 40%; }
.star:nth-child(25) { top: 25%; left: 45%; }
.star:nth-child(26) { top: 35%; left: 80%; }
.star:nth-child(27) { top: 45%; left: 10%; }
.star:nth-child(28) { top: 55%; left: 35%; }
.star:nth-child(29) { top: 65%; left: 65%; }
.star:nth-child(30) { top: 75%; left: 30%; }
.star:nth-child(31) { top: 20%; left: 90%; }
.star:nth-child(32) { top: 30%; left: 95%; }
.star:nth-child(33) { top: 50%; left: 90%; }
.star:nth-child(34) { top: 60%; left: 95%; }
.star:nth-child(35) { top: 10%; left: 5%; }
.star:nth-child(36) { top: 40%; left: 5%; }
.star:nth-child(37) { top: 70%; left: 90%; }
.star:nth-child(38) { top: 90%; left: 95%; }
.star:nth-child(39) { top: 60%; left: 5%; }
.star:nth-child(40) { top: 45%; left: 30%; }
.star:nth-child(41) { top: 90%; left: 5%; }
.star:nth-child(42) { top: 80%; left: 10%; }
.star:nth-child(43) { top: 85%; left: 15%; }
.star:nth-child(44) { top: 75%; left: 20%; }
.star:nth-child(45) { top: 85%; left: 25%; }
.star:nth-child(46) { top: 90%; left: 30%; }
.star:nth-child(47) { top: 80%; left: 35%; }
.star:nth-child(48) { top: 90%; left: 40%; }
.star:nth-child(49) { top: 85%; left: 50%; }
.star:nth-child(50) { top: 75%; left: 60%; }


/* Étoile filante */
.shooting-star {
    position: absolute;
    width: 10px;
    height: 2px;
    background: white;
    top: 10%;
    right: 80%;
    transform: rotate(180deg); /* Inclinaison de l'étoile filante */
    opacity: 0;
    animation: shoot 1s forwards;
}

/* Animation de l'étoile filante */
@keyframes shoot {
    0% {
        transform: translate(0, 0) rotate(30deg);
        opacity: 1;
    }
    100% {
        transform: translate(300px, 100px) rotate(30deg);
        opacity: 0;
    }
}

/* Animation de l'apparition */
@keyframes appear {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

/* Déclenche l'étoile filante après un certain temps */
body:after {
    content: '';
    position: absolute;
    top: 20%;
    left: 50%;
    animation: appear 1s forwards 2s; /* Apparition après 2 secondes */
}

.slogan{
    color:rgb(245, 131, 24);
    font-size: 40px;
    font-style: italic;
}
.wishes {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    padding-top: 50px;
    /*align-content: space-between;*/
    /*gap: 20px;*/
}
textarea {
    width: 500px; /* Prend toute la largeur disponible */
    height: 80px; /* Hauteur du champ */
    margin-top: 10px; /* Espacement au-dessus du bouton */
    padding: 10px; /* Espacement interne */
    border: 1px solid #000000; /* Bordure */
    border-radius: 5px; /* Coins arrondis */
}

button {
    width: 150px; /* Prend toute la largeur disponible */
    height: 40px; /* Hauteur du champ */
    margin-top: 40px; /* Espacement au-dessus du bouton */
    padding: 5px 15px; /* Espacement interne du bouton */
    background-color: rgb(245, 131, 24); /* Couleur de fond */
    color: rgb(3, 9, 59); /* Couleur du texte */
    font-weight: bolder;
    font-size: 18px;
    border: 1px solid #000000; /* Pas de bordure */
    border-radius: 5px; /* Coins arrondis */
    cursor: pointer; /* Curseur en forme de main */
}

.message{
    display: flex;
    flex-direction: row;
    justify-content: space-beetween;
    gap: 10px;
}

.wishMessage{
    /*display: flex;
    flex-direction: column;
    align-items: center; */
    margin-top: 100px; 
    text-align: center;  
    color:rgb(255, 255, 255);
    font-size: 40px;
    
}

.firstMessage {
    margin: 0;              /* Supprime l'espace par défaut entre les paragraphes */
    padding: 0;             /* Supprime les marges internes (optionnel) */
    line-height: 0.5;       /* Réduit l'espace entre les lignes de texte dans chaque <p> */
    text-align: center;     /* Centre le texte horizontalement */
  }

.secondMessage{
    margin: 0;             
    padding: 0;             
    line-height: 4;         
    text-align: center;  
}

.photo{
    display: block; 
    height:18rem;
    margin-left: 30rem;
    margin-top: 5rem;
    flex:0.5;
}