@import url('https://fonts.googleapis.com/css2?family=Architects+Daughter&family=Balsamiq+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');

/*
Bleu très foncé : #113FA8
Bleu foncé : #0B4BDB
Orange Pâle : E06D38
Orange : #DB2E0B
Rouge : #8F240E

Bleu moins ciel : #00778F
Bleu ciel : #00B7DB
Bleu très ciel : #19D9FF
Bleu normal : #0C8FF2

Jaune foncé : #DBA016
Jaune pétard : #DBC816
Vert pomme : #90DB0B
Vert : #0BDB8B
Rose : #DB1668

*/
html, body {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  font-family: 'Balsamiq Sans', cursive;
}
body {
  overflow-y: hidden;
  height: 100%;
  /*background-color: #0C8FF2;*/
  background: linear-gradient(60deg, #0B4BDB 0%, #0C8FF2 100%);
  position: relative;
  color: white;
  font-size: 14px;
}


/* width */
::-webkit-scrollbar {
  width: 10px;
  max-height: 8px;
  background: transparent;
}

/* Track */
::-webkit-scrollbar-track {
  background: transparent; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #DBA016; 
}


.logo {
  position: fixed;
  top: 18px;
  left: 48px;
}

.membre {
  position: fixed;
  top: 18px;
  right: 48px;
  text-align: center;
  z-index: 99;
}
.membre a {
  color: #19D9FF;
  text-decoration: none;
}
.membre a:hover {
  text-decoration: underline;
}

.avatar_menu {
  border-radius: 4px;
  vertical-align: middle;
  width: 54px;
  height: 54px;
}
.membre .item {
  margin-top: 20px;
  border-radius: 4px;
  vertical-align: middle;
  padding: 21px 31.5px 15px 31.5px;
  display: block;
  text-align: center;
  background-color: rgba(11, 75, 219, 0.4);
  transition: all 0.2s;
  cursor: pointer;
}
.membre .item:hover {
  background-color: rgba(11, 75, 219, 0.8);
}
.membre .item .fas {
  font-size: 3em;
  margin-bottom: 14px;
  display: block;
}

.rejoindre {
  display: none;
  align-content: center;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  /*transition: all 0.5s;*/
}
.espace_rejoindre {
  width: 25vw;
  z-index: 2;
  text-align: center;
}
.espace_rejoindre h1 {
  color: white;
}
@media screen and (max-width: 1024px) {
  .espace_rejoindre {
    width: 66vw;
  }
}
@media screen and (max-width: 425px) {
  .espace_rejoindre {
    width: 90vw;
  }
}

.btn_rejoindre {
  color: white;
  background-color: #0BDB8B;
  width: 100%;
  height: 200px;
  cursor: pointer;
  border: 0;
  font-size: 2em;
  border-radius: 2px;
  outline: 0;
  font-family: 'Balsamiq Sans', cursive;
}
.btn_rejoindre:hover {
    -webkit-animation: bounceOut 2s infinite;
      animation: bounceOut 2s infinite;
}
.btn_rejoindre span {
  font-size: 0.5em;
}

.btn_creer {
  margin-top: 20px;
  color: white;
  background-color: #DBA016;
  width: 100%;
  height: 100px;
  cursor: pointer;
  border: 0;
  font-size: 2em;
  border-radius: 2px;
  outline: 0;
  font-family: 'Balsamiq Sans', cursive;
}
.btn_creer:hover {
    -webkit-animation: bounceOut 2s infinite;
      animation: bounceOut 2s infinite;
}


.game {
  /*display: flex;*/
  display: none;
  align-content: center;
  align-items: flex-start;
  justify-content: center;
  /*flex-flow: column wrap;*/
  flex-wrap: nowrap;
  width: 100%;
  height: 100%;
  z-index: 4;
  position: absolute;
  /*transition: all 0.5s;*/
}

.espace_jeu {
  width: 40%;
  display: flex;
  flex-flow: column wrap;
  padding-top: 24px;
  padding-bottom: 24px;

}

.barre_temps {
  width: 100%;
  height: 12px;
  z-index: 3;
  text-align: center;
  display: inline-flex;
  flex-wrap: wrap;
  background-color: #113FA8;
}
.barre_temps .temps {
  width: 100%;
  height: 12px;
  background-color: #00B7DB;
  transition: background-color 1.2s;
}
.barre_temps .temps.urgent {
  background-color: #DB1668;
}
.espace_question {
  width: 100%;
  z-index: 3;
  text-align: center;
  display: inline-flex;
  flex-wrap: wrap;
}
.parametres {
  width: 50%;
  text-align: left;
  display: none;
  padding: 12px;
}
.informations {
  width: 100%;
  /*font-size: 1.8em;*/
  /*padding: 24px 24px;*/
  /*margin-bottom: 20px;*/
  display: flex;
}
.informations .difficulte {
  width: 50%;
  padding: 8px;
  color: white;
  text-align: center;
  min-height: 17px;
  /*text-transform: uppercase;*/
}
.informations .difficulte.tres-facile { background-color: #90DB0B; }
.informations .difficulte.facile { background-color: #0BDB8B; }
.informations .difficulte.moyenne { background-color: #E06D38; }
.informations .difficulte.difficile { background-color: #DB2E0B; }
.informations .difficulte.tres-difficile { background-color: #8F240E; }
.informations .theme {
  width: 50%;
  padding: 8px;
  text-align: center;
  min-height: 17px;
  background-color: #113FA8;
}
/*.informations .theme.facile         { border: 1px solid #90DB0B; border-bottom: 0; }*/
/*.informations .theme.moyenne        { border: 1px solid #E06D38; border-bottom: 0; }*/
/*.informations .theme.difficile      { border: 1px solid #DB2E0B; border-bottom: 0; }*/
/*.informations .theme.tres-difficile { border: 1px solid #8F240E; border-bottom: 0; }*/

.question {
  width: 100%;
  font-size: 1.8em;
  background-color: #0B4BDB;
  padding: 24px 24px;
  margin-bottom: 20px;
}
.question img {
  text-align: center;
  max-width: 240px;
  max-height: 240px;
  margin: auto;
  display: block;
}

.btn_reponse {
  margin: 10px;
  color: white;
  background-color: #DBA016;
  width: calc(50% - 20px);
  height: 100px;
  cursor: pointer;
  border: 0;
  font-size: 1.4em;
  border-radius: 2px;
  outline: 0;
  transition: all 0.2s;
  font-family: 'Balsamiq Sans', cursive;
  background-position: 10px 6px;
  background-repeat: no-repeat;
  background-size: 32px;
}
.btn_reponse:hover, .btn_reponse.active {
  background-color: #0C8FF2;
}
.btn_reponse.bonne_reponse {
  background-color: #59AD0C;
  background-image: url('../img/check-mark.png');
  -webkit-animation: bonneReponse 1s 3;
  animation: bonneReponse 1s 3;
}


.joueur {
  width: 40%;
  padding-top: 48px;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center ;
  flex-grow: 4;
    position: absolute;
    bottom: 0;
}
.joueur .avatar {
  width: 20%;
}
.joueur .avatar img {
  border-radius: 4px;
}
.joueur .score {
  width: 40%;

}
.joueur .br {
  width: 40%;
  text-align: center;
}
.vie_morte {
  -webkit-animation: looseLife 1.3s 1;
  animation: looseLife 1.3s 1;
}

.titre {
  display: block;
  text-align: center;
  padding: 10px;
  /*font-weight: bold;*/
  text-transform: uppercase;
}

.mj {
  width: 100%;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: flex-start;
  flex-grow: 3;
  position: absolute;
  bottom: 0;
  /*min-height: 740px;*/
}
.mj .parametres_partie {
  width: 33.33%;
}
.mj .liste_participant {
  width: 33.33%;
}
.mj .liste_participant .liste_joueur {
  width: 100%;
  height: 300px;
  overflow-y: auto;

  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  align-content: flex-start;
}
.mj .statitiques {
  width: 33.33%;
}

.btn_action {
  color: white;
  background-color: #DBA016;
  width: 50%;
  padding: 12px;
  cursor: pointer;
  border: 0;
  font-size: 1.4em;
  border-radius: 2px;
  outline: 0;
  transition: all 0.2s;
  font-family: 'Balsamiq Sans', cursive;
}
.btn_action:hover, .btn_action.active {
  background-color: #0C8FF2;
}
.btn_action.commencer {
  background-color: #00B7DB;
}
.btn_action.commencer:hover, .btn_action.commencer.active {
  background-color: #0C8FF2;
}
.btn_action.quitter {
  background-color: #8F240E;
}
.btn_action.quitter:hover, .btn_action.quitter.active {
  background-color: #DB2E0B;
}
.disabled {
  background-color: #949494 !important;
}

.mt-2 { margin-top: 12px; }
label {
  display: block;
  padding: 4px 8px;
}

.carte_joueur {
  /*display: inline-block;*/
  padding: 15px 20px;
  background-color: #113FA8;
  min-width: 160px;
  position: relative;
  cursor: pointer;
  background-position: 8px 8px;
  background-repeat: no-repeat;
  background-size: 18px;
  margin: 2px;
}
.carte_joueur.bonne_reponse {
  background-color: #59AD0C;
  background-image: url(../img/check-mark.png);
}
.carte_joueur.mauvaise_reponse {
  background-color: #67090D;
  background-image: url(../img/cross-mark.png);
}
.carte_joueur .pseudo, .carte_joueur .vie {
  display: block;
  text-align: center;
  padding: 2px;
}
.carte_joueur .reponse {
  opacity: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  top: 0; left: 0;
  text-align: center;
  display: flex;
  align-items: center;
  transition: all 0.2s;
}
.carte_joueur .reponse p {
  width: 100%;
  margin: 0; padding: 0;
  text-align: center;
}
.carte_joueur .reponse:hover {
  opacity: 1;
}



/* Animation */
.vagues {
  width: 100%;
    bottom: 0;
    padding: 0;
    position: fixed;
    height: 358px;
    z-index: 1;
}
.waves {
    position: absolute;
    bottom: 0;
}
.parallax > use {
  animation: move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite;
}
.parallax > use:nth-child(1) {
  animation-delay: -2s;
  animation-duration: 7s;
}
.parallax > use:nth-child(2) {
  animation-delay: -3s;
  animation-duration: 10s;
}
.parallax > use:nth-child(3) {
  animation-delay: -4s;
  animation-duration: 13s;
}
.parallax > use:nth-child(4) {
  animation-delay: -5s;
  animation-duration: 20s;
}
@keyframes move-forever {
  0% {
   transform: translate3d(-90px,0,0);
  }
  100% { 
    transform: translate3d(85px,0,0);
  }
}





select {
  background-color: #0B4BDB;
  border: 0;
  padding: 6px 18px;
  color: white;
  outline: 0;
}
select option {
  border: 0;
}



@-webkit-keyframes bounceOut {
  0% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  25% {
    opacity: 1;
    -webkit-transform: scale(0.95);
            transform: scale(0.95);
  }
  50% {
    opacity: 1;
    -webkit-transform: scale(1.05);
            transform: scale(1.05);
  }
  75% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    opacity: 1;
  }
}

@keyframes bounceOut {
  0% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  25% {
    opacity: 1;
    -webkit-transform: scale(0.95);
            transform: scale(0.95);
  }
  50% {
    opacity: 1;
    -webkit-transform: scale(1.05);
            transform: scale(1.05);
  }
  75% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    opacity: 1;
  }
}

@keyframes looseLife {
  0% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  25% {
    opacity: 1;
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
  50% {
    opacity: 1;
    -webkit-transform: scale(0.85);
            transform: scale(0.85);
  }
  75% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    opacity: 1;
  }
}

@keyframes bonneReponse {
  0%   { background-color: #DBA016; }
  100% { background-color: #59AD0C; }
}







/** MOBILE **/
@media screen and (max-width: 768px) {
  .logo img { max-width: 20%; height:  auto; }
  .membre .item { display: none; }
  .espace_jeu { width: 80%; }
  .btn_reponse {
    width: 100%;
    margin: 5px;
  }
}