:root {
    --fond1 : #30382e;
    --fond2 : #edf8ec;
    --texte1 : #edf8ec;
    --texte2 : #30382e;
    --accent1 : #47eb55;
    --accent2 : #f1ff33;
    --accent3 : #3db814;
    --accent4 : #becc00;

}

/* CSS reset to ensure consistent styling across browsers. */ * { box-sizing: border-box; margin: 0; padding: 0; } 

/* Styling for the body, which affects the entire page. */ 
body { 
    font-family: Tahoma,Verdana,sans-serif;
    background-color: var(--fond2);
    color: var(--texte2); 
    line-height: 1.6; 
}

ul {
    padding-left: 30px;
}

p {
    padding-bottom: 5px;
}

/* Styling for the header section. */ 
header { 
    background: var(--fond1); 
    color: var(--texte1);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
} 

header a {
    text-decoration: none;
    color: var(--texte1);
}

.en-tete {
    display: flex;
    align-items: center;
    padding-right: 10px;
}

.ananas {
    font-size: 50px;
    padding-left: 15px;
    padding-right: 15px;
}

.sommaire {
    display: flex;
    font-size: 20px;
    justify-self:right;
    flex-wrap: wrap;
    padding-right: 20px;
    padding-left: 5px;
}

.sommaire div {
    padding-left: 15px ;
    padding-right: 15px;
}

.sommaire a {
    color: var(--accent1);
}

.sommaire a:hover {
    color: var(--accent2)
}

main { 
    padding: 20px; 
    max-width: 960px;
    padding-bottom: 100px;
} 

main a {
    text-decoration: none;
    color: var(--accent3);
}

main a:hover {
    color: var(--accent4);
}

footer { 
    text-align: center; 
    padding: 10px; 
    background: var(--fond1); 
    color: var(--texte1); 
    position: fixed; 
    bottom: 0; 
    width: 100%; 
}