*{
  scroll-behavior: smooth;
  font-family: 'IndustrialRegular';
}
img{
    max-width: 400px;
}

body{
  background-image: linear-gradient(to bottom, rgb(230, 255, 230), rgb(255, 249, 230), rgb(230, 255, 255), rgb(255, 230, 230), rgb(230, 230, 255));
}

#content{
    padding: 20px;
}
#cover{
  display: none;
}

.print1{
  display: none;
}
.print2{
  display: none;
}
.print3{
  display: none;
}
.print4{
  display: none;
}
.print5{
  display: none;
}
.print7{
  display: none;
}
.print8{
  display: none;
}
.print9{
  display: none;
}
.print10{
  display: none;
}
.print11{
  display: none;
}
.print12{
  display: none;
}
.print14{
  display: none;
}
.print15{
  display: none;
}
.print16{
  display: none;
}
.print17{
  display: none;
}
.print19{
  display: none;
}


#header{
  width: 100%;
  height: 90px;
  background-color: black;
  position: fixed;
  top: 0;
  left: 0;
  color: white;
  z-index: 10;
}
.menu{
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 10px;
}


#liste{
  display: none;
}
#pays:checked ~ #liste{
  display: block;
}
#liste li {
  display: inline-block;
}
#l1{
  margin-left: 50px;
}
#l2{
  margin-left: 50px;
}
#l3{
  margin-left: 50px;
}
#l4{
  margin-left: 50px;
}
#l5{
  margin-left: 50px;
}
#pays{
    display: none;
}


#liste2{
  display: none;
}
#personnages:checked ~ #liste2{
  display: block;
}
#liste2 li {
  display: inline-block;
}
#l6{
  margin-left: 50px;
}
#l7{
  margin-left: 50px;
}
#l8{
  margin-left: 50px;
}
#personnages{
    display: none;
}


#liste3{
  display: none;
}
#projet:checked ~ #liste3{
  display: block;
}
#liste3 li {
  display: inline-block;
}
#l9{
  margin-left: 50px;
}
#l10{
  margin-left: 50px;
}
#projet{
    display: none;
}

.background1{
  margin-left: 25px;
  margin-right: 25px;
  margin-top: 100px;
  /* background-color: rgb(230, 255, 230); */
  width: 1274px;
  height: 650px;
  vertical-align: bottom;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 0px;
  grid-template-rows: 4;
  position: relative;
}

.titre1{
  margin-left: 30px;
  font-size: 40pt;
  grid-column: 1;
  grid-row: 1;
  z-index: 1;
}
.st1{
  margin-left: 15px;
  grid-column: 1;
  grid-row: 2;
  z-index: 1;
}
.st2{
  margin-left: 15px;
  grid-column: 2;
  grid-row: 2;
  z-index: 1;
}
.st3{
  margin-left: 15px;
  grid-column: 1;
  grid-row: 3;
  z-index: 1;
}
.st4{
  margin-left: 15px;
  grid-column: 1 / span 2;
  grid-row: 4;
  z-index: 1;
}
.st5{
  margin-left: 15px;
  grid-column: 2;
  grid-row: 3;
  z-index: 1;
}
.image1{
  grid-column: 1 / span 2;
  grid-row: 1 / span 4;
  z-index: 0;
  background: cover no-repeat;
  background-size: 637px 650px;
  background-image: url("../images/dessins/web/feuille.png");
}
.image2{
  grid-column: 3 / span 2;
  grid-row:  1 / span 4;
  z-index: 0;
  background: cover no-repeat;
  background-size: 637px 650px;
  background-image: url("../images/dessins/web/andeilth.png");
}

