body {

    background: rgb(0, 0, 0);
    background-size: cover;
    position: relative;
    height: 2000px;
    
  
  }
  
  
  p {
    font-family: Arial, Helvetica, sans-serif;
    color: #000000;
    font-size: 14px;
    margin: 0;
    padding: 0;
  }

  p2  {
    font-family:'Courier New', Courier, monospace;
    color: #000000;
    font-size: 14px
  }

  p3  {
    font-family:'Courier New', Courier, monospace;
    color: #ffffff;
    font-size: 15px;
  }
  
  
  a {
    font-family: 'Courier New', Courier, monospace;
    font-size: 16px;
    color: #31a499;
    font-weight: 600;
  }

  a:hover {
    color: #7631a4;
    font-style: italic;
    text-shadow: 0 0 5px rgb(255, 212, 81);
    box-shadow: inset 0 -0.5em 0 rgb(211, 206, 246);

  }
  
  h1 {
    font-family: Arial, sans-serif;
    color: #000000;
    font-size: 17px;
    margin: 0;
    padding: 0;
  }
  
  
  h2 {
    font-family: Arial, sans-serif;
    color: #31a499;
  }
  
  h3 {
    font-family: Arial, sans-serif;
    font-size: 25px;
    color: #ffffff;
  }
  
  h4 {
    font-family: Arial, sans-serif;
    color: #7678c4;
    font-size: 17px; 
    margin: 0;
    padding: 0;
  }
  
  h5 {
    font-family: Arial, sans-serif;
    color: #ff8ea3;
  }

  h6 {
    font-family: Arial, sans-serif;
    color: #be0000;
    font-size: 12px;
    margin: 0;
    padding: 0;
    font-weight: normal; /* facultatif, pour un rendu plus léger */
  }

  h7 {
    font-family: Arial, Helvetica, sans-serif;
    color: #ffffff;
    font-size: 14px;
    margin: 0;
    padding: 0;
    font-weight: 100;
  }
  




.main {
  position: absolute;
  width: 900px;
  height: 2000px;
  left: 500px;
  top: 100px;
  background-image: url('dossier-images/papier-rose-vieux.png');
  background-size: 50%;
}

.colonne-gauche-1  {
  position: absolute;
  width: 300px;
  height: 1600px;
  left: 200px;
  top: 100px;
  background-image: url('dossier-images/papier-orange-terne.png');
  background-size: 50%;
}

.img-menu  {
  position: absolute;
  width: 150px;
  height: auto;
  left: 260px;
  top: 150px;
  z-index: 50;
}

.img-menu:hover  {
  transform: scale(1.05);
}

.img-crowd:hover {
  transform: scale(1.05);
}



.img-titre {
  position: absolute;
  width: 270px;
  height: auto;
  left: 200px;
  top: 130px;
  z-index: 100;
}





#chat-container {
  position: absolute;
  width: 20vw;
  height: 50vh;
  left: 5px;
  top: 920px;
  background-color: white;
  background-size: cover;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
}

#chat-box {
  flex-grow: 1;
  padding: 20px;
  overflow-y: scroll;
  background-image: url('dossier-images/stripespurple.jpg');
  background-size: cover;
  border-bottom: 2px solid #e0e0e0;
}

#user-name, #user-input {
  padding: 10px;
  margin: 0px 0;
  border: none;
  font-size: 16px;
  width: 18.5vw;
  font-family:'Courier New', Courier, monospace;
}

#send-button {
  position: absolute;
  top: 43vh;
  padding: 10px;
  left: 27vh;
  background-color: #c4e9d7;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  z-index: 10;
  font-family:'Courier New', Courier, monospace;
}

#send-button:hover {
  background-color: #7dc181;
}

.message {
  margin-bottom: 10px;
  padding: 8px;
  border-radius: 5px;
  background-color: #ffffff7a;
  max-width: 80%;
  font-family:'Courier New', Courier, monospace;
}

