Adaptation de la taille des éléments

Bonjour,
j'aimerais faire que mon site web s'adapte à la taille de la fenêtre, j'ai pas trouvé grand chose à ce sujet, je trouve ça étrange. Tout ce que je voyais à ce sujet me disait de mettre tout les pixels en % mais ça n'a par marché.

voici mon scipt pour que vous puissiez me dire si il y a un problème et comment faire pour que la taille de la page s'adapte à la fenêtre.

<html>
    <head lang="fr">
        <meta charset="utf-8" />
        <link rel="stylesheet" href="style.css" />
        <title>forêt amazonienne</title>   
    </head>
    <body class="body">
        <h1 class="titre">Forêt Amazonienne</h1>
        <a href="souspages/foret.html"><img src="images/foret.jpg" alt="image de forêt" class="foret"  /> </a>
        <a href="souspages/enjeux.html"><img src="images/enjeux.jpg" alt="image des enjeux" class="enjeux"  /> </a>
        <p class ="quoi">C'est quoi?</p>
        <p class ="enjeu">Les enjeux</p>
        <a href="souspages/enjeux.html"></a>
    </body>
</html>

.body {
    background-image: url(images/background.jpg);
    background-color: #ffffff;
    background-position:center center;
    background-size: 100%;

}   
.titre {
    color:darkgreen;
    position: absolute;
    top: 9%;
    font-size: 400%;
}
.titre2 {
    color:green;
    position: absolute;
    top: 10px;
    left: 80px;
    font-size: 60px;
}
.foret {
    width: 300px;
	height: 200px;
    position: absolute;
    bottom: 20%;
    left: 20%;
    border-radius: 10px;
}
.enjeux {
    width: 312px;
	height: 200px;
    position: absolute;
    bottom: 20%;
    right: 20%;
    border-radius: 10px;
}
.quoi {
    font-size: 40px;
    position: absolute;
    bottom: 8%;
    left: 20%;
}
.enjeu {
    font-size: 40px;
    position: absolute;
    bottom: 8%;
    right: 30%;
}
.body2 {
    background-color: #d1d1d1;
}
.p2 {
    font-size: 30px;
    position: absolute;
    top: 150px;
}
.retour {
    background-color: #888888;
    border-radius: 10px;
    color: white;
    padding: 20px 28px;
    text-decoration: none;
    display: inline-block;
    position : absolute;
    bottom: 20;
    left: 20;
}
.sirene {
    width: 400px;
	height: 566px;
    position: absolute;
    bottom: 10px;
    right: 10px;
    border-radius: 10px;
}

vous allez pouvoir voir que j'ai remplacé le début des pixel avec des % mais ça n'a rien changé.
merci de m'avoir lu.