Scout_saturation/style/style.css

html{
  width: 10000px;
  height: 5000px;
  -webkit-text-size-adjust: none;
-ms-touch-action: manipulation;
    touch-action: manipulation;
}


body{
  cursor: -webkit-grab;
  cursor: grab;
  /* margin-left: 200px; */
}

/* start */
/* @-webkit-keyframes dash {
  from {
    stroke-dashoffset: 3000;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes dash {
  from {
    stroke-dashoffset: 3000;
  }
  to {
    stroke-dashoffset: 0;
  }
} */

p, a{
  font-size: 18px;
  line-height: 26px;
  color: black;
  font-family: 'Montserrat-Regular'!important;
}

a{
  font-family: 'Montserrat-SemiBold'!important;
  color: #35b8c8ff;
}

h4{
  font-size: 42px;
  line-height: 42px;
  color: black;
  font-family: 'Montserrat-SemiBold'!important;
  margin: 0;
}

/* Yes_non */
.buttons{
  width: 95px;
  height: 95px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border-radius: 95px;
  background-color: yellow;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.buttons:hover{
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
  -webkit-box-shadow: 5px 5px;
  box-shadow: 5px 5px;
  cursor: pointer;
}

#y p, #n p{
  font-size: 30px;
  margin: auto;
}

section{
  position: relative;
}

.section{
  position: absolute;
}

.section .illu{
  z-index: 0;
}

.section .y_n{
  z-index: 1;
}

.block{
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.block #y, .block #n{
  position: absolute;
}

.tracer-n, .tracer-y{
  position: absolute;
}

/* ////////start////////  */
#start{
  top: 3900px;
  left: 2180px;
  z-index: 20;
}

#start #y{
  top: 450px;
  left: 650px;
}

#start #n{
  top: 50px;
  left: 640px;
}

#start .tracer-y{
  position: absolute;
  top: -80px;
  left: 770px;
}

#start .tracer-n{
  position: absolute;
  top: -500px;
  left: 715px;
}

/* #start #y:hover ~ .tracer-y path{
  stroke-dasharray: 3000;
  stroke-dashoffset: 0;
  -webkit-animation: dash 5s linear;
          animation: dash 5s linear;
} */

/* ////////angoisses//////// */
#angoisses{
  top: 3810px;
  left: 4400px;
  z-index: 19;
}

#angoisses #y{
  top: 340px;
  left: 230px;
}

#angoisses #n{
  top: 550px;
  left: 200px;
}

#angoisses .tracer-n{
  top: 450px;
  left: 340px;
}

#angoisses .tracer-y{
  top: -420px;
  left: 280px;
}

/* ////////coeur//////// */
#coeur{
  top: 3130px;
  left: 5700px;
  z-index: 18;
}

#coeur .tracer-n{
  top: -400px;
  left: 240px;
}

/* ////////summo//////// */
#sumo{
  top: 4200px;
  left: 6710px;
  z-index: 18;
}

#sumo .tracer-y{
  top: -950px;
  left: 200px;
}

/* ////////voyance//////// */
#voyance{
  top: 2630px;
  left: 7220px;
}

#voyance #y{
  top: 425px;
  left: 600px;
}

#voyance #n{
  top: 525px;
  left: 655px;
}

#voyance .tracer-n{
  top: 630px;
  left: 540px;
}

#voyance .tracer-y{
  top: -370px;
  left: 640px;
}

/* ////////parlons-en//////// */
#parlons_en{
  top: 3970px;
  left: 8400px;
}

#parlons_en .block{
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-flow: row-reverse;
          flex-flow: row-reverse;
}

#parlons_en .txt{
  width: 400px;
  margin-top: 270px;
}

#parlons_en h4{
  -webkit-transform: rotate(-15deg);
          transform: rotate(-15deg);
  margin-bottom: 70px;
  margin-left: -10px;
}

/* ////////ampoule//////// */
#ampoule{
  top: 1908px;
  left: 8425px;
  z-index: 17;
}

#ampoule .block{
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

#ampoule #y{
  top: 250px;
  left: -200px;
}

#ampoule #n{
  top: 200px;
  left: -100px;
}

#ampoule .tracer-n{
  top: -990px;
  left: -760px;
}

#ampoule .tracer-y{
  top: 10px;
  left: -1760px;
}

#ampoule .txt{
  width: 250px;
}

/* ////////besoin//////// */
#besoin{
  top: 1778px;
  left: 6225px;
}

#besoin #y{
  top: 250px;
  left: -200px;
}

#besoin #n{
  top: 200px;
  left: -100px;
}

#besoin .tracer-y{
  top: 230px;
  left: -1350px;
}

/* ////////genie//////// */
#genie{
  top: 248px;
  left: 7500px;
  z-index: 17;
}

