@import url("https://fonts.googleapis.com/css2?family=Metamorphous&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Koulen&display=swap");
body {
  background-image: url("../assets/Images_web/FondAccueilColor.jpg");
  background-size: cover;
  background-attachment: fixed;
  overflow: hidden;
  /* cursor: url('../assets/icon_site/light-saber.png'), auto; */
  position: relative;
}

body::after {
  content: "";
  display: block;
  height: 50%;
  width: 50%;
  background-color: rgb(0, 0, 0);

  border-radius: 50%;
  left: 10%;
  top: 10%;
  position: absolute;
  animation: Lumineux 4.1s ease-out forwards;
}

header {
  display: flex;
  justify-content: end;
  color: #831e08;
  font-family: "Metamorphous", serif;
  font-size: 25px;
  /* background-color: #fff; */
  height: 50vh;
}

.NomDuSite {
  display: flex;
  flex-direction: column;
  /* background-color: violet; */
  width: 50%;
  align-items: center;
  justify-content: center;
  height: 50%;
}

.NomDuSite p {
  transition: all 1s linear;
  color: #831e08;
  line-height: 1px;
  animation: fadeInAnimation 3.8s linear forwards;
}

.NomDuSite p:hover {
  color: wheat;
  transform: scaleX(1.05);
}

.Boutons {
  display: flex;
  justify-content: space-between;
  width: 90%;
  align-items: center;
  /* background-color: coral; */
  height: 20vh;
  animation: fadeInAnimation 3.7s linear forwards;
}

.Boutons a {
  display: flex;
  justify-content: center;
  /* background-color: #fff; */
  width: 20%;
  transition: all 0.6s ease;
  cursor: pointer;
  /* position: absolute; */
}

.Boutons a:hover {
  transform: scale(0.9);
}

.Boutons .LigneRouge {
  /* background-color: coral; */
  width: 50%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  transition: all 0.4s ease;
}

.Boutons .RedLine {
  /* display: flex; */
  /* background-color: #fff; */

  animation: fadeInAnimation 3.6s linear forwards;
  justify-content: center;
}
img {
  transition: all 1s linear;
  transform-origin: top;
  /* height: 20%;
  width: 30%; */
}
img:hover {
  transform: scale(0.5);
}

@keyframes fadeInAnimation {
  from {
    transform: scale(1.5);
    opacity: 0.5;
  }
  to {
    opacity: 1;
  }
}

@keyframes Lumineux {
  90% {
    transform: scale(100);
    opacity: 0.3;
  }
  100% {
    opacity: 0;
    left: 0;
    top: 0;
    position: absolute;
  }
}

footer {
  animation: fadeInAnimation 3.6s linear forwards;
  color: #831e08;
  /* background-color: #fff; */
  display: flex;
  justify-content: end;
  align-items: end;
  height: 29vh;
}

.Icons i {
  font-size: 40px;
  margin: 2px;
  transition: all 0.4s linear;
  cursor: pointer;
}

.Icons i:hover {
  color: wheat;
  transform: scale(1.05);
}