@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;300;400;600;800&display=swap');

*{
font-family:'Montserrat',arial;
font-weight:300;
font-size:1em;
}

body{
background:#e73161;
color:#ffffff;
max-width:480px;
margin:auto;
position:relative;
}

#bkgBox{
top:0;
left:0;
background:#e73161;
position:fixed;
width:100%;
height:100%;
opacity:.75;
cursor:pointer;
}

#popupBox{
position:absolute;
z-index:999;
background:#ffffff;
width:90%;
margin:5%;
padding:calc(5% - 5px);
border:5px solid #ffc800;
margin:auto;
border-radius:10px;
top: 50%;
transform: translateY(-50%);
}
#popupBox input{
width:90%;
background:#e73161;
border:none;
color:#ffffff;
padding:5%;
margin:0 0 15px 0;
font-size:1.1em;
}
#popupBox input::placeholder{
color:#ffffff;
opacity:1;
}
#popupBox h2,
#popupBox p{
color:#e73161;
font-weight:400;
margin:0;
font-size:1.1em;
}
#popupBox h2{
font-weight:600;
font-size:1.3em;
text-align:center;
margin-bottom:10px;
}
#popupBox input.updMyLog{
background:#ffc800;
width:100%;
border-radius:10px;
margin:10px 0 0 0;
font-size:1.6em;
font-weight:400;
color:#e73161;
}
#popupBox .error{
color:#fff;
background:#ffc800;
font-weight:600;
text-align:center;
padding:10px 0;
font-size:1em;
border-radius:10px;
margin-bottom:10px;
animation: blinkError 0.3s step-start 0s 10 forwards;
}
@keyframes blinkError{
50%{background:#e73161;}
}
#popupBox p strong{
font-weight:600;
color:#e73161;
}


h1{
margin:10px 0 10px 0;
text-align:center;
}
h1 img{
max-width:85%;
}
h1.inGame img{
max-height:128px;
}
h1.inGame{
margin-bottom:-25px;
}
h4{
text-align:center;
color:#242958;
font-weight:500;
}

.button{
width:85%;
background:#ffc800;
color:#e73161;
border-radius:12px;
padding:15px;
margin:15px auto;
cursor:pointer;
font-size:1.1em;
text-align:left;
font-weight:400;
}
.button .rank{
font-weight:800;
}
.button.nochoice:hover,
.button.choice{
background:#ffffff;
}
.button.good{
background:#eb5e40;
animation: blink 0.3s step-start 0s 3 forwards;
}
@keyframes blink{
50%{background:#ffc800;}
}

#quest{
width:95%;
margin:auto;
text-align:left;
font-size:1em;
font-weight:300;
}
#quest p b{
font-weight:600;
text-transform:uppercase;
}
#quest h2{
text-align:center;
font-size:1.5em;
font-weight:600;
color:#ffc800;
text-transform:uppercase;
margin:0 0 15px 0;
padding:0;
line-height:1em;
}
#quest h3{
color:#ffc800;
font-size:1.6em;
font-weight:600;
line-height:1em;
margin:0;
}

#quest .bravo h2{
text-transform:none;
font-weight:600;
}
.bonjour p,
.bravo p{
margin:0 0 8px 0;
line-height:23px;
}
.bravo .score{
display:block;
color:#ffc800;
font-size:1.8em;
font-weight:300;
}
.bravo .score strong{
font-weight:600;
}
.bravo img{
width:64px;
display:inline-block;
margin-right:10px;
}
.bravo div{
display:inline-block;
}
.bonjour{
text-align:center !important;
}
.bonjour div{
display:inline-block;
width:90%;
}
.bonjour strong{
font-weight:600;
}


#classement{
margin-top:20px;
padding-top:15px;
border-top:8px dotted #ffc800;
}
#classement h2{
text-transform:none;
font-weight:600;
margin-bottom:20px;
}
#classement h2 img{
display:inline-block;
vertical-align:bottom;
height:28px;
}

