/* /////////////////////////////////////////////////////////////////////////////////////////// */
/* //////////////////////////// POSTIONNEMENT DE L'IMAGE //////////////////////////////////// */
/* ///////////////////////////////////////////////////////////////////////////////////////// */


body {
  /*border: 1px solid darkblue;*/
  display:none;
  background: url("../../Images/background2.jpg") no-repeat fixed center/cover;
  justify-content: center;
  display: flex;
  height: 97vh;
}



#svg-container {
  display : none;
  width:  98%;
  height: 98%;
  margin-left: auto; /*pour l'alignement horizontal*/
  margin-right: auto; /*pour l'alignement horizontal*/
  margin-top: 50vh; /* poussé de la moitié de hauteur de viewport */  /*pour l'alignement vertical*/
  transform: translateY(-50%); /*pour l'alignement vertical*/
  position: relative;
  text-align: center;
}



.svg-content {
width:  100%;
height: 100%;
display: flex;
margin: auto;

}



/* /////////////////////////////////////////////////////////////////////////////////////////////////////// */
/* /////////////////////////////////////////////// BOUTONS //////////////////////////////////////////////// */
/* ////////////////////////////////////////////////////////////////////////////////////////////////////// */


#blueHexButton, #redHexButton, #purpleHexButton, #freeBoardButton, #twoPlayerButton{
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}


#blueHexButton{
  fill: blue;
}

.blueButtonOn{
  stroke: #000000;
  stroke-width: 7;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-miterlimit:4;
  stroke-dasharray:none;
  stroke-dashoffset:0;
  stroke-opacity:1;

}

.blueButtonOff:hover{
  fill: blue;
  stroke: #AAAAAA;
  stroke-width: 7;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-miterlimit:4;
  stroke-dasharray:none;
  stroke-dashoffset:0;
  stroke-opacity:1;
}



#redHexButton{
  fill: red;
}

.redButtonOn{
  stroke: #000000;
  stroke-width: 7;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-miterlimit:4;
  stroke-dasharray:none;
  stroke-dashoffset:0;
  stroke-opacity:1;
  cursor: pointer;
}


.redButtonOff:hover{
  fill: red;
  stroke: #AAAAAA;
  stroke-width: 7;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-miterlimit:4;
  stroke-dasharray:none;
  stroke-dashoffset:0;
  stroke-opacity:1;
  cursor: pointer;
}



#purpleHexButton{
  fill: rgb(215, 186, 216);
}

.purpleButtonOn{
  stroke: #000000;
  stroke-width: 7;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-miterlimit:4;
  stroke-dasharray:none;
  stroke-dashoffset:0;
  stroke-opacity:1;
  cursor: pointer;
}


.purpleButtonOff:hover{
  fill: rgb(215, 186, 216);
  stroke: #AAAAAA;
  stroke-width: 7;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-miterlimit:4;
  stroke-dasharray:none;
  stroke-dashoffset:0;
  stroke-opacity:1;
  cursor: pointer;
}




#freeBoardButton, #twoPlayerButton{
  stroke: #AAAAAA;
  stroke-width: 7;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-miterlimit:4;
  stroke-dasharray:none;
  stroke-dashoffset:0;
  stroke-opacity:1;
  display:flex;
  justify-content: center;
}



#text2, #text1{
  font-size: 45%;
}

.freeBoardButtonOff{
  fill: white;
}

.freeBoardButtonOn{
  fill: yellow;

}

.twoPlayerButtonOff{
  fill: white;
}

.twoPlayerButtonOn{
  fill: yellow;
}



#boutonRetour{
  cursor: pointer;
  fill: white; 
  transform: translate(85%,58%) scale(1.8) ;
}

#boutonRetour.unavailable{
  cursor : none;
  opacity : 0.2;
}




/* //////////////////////////////////////////////////////////////////////////////////// */
/* //////////////////////////////// HEXAGONES //////////////////////////////////////// */
/* ////////////////////////////////////////////////////////////////////////////////// */


use.free {
  transition: 0.2s;
  cursor: pointer;
  fill: white;
  opacity:1;
}

use.eyedByBlue:hover {
  fill: #dbebff;
}

@media screen and (max-width: 850px) {
  use.eyedByBlue:hover {
    fill: white;
  }
}

use.heldByBlue{
  cursor: pointer;
	fill: blue;
}


use.eyedByRed:hover {
  fill: #f8bcce;
}


@media screen and (max-width: 850px) {
  use.eyedByRed:hover {
    fill: white;
  }
} 



use.heldByRed{
  cursor: pointer;
fill: red;
}




use.heldByGod{
  cursor: pointer;
fill: rgb(240, 184, 241);
}

use.eyedByGod:hover {
  fill: #fce2ff;
}

@media screen and (max-width: 850px) {
  use.eyedByGod:hover {
    fill: white;
  }
}




.victory{
  animation: colorblink 0.3s infinite;
}


@keyframes colorblink { 
0% { }
50% { fill: yellow; } 
}