.game_button_find_the_correct_one {
  /* reset */
  border: none;
  cursor: pointer;
  transition: none;
  /* actual values */
  display: inline-block;
  background-color: black;
  color: beige;
  margin: 10px;
  padding: 10px;
  border-radius: 10px;
  font-size: 16px;
}

.game_button_find_the_correct_one_wrong {
  /*border: 1px solid red;*/
  background-color: red;
}

.game_button_find_the_correct_one_unclickable {
  /* reset */
  border: none;
  cursor: pointer;
  transition: none;
  /* actual values */
  display: inline-block;
  background-color: rgb(0, 92, 20);
  color: beige;
  margin: 10px;
  padding: 10px;
  border-radius: 10px;
  font-size: 16px;
}

.game_progression_bar {
  width: 100vw;
}

.game_button_find_the_correct_one img {
  max-width: 100%;
  width: 400px;
}

.game_button_find_the_correct_one_unclickable img {
  min-width: 200px;
  max-width: 400px;
  object-fit: contain;  

  /*
  max-width: 100%;
  width: 400px;
  max-height: 450px;
  */
}

.game_questionContainer {
  text-align: center;
}

.game_buttonsContainer {
  text-align: center;
  padding-bottom: 50px;
}

.game_victoryParagraph {
  font-size: 72px;
  text-align: center;
  background-color: rgba(50, 200, 50, 0.5);
  border-radius: 30px;
}

.GameTypeAllLettersContainers {
  text-align: center;
  /* padding: 10px; */
}

.GameTypeAllLettersSubContainers {
  /*min-width:200px;
  max-width:600px;*/
  width: 100%;
  height: 100%;
}

.GameTypeAllLettersImage {
  /*width:inherit;
  height:inherit;  	*/
  min-width: 200px;
  max-width: 400px;/*360px;*/
  object-fit: contain;
  background-color: var(--color-background);
  border-radius: 10px;
  border: 10px solid rgb(0, 92, 20);  

}

.GameTypeAllLettersContainersFoundLetters {
  text-align: center;
  /* padding: 10px; */
  /* font-size: xx-large; */
}

/*===================================
SECTION - GAME - GameDominantCouples
=====================================*/

.GameDominantCouplesContainer {
  display: flex;
  align-items: flex-start;
}

.GameDominantCouplesManipulableContainer1 {
  box-sizing: border-box;
  width: 50%;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  /* flex-direction: column; */
}

.GameDominantCouplesManipulableContainer2 {
  box-sizing: border-box;
  width: 50%;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  /* flex-direction: column; */
}

.gameDominantCouplesGameElementText {


  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;

}

.gameDominantCouplesGameElementTextSub {

  border: 1px solid var(--color-text);
  border-radius: 10px;

  padding: 10px;
  margin: 10px;


  box-sizing: border-box;
  display: inline-block;
  max-width: 200px;
  background-color: var(--color-background);
  color: var(--color-text);

  transform: scale(1, 1);
  transform-origin: center;
  transition: transform 0.3s;

  pointer-events: none;
}

.gameDominantCouplesGameElementImage {
  text-align: center;
  line-height: 0;
  box-sizing: border-box;
  display: inline-block;
  color: var(--color-text);
  vertical-align: middle;
  transform: scale(1, 1);
  transform-origin: center;
  transition: transform 0.3s;
}

.gameDominantCouplesImage {
  /*max-width: 200px;*/
  /* fout la merde */

  min-width: 100px;
  max-height: 200px;
  /* là, ça marche ! */
  border-radius: 6px;
  padding: 1px;
}


.gameDominantCouplesGameElementImage image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

.GameDominantCouplesGameElementScaleSelect {
  transform: scale(0.9, 0.9);
}

.GameDominantCouplesGameElementScaleDown {
  transform: scale(1, 0);
}

.GameDominantCouplesGameElementCorrect {
  border: 1px solid green;
}

.GameDominantCouplesGameElementWrong {
  border: 1px solid red;
}