#classement p{
font-size:1.1em;
font-weight:300;
margin:2px 0;
padding:5px;
border-top:3px dotted #ffc800;
}
#classement p.curank{
background:#ffffff;
color:black;
animation: blink .6s step-start infinite;
border-top:none;
}
@keyframes blink{
50%{background:#d9c7e6;}
}


#classement p strong{
color:#ffc800;
font-weight:600;
margin-right:5px;
}

#classement .score{
float:right;
}

p.solo{
display:block;
margin:40px 0;
text-align:center;
}

p a.button{
color:#e73161;
text-decoration:none;
text-transform:uppercase;
padding:15px 30px;
font-weight:600;
font-size:2em;
}
p a.button:hover{
background:#ffffff
}

#quest.home h2{
text-transform:none;
font-weight:600;
line-height:1.2em;
font-size:1.2em;
}
#quest .bonjour h3{
text-transform:none;
font-weight:600;
line-height:1.2em;
font-size:1.2em;
margin-bottom:10px;
}
#quest.home p{
margin:10px 0 30px 0;
font-size:0.85em;
}
.pied{
margin-top:20px;
display:inline-block;
text-align:center;
width:100%;
font-size:12px;
font-weight:400;
}
.pied p {
font-size:12px;
font-weight:400;
}
.pied p a{
margin:0 10px;
font-size:12px;
font-weight:400;
}
.home a{
color:#ffffff;
}
.pied a{
margin:0 10px;
}
.home a:hover{
color:#ffc800
}

#logMeIn input{
display:block;
border:none;
padding:4%;
width:92%;
margin:15px 0;
border:2px solid #ddd;
border-radius:6px;
}

#letsGo.button{
display:block;
border:none;
}

#retLogBox .error{
color:#ffc800;
text-align:center;
font-weight:600;
text-transform:uppercase;
}

#letsGo.button,
#logMeIn input.button{
color:#e73161;
text-decoration:none;
text-transform:uppercase;
padding:15px 30px;
margin:20px auto 20px auto;
font-weight:600;
font-size:2em;
width:auto;
}
input.button:hover{
background:#ffffff;
color:#ffc800;
}
#logMeIn input::placeholder{
font-weight:400;
color:#444;
opacity:.7;
}

#firstLog.button{
color:#e73161;
text-decoration:none;
text-transform:none;
padding:10px 15px;
font-weight:400;
font-size:1.2em;
width:auto;
margin-top:10px;
display:block;
text-align:center;
}


#text{
width:95%;
margin:auto;
}
#text p,
#text li{
font-size:.9em;
margin:0 0 5px 0;
}
#text p{
margin-bottom:10px;
}
#text ul{
margin:0;
padding:0 0 0 30px;
}

#text h2,
#text h4{
color:#ffc800;
margin:0;
padding:0;
}

#text h2{
font-size:1.3em;
}

#text h4{
margin-top:20px;
font-size:1em;
font-weight:600;
display:block;
}

#text p a{
color:#ffc800;
}
#text p a:hover{
color:#ffffff;
}

.comnambules{
font-size:14px;
text-align:center;
color:#ffffff;
font-weight:600;
}
.comnambules a{
color:#ffffff;
text-decoration:none;
font-weight:600;
}
.comnambules a:hover{
color:#ffc800;
}


/*wordle*/
#wordle .ligne{
  text-align:center;
  width:100%;
  margin-bottom:2px;
  height:46px;
}
#wordle .case{
  width:42px;
  height:42px;
  display:inline-block;
  /* border:1px solid white; */
  margin:3px;
  border-radius:6px;
  background:white;
  color:black;
  font-weight:700;
  line-height:42px;
  font-size:1.8em;
  vertical-align:top;
  transition:all ease 2s;
  position:relative;
}
#wordle .case.good{
 background:#242958;
 color:white;
 transform: rotateX(360deg);
}
#wordle .case.badplace{
  background:#ffc800;
 transform: rotateX(360deg);
}
#wordle .case.bad{
  background:#b3b3b3;
 transform: rotateX(360deg);
}

