.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: #fef8f8; /* Ajoutez une couleur de fond à votre barre de navigation */
  z-index: 1000; /* Assurez-vous que la barre de navigation est au-dessus du reste du contenu */
}

.navbar ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.navbar li {
  display: inline-block;
}

.navbar a {
  display: block;
  color: #424040b0;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-weight: bold !important;
  font-family: 'Courier Prime';
  font-size: 16px;
}

.navbar a:hover {
  color: rgba(112, 214, 81, 0.596);
}

.main {
  margin-top: 60px; /* Ajustez cette valeur pour compenser la hauteur de votre barre de navigation */
}

/* Pour les écrans de bureau */
@media only screen and (min-width: 768px) {
  .navbar {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: #fef8f8; /* Ajoutez une couleur de fond à votre barre de navigation */
    z-index: 1000; /* Assurez-vous que la barre de navigation est au-dessus du reste du contenu */
  }

  .main {
    margin-top: 60px; /* Ajustez cette valeur pour compenser la hauteur de votre barre de navigation */
  }
}

/* Pour les appareils mobiles */
@media only screen and (max-width: 767px) {
  .navbar {
    position: static; /* La barre de navigation n'est pas fixe sur les appareils mobiles */
  }

  .main {
    margin-top: 0; /* Aucun besoin de compenser la barre de navigation sur les appareils mobiles */
  }
}

.navbar ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.navbar li {
  display: inline-block;
}

.navbar a {
  display: block;
  color: #424040b0;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-weight: bold !important;
  font-family: 'Courier Prime';
  font-size: 16px;
}

.navbar a:hover {
  color: rgba(112, 214, 81, 0.596);
}