.GameDominantCouplesTime {

  position: fixed;
  right: 50px;
  bottom: 20px;


  width: 50px;
  height: 20px;
  background-color: transparent;
  color: var(--color-text);

  pointer-events: none;
  font-size: 12px;
  text-align: right;
}


/*==============================
SECTION - GAME - GameFallingDOM
================================*/

.GameFallingDOMContainer {
  width: 360px;
  /* 98%;*/
  margin: auto;
  /*max-width:500px;
  min-height:100px;*/
  height: 670px;
  /*560px;/*70%;*/
  position: relative;
}

.GameFallingDOMFrame {
  width: 360px;
  /* 98%;*/
  margin: auto;
  /*max-width:500px;
  min-height:100px;*/
  height: 670px;
  /*740px;/*560px;/*70%;*/
  /*max-height:800px;*/
  border-top: 35px solid var(--color-secondary);
  border-bottom: 0px solid var(--color-secondary);
  border-left: 1px solid var(--color-secondary);
  border-right: 1px solid var(--color-secondary);
  border-radius: 10px;


  position: absolute;
  top: -20px;
  left: 0px;
  /* au dessus du reste */
  z-index: 2;
  /* les éléments en dessous doivent être clickables */
  pointer-events: none;
}

.GameFallingDOMBottomFrame {
  position: absolute;
  top: 480px;
  left: 0px;

  width: 360px;
  /* 98%;*/
  margin: auto;
  /*max-width:500px;
  min-height:100px;*/
  height: 200px;
  /*70%;*/
  /*max-height:800px;*/
  background-color: var(--color-secondary);
  border: 50px solid var(--color-secondary);
  border-radius: 10px;



  /* au dessus du reste */
  z-index: 3;
  /* les éléments en dessous doivent être clickables */
  pointer-events: none;
}



.GameFallingDOMGameElementScaleDown {
  transform: scale(1, 0);
}

.GameFallingDOMGameElementCorrect {
  border: 1px solid green;
}

.GameFallingDOMGameElementLeft {
  left: 1px;
}

.GameFallingDOMGameElementRight {
  left: 180px;
}


.GameFallingDOMGameElement {
  position: absolute;

  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  overflow: hidden;

  width: 178px;
  height: 109px;
  box-sizing: border-box;
  background-color: var(--color-background);
  color: var(--color-text);
  border: 1px solid var(--color-text);
  padding: 1px;
  margin: 0px;
  border-radius: 10px;
  transform: scale(1, 1);
  transform-origin: center;
  transition: transform 0.3s;
  text-align: center;
}

.GameFallingDOMGameElementImage {
  position: absolute;

  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  overflow: hidden;

  box-sizing: border-box;
  background-color: var(--color-background);
  color: var(--color-text);
  border: 1px solid var(--color-text);
  padding: 0px;
  margin: 0px;
  border-radius: 10px;
  transform: scale(1, 1);
  transform-origin: center;
  transition: transform 0.3s;
}


.GameFallingDOMGameSubElement {

  display: inline-block;

  /*max-width: 200px;*/



}

.GameFallingDOMGameSubElementImage {

  display: inline-block;
  width: 176px;
  height: 107px;
  object-fit: contain;

  /*max-width: 200px;*/



}


.GameFallingDOMGameElementText {

  pointer-events: none;
  font-size: 12px;
}

.GameFallingDOMGameElementScaleSelect {
  border: 2px solid blue;
}

.GameFallingDOMGameElementCorrect {
  border: 1px solid green;
}

.GameFallingDOMGameElementScaleDown {
  /*transform: scale(0.9, 0.9);*/
  /*transform: scale(0.1, 0.1);*/
  transform: scale(0.0, 0.0);
}

.GameFallingDOMGameElemenWrong {
  border: 1px solid red;
}

.GameFallingDOMGameElementBottom3 {
  position: absolute;
  left: -20px;
  top: 482px;

  /* au dessus */
  z-index: 4;

  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  /*flex-start;*/
  flex-wrap: wrap;
  overflow: hidden;

  width: 144px;
  height: 104px;
  box-sizing: border-box;
  background-color: var(--color-background);
  color: var(--color-text);
  border: 1px solid var(--color-text);
  padding: 0px;
  /*10px;*/
  margin: 0px;
  border-radius: 10px;
  transform: scale(1, 1);
  transform-origin: center;
  transition: transform 0.3s;

  transform: scale(0.6, 0.6);
  text-align: center;
}

