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

*{
font-family:'Montserrat',arial;
font-weight:500!important;
line-height:1.2em;
text-align:center;
color:#322a15;
}
.mentions{
position:fixed;
bottom:0;
left:50%;
transform:translateX(-50%);  
}
.mentions a{
border-radius:8px 8px 0 0;
background:#D6A884;
text-decoration:none;
font-size:12px;
padding:8px 16px;
line-height:30px;  
transition:all ease 0.3s;
opacity:.7;
}
.mentions a:hover{
opacity:1;
line-height:50px; 
padding:8px 16px 32px 16px;
}

body{
background:#fff;
max-width:480px;
margin:auto;
position:relative;
font-size:1rem;
}

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

#popupBox{
position:absolute;
z-index:999;
background:#000;
width:90%;
margin:5%;
padding:calc(5% - 5px);
border:5px solid #000000;
margin:auto;
border-radius:10px;
top: 50%;
transform: translateY(-50%);
}
#popupBox input,
#popupBox select{
width:90%;
background:#ffffff;
border:none;

padding:5%;
margin:0 0 15px 0;
font-size:1.1em;
border-radius:8px;
}
#popupBox select{
padding:5px 5%;
width:100%;
}

#popupBox input::placeholder{

opacity:1;
}
#popupBox h2,
#popupBox p{
color:#ffffff;
font-weight:400;
margin:0;
font-size:1em;
}
#popupBox h2{
font-weight:600;
font-size:1.2em;
margin-bottom:10px;
}
#popupBox input.updMyLog{
background:#000000;
width:100%;
border-radius:10px;
margin:10px 0 0 0;
font-size:1.4em;
font-weight:400;
color:#ffffff;
}
#popupBox .error{
color:#fff;
background:#000000;
font-weight:600;
padding:10px 0;
font-size:1em;
border-radius:10px;
margin-bottom:10px;
animation: blinkError 0.3s step-start 0s 15 forwards;
}
@keyframes blinkError{
50%{background:#ffffff;}
}
#popupBox p strong{
font-weight:600;
color:#ffffff;
}
#popupBox .closePop{
position:absolute;
top:-24px;
right:-24px;
width:48px;
height:48px;
cursor:pointer;
transition:all ease 0.5s
}
#popupBox .closePop:hover{
transform:scale(1.2);
}

h1{
margin:10px 0 10px 0;
}
h1 img{
max-width:100%;
max-height:180px;
}
h1.ingame img{
max-height:80px;  
}

#resps h3{
font-weight:800;
}

.button{
width:75%;
background:#f9f1d9;
border-radius:8px;
padding:15px;
margin:25px auto;
cursor:pointer;
font-size:1.43em;
font-weight:500!important;
box-sizing:border-box;
}
.button.nochoice:hover{
background:#7F7044;
color:#f9f1d9;
}

#quest{
width:95%;
margin:auto;
font-size:1.1em;
font-weight:300;
}
#quest p b{
font-weight:600;
text-transform:uppercase;
}
#quest h2{
font-size:1.2em;
text-transform:uppercase;
margin:0;
padding:0;
line-height:1em;
}
#quest .question h2{
font-size:1.1em;
text-transform:uppercase;
margin:0 0 5px 0;
padding:0;
line-height:1em;
font-weight:600;
}
#quest .merci h2{
font-size:1.6em;
text-transform:none;
margin-bottom:20px;
line-height:1.2em;
color:white;
}

#quest .question p{
font-size:1.3em;
margin:0;
padding:0;
/* line-height:1.1em; */
}

#quest h3{
font-size:100px;
line-height:1em;
margin:0;
}
#quest .question h3{
font-size:2.2em!important;
line-height:1em!important;
font-weight:800!important;
margin:0 0 10px 0;
}
#details{
}
#details .responses{
width:100%;
background:#ffffff;
border-radius:8px;
padding:15px;
margin:15px auto;
cursor:pointer;
font-size:1em;
font-weight:500;
box-sizing:border-box;
}
#details .savoirPlus{
background:#ffffff85;  
box-sizing:border-box;
padding:10px;
border-radius:8px;
}
#details p strong{
font-weight:600;
}
#nextQuest{
display:block;
margin:auto;
margin-top:30px;
}
#nextQuest input{
background:black;
color:white;
font-size:26px!important;  
font-family:'Montserrat';
width:auto!important;
padding:14px 18px!important;
border-radius:8px!important;
cursor:pointer;
transition:all ease 0.3s;
border:none;
}
#nextQuest input:hover{
background:white;  

}


#quest .bravo h2{
text-transform:none;
font-weight:600;
}
.bonjour p,
.bravo p{
margin:0;
}
.bravo .score{
display:block;
font-size:1.6em;
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 img{
width:60px;
display:inline-block;
margin-right:10px;
}
#quest .bonjour h2{
text-transform:none;
font-weight:600;
margin:0;
}
.bonjour div{
display:inline-block;
width:70%;
}
.bonjour strong{
font-weight:600;

}

