:root{
    --facteur-echelle: 1.125;
    --font-size: 18px;
    --petit-texte: var(--font-size);
    --tres-petit-texte: calc(var(--petit-texte) / var(--facteur-echelle));
    --texte-moyen: calc(var(--petit-texte) * var(--facteur-echelle));
    --gros-texte: calc(var(--texte-moyen) * var(--facteur-echelle));
    --tres-gros-texte: calc(var(--gros-texte) * var(--facteur-echelle));

    --vert-sombre:#386641;
    --vert-de-pousse:#69974e;
    --vert-lime:#a6c856;
    --beige:#f2e8cf;
    --rouge-sang:#bd4749;

    --largeur-case:5vw;
    --hauteur-case:5vw;
    --largeur-contenantPersonnage:70vw;
    --hauteur-contenantPersonnage:30vh;
  
}
body {
    background-color: var(--beige);
    font-family: Georgia, 'Times New Roman', Times, serif;
    color: var(--vert-sombre);
    margin:0;
}
hr{
    color: var(--vert-sombre)
}
nav{
    display: flex;
    justify-content: center;
   
}
.actuel{
    border-bottom: #386641 2px solid;
}
a{
    color: var(--vert-sombre);
    text-decoration: none;
    margin-right:20px;
}
.caseAvenir {
    display: flex;
    font-size: 32px;
    align-items: center;
    color: var(--vert-sombre);
    justify-content: space-evenly;
    border-radius: 10px;
    border: var(--vert-sombre) 2px solid;
    width: 100px;
    height: 100px;
    background-color: var(--vert-lime);
    
}   

.ContenantPersonnages {
    display: flex;
    gap:10vw;
    margin-left: auto;
    margin-right: auto;
    width: var(--largeur-contenantPersonnage);
    height:var(--hauteur-contenantPersonnage);
    justify-content: center;
    background-color: var(--vert-de-pousse);
    border-radius: 10px;
    border: var(--vert-sombre) 2px solid;
    margin-top: 3vh;
}
.logo{
    text-align: center;
}
p {
    font-size: var(--petit-texte);
    text-align: center;
}
h2{
    text-align: center;
    font-size: var(--gros-texte);
}
h3{
    font-size: var(--texte-moyen);
}
h1{
    text-align: center;
    font-size: var(--tres-gros-texte);
}

.MissionsFrieden, .MissionsLeo{
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.MissionsLeo h2, .MissionsFrieden h2{
    background-color: var(--vert-lime);
    border:var(--vert-sombre) 2px solid;
}
.MissionsLeo p, .MissionsFrieden p{
    width: 70vw;
    margin-left: auto;
    margin-right: auto;
    justify-content: space-evenly;
}
@media (min-width: 1600px){
    .ContenantPersonnages{
        width: 50vw;
        gap:5vw;
    }
}
@media (max-width: 1100px){
    .ContenantPersonnages{
        gap:3vw;
    }
}
@media (max-width: 760px){
    .ContenantPersonnages{
        width: 100vw;
        height:40vh; 
        gap:4vw;
    }
}
@media (max-width: 470px){
    .caseAvenir{
        width: 75px;
        height: 75px;
    }
}