.background2{
  margin-left: 25px;
  margin-right: 25px;
  margin-top: 100px;
  /* background-color: rgb(255, 249, 230); */
  width: 1274px;
  height: 650px;
  vertical-align: bottom;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 0px;
  grid-template-rows: 4;
  position: relative;
}
.titre2{
  margin-left: 30px;
  font-size: 40pt;
  grid-column: 3;
  grid-row: 1;
  z-index: 1;
}
.st6{
  margin-left: 15px;
  grid-column: 3;
  grid-row: 2;
  z-index: 1;
}
.st7{
  margin-left: 15px;
  grid-column: 4;
  grid-row: 2;
  z-index: 1;
}
.st8{
  margin-left: 15px;
  grid-column: 3;
  grid-row: 3;
  z-index: 1;
}
.st9{
  margin-left: 15px;
  grid-column: 3 / span 2;
  grid-row: 4;
  z-index: 1;
}
.st10{
  margin-left: 15px;
  grid-column: 4;
  grid-row: 3;
  z-index: 1;
}
.image3{
  grid-column: 3 / span 2;
  grid-row : 1 / span 4;
  z-index: 0;
  background: cover no-repeat;
  background-size: 637px 650px;
  background-image: url("../images/dessins/web/loup.png");
}
.image4{
  grid-column: 1 / span 2;
  grid-row : 1 / span 4;
  z-index: 0;
  background: cover no-repeat;
  background-size: 637px 650px;
  background-image: url("../images/dessins/web/mevorg.png");
}

.background3{
  margin-left: 25px;
  margin-right: 25px;
  margin-top: 100px;
  /* background-color: rgb(230, 255, 255); */
  width: 1274px;
  height: 650px;
  vertical-align: bottom;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 0px;
  grid-template-rows: 4;
  position: relative;
}
.titre3{
  margin-left: 30px;
  font-size: 40pt;
  grid-column: 1;
  grid-row: 1;
  z-index: 1;
}
.st11{
  margin-left: 15px;
  grid-column: 1;
  grid-row: 2;
  z-index: 1;
}
.st12{
  margin-left: 15px;
  grid-column: 2;
  grid-row: 2;
  z-index: 1;
}
.st13{
  margin-left: 15px;
  grid-column: 1;
  grid-row: 3;
  z-index: 1;
}
.st14{
  margin-left: 15px;
  grid-column: 1 / span 2;
  grid-row: 4;
  z-index: 1;
}
.st15{
  margin-left: 15px;
  grid-column: 2;
  grid-row: 3;
  z-index: 1;
}
.image5{
  grid-column: 1 / span 2;
  grid-row : 1 / span 4;
  z-index: 0;
  background: cover no-repeat;
  background-size: 637px 650px;
  background-image: url("../images/dessins/web/electronic.png");
}
.image7{
  grid-column: 3 / span 2;
  grid-row : 1 / span 4;
  z-index: 0;
  background: cover no-repeat;
  background-size: 637px 650px;
  background-image: url("../images/dessins/web/nyrma.png");
}

.background4{
  margin-left: 25px;
  margin-right: 25px;
  margin-top: 100px;
  /* background-color: rgb(255, 230, 230); */
  width: 1274px;
  height: 650px;
  vertical-align: bottom;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 0px;
  grid-template-rows: 4;
  position: relative;
}
.titre4{
  margin-left: 30px;
  font-size: 40pt;
  grid-column: 3;
  grid-row: 1;
  z-index: 1;
}
.st16{
  margin-left: 15px;
  grid-column: 3;
  grid-row: 2;
  z-index: 1;
}
.st17{
  margin-left: 15px;
  grid-column: 4;
  grid-row: 2;
  z-index: 1;
}
.st18{
  margin-left: 15px;
  grid-column: 3;
  grid-row: 3;
  z-index: 1;
}
.st19{
  margin-left: 15px;
  grid-column: 3 / span 2;
  grid-row: 4;
  z-index: 1;
}
.st20{
  margin-left: 15px;
  grid-column: 4;
  grid-row: 3;
  z-index: 1;
}
.image8{
  grid-column: 3 / span 2;
  grid-row : 1 / span 4;
  z-index: 0;
  background: cover no-repeat;
  background-size: 637px 650px;
  background-image: url("../images/dessins/web/ensemble.png");
}
.image9{
  grid-column: 1 / span 2;
  grid-row : 1 / span 4;
  z-index: 0;
  background: cover no-repeat;
  background-size: 637px 650px;
  background-image: url("../images/dessins/web/oriar.png");
}

