/* Css */

*, *::before, *::after { box-sizing: border-box; } 
body { line-height: 1.45; -webkit-font-smoothing: antialiased; } img, picture, video, canvas, svg { display: block; height: auto; max-width: 100%; } input, button, textarea, select { font: inherit; margin: 0; } iframe { border: 0; }


html, body {
  height: 100%;
}
body {
  margin-left: 0;
  overflow: hidden;
  background: #5200aa;
  background-image: url(images/diagonal-pattern.png); }



main {
  overflow: hidden;
  overflow-x: scroll;
  display: flex;
}
article {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100dvh;
  min-width: 100vw; 
  position: relative;
  z-index: 1;
  color: white;
  font-family: "Insolente";
background-size: contain; 
background-repeat: no-repeat;
background-position: center;
}
section {
  position: fixed;
  height: 100dvh;
  top: 0;
  left: 0;
  transform: translateX(calc( var(--scroll,0) * var(--speed) * -1px));
  width: calc(var(--width) * 1px);
}


nav {
  position: fixed;
  z-index: 1;
  top: 0; 
  left: 0;
  width: 100vw;
  display: flex;
  justify-content: space-between;
  gap: .5em;
  background-color: rgb(202, 245, 139);
  padding: .5em ;
}

path {
  fill: none;
  stroke-width: 2px;
  stroke-linecap: round; 
  stroke-linejoin: round;
}
nav a {
  font-family: "Insolente";
  font-size: 2em;
  line-height: 1;
  color: white;
  text-decoration: none;
}


article p {
  font-size: 3.25vmax;
  line-height: 1.2;
  max-width: 35ch;
}

time {
  display: block;
  letter-spacing: .1em;
}

@font-face {
  font-family: "Insolente";
  src: url("fonts/Insolente-Regular.woff2") format("woff2");
  src: url("fonts/Insolente-Regular.woff") format("woff"); 
}

#a1{
background-image: url(images/monstre1.png);
width: 30%;

}

#a2{
background-image: url(images/monstre2.png);


}

#a3{
background-image: url(images/monstre3.png);


}

#a4{
background-image: url(images/monstre4.png);

}

#a5{
background-image: url(images/monstre5.png)


}

#a6{
background-image: url(images/monstre6.png);
}

#a7{
background-image: url(images/monstre7.png);
}

#a8{
background-image: url(images/monstre8.png);

}

#a9{
background-image: url(images/monstre9.png);
}

#a10{
background-image: url(images/monstre10.png);
}

#a11{
background-image: url(images/monstre11.png);
}

#a12{
background-image: url(images/monstre12.png);
}

#a13{
background-image: url(images/monstre13.png);

}

#a14{
background-image: url(images/monstre14.png);
}

#a15{
background-image: url(images/monstre15.png);
}

#a16{
background-image: url(images/monstre16png.png);
}

#a17{
background-image: url(images/monstre17.png);
}

#a18{
background-image: url(images/monstre18.png);
}

#a19{
background-image: url(images/monstre19.png);
}

#a20{
background-image: url(images/monstre20.png);
}

#a21{
background-image: url(images/monstre21.png);
}

#a22{
background-image: url(images/monstre22.png);
}

#a23{
background-image: url(images/monstre23.png);
}

#a24{
background-image: url(images/monstre24.png);
}

#a25{
background-image: url(images/monstre25.png);
}

#a26{
background-image: url(images/monstre26.png);
}

#a27{
background-image: url(images/monstre27.png);
}

#a28{
background-image: url(images/monstre28.png);
}

#a29{
background-image: url(images/monstre29.png);
}

#a30{
background-image: url(images/monstre30.png);
}

#a31{
background-image: url(images/monstre31.png);
}

#a32{
background-image: url(images/monstre32.png);
}