.fond{
background:white;
padding:2px 8px;
border-radius:4px;
font-weight:500;
}
.fond.bleu{background:#242958;color:white;}
.fond.gris{background:#b3b3b3;color:black;}
.fond.jaune{background:#ffc800;color:black;}

/*clavier*/
#clavier{
width:100%;
max-width:480px;
text-align:center;
position:fixed;
bottom:0;
left:50%;
transform:translateX(-50%);
}
#clavier .letter,
#clavier .touche{
width:calc(10% - 5px);
box-sizing:border-box;
height:55px;
display:inline-block;
margin:2px;
border-radius:4px;
background:#e6e6e6;
color:black;
font-weight:700;
line-height:55px;
font-size:1.3em;
cursor:pointer;
transition:all ease 0.1s;
vertical-align:top;
}
#clavier .touche{
position:relative;
width:calc(20% - 6px);
font-size:1em;
}
#clavier .letter:hover,
#clavier .touche:hover{
background:black;
color:white;
}
#removeLetter img{
height:35px;
position:absolute;
top:50%;
left:50;
transform:translateX(-50%) translateY(-50%);
}
#testMot:hover,
#removeLetter:hover{
background:#ffc800 !important; color:black !important;
}

#clavier .letter.yes{background:#242958;color:white}
#clavier .letter.maybe{background:#ffc800;}
#clavier .letter.nop{background:#b3b3b3;}

.bravo{
margin-top:30px;
text-align:center
}
.bravo h2{
text-transform:uppercase !important;
}
.bravo .leMot{
margin:20px;
display:block;
border:2px solid white;
border-radius:10px;
padding:10px;
font-weight:600;
 font-size:28px;
}
.bravo p{
font-size:16px;
font-weight:400;
margin-bottom:20px;
}
.bravo p strong{
font-weight:700; ;
}
#messageBox{
text-align:center;
margin:10px 10px 3px 10px;
line-height:25px;
height:25px;
font-size:18px;
font-weight:600;
color:#ffc800;
text-transform:uppercase;
}
#aideBox{
text-align:center;
font-size:18px;
font-weight:500;
margin-bottom:10px;
font-style:italic;
 margin-bottom:5px;
opacity:.7
}
#wordleLast{
text-align:center;
}
#wordleLast input{
display:block;
margin:30px auto;
}
#wordleLast h4{
font-size:1.2em;
font-weight:400;
color:white;
}
#wordleLast p{
font-size:.9em;
font-weight:400;
}
#lastQ{
border:none;
font-size:1.6em;
border-radius:12px;
text-align:center;
padding:8px;
font-weight:500;
box-sizing:border-box;
}
.buttonForm{
background:#ffc800;
color:#e73161;
border-radius:12px;
padding:15px;
margin:15px auto;
cursor:pointer;
font-weight:400;
border:none;
text-transform:uppercase;
padding:15px 30px;
font-weight:600;
font-size:2em;
transition:all ease 0.3s;
cursor:pointer;
}
.buttonForm:hover{
background:white;
}
#help{
position:fixed;
right:0;
top:0%;
width:40px;
height:40px;
opacity:0.8;
cursor:pointer;
z-index:999;
}
#help:hover{
opacity:1;
}
#help img{
width:100%;
height:auto;
}
#helper{
z-index:998;
position:fixed;
left:0%;
top:0%;
height:100%;
width:100%;
background:#e73161ee;
padding:60px 30px;
box-sizing:border-box;
border-radius:16px;
text-align:center;
box-shadow: 0 0 16px rgba(0,0,0,0.3)
}
#helper p{
font-weight:500;
line-height:22px;
}
#helper h2,
#helper h3{
font-size:20px;
}