#genie .block{
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-flow: row-reverse;
          flex-flow: row-reverse;
}

#genie .illu{
  margin-left: -130px;
  margin-top: 70px;
}

#genie #y {
  top: 600px;
  left: -300px;
}

#genie #n{
  top: 400px;
  left: -300px;
}

#genie .tracer-n{
  top: 220px;
  left: -1623px;
}

#genie .tracer-y{
  top: 620px;
  left: -2680px;
}

#genie .txt{
  margin-top: 300px;
  margin-left: -150px;
  width: 400px;
}

#genie h4{
  -webkit-transform: rotate(-15deg);
          transform: rotate(-15deg);
  margin-bottom: 70px;
  margin-left: -10px;
}

/* ////////bah_alors//////// */
#bah_alors{
  top: 500px;
  left: 5050px;
  z-index: 17;
}

#bah_alors #y {
  top: 600px;
  left: -300px;
}

#bah_alors #n{
  top: 400px;
  left: -300px;
}

#bah_alors .txt{
  margin-top: 80px;
  margin-left: 80px;
  width: 500px;
}

#bah_alors h4, #bah_alors p:nth-of-type(1) {
  -webkit-transform: rotate(-15deg);
          transform: rotate(-15deg);
  margin-bottom: 70px;
  margin-left: -10px;
  margin: 0 0 0 -10px;
}

#bah_alors p:nth-of-type(1){
  font-family:'Montserrat-SemiBold';
  margin-left: 2px;
}

#bah_alors p:nth-of-type(2){
  margin-top: 100px;
}

#bah_alors .tracer-y{
  top: 450px;
  left: -290px;
}

/* ////////et_maintenant//////// */
#et_maintenant{
  top: 1450px;
  left: 4320px;
}

#et_maintenant #y {
  top: 260px;
  left: 85px;
}

#et_maintenant #n{
  top: 405px;
  left: 85px;
}

#et_maintenant .tracer-y{
  top: 100px;
  left: -1210px;
}

#et_maintenant .tracer-n{
  top: 450px;
  left: -1970px;
}

/* ////////pouce//////// */
#pouce{
  top: 1350px;
  left: 2730px;
}

#pouce #y {
  top: 355px;
  left: 230px;
  z-index: 17;
}

#pouce #n{
  top: 355px;
  left: 85px;
  z-index: 17;
}

#pouce .txt{
  top: -40px;
  left: 240px;
  width: 300px;
}

#pouce h4{
  -webkit-transform: rotate(-15deg);
          transform: rotate(-15deg);
}

#pouce .tracer-y{
  top: 360px;
  left: 275px;
  z-index: 16;
}

#pouce .tracer-n{
  top: 370px;
  left: -1680px;
  z-index: 16;
}

/* ////////koala//////// */
#koala{
  top: 1600px;
  left: 600px;
}

#koala #y {
  top: 355px;
  left: 230px;
}

#koala #n{
  top: 355px;
  left: 85px;
}

#koala .tracer-y{
  top: 360px;
  left: 275px;
}

#koala .tracer-n{
  top: 370px;
  left: -1680px;
}

/* ////////chevalier//////// */
#chevalier{
  top: 2410px;
  left: 1900px;
  z-index: 16;
}

#chevalier #y {
  top: 500px;
  left: -150px;
}

#chevalier #n{
  top: 500px;
  left: -300px;
}

#chevalier .tracer-y{
  top: 610px;
  left: -960px;
}

#chevalier .tracer-n{
  top: 530px;
  left: -1180px;
}

/* ////////sy_mettre//////// */
#sy_mettre{
  top: 2900px;
  left: 580px;
}

#sy_mettre .txt{
  width: 590px;
}

#sy_mettre h4{
  -webkit-transform: rotate(-15deg);
          transform: rotate(-15deg);
  margin-left: -260px;
}

#sy_mettre p{
  margin-top: 55px;
}

/* ////////etoile//////// */
#etoile{
  top: 3920px;
  left: 630px;
  z-index: 14;
}

#etoile #y {
  top: 220px;
  left: 400px;
}

#etoile #n{
  top: 390px;
  left: 20px;
}

#etoile .tracer-y{
  top: -1020px;
  left: 500px;
}

#etoile .tracer-n{
  top: -2000px;
  left: -590px;
}

#etoile .txt{
  margin-top: 210px;
  margin-left: -240px;
  background: white;
  width: 300px;
  height: 100px;
  z-index: 1;
}

/* ////////center//////// */
#center{
  top: 2230px;
  left: 3660px;
}

#center .tracer-y{
  top: -1020px;
  left: 500px;
}

#center .tracer-n{
  top: -2000px;
  left: -590px;
}

#center a{
  position: absolute;
  top: 840px;
  left: 500px;
}