.background5{
  margin-left: 25px;
  margin-right: 25px;
  margin-top: 100px;
  /* background-color: rgb(230, 230, 255); */
  width: 1274px;
  height: 650px;
  vertical-align: bottom;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 0px;
  grid-template-rows: 4;
  position: relative;
}
.titre5{
  margin-left: 30px;
  font-size: 40pt;
  grid-column: 1;
  grid-row: 1;
  z-index: 1;
}
.st21{
  margin-left: 15px;
  grid-column: 1;
  grid-row: 2;
  z-index: 1;
}
.st22{
  margin-left: 15px;
  grid-column: 2;
  grid-row: 2;
  z-index: 1;
}
.st23{
  margin-left: 15px;
  grid-column: 1;
  grid-row: 3;
  z-index: 1;
}
.st24{
  margin-left: 15px;
  grid-column: 1 / span 2;
  grid-row: 4;
  z-index: 1;
}
.st25{
  margin-left: 15px;
  grid-column: 2;
  grid-row: 3;
  z-index: 1;
}
.image10{
  grid-column: 1 / span 2;
  grid-row : 1/ span 4;
  z-index: 0;
  background: cover no-repeat;
  background-size: 637px 650px;
  background-image: url("../images/dessins/web/crown.png");
}
.image11{
  grid-column: 3 / span 2;
  grid-row : 1 / span 4;
  z-index: 0;
  background: cover no-repeat;
  background-size: 637px 650px;
  background-image: url("../images/dessins/web/zatsar.png");
}

.background6{
  margin-left: 25px;
  margin-right: 25px;
  margin-top: 100px;
  /* background-color: rgb(242, 230, 255); */
  width: 1274px;
  height: 650px;
  vertical-align: bottom;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 0px;
  grid-template-rows: 4;
  position: relative;
}
.titre6{
  margin-left: 30px;
  font-size: 40pt;
  grid-column: 3;
  grid-row: 1;
  z-index: 1;
}
.st26{
  grid-column: 3;
  grid-row: 2;
  z-index: 1;
}
.st27{
  margin-left: 15px;
  grid-column: 4;
  grid-row: 2;
  z-index: 1;
}
.st28{
  margin-left: 15px;
  grid-column: 3;
  grid-row: 3;
  z-index: 1;
}
.st29{
  margin-left: 15px;
  grid-column: 3 / span 2;
  grid-row: 4;
  z-index: 1;
}
.st30{
  margin-left: 15px;
  grid-column: 4;
  grid-row: 3;
  z-index: 1;
}
.st31{
  margin-left: 15px;
  grid-column: 4;
  grid-row: 4;
  z-index: 1;
}
.image12{
  grid-column: 1 / span 2;
  grid-row : 1 / span 4;
  z-index: 0;
  background: cover no-repeat;
  background-size: 637px 650px;
  background-image: url("../images/dessins/web/lewen.png");
}
.image14{
  grid-column: 3 / span 2;
  grid-row : 1 / span 4;
  z-index: 0;
  background: cover no-repeat;
  background-size: 637px 650px;
  background-image: url("../images/dessins/web/crown.png");
}