.GameFallingDOMGameElementBottom3Image {
  position: absolute;
  left: -20px;
  top: 482px;

  /* au dessus */
  z-index: 4;

  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  /*flex-start;*/
  flex-wrap: wrap;
  overflow: hidden;

  /*width:144px;
  height: 104px;  */
  box-sizing: border-box;
  background-color: var(--color-background);
  color: var(--color-text);
  border: 1px solid var(--color-text);
  padding: 0px;
  /*10px;*/
  margin: 0px;
  border-radius: 10px;
  transform: scale(1, 1);
  transform-origin: center;
  transition: transform 0.3s;

  transform: scale(0.6, 0.6);
}


.GameFallingDOMGameElementBottom2 {
  /*width: 70px;*/
  /*left:60px;*/
  top: 482px;
  transform: scale(0.8, 0.8) translateX(110px);
  z-index: 5;
}

.GameFallingDOMGameElementBottom1 {
  /*width:30px;*/
  /*left:180px;*/
  top: 482px;
  transform: scale(1, 1) translateX(200px);
  z-index: 6;
}

.GameFallingDOMGameSubElementImageBottom {

  display: inline-block;
  width: 176px;
  height: 107px;
  object-fit: contain;

}

.GameFallingDOMGameElementButtonDown {
  position: absolute;
  left: 150px;
  top: 585px;
  z-index: 7;
}

.GameFallingDOMImage {
  width: inherit;
  height: inherit;
  /*width: 100%;
  height: 100%;*/
  object-fit: contain;
  background-color: var(--color-background);

}


.GameFallingDOMTime {
  position: absolute;
  left: 250px;
  top: -2px;

  /* au dessus */
  z-index: 4;

  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  /*flex-start;*/
  flex-wrap: wrap;
  overflow: hidden;

  width: 50px;
  height: 20px;
  /*box-sizing: border-box;  */
  background-color: transparent;
  color: var(--color-text);


  pointer-events: none;
  font-size: 12px;
  text-align: right;
}

.GameFallingDOMPoints {
  position: absolute;
  left: 20px;
  top: -2px;

  /* au dessus */
  z-index: 4;

  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  /*flex-start;*/
  flex-wrap: wrap;
  overflow: hidden;

  width: 50px;
  height: 20px;
  /*box-sizing: border-box;  */
  background-color: transparent;
  color: var(--color-text);


  pointer-events: none;
  font-size: 12px;
  text-align: right;
}

.game_victoryParagraphAbsolute {
  position: absolute;

  /* au dessus */
  z-index: 7;
  width: 100%;

  top: 100px;
  font-size: 72px;
  text-align: center;
  background-color: rgba(50, 200, 50, 0.5);
  border-radius: 30px;
}


/*===================================
SECTION - GAME - GameFixDominantCouples
=====================================*/

.GameFixDominantCouplesContainer {
  display: flex;
  align-items: flex-start;

  width: 360px;
  margin: auto;
  height: 700px;
  position: relative;

  /*border: 1px solid rgb(255,0,0);*/
}

.GameFixDominantCouplesManipulableContainer1 {
  /*border: 1px solid rgb(0,255,0);*/
  width: 180px;
  margin: auto;
  height: 700px;
  position: relative;
}

.GameFixDominantCouplesManipulableContainer2 {
  /*border: 1px solid rgb(0,255,255);*/
  width: 180px;
  margin: auto;
  height: 700px;
  position: relative;
}



.GameFixDominantCouplesGameElementText {

  /*border: 1px solid rgb(255,255,0);*/
  width: 178px;
  margin: auto;
  height: 126px;
  position: relative;

  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  overflow: hidden;

  box-sizing: border-box;
  background-color: var(--color-background);
  color: var(--color-text);
  border: 1px solid var(--color-text);
  padding: 0px;
  margin: 1px;
  border-radius: 10px;

}

