@import url('https://fonts.googleapis.com/css?family=Anonymous+Pro:400,400i,700,700i');

html, body {
  margin: 0;
  padding: 0;
}

.titre {
  z-index: 20;
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  margin: 200px 0 200px 0;
}

.menu {
  z-index: 10;
  position: absolute;
  margin: 450px 150px 200px 150px;
}

.bgd {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 0;
  top: 0;
  left: 0;
  display: none;
}

#bg {
  background: rgb(20, 40, 80);
}
#bg2 {
  background: rgb(20, 70, 80);
}
#bg3 {
  background: rgb(90, 0, 20);
}
#bg4 {
  background: rgb(150, 180, 180);
}
#bg5 {
  background: rgb(125, 70, 85);
}

#cnv {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -10;
}

#cnv2 {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -10;
}

h1 {
  color: white;
  font-family: 'Anonymous Pro', monospace;
  font-weight: 700;
  text-align: center;
  font-size: 5em;
  margin: 50px;
}

h2 {
  color: white;
  font-family: 'Anonymous Pro', monospace;
  font-weight: 700;
  text-align: center;
  font-size: 7em;
  margin-top: 40vh;
  ;
}

h3 {
  position: absolute;
  color: white;
  font-family: 'Anonymous Pro', monospace;
  font-weight: 400;
  text-align: center;
  font-size: 1.5em;
  bottom: 8vh;
  width: 100%;
  margin: auto;
}
h3:hover {
  text-decoration: underline;
}

p {
  color: white;
  font-family: 'Anonymous Pro', monospace;
  font-weight: 400;
  text-align: center;
  font-size: 1em;
}

.lienmenu {
  color: white;
  font-family: 'Anonymous Pro', monospace;
  font-weight: 400;
  font-size: 3em;
  text-decoration: none;
  margin-top: 50px;
  padding-top: 30px;
}

a {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
  color: white;
}

/*/////*/

.homeicon{
  width: 61px;
  height: 61px;
  top: 30px;
  left: 30px;
  position: fixed;
  z-index: 100;
  background-image: url(../img/atlas/home.svg);
}
.homeicon:hover{
  background-image: url(../img/atlas/home_hover.svg);
}

.haut{
  width: 61px;
  bottom: 30px;
  left: 30px;
  position: fixed;
  z-index: 101;
  margin: 0;
}
.haut:hover{
  text-decoration: none;
}
.haut p{
  text-align: center;
  font-size: 3em;
  color: #395074;
}
.haut p:hover{
  color: white;
  text-decoration: none;
}



canvas {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

.labels {
  color: #395074;
  font-family: 'Anonymous Pro', monospace;
  font-weight: 400;
  font-size: 2em;
  margin: 50px 50px 30vh 120px;
  width: 35vw;
}

#intro {
  margin-top: 50vh;
  padding-top: 5vh;
  margin-bottom: 50vh;
}

#l0.active {
  color: #379FFF;
}
#l1.active {
  color: #6CD1A1;
}
#l2.active {
  color: #BFFFA1;
}
#l3.active {
  color: #FFAD8A;
}
#l4.active {
  color: #1D5CFF;
}
#l5.active {
  color: #FF7070;
}
#l6.active {
  color: #FFEE93;
}
#l7.active {
  color: #008666;
}
#l8.active {
  color: #9BD5FF;
}



.detail{
  width: 300px;
  text-align: left;
  margin: 0 50px 250px 120px;
}
.detail h4{
  font-family: 'Anonymous Pro', monospace;
  font-weight: 700;
  font-size: 2em;
  margin-bottom: 20px;
}
.detail p{
  text-align: left;
}
.detail img{
  margin : 20px auto;
  display: block;
}


#plus {
  color: white;
  font-family: 'Anonymous Pro', monospace;
  font-weight: 400;
  font-size: 2em;
  margin: 0px 50px 200px 120px;
}

#plusplus {
  color: white;
  font-family: 'Anonymous Pro', monospace;
  font-weight: 400;
  font-size: 2em;
}
.liensplus{
  text-align: left;
}

.detail2{
  margin: 80vh 50px 100px 120px;
  width: 35vw;
}


#urban{
  color: #379FFF;
  padding-top: 20vh;
}
#rural{
  color: #6CD1A1;
}
#pasture{
  color: #BFFFA1;
}