body
{
margin: 0px;

}

#truc { position: absolute; top: 0px; width: 100%; height: 100%;
background-image: url("https://groupekevlar.com/images/nuage1.png");
background-repeat: repeat-y;
overflow-y: scroll;
overflow-x: hidden;
}


#titre {
position: absolute;
left: 290px;
top: 20px;
z-index: 3;
font-size: 50px;
font-family: Courier New;

text-align: center;
color: white;
text-transform:uppercase;
}

#decor
{
height: 11300px;
width: 100%;
background-image: url("https://media2.giphy.com/media/10Bb1Bq7BMi9Co/giphy.gif");
background-repeat: repeat-y;
background-position: 0% 0px;
z-index: 0;
}

#gars
{
position: absolute;
left: 230px;
top: 200px;
z-index: 2;
}

#gif1
{
position: absolute;
left: 260px;
top: 742px;
z-index: 1;
}

#gif1 img {width: 400px;}

(avec « img {width: 400px;} », j’impose à l’image une largeur qui n’est pas celle du fichier d’origine : ça permet de la réduire)

#pensees
{
position: absolute;
left: 60px;
top: 1500px;
z-index: 2;
}

#fille
{
position: absolute;
left: 230px;
top: 3500px;
z-index: 2;
}

#gif2
{
position: absolute;
left: 230px;
top: 4042px;
z-index: 1;
}

#gif2 img {width: 400px;}

#union
{
position: absolute;
left: 230px;
top: 5268px;
z-index: 2;
}

#gif3
{
position: absolute;
left: 230px;
top: 5268px;
z-index: 1;
}

#gif3 img {width: 469px;}

.mininuages img {width: 469px;}

#m1 {
position: absolute;
left: 230px;
top: 8668px;
z-index: 0;
}
#m2 {
position: absolute;
left: 230px;
top: 9568px;
z-index: 0;
}
#m3 {
position: absolute;
left: 230px;
top: 9660px;
z-index: 0;
}
#m4 {
position: absolute;
left: 230px;
top: 9800px;
z-index: 2;
}

#m5 {
position: absolute;
left: 230px;
top: 10050px;
z-index: 2;
}
#m6 {
position: absolute;
left: 230px;
top: 10100px;
z-index: 0;
}

#n2 {
position: absolute;
left: 510px;
top: 3100px;
z-index: 0;
}
#n3 {
position: absolute;
left: 30px;
top: 4700px;
z-index: 0;
}
#n4 {
position: absolute;
left: 220px;
top: 6300px;
z-index: 2;
}

#n5 {
position: absolute;
left: 230px;
top: 8000px;
z-index: 2;
}

#fin
{
position: absolute;
left: 230px;
top: 10400px;
text-align: center;
z-index: 2;
}

.bulles img {width: 469px;}

#b1 {
position: fixed;
left: 630px;
top: 100px;
z-index: 3;
visibility: hidden;
}

#b2 {
position: fixed;
left: 230px;
top: 50px;
z-index: 3;
visibility: hidden;
}
#b3 {
position: fixed;
left: 630px;
top: 100px;
z-index: 3;
visibility: hidden;
}
#b4 {
position: fixed;
left: 230px;
top: 100px;
z-index: 3;
visibility: hidden;
}

#generique {
position: absolute;
left: 360px;
top: 11000px;
z-index: 3;
font-size: 30px;
font-family: Courier New;
text-align: center;
color: white;
}