html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: 'special', sans-serif;
}

body {
  position: relative;
  z-index: 0;
  overflow: hidden;
}

body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('images/nuit 2.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: -1;
}

@font-face {
  font-family: 'special';
  src: url('Special/SpecialGothicCondensedOne-Regular.ttf') format('truetype');
}

main {
  position: relative;
  width: 90%;
  height: 90%;
}

/* Image + Texte */
img, p {
  position: absolute;
  transition: opacity 0.5s ease;
  max-width: 240px;
  color: #ad9088;
  font-size: 1.2em;
  max-width: 40%;
}

.hidden {
  display: none;
}

/* Positionnement des éléments */
#image0 { 
  left: 20px; 
  top: 40px; 
}
#texte1 { 
  left: 460px; 
  top: 100px; 
}

#image1 { 
  right: 30px; 
  top: 100px; 
}
#texte2 { 
  right: -60px; 
  top: 100px; 
}

.symbol-button {
  position: fixed; /* On passe de absolute à fixed pour qu'elle reste toujours visible */
  bottom: 20px;
  right: 20px;
  font-size: 4.8em;; /* Tu peux ajuster la taille ici */
  color: rgb(149, 110, 31);
  background: none;
  border: none;
  text-decoration: none;
  cursor: pointer;
  z-index: 1000;
  transition: transform 0.3s ease, color 0.3s ease;
}

.symbol-button:hover {
  transform: scale(1.3) rotate(10deg);
  color: white;
}