*{
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  font-family: Asap, sans-serif;
}
html {
  scroll-behavior: smooth;
}

body{
  background: #000207;
}

#container{
  background:linear-gradient(#010101,#00163a);
  height: 100vh;
  /* outline:1px solid blue; */
}
#container p{
  color:white;
}

#home-content{
  width: 500px;
  margin: auto;
  height: 100vh;
}

#home-content>*{
  position: relative;
}


.carreCouleur{
  /* outline: 1px solid black; */
  width: 250px;
  height: 250px;
  margin: 0px auto 60px ;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  transition: all ease-out;
}

/*Select*/
#home-content select {
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  appearance: none;
  outline: 0;
  box-shadow: none;
  border: 0 !important;
  background: #2c3e50;
  background-image: none;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0 0 0 .5em;
  color: #fff;
  cursor: pointer;
}
/* Custom Select */
#home-content .select {
  float: left;
  margin: auto;
  position: relative;
  display: block;
  width: 100px;
  height: 3em;
  line-height: 3;
  background: #2c3e50;
  overflow: hidden;
  border-radius: .25em;
  margin-bottom: 50px;
}

#home-content select::-ms-expand {
  display: none;
}
/* Arrow */
#home-content .select::after {
  content: '\25BC';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  padding: 0 1em;
  background: #34495e;
  pointer-events: none;
}
/* Transition */
#home-content .select:hover::after {
  color: #FFF;
}
#home-content .select::after {
  -webkit-transition: .25s all ease;
  -o-transition: .25s all ease;
  transition: .25s all ease;
}

#home-content #gameTitle{
  text-align: center;
  font-size: 3em;
  color: white;
  padding: 60px;
}

.button{
  font-weight: lighter;
  float: right;
  min-width:100px;
  height: 48px;
  background-color:#2c3e50;
  color: white;
  border-radius: 3px;
  text-align: center;
  font-size: 1.6em;
  vertical-align: middle;
  line-height: 30px;
  /* margin: 20px auto; */
  cursor:pointer;
  padding: 10px;

}

#explications{
  margin: auto;
  width: 800px;
  color:#CCC;
  font-size: 1.2em;
  padding: 15px;
}

.bottomArrow{
  margin: auto;
  position:relative;
  border-left: 1px solid white;
  border-bottom: 1px solid white;
  height: 50px;
  width: 50px;
  transform: rotate(-45deg);
  bottom:0;

}
.select-play-container {
  /* outline: solid 1px white; */
  width: 220px;
  margin: auto;
  height: 80px;
}


.seconde-partie{
  background: #00163a;
}

#explications h1{
  background-color: #eb4d4b;
  margin-bottom: 10px;
}
#explications h2{
  background-color: #f0932b;
  margin-bottom: 10px;
}
#explications h3{
  background-color: #686de0;
  margin-bottom: 10px;
}
#explications h4{
  background-color:#30336b;
  margin-bottom: 10px;
}
#squares-zone{
  top:0px;
  width: 800px;
  height: 300px;
  margin: auto;
  display: flex;
  transition: all 3s ease-in-out;
  position: relative;
  z-index:8;
  /* outline:2px solid red; */
}
#my-square-zone, #target-square-zone{
  /* width: 250px; */
  /* height: 250; */
  transition: transform 3s ease-in-out;
}

#my-square-zone{
  /* float:right; */
}

#target-square-zone{
  /* float:left; */
}

#time-zone{
  text-align: center;
  font-size: 2em;
  margin-top: 20px;
  margin-bottom: 100px;
  color: #AAA;
}


.message{
  display:inline;
  text-align: left;
  position:absolute;
  font-size: 7em;
  animation: messageAnimation 1.5s;
  left: 50%;
  top: 50%;
  -webkit-text-shadow: -2px -2px 0px #000000;
  -moz-text-shadow: -2px -2px 0px #000000;
  text-shadow: -4px -3px 0px #79a7e0;
  z-index: 50
}

#game-content{
  position: relative;
}

@keyframes messageAnimation {
  0% {
    transform: scale(0.3);
    filter: opacity(100%);
  }
  30% {
    transform:scale(1);
    filter:opacity(100%);
  }
  100% {
    transform: scale(1.6);
    filter:opacity(0%);
  }
}

#sliders-zone{
  clear: both;
  margin:auto;
  width: 420px;
  z-index: 1;
  color:white;
  transition: all 1s ease-in-out;
  /* outline: 1px solid yellow; */
}
#sliders-zone input{
  width: 320px;
}

#checkButton{
  margin: auto;
}

.percentage{
  position:absolute;
  z-index: -1;
  font-size: 3em;
  left: 50%;
  top:50%;
  font-weight: bold;
}
.percentage p{
  color:white;
}

#level-container{
  font-size: 2em;
}

#current-level{
  font-weight: bold;
}
/*Stylizing slider*/
/* Special styling for WebKit/Blink */
input[type=range] {
  -webkit-appearance: none;
  width: 100%;
  margin: 14.3px 0;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  background: #0071a9;
  border-radius: 1.3px;
  border: 0.2px solid #010101;
}
input[type=range]::-webkit-slider-thumb {
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 1.4px solid #000000;
  height: 37px;
  width: 15px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.75);
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -14.5px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #0082c3;
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  background: #0071a9;
  border-radius: 1.3px;
  border: 0.2px solid #010101;
}
input[type=range]::-moz-range-thumb {
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 1.4px solid #000000;
  height: 37px;
  width: 15px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.75);
  cursor: pointer;
}
input[type=range]::-ms-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: #006090;
  border: 0.2px solid #010101;
  border-radius: 2.6px;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]::-ms-fill-upper {
  background: #0071a9;
  border: 0.2px solid #010101;
  border-radius: 2.6px;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]::-ms-thumb {
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 1.4px solid #000000;
  height: 37px;
  width: 15px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.75);
  cursor: pointer;
  height: 8.4px;
}
input[type=range]:focus::-ms-fill-lower {
  background: #0071a9;
}
input[type=range]:focus::-ms-fill-upper {
  background: #0082c3;
}

/*Sliders RGB : on ajoute les couleurs correspondantes sur les tracks*/
input[type=range].rgb#slider1::-webkit-slider-runnable-track {
  background: #F00;
}
input[type=range].rgb#slider2::-webkit-slider-runnable-track {
  background: #0F0;
}
input[type=range].rgb#slider3::-webkit-slider-runnable-track {
  background: #00F;
}
/*Sliders CMY : on ajoute les couleurs correspondantes sur les tracks*/
input[type=range].cmy#slider1::-webkit-slider-runnable-track {
  background: #0FF;
}
input[type=range].cmy#slider2::-webkit-slider-runnable-track {
  background: #F0F;
}
input[type=range].cmy#slider3::-webkit-slider-runnable-track {
  background: #FF0;
}


#menu-or-retry-zone{
  display: flex;
  position: fixed;
  left:50%;
  top:50%;
  justify-content: space-between;
  width: 300px;
  z-index: 0;
}

#explications p{
  margin-bottom: 10px;
  text-align: justify;
}

#explications ul{
  padding-left: 50px;
}
.formula{
  background-color:white;
  margin:auto;
  display: block;
  margin-bottom: 8px;
}