:root {
    --couleur-primaire : #53606C;
}

body {
color: #1f222a;
background-color: #fff;
font-family: Fira Code,Monaco,Consolas,Ubuntu Mono,monospace;
font-size: 18px;
}

header{
  font-size: 15px;
  font-variant: small-caps;
  padding: 20px ;
  text-align: center;
  display: inline-block;
}

header img{
    width: 60px;
    text-align: left; 
    float: left;
    margin: 6px 0px 6px 0px;
    transition: width 0.7s, transform 0.7s;
  }
header h1{
    float: left;
    font-size: 30px;  
    margin: 50px 2px 0px 10px;
    letter-spacing: 3px;
    transition: font-size 0.7s;
  }

header p {
    padding: 0px 20%;
}

/* ====== Section ====== */

section{
padding: 20px 10px;
} 

a {
color: #e2af78;
}

h1 {
color: #d87c4bff;
}

h2 {
color: #d87c4bff;
font-family: Fira Code,Monaco,Consolas,Ubuntu Mono,monospace;
}

h3 {
color: #e2af78;
font-family: Fira Code,Monaco,Consolas,Ubuntu Mono,monospace;
}

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

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

section img {
  max-width: 80%;
  max-height: 500px;
  height: auto;
  margin: 10px;
}

.warning {
  font-weight: 500;
  padding: 15px;
  color: #8f1e27;
  background-color:#F8E1D022;
  border: solid 1px #8f1e27;
  text-align: center;
}
.warning::before {
  content: "⚠ ";
  font-weight: 500;
  font-size: 65px;
}

nav ul, nav li{
  list-style-type: none;
  margin: 0;
  padding: 0;
}

nav.topnav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #6f8090;
}

nav.topnav li {float: left;}

nav.topnav li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 18px;
  text-decoration: none;
}

nav.topnav li a:hover:not(.active) {background-color: #CCCCCC;}

nav.topnav li a.active {background-color: #04AA6D;}

nav.topnav li.right {float: right;}

nav li {
  border-right: 1px solid #bbb;
}
li:last-child {
  border-right: none;
}

/* ====== Menu Deroulent ====== */

nav.topnav ul li{
    width: 170px;
}
nav.topnav ul li:hover {
  display: block; 
}
nav.topnav ul li ul{
  position: fixed;
  width: 170px;
}
nav.topnav ul li li{
  background-color: #6f8090;
  display: none;
}
nav.topnav ul li:hover li {
  display: block;
}

@media screen and (max-width: 720px) {
  nav.topnav li.right, 
  nav.topnav li {float: none;}
  li {border-right: 0px solid #bbb;}
  nav.topnav ul li{width: none; width: 100%;}
  nav.topnav ul li ul{position: relative; width: 100%;}
}