* {
    box-sizing: border-box; /* Assure que le padding et la bordure sont inclus dans la largeur totale */
}

html, body {
    height: 100%; /* Permet de remplir toute la hauteur de la fenêtre */
}

body {
    font-family: Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    background-image: url('images/background.png');
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: cover;
        background-position: center;
        display: flex; /* Utilisation de Flexbox */
        flex-direction: column; /* Orientation verticale */
}

header {
    background-color: rgba(0, 0, 0, 0.3);
    color: white;
    text-align: center;
    padding: 1em 0;
}

nav ul {
    list-style-type: none;
    padding: 0;
}

a {
    text-decoration: none; /* Supprime le soulignement */
    color: inherit; /* Prend la couleur du texte parent */
}

nav ul li {
    display: inline;
    margin-right: 1em;
}

.container {
    flex: 1; /* Permet au contenu principal de s'étendre */
}

img {
            max-width: 300px; /* Limite la largeur maximale de l'image à 300 pixels */
            max-height: 200px; /* Limite la hauteur maximale de l'image à 200 pixels */
            width: auto; /* Permet à l'image de garder son ratio */
            height: auto; /* Permet à l'image de garder son ratio */
            cursor: pointer; /* Change le curseur en main lors du survol */
        }
        
main {
    color: white;
    text-align: center;
    padding: 50px;
    }
    
footer {
    color: white;
    text-align: center;
    padding: 1em 0;
    background-color: rgba(0, 0, 0, 0.3);
}