.message.user {
  background-color: #e3bfe9;
  align-self: flex-end;
  font-family:'Courier New', Courier, monospace;
}

.message .name {
  font-weight: bold;
  margin-right: 5px;
  font-family:'Courier New', Courier, monospace;
}


/* Style pour le bouton de suppression */
.delete-button {
  background-color: rgb(255, 255, 255);
  color: rgb(255, 110, 146);
  border: none;
  border: solid rgb(255, 234, 234);
  padding: 5px;
  font-size: 12px;
  cursor: pointer;
  margin-left: 10px;
  border-radius: 5px;
  font-family:'Courier New', Courier, monospace;
  align-self: left;
}

.delete-button:hover {
  background-color: rgb(255, 169, 175);
}







.img-pumpkins-home:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 20px rgba(255, 255, 255, 0.457);
}






.happy-automne {
  position: absolute;
  width : 500px;
  height : 350px;
  top: 1350px;
  left: -350px;
  z-index: 20;
  background-image: url('dossier-images/papier-rose-vieux.png');
  background-size: cover;
  overflow: auto;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.361);
}




.box-fanpage-fanarts {
  position: absolute;
  width : 290px;
  height : 400px;
  top: 600px;
  left: 205px;
  z-index: 20;
  background-image: url('dossier-images/papier-rose-vieux.png');
  background-size: cover;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.361);
}




.box-fanpage-inconnue {
  position: absolute;
  width : 700px;
  height : 500px;
  top: 300px;
  left: 150px;
  z-index: 0;
  background-image: url('dossier-images/papier-orange-terne.png');
  background-size: 100%;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.361);
  z-index: 40;
}

.box-fanpage-jsp {
  position: absolute;
  width : 700px;
  height : 500px;
  top: 0px;
  left: 0px;
  z-index: 0;
  overflow: auto;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.361);
}


.text-box {
  position: absolute;
  width : 650px;
  height : 400px;
  z-index: 5;
  left: 20px;
  top: 220px;
}




.img-perso-box {
  position: absolute;
  width : 250px;
  height : auto;
  z-index: 5;
  left: 400px;
  top: 50px;
}


.img-titre-box {
  position: absolute;
  width : 400px;
  height : auto;
  z-index: 5;
  left: 0px;
  top: 0px;
}


.img-trela-luna {
  position: relative;
  width : 690px;
  height : auto;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.361);
  top: 300px;
  left: 5px;
  z-index: 3;
}

.img-coeur {
  position: absolute;
  width : 900px;
  height : auto;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.361);
  top: 0px;
  left: 0px;
  z-index: 0;
}

.img-arbre-top-gauche {
  position: absolute;
  width : 300px;
  height : 430px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.361);
  top: 0px;
  left: 0px;
  z-index: 0;
}






.pois-rose-fond {
  position: absolute;
  width : 900px;
  height : 200px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.361);
  top: 700px;
  left: 0px;
  z-index: 0;
  background-image: url('dossier-images/poisrosespetits.png');
  background-size: 100%;
}


.chambre-fond {
  position: absolute;
  width : 900px;
  height : 670px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.361);
  top: 1400px;
  left: 0px;
  z-index: 0;
  background-image: url('dossier-images/papier-orange-terne.png');
  background-size: 100%;
}





.img-costumes {
  position: absolute;
  width : 280px;
  height : auto;
 top: 0px;
  left: 0px;
  z-index: 0;
}


.img-premo-trans-middle {
  position: absolute;
  width : 900px;
  height : auto;
  top: 780px;
  left: 0px;
  z-index: 0;
}

.decor-fond-bande-multi {
  position: absolute;
  width : 900px;
  height : auto;
  top: 100px;
  left: 500px;
  z-index: 0;
}

.img-scene-1 {
  position: relative;
  width : 500px;
  height : auto;
  z-index: 0;
}

.img-scene-2 {
  position: relative;
  width : 500px;
  height : auto;
  z-index: 0;
}