body {
  background: #2d3d51;
}

section {
  position: relative; /* Nécessaire pour positionner le pseudo-élément */
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
  overflow: hidden; /* Pour cacher le débordement si nécessaire */
}

section::before {
  content: "";
  position: absolute; /* Positionner le pseudo-élément */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("oxyzy.png");
  background-position: center;
  transition: opacity 2s ease; /* Transition pour l'opacité */
  opacity: 1; /* Opacité initiale */
  z-index: -1; /* Mettre le pseudo-élément derrière le contenu */
}

section.fade-out::before {
  opacity: 0; /* Opacité lorsque l'image est "disparue" */
}

#logo {
  position: relative; /* Position relative pour garantir qu'il reste au-dessus du pseudo-élément */
  z-index: 1; /* S'assurer qu'il est au-dessus de l'image de fond */
  width: 100%;
  height: 100%;
  background-image: url("oxyzy.png");
  background-repeat: no-repeat;
  background-position: center;
}

@media screen and (max-width: 750px) {
  section::before {
    background-image: url("oxyzy-small.png");
  }
  #logo {
    background-image: url("oxyzy-small.png");
  }
}