body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  min-height: 100vh;
  margin: 0;

  color: white;

  background-image: url("asset/pictures/background black.jpg");
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;

  position: relative;
}

/* IMAGE */
h1 img {
  width: min(220px, 35vw);
  height: auto;
  max-width: 100%;

  margin-top: 0px;

  border-radius: 10px;

  position: absolute;
  z-index: 2;
  top: 5%;
  left: 44.4%;
  
}

/* TEXTE */
p {
  width: min(400px, 60vw);

  font-size: 19px;
  line-height: 1.7;

  position: relative;
  z-index: 2;
  top: 50px;
}

/* BOITE NOIRE */
.rectangle {
  width: 460px;
  height: 650px;

  background: #020011;

  border-radius: 15px;

  position: absolute;

  top: 50%;
  left: 50%;

  transform: translate(-50%, -50%);

  z-index: 1;

  box-shadow: 0 6px 18px rgba(0,0,0,0.2);
}

/* LIENS */
h1 a,
h2 a,
h3 a {
  position: absolute;

  left: 10px;

  padding: 10px 15px;

  font-size: 18px;
  font-weight: normal;

  color: white;
}

h3 a {
  top: 350px;
}

a {
  top: 400px;
}

h2 a {
  top: 450px;
}

h4 {
  position: absolute;

  left: 40%;
  top: 60%;

  display: flex;
  flex-direction: column;

  gap: 10px;

  z-index: 2;
}

h4 a {
  color: white;

  font-size: 18px;
  font-weight: normal;

  
  text-decoration: underline;
}

a {
  transition: opacity 0.2s;
}

a:active {
  opacity: 0.5;
}