body {
	margin: 0;
      background-color: whitesmoke;
	font-family: arial;
}

table, td, th {
      border: 1px solid black;
}

table {
      border-collapse: collapse;
      width: 100%;
}

td,th {
      text-align: center;
}

.wallpaper {
      background: url(/image/jihanki_girl.png) no-repeat center;
      background-size: cover;
      width: 100vw;
      height: 100vh;
}

.wallpaper_maths {
      background: url(../image/balcony_girl.jpg) no-repeat center;
      background-size: cover;
      width: 100vw;
      height: 100vh;
}

.button_cours {
      border: solid 1px;
      border-radius: 5px; padding: 10px;
      background-color: grey;
      width: 97%;
      color: balck;
      text-align: center;
      background: rgba(255, 255, 255, 0.56);
      border-radius: 16px;
      box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
      backdrop-filter: blur(4.9px);
      -webkit-backdrop-filter: blur(4.9px);
      border: 1px solid rgba(255, 255, 255, 0.26);
}

.button_cours:hover {
      box-shadow: 0 6px 8px 0 rgba(255,255,255,0.24),0 7px 5px 0 rgba(0,0,0,0.19);
}

.link_cours {
      text-decoration: none;
      color: black;
}

.zone_texte {

      margin-top: 20px;
      margin-left: 23%;
      margin-right: 15%;

      text-align: justify;
      line-height: 1.5em;
}

.button_expli {
      background-color: #bbbab7;

      border: solid;
      border-color: black;
      border-width: 1px;     
      border-radius: 4px;

      color: black;
      font-weight: bold;

      padding: 5px;

      text-align: center;
      display: inline-block;
}

.button_expli:hover {
      box-shadow: 0 6px 8px 0 rgba(0,0,0,0.24),0 7px 5px 0 rgba(0,0,0,0.19);
}

.div_entete {
      border-bottom-style: solid;
      border-width: 1px;
}

.link_entete {
      background-color: transparent;

      border: solid;
      border-bottom-style: hidden;
      border-right-style: hidden;
      border-color: black;
      border-width: 1px;     
      border-radius: 5px 0 0 0;

      color: black;
      font-weight: bold;

      text-decoration: none;

      padding: 8px;

      text-align: center;
      display: inline-block;
}

.link_entete:hover {
      background-image: linear-gradient(to right, #bbbab7, whitesmoke);
}

.link_entete_present {
      background-image: linear-gradient(to right, #bbbab7, whitesmoke);
}

.titre {
      color: #804d3b;
}

.exemple {
      border-style: hidden hidden hidden solid;
      border-color: #8f8787;
      border-width: 10px;
      border-radius: 5px;

      background-color: transparent;

      padding: 10px;
}

.encadre {
      border-style: hidden hidden hidden solid;
      border-color: #8f8787;
      border-width: 10px;
      border-radius: 5px;

      background-color: #bbbab7;

      padding: 10px;
      margin-top: 3px;
}

.attention {
      border-style: solid;
      border-color: rosybrown;
      border-width: 5px;

      background-color: #bbbab7;

      padding: 10px;
      margin-top: 3px;
}

.definition {
      border-style: solid;
      border-color: #8f8787;
      border-width: 3px;
      border-radius: 5px;

      background-color: whitesmoke;

      padding: 10px;
      margin-top: 3px;

      box-shadow: 0 6px 8px 0 rgba(0,0,0,0.24),0 7px 5px 0 rgba(0,0,0,0.19);
}

.exercice {
      border-style: hidden hidden hidden solid;
      border-color: grey;
      border-width: 10px;
      border-radius: 10px 10px 0px  0px;

      background-color: lightgrey;

      padding: 10px;
      margin-top: 3px;

}

.solution {
      border-style: hidden hidden hidden solid;
      border-color: grey;
      border-width: 10px;
      border-radius: 0px 0px 10px 10px;

      background-color: whitesmoke;

      padding: 10px;
      margin-top: 3px;
}

.expli {
      border-style: hidden hidden solid solid;
      border-color: #8f8787;
      border-width: 2px 3px;

      background-color: whitesmoke;

      padding: 10px;
      margin-top: 3px;

}


.resultat {
      border: double; 
      padding: 5px; 
      margin: 0; 
      width: auto;
}

.eq {
      overflow: scroll;
}

.code {
      border: transparent transparent transparent solid;
      border-radius: 8px;
      border-color: grey;
      border-width: 10px;

      background-color: black;
      color: white;

      margin: 0;
      padding: 5px;

      font-family: "Lucida Console";
}

.parisienne-regular {
      font-family: "Parisienne", cursive;
      font-weight: 600;
      font-style: normal;
}

.clearfix:after {
      content: "";
      clear: both;
      display: table;
}

.presentation {
      border: solid transparent;
      border-radius: 15px;

      padding: 5px;
      margin-left: 5%;
      margin-right: 5%;

      background-color: #8f8787;

      color: black;
}

.img_presentation {
      width: 20%;
      height: 20%;

      border-radius: 50%;
}

.h1_presentation {
      font-size: 2.5em;
}

.presentation_niveau {
      display: flex;
}

.presentation_niveau_fils {
      border: solid 1px; 
      border-radius: 10px;

      margin: 5px;
      padding-top: 10px;
      padding-bottom: 5px;

      height: 40px;

      background-color: #8f8787;

      text-align: center;
      text-decoration: none;
      font-size: 1.5em;
      color: black;

      flex: 30%;
      justify-content: space-around;
      align-self: center;

      transition: flex 0.8s, height 0.8s, background-color 0.8s;
}

.presentation_niveau_fils:hover {
      flex: 23%;
      height: 35px;

      background-color: #804d3b;
}

@media only screen and (max-width: 800px) {
      .img_presentation {
            border-radius: 10px;
      }

      .h1_presentation {
            font-size: 2em;
      }

      .presentation_niveau {
            flex-direction: column;
      }

      .presentation_niveau_fils {
            flex-direction: column;

            font-size: 1.2em;

            padding-top: 3px;
            padding-bottom: 3px;

            height: 30px;

            align-self: normal;

            transition: background-color 0.8s;
      }

      .presentation_niveau_fils:hover {
            background-color: #804d3b;
      }
}