.background7{
  margin-left: 25px;
  margin-right: 25px;
  margin-top: 100px;
  /* background-color: rgb(230, 242, 255); */
  width: 1274px;
  height: 650px;
  vertical-align: bottom;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 0px;
  grid-template-rows: 4;
  position: relative;
}
.titre7{
  margin-left: 30px;
  font-size: 40pt;
  grid-column: 1;
  grid-row: 1;
  z-index: 1;
}
.st32{
  grid-column: 1;
  grid-row: 2;
  z-index: 1;
}
.st33{
  margin-left: 15px;
  grid-column: 2;
  grid-row: 2;
  z-index: 1;
}
.st34{
  margin-left: 15px;
  grid-column: 1;
  grid-row: 3;
  z-index: 1;
}
.st35{
  margin-left: 15px;
  grid-column: 1 / span 2;
  grid-row: 4;
  z-index: 1;
}
.st36{
  margin-left: 15px;
  grid-column: 2;
  grid-row: 3;
  z-index: 1;
}
.st37{
  margin-left: 15px;
  grid-column: 2;
  grid-row: 4;
  z-index: 1;
}
.image15{
  grid-column: 3 / span 2;
  grid-row : 1 / span 4;
  z-index: 0;
  background: cover no-repeat;
  background-size: 637px 650px;
  background-image: url("../images/dessins/web/sam.png");
}
.image16{
  grid-column: 1 / span 2;
  grid-row : 1 / span 4;
  z-index: 0;
  background: cover no-repeat;
  background-size: 637px 650px;
  background-image: url("../images/dessins/web/electronic.png");
}

.background8{
  margin-left: 25px;
  margin-right: 25px;
  margin-top: 100px;
  /* background-color: rgb(230, 247, 255); */
  width: 1274px;
  height: 650px;
  vertical-align: bottom;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 0px;
  grid-template-rows: 4;
  position: relative;
}
.titre8{
  margin-left: 30px;
  font-size: 40pt;
  grid-column: 3;
  grid-row: 1;
  z-index: 1;
}
.st38{
  margin-left: 15px;
  grid-column: 3;
  grid-row: 2;
  z-index: 1;
}
.st39{
  margin-left: 15px;
  grid-column: 4;
  grid-row: 2;
  z-index: 1;
}
.st40{
  margin-left: 15px;
  grid-column: 3;
  grid-row: 3;
  z-index: 1;
}
.st41{
  margin-left: 15px;
  grid-column: 3 / span 2;
  grid-row: 4;
  z-index: 1;
}
.st42{
  margin-left: 15px;
  grid-column: 4;
  grid-row: 3;
  z-index: 1;
}
.st43{
  margin-left: 15px;
  grid-column: 4;
  grid-row: 4;
  z-index: 1;
}
.image17{
  grid-column: 1 / span 2;
  grid-row : 1 / span 4;
  z-index: 0;
  background: cover no-repeat;
  background-size: 637px 650px;
  background-image: url("../images/dessins/web/ambre.png");
}
.image19{
  grid-column: 3 / span 2;
  grid-row : 1 / span 4;
  z-index: 0;
  background: cover no-repeat;
  background-size: 637px 650px;
  background-image: url("../images/dessins/web/electronic.png");
}

.background9{
  margin-left: 25px;
  margin-right: 25px;
  margin-top: 100px;
  /* background-color: rgb(255, 242, 230); */
  width: 1274px;
  vertical-align: bottom;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 0px;
  grid-template-rows: 4;
  position: relative;
}
.titre9{
  margin-left: 30px;
  font-size: 40pt;
  grid-column: 1;
  grid-row: 1;
  z-index: 1;
}
.st44{
  margin-left: 15px;
  grid-column: 1 / spnan 4;
  grid-row: 2;
  z-index: 1;
}
.background10{
  font-size: 8pt;
}



