/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

h1 {
    font-size: 100px;
     margin-top: -1px; /* <-- ajoute cette ligne pour remonter le titre */
}

p {
    font-size: 22px;
}

/* Corps de la page */
@font-face {
  font-family: "A Galega";
  src: url("fonts/a_galega.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

body {
  display: flex;
  justify-content: center; /* centre horizontalement */
  align-items: center;     /* centre verticalement */
  height: 100vh;           /* hauteur pleine fenêtre */
  margin: 0;
  padding: 0;
  text-align: center;      /* centre aussi le texte à l'intérieur */
  flex-direction: column;  /* pour que les éléments s'empilent verticalement */
  font-family: "A Galega", serif;
  font-weight: normal;
  font-style: normal;
  color: orange;
  background-color: black;
  overflow: hidden;
  position: relative;
}

/* Image de fond tournante */
.background-rotate {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 150vh;
  height: 150vh;
  background-image: url('7ecede541fba386464388119c38f0dcb.jpg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  transform: translate(-50%, -50%) rotate(0deg);
  animation: rotateBackground 90s linear infinite;
  z-index: 0;
  opacity: 0.7;         /* Optionnel : rend l'image un peu plus discrète */
  filter: blur(1px);    /* Optionnel : petit flou pour un effet doux */
}

/* Dégradé noir sur les bords */
body::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 120%;
  background: radial-gradient(
    ellipse at center,
    rgba(0, 0, 0, 0) 40%,
    rgba(0, 0, 0, 0.8) 150%
  );
  pointer-events: none;
  z-index: 1;
}

/* Le contenu texte reste au-dessus */
body *:not(.background-rotate) {
  position: relative;
  z-index: 2;
}

/* Animation de rotation */
@keyframes rotateBackground {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}