body {
    background-image: url(image/fond8.png);
    background-repeat:no-repeat;
    background-size:cover;
    background-position-x:center;
    background-attachment: fixed;
}

@font-face {
 font-family: 'gensco';
 font-weight: 400; /* Graisse : regular */
 src: url('/font/webfontkit-20261021-061604/gensco-webfont.woff2') format('woff2');
}

header .credits {
  position: fixed;
  right: 1vw;
  top: 1vh;
  font-family: 'consolas';
  font-size: min(7px, 1.5vw);
  color: aliceblue;
  text-align: left;
}

h1{
    font-family: 'gensco';
    font-size: 45px;
    position: absolute;
    display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  top: 64vh;
  left: 15vw; 
  color: aliceblue;
}

h2{
    font-family: 'gensco';
    font-size: 75px;
    position: absolute;
    display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  top: calc(61vh + 5.5px);
  left: 17vw; 
  color: aliceblue;
}

.upper-right{
    position: fixed; /* Ancre le bloc par rapport à la fenêtre */
    top:2%;    /* 20px depuis le bas */
    right:2%;      /* 20px depuis la gauche */
    justify-items: right;
    text-align: right;
    max-width: 400px;
    padding: 15px;
    font-family: Gensco;
    color: aliceblue;

}

.upper-right a{
    font-size: 16px;
    font-family: Gensco;
    color: aliceblue;
    text-decoration: none;
}

.upper-right a:hover{
    filter: blur(1px);
    
}

footer ul {
  position: absolute;
  display:flex;
  justify-content: space-between;
  
  width: 93%;
  margin-left: 30px;
  padding: 0%;
  list-style: none;
  top: 93%;
}

footer li {
  margin-top: 10px;
  position: relative;
  overflow: hidden;  
  font-family: 'gensco';
  color: aliceblue;
  text-align: justify;
  text-justify: initial;
       
}

footer a {
  display: inline-block;
  position: relative;
  font-size: 16px;
  text-decoration: none;
   color: aliceblue ;
  transition: filter 0.3s ease, color 0.3s ease;
}

footer a:hover {
  filter: blur(1px);
  color: rgb(171, 189, 204);

}

.showimage1 nav{
  position: fixed;
  top: 10%;   /* Distance par rapport au haut de l'écran */
  left: -20px;  /* Distance par rapport à la gauche de l'écran */
  opacity: 0.05;
  visibility: visible;
  transition: opacity 0.3s ease, filter 0.3s, left 0.3s ease, visibility 0.3s ease;
  pointer-events: none; /* Empêche l'image de bloquer la souris */
  filter: blur(1px);
}

.showimage2 nav{
  position: fixed;
  top: 15%;   /* Distance par rapport au haut de l'écran */
  left: -20px;  /* Distance par rapport à la gauche de l'écran */
  opacity: 0.05;
  visibility: visible;
 transition: opacity 0.3s ease, filter 0.3s, left 0.3s ease, visibility 0.3s ease;
  pointer-events: none; /* Empêche l'image de bloquer la souris */
  filter: blur(1px);
}

.showimage3 nav{
  position: fixed;
  top: 20%;   /* Distance par rapport au haut de l'écran */
  left: -20px;  /* Distance par rapport à la gauche de l'écran */
  opacity: 0.05;
  visibility: visible;
transition: opacity 0.3s ease, filter 0.3s, left 0.3s ease, visibility 0.3s ease;
  pointer-events: none; /* Empêche l'image de bloquer la souris */
  filter: blur(1px);
}

.showimage4 nav{
  position: fixed;
  top: 25%;   /* Distance par rapport au haut de l'écran */
  left: -20px;  /* Distance par rapport à la gauche de l'écran */
  opacity: 0.05;
  visibility: visible;
transition: opacity 0.3s ease, filter 0.3s, left 0.3s ease, visibility 0.3s ease;
  pointer-events: none; /* Empêche l'image de bloquer la souris */
  filter: blur(1px);
}

img{
  width: 3%;
  border: 1px solid aliceblue;
  aspect-ratio: 4/3;
  object-fit: cover;
}

.showimage1:hover nav{
  opacity: 0.7;
  left: 1%;
  visibility: visible;
  transition: opacity 0.3s ease, filter 0.3s, left 0.3s ease, visibility 0.3s ease;
}

.showimage2:hover nav{
  opacity: 0.7;
  left: 1%;
  visibility: visible;
  transition: opacity 0.3s ease, filter 0.3s, left 0.3s ease, visibility 0.3s ease;
}

.showimage3:hover nav{
  opacity: 0.7;
  left: 1%;
  visibility: visible;
  transition: opacity 0.3s ease, filter 0.3s, left 0.3s ease, visibility 0.3s ease;
}

.showimage4:hover nav{
  opacity: 0.7;
  left: 1%;
  visibility: visible;
  transition: opacity 0.3s ease, filter 0.3s, left 0.3s ease, visibility 0.3s ease;
}