:root {
  --couleur-principal:#2f2f2f;
  --couleur-secondaire:#4f4f4f;
  --couleur-titre: #000000;
  --couleur-titre-hover: #00ffff;
  --couleur-texte: aliceblue;
  --couleur-hover: #6f6f6f;
}

html {
  background-image: url("../src/images/fondHistoire.jpg");
}

main {

  background-color: var(--couleur-principal); 
  width:50em;
  max-height : 25em;

  margin-left: auto;
  margin-right: auto;
  display:flex;

  border-radius: 20px;
  
}

main > nav {
  display : flex;
  flex-direction : column;
  width : 10em;
  border-right: solid;
  border-color: var(--couleur-texte);
}

main > article {
  overflow: scroll;
  padding: 1em;
  overflow-x: hidden;
}

article > *{
  font-family:'Courier New', Courier, monospace;
  color: var(--couleur-texte);
}
h1 {
  color: var(--couleur-titre);
}
.chap, .part {
  color: var(--couleur-texte);
  text-decoration: none;
}

p{
  font-weight: 600;
  text-align : justify;
}
ul {
  margin : 0px;
}
li {
  color : var(--couleur-texte);
  margin-left: 1em;
}
footer {
  margin-top : 2%;
}
footer > nav {
  background-color: var(--couleur-principal);
}
a {
  color: var(--couleur-texte);
  text-decoration: none;
}

#boutnav {
  color : var(--couleur-texte);
}

.chap:hover, .part:hover {
  font-size: 1.1em;
}
footer > nav >*:hover {
  color : var(--couleur-titre-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 (plus adapté aux telephones)*/
@media (hover :none) and (orientation: portrait) {

  main {
    border-radius : 50px;

    width:100%;
    max-height: 70em;
    border-radius: 0px;
    flex-direction : column;
  }
  main > nav {
    flex-direction : row;
    width : 100%;
    height: 100em;
    border-right: none;
    border-bottom: solid;
    border-color: var(--couleur-texte);
  }
  .chap {
    font-size : 3em;
  }
  .part {
    display: none;
  }
  .ulpart {
    display: none;
  }
  h2 {
    font-size : 5em;
  }
  h3 {
    font-size : 4em;
  }
  h4 {
    font-size : 3em;
  }
  p, li, b {
    font-size : 2em;
  }
  footer {
    margin-top : 10em;
  }
}
/*Version paysage telephone et tablette (plus adapté aux tablettes)*/
@media (hover :none) and (orientation: landscape) {
  main {
    border-radius : 50px;

    max-width: 50em;
    max-height: 30em;
  }
  .boutonshaut {
    display : flex;
    flex-wrap:wrap;
    flex-direction : row;
    margin-bottom : 10%;
  }
  .boutonshaut > a {
    flex: 1 1 50%;
  }
  #boutonbas {
    margin-top : 0px;
  }
  button {
   font-size : 2em;
   height : 2em;
   border-radius : 20px;
  }
}