html,body{
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: #5c8928;
    z-index: -2;
}
@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');


.background-section {

    background-image: url("../img/landscape-1844227_1920.png");
    background-size: cover; /* Ajuste la taille de l'image pour couvrir la section */
    background-repeat: no-repeat;
    background-position: center; /* Centre l'image de fond */
    /* Autres propriétés de style pour la section */
    width: 100%;
    height: 100vh; /* Utilisation de la hauteur de la fenêtre du navigateur */
    position: absolute; /* Place l'arrière-plan en position absolue */
    z-index: -1; /* Met l'arrière-plan en arrière-plan par rapport aux autres éléments */
}
.content-wrapper {
    position: relative; /* Crée un contexte de positionnement pour les éléments enfants */
}
.main-content {
    /* Votre contenu principal ici */
    flex: 1;
}
/* Style pour le hover du bouton de la navbar*/
.btnnavbar:hover {
    background-color: lightblue; /* Nouvelle couleur de fond au survol */
    color: navy; /* Nouvelle couleur du texte au survol */
}
.bottom-section {
  padding: 10px; /* Espace intérieur pour les éléments */
  width: 100%;
  position: relative; /* Reste en bas du parent (content-wrapper) */
  margin-top: auto; /* Place l'élément en haut de l'espace restant */
  z-index: 1; /* Place la section au-dessus de l'arrière-plan si nécessaire */

}
.parchment {
  position: relative;
  width: 80%; /* Ajustez la largeur selon vos besoins */
  /*height: 50vh; /* Ajustez la hauteur selon vos besoins */
  max-width: 300px; /* Largeur maximale pour les grands écrans */
  /*max-height: 400px; /* Hauteur maximale pour les grands écrans */
  background-color: rgb(255, 255, 240);
  border: 2px solid #d2b48c; /* Couleur de la bordure */
  border-radius: 20px; /* Arrondi des coins */
  overflow: hidden;
  margin-top: 10px; /* Ajoute un espace au-dessus de la div parchment */
  font-family: 'Lobster', cursive;
}

.parchment::before,
.parchment::after {
  content: '';
  position: absolute;
  width: 50%; /* Largeur de la partie supérieure et inférieure du parchemin */
  height: 5%; /* Hauteur de la partie supérieure et inférieure du parchemin */
  background-color: #fff; /* Couleur de la partie supérieure et inférieure */
  z-index: 1; /* Place les pseudo-éléments au-dessus du contenu */
}

.parchment::before {
  top: -2.5%; /* Position de la partie supérieure */
  left: 25%; /* Ajustement de la position horizontale */
  border-bottom: 2px solid #d2b48c; /* Bordure de la partie supérieure */
  transform: rotate(-4deg); /* Rotation pour donner l'effet de parchemin */
}

.parchment::after {
  bottom: -2.5%; /* Position de la partie inférieure */
  right: 25%; /* Ajustement de la position horizontale */
  border-top: 2px solid #d2b48c; /* Bordure de la partie inférieure */
  transform: rotate(4deg); /* Rotation pour donner l'effet de parchemin */
}

.modal-content {
  background: linear-gradient(135deg, #55b1b9, #79c8cd, #3c8c92);
color: white;
}