@keyframes blink{
50%{background:#d9c7e6;}
}

p.solo{
display:block;
margin:40px 0;
}

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

#quest.home,
#quest .question{
background:#D6A884;
padding:30px;
border-radius:16px;
box-sizing:border-box;
}
#quest.home form{
}
#quest.home form input,
#quest.home form select{
width:100%;
display:inline-block;
padding:8px 10px;
border-radius:6px;
margin:4px 0;
border:none;
box-sizing:border-box;
font-size:.9em;
font-weight:500;
}
#quest.home form input::placeholder{
}
#quest .avantjeu{
margin:20px 0;  
}
#quest.home h2{
text-transform:none;
font-weight:400!important;
line-height:1.2em;
font-size:2em;
margin-bottom:15px!important;
color:white;
}
#quest.home p{
margin:auto;
max-width:90%;
font-size:1.3em;
font-weight:400!important;
color:white;
}

h1.bravo{
font-size:56px!important;  
font-family:'Montserrat';
line-height:.7em;
}
h1.bravo .pseudo{
font-family:'Montserrat'; 
font-size:38px!important;   
}
#quest .bravoText{
font-size:1.2em!important; 
margin-bottom:20px!important;
}
.score {
font-size:1.3em;
margin-bottom:20px;  
}
.score span{
font-size:2.5em;  
font-weight:600!important;
}
.endText{
margin-bottom:30px;  
}
.endText p{
margin-bottom:10px!important;  
}

.poserQuestion,
.voirClassement{
display:block;
margin:auto;
}
.voirClassement{
margin-bottom:10px;
}
.voirClassement a{
background:#f9f1d9;  
color:#7f7044;  
padding:16px;
border-radius:16px;
text-decoration:none;
font-size:1.4em;
}
.voirClassement a:hover{
background:#7f7044; 
color:#f9f1d9;
}
.poserQuestion input{
background:black;
color:white;
margin-bottom:30px;
}
.voirClassement input{
background:white;

}
.poserQuestion input,
.voirClassement input{
border:none;
padding:16px;
border-radius:16px;
background:#F9F1D9;
font-size:1.4em;  
font-weight:600; 
width:auto; 
transition:all ease 0.2s;
cursor:pointer;
}
.poserQuestion input:hover,
.voirClassement input:hover{
background:#7F7044;
color:#F9F1D9;
}

input#letsGo{
background:#f9f1d9;
color:#7F7044;
font-size:1.8em!important;  
font-family:'Montserrat';
width:auto!important;
padding:16px 24px!important;
border-radius:16px!important;
cursor:pointer;
font-weight:500!important;
transition:all ease 0.3s;
}
input#letsGo:hover{
background:#7f7044; 
color:#f9f1d9;
}

.pied{
margin-top:20px;
margin-bottom:60px;
display:inline-block;
width:100%;
font-size:12px;
font-weight:400;
}
.pied img{
max-width:55%;
display:block;
margin:0px auto 30px auto;  
}
.pied p {
font-size:12px;
font-weight:400;
}
.pied p a{
margin:0 10px;
font-size:12px;
font-weight:400;
}
.home a{
color:#504248;
}
.pied a{
margin:0 10px;
}
.home a:hover{
color:#000000
}

#logMeIn input{
display:block;
border:none;
padding:4%;
width:92%;
margin:15px 0;
}

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

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

#letsGo.button,
#logMeIn input.button{
color:#ffffff;
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:#504248;
color:#000000;
}
#logMeIn input::placeholder{
font-weight:400;
color:#444;
opacity:.7;
}

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


#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:#000000;
margin:0;
padding:0;
}

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

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

#text p a{
color:#000000;
}
#text p a:hover{
color:#504248;
}

.comnambules{
font-size:14px;
color:#504248;
font-weight:600;
}
.comnambules a{
color:#504248;
text-decoration:none;
font-weight:600;
}
.comnambules a:hover{
color:#000000;
}

#askQuestion input,
#askQuestion textarea{
width:100% !important;
border-radius:8px !important;
box-sizing:border-box;
padding:8px !important;  
border:none;
font-size:.9em!important;
}
#askQuestion textarea{
height:120px;  
margin-bottom:30px;
}
#askQuestion  input[type="submit"]{
background:black;
color:white;
width:auto!important;
padding:8px 24px!important; 
cursor:pointer; 
}
#askQuestion  input[type="submit"]:hover{
background:#ed1e79;
}
#askQuestion input::placeholder,
#askQuestion textarea::placeholder{
font-style:italic;
font-weight:500;
opacity:.5; 
}

#classement{
display:block;
margin-top:10px;  
}
#classement *{
font-size:16px; 
}
.player{
box-sizing:border-box;
display:block;
border-bottom:1px solid black;
background:white;
padding:4px;
line-height:20px;
height:28px;
width:100%;
}
.player.participant{
background:#000000;
color:white;  
}
.player.participant{
  animation: blinker .15s 10 ease-in-out;
}
@keyframes blinker {
  50% {
    background:#00000080;
  }
}

#classement .place,
#classement .pseudo,
#classement .pts,
#classement .date{
display:inline-block;
}
#classement .place{
/* background:red;   */
width:15%!important;
font-weight:600;
}
#classement .pseudo{
/* background:blue;   */
width:70%!important;
}
#classement .pts{
/* background:green;   */
width:15%!important;
}
#classement .participant .place,
#classement .participant .pseudo,
#classement .participant .pts,
#classement .participant .date{
font-weight:600!important;
}