@media screen and (max-width: 900px){

  #screen{
    display: block;
    position: relative;
  }

  .background1{
    display: grid;
    grid-template-columns: 100%;
    grid-gap: 0px;
    grid-template-rows: minmax(100px; auto)
  }
    .titre1{
      margin-left: 30px;
      font-size: 40pt;
      grid-column: 1;
      grid-row: 1;
      z-index: 1;
    }
    .st1{
      margin-left: 15px;
      grid-column: 1;
      grid-row: 2;
      z-index: 1;
    }
    .st2{
      margin-left: 15px;
      grid-column: 1;
      grid-row: 3;
      z-index: 1;
    }
    .st3{
      margin-left: 15px;
      grid-column: 1;
      grid-row: 4;
      z-index: 1;
    }
    .st4{
      margin-left: 15px;
      grid-column: 1;
      grid-row: 5;
      z-index: 1;
    }
    .st5{
      margin-left: 15px;
      grid-column: 1;
      grid-row: 6;
      z-index: 1;
  }

  .background2{
    display: grid;
    grid-template-columns: 100%;
    grid-gap: 0px;
    grid-template-rows: minmax(100px; auto)
  }
  .titre2{
    margin-left: 30px;
    font-size: 40pt;
    grid-column:1;
    grid-row: 1;
    z-index: 1;
  }
  .st6{
    margin-left: 15px;
    grid-column: 1;
    grid-row: 2;
    z-index: 1;
  }
  .st7{
    margin-left: 15px;
    grid-column: 1;
    grid-row: 3;
    z-index: 1;
  }
  .st8{
    margin-left: 15px;
    grid-column: 1;
    grid-row: 4;
    z-index: 1;
  }
  .st9{
    margin-left: 15px;
    grid-column: 1;
    grid-row: 5;
    z-index: 1;
  }
  .st10{
    margin-left: 15px;
    grid-column: 1;
    grid-row: 6;
    z-index: 1;
  }

  .background3{
    display: grid;
    grid-template-columns: 100%;
    grid-gap: 0px;
    grid-template-rows: minmax(100px; auto)
  }
  .titre3{
    margin-left: 30px;
    font-size: 40pt;
    grid-column: 1;
    grid-row: 1;
    z-index: 1;
  }
  .st11{
    margin-left: 15px;
    grid-column: 1;
    grid-row: 2;
    z-index: 1;
  }
  .st12{
    margin-left: 15px;
    grid-column: 1;
    grid-row: 3;
    z-index: 1;
  }
  .st13{
    margin-left: 15px;
    grid-column: 1;
    grid-row: 4;
    z-index: 1;
  }
  .st14{
    margin-left: 15px;
    grid-column: 1;
    grid-row: 4;
    z-index: 1;
  }
  .st15{
    margin-left: 15px;
    grid-column: 1;
    grid-row: 6;
    z-index: 1;
  }

  .background4{
    display: grid;
    grid-template-columns: 100%;
    grid-gap: 0px;
    grid-template-rows: minmax(100px; auto)
  }
  .titre4{
    margin-left: 30px;
    font-size: 40pt;
    grid-column: 1;
    grid-row: 1;
    z-index: 1;
  }
  .st16{
    margin-left: 15px;
    grid-column: 1;
    grid-row: 2;
    z-index: 1;
  }
  .st17{
    margin-left: 15px;
    grid-column: 1;
    grid-row: 3;
    z-index: 1;
  }
  .st18{
    margin-left: 15px;
    grid-column: 1;
    grid-row: 4;
    z-index: 1;
  }
  .st19{
    margin-left: 15px;
    grid-column: 1;
    grid-row: 5;
    z-index: 1;
  }
  .st20{
    margin-left: 15px;
    grid-column: 1;
    grid-row: 6;
    z-index: 1;
  }

  .background5{
    display: grid;
    grid-template-columns: 100%;
    grid-gap: 0px;
    grid-template-rows: minmax(100px; auto)
  }
  .titre5{
    margin-left: 30px;
    font-size: 40pt;
    grid-column: 1;
    grid-row: 1;
    z-index: 1;
  }
  .st21{
    margin-left: 15px;
    grid-column: 1;
    grid-row: 2;
    z-index: 1;
  }
  .st22{
    margin-left: 15px;
    grid-column: 1;
    grid-row: 3;
    z-index: 1;
  }
  .st23{
    margin-left: 15px;
    grid-column: 1;
    grid-row: 4;
    z-index: 1;
  }
  .st24{
    margin-left: 15px;
    grid-column: 1;
    grid-row: 5;
    z-index: 1;
  }
  .st25{
    margin-left: 15px;
    grid-column: 1;
    grid-row: 6;
    z-index: 1;
  }

  .background6{
    display: grid;
    grid-template-columns: 100%;
    grid-gap: 0px;
    grid-template-rows: minmax(100px; auto)
  }
  .titre6{
    margin-left: 30px;
    font-size: 40pt;
    grid-column: 1;
    grid-row: 1;
    z-index: 1;
  }
  .st26{
    grid-column: 1;
    grid-row: 2;
    z-index: 1;
  }
  .st27{
    margin-left: 15px;
    grid-column: 1;
    grid-row: 3;
    z-index: 1;
  }
  .st28{
    margin-left: 15px;
    grid-column: 1;
    grid-row: 4;
    z-index: 1;
  }
  .st29{
    margin-left: 15px;
    grid-column: 1;
    grid-row: 5;
    z-index: 1;
  }
  .st30{
    margin-left: 15px;
    grid-column: 1;
    grid-row: 6;
    z-index: 1;
  }
  .st31{
    margin-left: 15px;
    grid-column: 1;
    grid-row: 7;
    z-index: 1;
  }

  .background7{
    display: grid;
    grid-template-columns: 100%;
    grid-gap: 0px;
    grid-template-rows: minmax(100px; auto)
  }
  .titre7{
    margin-left: 30px;
    font-size: 40pt;
    grid-column: 1;
    grid-row: 1;
    z-index: 1;
  }
  .st32{
    grid-column: 1;
    grid-row: 2;
    z-index: 1;
  }
  .st33{
    margin-left: 15px;
    grid-column: 1;
    grid-row: 3;
    z-index: 1;
  }
  .st34{
    margin-left: 15px;
    grid-column: 1;
    grid-row: 4;
    z-index: 1;
  }
  .st35{
    margin-left: 15px;
    grid-column: 1;
    grid-row: 5;
    z-index: 1;
  }
  .st36{
    margin-left: 15px;
    grid-column: 1;
    grid-row: 6;
    z-index: 1;
  }
  .st37{
    margin-left: 15px;
    grid-column: 1;
    grid-row: 7;
    z-index: 1;
  }

  .background8{
    display: grid;
    grid-template-columns: 100%;
    grid-gap: 0px;
    grid-template-rows: minmax(100px; auto)
  }
  .titre8{
    margin-left: 30px;
    font-size: 40pt;
    grid-column: 1;
    grid-row: 1;
    z-index: 1;
  }
  .st38{
    margin-left: 15px;
    grid-column: 1;
    grid-row: 2;
    z-index: 1;
  }
  .st39{
    margin-left: 15px;
    grid-column: 1;
    grid-row: 3;
    z-index: 1;
  }
  .st40{
    margin-left: 15px;
    grid-column: 1;
    grid-row: 4;
    z-index: 1;
  }
  .st41{
    margin-left: 15px;
    grid-column: 1;
    grid-row: 5;
    z-index: 1;
  }
  .st42{
    margin-left: 15px;
    grid-column: 1;
    grid-row: 6;
    z-index: 1;
  }
  .st43{
    margin-left: 15px;
    grid-column: 1;
    grid-row: 7;
    z-index: 1;
  }

  .background9{
    display: grid;
    grid-template-columns: 100%;
    grid-gap: 0px;
    grid-template-rows: minmax(100px; auto)
  }
  .titre9{
    margin-left: 30px;
    font-size: 40pt;
    grid-column: 1;
    grid-row: 1;
    z-index: 1;
  }
  .st44{
    margin-left: 15px;
    grid-column: 1;
    grid-row: 2;
    z-index: 1;
  }

.background10{
  font-size: 8pt;
}
}