body {
   color: black; /* Changement de la couleur du texte */
   /* background-color: rgba(255, 255, 255, 0.5); /* Ajustez les valeurs RGBA selon vos besoins */
   margin: 0; /* Supprimez les marges par défaut */
   padding: 0; /* Supprimez les paddings par défaut */
}

h1 {
   text-align: center;
   font-size: xxx-large;
   color: #ffcc88; /* Couleur plus claire pour un meilleur contraste */
   text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.75); /* Ajout d'une ombre pour améliorer la lisibilité */
   position: fixed; /* Fixe le titre en haut de la page */
   top: 0;
   left: 0;
   width: 100%;
   background-color: rgba(255, 255, 255, 0.8); /* Ajoutez un fond pour le titre */
   z-index: 1000; /* Assurez-vous que le titre est au-dessus des autres éléments */
   padding: 10px 0; /* Ajoutez un peu de padding pour l'espacement */
}

.titre {
   border: solid 1px grey;
   border-collapse: collapse;
   text-align: center;
   vertical-align: middle;
   color: #ff7799; /* Couleur plus claire pour un meilleur contraste */
   font-size: large;
   font-weight: bold;
   text-shadow: 1px 1px 2px rgba(255, 255, 255, 1.0); /* Ajout d'une ombre pour améliorer la lisibilité */
}
.titre:hover {
  background-color: rgba(255, 255, 255, 0.1);
  transition: background-color 0.3s ease;
}

.content {
   margin-top: 100px; /* Ajoutez une marge supérieure pour éviter que le contenu ne soit caché derrière le titre */
   padding: 20px;
   text-shadow: 1px 1px 2px rgba(255, 255, 255, 1.0); /* Ajout d'une ombre pour améliorer la lisibilité */
   filter: invert(0); /* Inverser les couleurs */
}

/* Styles CSS interactifs */
a:hover, button:hover {
  transform: scale(1.05);
  transition: transform 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.fade-in {
  animation: fadeIn 1s ease-in;
}

/* Styles CSS responsifs */
@media (max-width: 768px) {
  h1 {
    font-size: xx-large;
  }
  
  nav ul {
    flex-direction: column;
    align-items: center;
  }
  
  nav li {
    margin: 10px 0;
  }
  
  main {
    padding: 10px;
    margin: 10px;
  }
}

/* Réglage de la transparence */
#transparencySlider {
    -webkit-appearance: none;
    width: 80%;
    max-width: 300px;
    height: 5px;
    border-radius: 5px;
    background: #d3d3d3;
    outline: none;
    opacity: 0.7;
    transition: opacity .2s;
}

#transparencySlider:hover {
    opacity: 1;
}

#transparencySlider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #ffcc88;
    cursor: pointer;
}

#transparencySlider::-moz-range-thumb {
    width: 20px;
    height: 12px;
    border-radius: 50%;
    background: #ffcc88;
    cursor: pointer;
}