:root {

  --nuancier-clair : #2f928a; 
  --nuancier-moyen : #174642;
  --nuancier-fonce : #0e3230; 
  --nuancier-blanc : #f2ece0;
}

body {
  font-family: monospace; 
  font-size: 120%;
  margin : 0px;
  background-color: var(--nuancier-blanc);
  color: var(--nuancier-fonce);
}

#upper-section {
     
  #banner-container {
    position: relative;
    text-align: center;
    color: var(--nuancier-blanc);
    font-size: min(300%, 5vw);
    #banner-img {
      display:block;
    }
    #banner-text {
      position: absolute;
      width:100%;
      bottom: 10%;
      left: 50%;
      transform: translate(-50%, 0% );
      font-weight: bold;
    }
  }
  
  #mainMenu {
    width:100%;
    display: flex;
    justify-content: center;
    padding: 10px 10px 10px 10px;
    font-family: monospace;
    font-weight: bold;  
    background-color: var(--nuancier-clair);
    
    :link, :active, :visited {
       color: inherit;
       text-decoration: none;
    }
    
    #menu-block {
      display: inline-block !important;
    }
    .main-menu-item {
      padding: 0px 5px 0px 5px;
      margin: 5px 5px 5px 5px ;
      display: inline-block !important;
      
      background-color: var(--nuancier-moyen);
      color: var(--nuancier-blanc);
      font-size: min(150%, 5vw);
      border-radius: 10px;
      
    }
    .main-menu-item:hover {
      transform: scale(1.1);   
      cursor: pointer;   
    }
      
    #connexion {
      background-color: var(--nuancier-fonce);
    }
  }
}

#mid-section {
  margin: auto;
  padding: 0% 3% 0% 3%;
  max-width: 800px;
  :link, :active, :visited {
     color: inherit;
  }

  div  {
    text-align: justify;
    text-justify: inter-word;
    div { 
      padding-top: 10px;
      padding-bottom: 10px;
    }
  }


   #faq, #historique {
      dt {
        font-weight: bold;
      }
   }


  #manifesto-content {
    font-style: italic;
  }

  #manifesto, #equipe, #historique {
  }

  
  h1, h2, h3 {
    background-color: var(--nuancier-clair);
    color: var(--nuancier-blanc);
    width: auto;
    text-align:left;
    border-radius: 10px;
    padding: 0px 5px 0px 5px;
    
  }

}

#bottom-section {

  background-color: var(--nuancier-clair);
  color: var(--nuancier-fonce);
  font-size: 80%;
  text-align:center;
  display: inline-block !important;
  width:100%;

  #partenaires {
    position: relative;
    text-align:left; 
    display: inline-block !important;

    img {
      align-items: center;
      height: 75px;
    }
  }
  
  #mentionsLegales {
    text-align: left;  
    display: inline-block !important;
    white-space: pre-wrap;
  }

  
  h1, h2, h3 {
    color: var(--nuancier-fonce);
    width: auto;
    border-radius: 10px;
    padding: 0px 5px 0px 5px;
    text-align: center;
    
  }
}

  
.todo {

  background-color: red;
}

.spanLink {
  cursor:pointer;
  font-weight:bold;
  text-decoration: underline;
}

.sub-section {
  margin: 10px 10px 10px 10px;
}