:root {
  --couleur-principal:#2f2f2f;
  --couleur-secondaire:#2f4f2f;
  --couleur-secondaire-hover: #4f6f4f;
  --couleur-texte: #ffffff;
  --couleur-texte-hover: #00ffff; 
  --couleur-titre: #000000;
}
html {
  background-image: url("../src/images/menu.jpg");
}

main {
  text-align : center;
  color :var(--couleur-texte);
  background-color : var(--couleur-principal);   
  border-radius : 10px;
  
  margin-left: auto;
  margin-right: auto;
  margin-bottom : 0px;
  margin-top : 0px;
  max-width: 20em;
  max-height: 25em;
  
}
h1 {
  color: var(--couleur-titre);
}
h2 {
    font-size: 2em;
    margin : 1%;
}

main > nav {
  display : flex;
  flex-direction : column;
  justify-content : space-between;
  padding-bottom: 2%;
} 
#divboutonshaut {
  display : flex;
  flex-direction : column;
  margin-bottom : 10%;
}

.boutons {
  font-size : 1em;
  display :flex;
  justify-content: center;
  align-items : center;
  color: var(--couleur-texte);
  border : solid;
  border-radius : 3px;
  background-color : var(--couleur-secondaire);
   margin-top : 2%;
}

footer {
  margin-top : 2%;
}
footer > nav {
  background-color : var(--couleur-principal);
}
footer > nav > * {
  color : var(--couleur-texte);
}


.boutons:hover {
  background-color : var(--couleur-secondaire-hover);
  font-size: 1.1em;
}

footer > nav >*:hover {
  color : var(--couleur-texte-hover);
  font-size: 1.1em;
}

#boutnav:hover {
  cursor: pointer;
  font-size: 1.1em;
}

#selection {
  background-color: var(--couleur-principal);
}
.liens {
  color : var(--couleur-texte);
}
.liens:hover {
  color : var(--couleur-texte-hover);
}
/*Version portrait telephone et tablette*/
@media (hover :none) and (orientation: portrait) {

  main {
    border-radius : 50px;

   max-width: 50em;
    max-height: 125em;
  }

  #boutonbas {
    margin-top : 2em;
  }

  h2 {
    font-size : 5em;
  }
  .boutons {
   font-size : 3em;
   height : 3em;
   border-radius : 20px;
  }
  footer {
    margin-top : 10em;
  }
  .liens {
    font-size : 0.5em;
  }
}
/*Version paysage telephone et tablette (plus adapté aux tablettes)*/
@media (hover :none) and (orientation: landscape) {
  main {
    border-radius : 50px;
    max-width: 50em;
    max-height: 50em;
  }
  #boutonbas {
    margin-top : 0px;
  }
  .boutons {
   font-size : 2em;
   height : 2em;
   border-radius : 20px;
  }

  #divboutonshaut {
    flex-direction : row;
    flex-wrap : wrap;
  }
  #divboutonshaut > a {
    flex : 1 1 50%;
  }
}