/* Mon CSS perso */

.strophe {
    text-align: center;  /* Le texte sera aligné au centre */
    color: #ff1be3;  /* Le texte est en bleu */
}

.surligner {
    color: #3e1bff;  /* Le texte est en rouge */
    font-weight: bold;  /* La police est en gras */
}

.poeme {
    margin: 0 auto;  /* Centrage horizontal automatique */
    padding: 15px 10px 15px 25px;  /* Marges intérieures : haut, droite, bas puis gauche */
    width: 68%;  /* Largeur du bloc 70% de la page */
    background-color: #deccd7;  /* Couleur de fond arbitraire pour mieux voir le bloc */
}

.liens {
    display: inline-block;  /* Affiche les liens comme des blocs en ligne */
    padding: 15px 10px 15px 25px;  /* Marges intérieures : haut, droite, bas puis gauche */
    width: 30%;  /* Largeur du bloc 30% de la page */
    background-color: #c0deb1;  /* Couleur de fond arbitraire pour mieux voir le bloc */
    text-align: center;  /* Centrer les liens à l'intérieur */
}

.entete {
    padding: 15px 10px 15px 25px;  /* Marges intérieures : haut, droite, bas puis gauche */
    width: 100%;  /* Largeur du bloc 100% de la page */
    background-color: #e0c272;  /* Couleur de fond arbitraire pour mieux voir le bloc */
}

body {
    background-image: url("fourmi.jpg");  /* Image de fond */
    background-size: cover;  /* Couvre toute la page */
    background-position: center;  /* Centre l'image de fond */
    text-align: center;  /* Centrer tout le texte par défaut */
}

h1 {
    font-family: Rubik;  /* Police générique ressemblant à Times New Roman */
    color: #8adca0;  /* Couleur des caractères */
    font-size: 22px;  /* Taille en pixel */
    text-align: center;  /* Alignement du texte */
    font-weight: 800;  /* « Graisse » des caractères : donne des caractères gras */
    font-style: italic;  /* Style en italique */
    text-decoration: underline;  /* Souligné */
    background-color: azure;  /* Définition de la couleur du fond */
}

/* Centrer les images */
img {
    display: block;  /* Faire des images des blocs */
    margin: 0 auto;  /* Centrer l'image */
    max-width: 100%;  /* Ne pas dépasser la taille du conteneur */
}

/* Positionner le lien à gauche */
.lien-gauche {
    float: left;
    padding: 15px;
}

/* Positionner le lien à droite */
.lien-droite {
    float: right;
    padding: 15px;
}

/* Div pour les images (corbeau et renard) */
.images-container {
    display: flex;
    justify-content: space-between;  /* Espace entre les images */
    margin: 20px 0;
}

.images-container img {
    max-width: 45%;  /* Limiter la taille des images */
    border: 2px solid #333;  /* Bordure autour des images */
}

body {
   background-image: url('foret.jpg');  /* Remplace 'arbres.jpg' par le nom de ton image */
   background-size: cover;  /* L'image couvre toute la page */
   background-position: center;  /* Centre l'image */
   background-attachment: fixed;  /* L'image reste fixe pendant le défilement */
}