.GameFixDominantCouplesGameElementTextSub {

  padding: 10px;
  pointer-events: none;
}

.GameFixDominantCouplesGameElementImage {
  /*border: 1px solid rgb(255,0,255);*/
  width: 178px;
  margin: auto;
  height: 126px;
  position: relative;


  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  overflow: hidden;

  box-sizing: border-box;
  background-color: var(--color-background);
  color: var(--color-text);
  border: 1px solid var(--color-text);
  padding: 0px;
  margin: 1px;
  border-radius: 10px;
}

.GameFixDominantCouplesImage {
  object-fit: contain;
  width: 178px;
  height: 126px;
}


.GameFixDominantCouplesGameElementImage image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

.GameFixDominantCouplesGameElementScaleSelect {
  transform: scale(0.9, 0.9);
}

.GameFixDominantCouplesFog {
  z-index: 1;
  background-color: rgba(127, 127, 127, 0.7);
  width: 178px;
  height: 132px;
  position: absolute;
}

.GameFixDominantCouplesGameElementCorrect {
  border: 1px solid green;
}

.GameFixDominantCouplesGameElementWrong {
  border: 1px solid red;
}

.GameFixDominantCouplesGameElementDone {

  pointer-events: none;
}



.GameFixDominantCouplesTime {

  position: fixed;
  right: 50px;
  bottom: 20px;


  width: 50px;
  height: 20px;
  background-color: transparent;
  color: var(--color-text);

  pointer-events: none;
  font-size: 12px;
  text-align: right;
}


/*===================================
SECTION - GAME - GameSmallDominantCouples
=====================================*/

.GameSmallDominantCouplesContainer {
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
  align-items: start;

  /*width:360px;*/
  /*height: 700px;*/
  max-width: 500px;
  /*max-height: 800px;*/ /*grey area too small because of that*/
  margin: auto;
  position: relative;

  /*border: 1px solid rgb(255,0,0);*/
}


.GameSmallDominantCouplesGameElement {
  width: 115px;
  height: 115px;
}

.GameSmallDominantCouplesGameElementText {

  margin: auto;
  position: relative;

  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  overflow: hidden;

  box-sizing: border-box;
  background-color: var(--color-background);
  color: var(--color-text);
  border: 1px solid var(--color-text);
  padding: 0px;
  margin: 1px;
  border-radius: 10px;

}

.GameSmallDominantCouplesGameElementTextSub {

  padding: 10px;
  pointer-events: none;
  font-size: 14px;
}

.GameSmallDominantCouplesGameElementImage {
  margin: auto;
  position: relative;


  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  overflow: hidden;

  box-sizing: border-box;
  background-color: var(--color-background);
  color: var(--color-text);
  border: 1px solid var(--color-text);
  padding: 0px;
  margin: 1px;
  border-radius: 10px;
}

.GameSmallDominantCouplesImage {
  object-fit: contain;
}


.GameSmallDominantCouplesGameElementImage image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

.GameSmallDominantCouplesGameElementScaleSelect {
  /*transform: scale(0.9, 0.9);*/
  background-color: rgba(127, 127, 255, 0.5);
  z-index: 1;
  width: 178px;
  height: 132px;
  position: absolute;  
}

.GameSmallDominantCouplesFog {
  z-index: 1;
  background-color: rgba(127, 127, 127, 0.7);
  width: 178px;
  height: 132px;
  position: absolute;
}

.GameSmallDominantCouplesGameElementCorrect {
  /*border: 1px solid green;*/
  background-color: rgba(127, 255, 127, 0.3);
  z-index: 1;
  width: 178px;
  height: 132px;
  position: absolute;   
}

.GameSmallDominantCouplesGameElementWrong {
  /*border: 1px solid red;*/
  background-color: rgba(255, 127, 127, 0.3);
  z-index: 1;
  width: 178px;
  height: 132px;
  position: absolute;   
}

.GameSmallDominantCouplesGameElementDone {

  pointer-events: none;
}




