.accueil-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.accueil-img {
  background-image:
    linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.1)),
    url(../assets/images/Winter_2004_DreamHack_LAN_Party.jpg);

  background-size: cover;
  background-repeat: no-repeat;

  display: flex;
  align-items: flex-end;

  width: 80%;
  height: 70vh;

  border-radius: 20px;
  position: relative;
  overflow: hidden;

  box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, 0.15),
    inset 0 -80px 120px rgba(0, 0, 0, 0.45),
    0 0 30px rgba(0, 0, 0, 0.4);

  transition:
    transform 0.4s ease,
    box-shadow 0.4s ease;
}

/* .accueil-img:hover {
  transform: scale(1.01);

  box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, 0.2),
    inset 0 -100px 140px rgba(0, 0, 0, 0.55),
    0 0 40px rgba(0, 0, 0, 0.55);
} */
.accueil-text {
  display: flex;
  flex-direction: column;
  max-width: 650px;
  margin: 60px;
  z-index: 1;

  background-color: rgba(0, 0, 0, 0.35);
  border-radius: 16px;

  padding: 20px;
}
.accueil-text h1 {
  margin: 0 0 20px;
  font-size: 64px;
  line-height: 0.95;
  color: var(--primarycolor);
  background: linear-gradient(
    90deg,
    var(--primarycolor),
    var(--secondarycolor)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  background-clip: text;

  letter-spacing: -2px;
}
.accueil-text p {
  margin: 0 0 30px;
  max-width: 560px;
  color: var(--textcolor);
  font-size: 18px;
  line-height: 1.6;
}
.accueil-container a {
  margin-top: 100px;
  color: #ffffff;
  text-decoration: none;
  font-size: 18px;
  padding: 20px 20px;

  background:
    radial-gradient(circle at center, #acacac15, transparent 70%),
    var(--blackshade);

  border: 1px solid var(--bordercolor);
  border-radius: 20px;

  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);

  transition:
    background 0.8s ease,
    transform 0.8s ease;
}

.accueil-container a:hover {
  color: #ffffff;
  cursor: pointer;

  background:
    radial-gradient(circle at center, #acacac2c, transparent 80%),
    rgba(255, 255, 255, 0.12);

  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}

@media screen and (max-width: 1920px) {
  .accueil-img {
    width: 80%;
    height: 70vh;
  }
}
@media screen and (max-width: 1024px) {
  .accueil-img {
    width: 100%;
    height: 400px;
  }
}

@media screen and (max-width: 768px) {
  .accueil-img {
    width: 100%;
    height: 300px;
    border-radius: 15px;
  }

  .accueil-container a {
    margin-top: 40px;
    font-size: 16px;
    padding: 15px 20px;
  }
}

@media screen and (max-width: 480px) {
  .accueil-img {
    width: 100%;
    height: 200px;
    border-radius: 12px;
  }

  .accueil-container a {
    margin-top: 20px;
    font-size: 14px;
    padding: 12px 16px;
  }
}