/*  links  */
a {text-decoration: none;}
a:link {color:#4499FF; text-decoration: none;}
a:visited {font-family:"verdana"; font-size:14pt; color:#4499FF;} 
a:hover {color:#b70000; text-decoration:none;} 
  /* B70000 = rouge */

/* preventing from overflow */
html, body {overflow-x: hidden;}
* {box-sizing: border-box;}
html {font-size: 16px;}

body {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    width: auto; 
    min-height: 100vh; 
    font-size: 16px;
    margin: 0; padding: 0;
    background-image: url('../../images/texture.gif');
}

div{margin-bottom: 30px;}

nav{
    font-size: 1.5em;
    height: 50px;
    margin-top: 30px; margin-left: 30px;
    font-family: "comic sans MS", georgia;
}
  
main{
    margin-top: 30px;
    margin-left: 60px; margin-right: 60px;
    text-align: justify;
}

#source{text-align: left; font-style: italic; color: darkgrey; font-size: 0.8rem;}

h1{color: #b70000; text-shadow: lightgrey 2px 2px 2px;}


p{font-family: "comic sans MS", georgia;}

#graphiques{text-align: right; margin-right: 20px;}

.copyright{text-align: right; font-style: italic; color: darkgrey;}

#sectionTitle{margin-bottom: -5px;}
section.table{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin-bottom: 40px;
}
.table p{width: 280px; margin: 10px 10px -10px 10px;}
.table p span{display: inline-block;}
.dpt{width: 35px;} 
.name{width: 160px;}
.number{width: 80px; text-align: right;}
.letg{color: #4499FF; font-weight: bold;}



@media screen and (max-width: 700px) {
  body{margin: 0; font-family: verdana; font-size: 1rem;}
  nav{
    font-size: 1.4rem;
    height: 40px;
    margin-top: 20px; margin-left: 10px;}
  main{min-height: 100vh; margin: 20px; padding: 5px;}
  #empty{display: none;}
}

@media screen and (min-width: 1150px) {
  main{margin-left: 130px; margin-right: 100px; padding: 5px;}
}