.GameSmallDominantCouplesTime {

  position: fixed;
  right: 50px;
  bottom: 20px;


  width: 50px;
  height: 20px;
  background-color: transparent;
  color: var(--color-text);

  pointer-events: none;
  font-size: 12px;
  text-align: right;
}



/*===================================
SECTION - GAME - GameMemoryDOM
=====================================*/

.GameMemoryDOMContainer {
   display: flex;
  flex-direction: row;
  justify-content: center;
  align-content:center;

  flex-wrap: wrap;
  align-items: start;

  
  
  min-width: 50vw;
  min-height: 80vh;
  max-width: 90vw;
  /*max-height: 90vh;*/ /*grey area too small because of that*/
  
  
  margin: auto;
  position: relative;

  /*border: 1px solid rgb(255,0,0);*/
}


.GameMemoryDOMGameElement {
   width: 13vmax;
  height: 20vmax;
  ;
}

.GameMemoryDOMGameElementText {

  margin: auto;
  position: relative;

  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  overflow: hidden;

  box-sizing: border-box;
  background-color: var(--color-background);
  color: var(--color-text);
  border: 1px solid var(--color-text);
  padding: 0px;
  margin: 1px;
  border-radius: 10px;
  text-align: center;

}

.GameMemoryDOMGameElementTextSub {

 padding: 10px;
  pointer-events: none;
  /*font-size: 14px;*/
  font-size: 1.5vmax;
}

.GameMemoryDOMGameElementImage {
  margin: auto;
  position: relative;


  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  overflow: hidden;

  box-sizing: border-box;
  background-color: var(--color-background);
  color: var(--color-text);
  border: 1px solid var(--color-text);
  padding: 0px;
  margin: 1px;
  border-radius: 10px;
}

.GameMemoryDOMImage {
  object-fit: contain;
}

.GameMemoryDOMImageBack {
  background-image: url("../../images/Games/1.png");
  position: absolute;
  object-fit: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-background-size: cover;
  object-position: 50% 50%;
  width : 100%;
  height : 100%;
  
}



.GameMemoryDOMImageBackScale {
  transition: transform 0.3s;
  transform: scale(0, 1);
}

.GameMemoryDOMGameElementImage image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

.GameMemoryDOMGameElementScaleSelect {
  /*transform: scale(0.9, 0.9);*/
  background-color: rgba(127, 127, 255, 1);
}

.GameMemoryDOMFog {
  z-index: 1;
  background-color: rgba(127, 127, 127, 0.7);
  width: 13vmax;
  height: 20vmax;
  position: absolute;
}

.GameMemoryDOMGameElementCorrect {
  /*border: 1px solid green;*/
  background-color: rgba(127, 255, 127, 1);
}

.GameMemoryDOMGameElementWrong {
  /*border: 1px solid red;*/
  background-color: rgba(255, 127, 127, 1);
}

.GameMemoryDOMGameElementDone {

  pointer-events: none;
}



.GameMemoryDOMTime {

  position: fixed;
  right: 50px;
  bottom: 20px;


  width: 50px;
  height: 20px;
  background-color: transparent;
  color: var(--color-text);

  pointer-events: none;
  font-size: 12px;
  text-align: right;
}
.GameMemoryDOMMainContainer{
  width: 100vw;
  height : 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-wrap: nowrap;
  align-items: center;
}

/*===================================
SECTION - GAME - GameAngryCouples
=====================================*/

.GameAngryCoupleProgressionBar{
  width: 100%;
  z-index:13;
  position: fixed;
  left: 0px;
  top: 0px;  
}



/*===================================
               GENERAL
=====================================*/
.game_container{
 width: 100vw;
 /*height : 100vh;*//*grey area too small because of that*/
}



/*========================
SECTION - GAME
========================*/
.game {
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  margin: 0px;
  padding: 0px;
  max-width: auto;
  width: 100%;
  z-index: 15;
}

.game_button {
  position: fixed;
  left: 1px;
  bottom: 1px;
}

.game_image {
  /* dice.svg size : 100 x 72 */
  width: 70%;
  height: 70%;
  position: absolute;
  object-fit: contain;
  object-position: 50% 50%;
}



/* EOF */