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

@font-face {
    font-family: 'Chantal';
    src: url('/webfont/Chantal-Light.eot');
    src: url('/webfont/Chantal-Light.eot?#iefix') format('embedded-opentype'),
        url('/webfont/Chantal-Light.woff2') format('woff2'),
        url('/webfont/Chantal-Light.woff') format('woff'),
        url('/webfont/Chantal-Light.ttf') format('truetype'),
        url('/webfont/Chantal-Light.svg#Chantal-Light') format('svg');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

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

.mentions{
position:fixed;
bottom:0;
left:50%;
transform:translateX(-50%);  
}
.mentions a{
border-radius:8px 8px 0 0;
background:#000;
text-decoration:none;
font-size:12px;
padding:8px 16px;
line-height:30px;  
color:white;  
transition:all ease 0.3s;
opacity:.7;
}
.mentions a:hover{
background:#6AC025;
color:#000;
}

body{
background:#ffffff;
color:#000;
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;
color:#000;
padding:5%;
margin:0 0 15px 0;
font-size:1.1em;
border-radius:8px;
}
#popupBox select{
padding:5px 5%;
width:100%;
}

#popupBox input::placeholder{
color:#000;
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;
text-align:center;
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;
text-align:center;
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:20px 0 20px 0;
text-align:center;
}
h1 img{
max-width:100%;
max-height:128px;
}
h1.ingame img{
max-height:80px;  
}

#resps{
text-align:center;
}

#resps h3{
font-weight:800;
}

#timer{
display:inline-block;
width:100%;
margin:10px auto 0px auto;
text-align:center;
box-sizing:border-box;
}
#chrono{
font-size:46px;
font-weight:600;
line-height:120px;
display:inline-block;
}
#timer .sablier{
display:block;
vertical-align:middle;
position:relative;
width:120px!important;
height:120px!important;
margin:auto;
background-image:url(/images/ring-resize.svg?2);
/* background-image:url(/images/tube-spinner.svg?); */
background-size:cover;
text-align:center;
}
#timer .sablier.ended{
background-image:none;  
}


#round-time-bar {
display:inline-block;
width:calc(90% - 50px);
margin:0 auto 0 40px;
overflow: hidden;
background:#fff;
}
#round-time-bar div {
height: 30px;
animation: roundtime calc(var(--duration) * 1s) steps(var(--duration)) forwards;
transform-origin: left center;
background: #000000;
}

#round-time-bar[data-style='smooth'] div {
  animation: roundtime 15s linear forwards;
}

@keyframes roundtime {
  to {
    transform: scaleX(0);
  }
}


.button{
width:100%;
background:#ffffff;
color:#000000;
border-radius:8px;
padding:15px;
margin:15px auto;
cursor:pointer;
font-size:1em;
text-align:left;
font-weight:500;
box-sizing:border-box;
}
.button .rank{
font-weight:800;
}
.button.choice{
background:#ed1e79;
}
.button.nochoice:hover{
opacity:.65;
}
.button.good{
background:#ed1e79;
animation: blink 0.2s step-start 0s 5 forwards;
}
@keyframes blink{
50%{background:#ffffff;}
}

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

#quest h3{
color:#000000;
font-size:100px;
line-height:1em;
margin:0;
}

#quest .question h3{
color:#000000;
font-size:18px;
line-height:1em;
font-weight:600;
margin:0 0 5px 0;
}

#details{
text-align:left;  
}
#details .responses{
width:100%;
background:#ffffff;
color:#000000;
border-radius:8px;
padding:15px;
margin:15px auto;
cursor:pointer;
font-size:1em;
text-align:left;
font-weight:500;
box-sizing:border-box;
}
#details p strong{
font-weight:600;
}
#nextQuest{
display:block;
margin:auto;
text-align:center;
margin-top:30px;
}
#nextQuest input{
background:black;
color:white;
font-size:26px!important;  
font-family:'Chantal';
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;  
color:black;
}


#quest .bravo h2{
text-transform:none;
font-weight:600;
}
.bonjour p,
.bravo p{
margin:0;
}
.bravo .score{
display:block;
color:#000000;
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;
text-align:center;
}

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:#6AC025;
padding:30px;
border-radius:16px;
box-sizing:border-box;
}
#quest.home form{
text-align:center;
}
#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{
color:#000000; 
}
#quest .avantjeu{
margin:20px 0;  
text-align:left;
}
#quest.home h2{
text-transform:none;
font-weight:700;
line-height:1.2em;
font-size:1.2em;
}
#quest.home p{
margin:0 0 15px 0;
font-size:.9em;
font-weight:500;
}

h1.bravo{
font-size:56px!important;  
font-family:'Chantal';
line-height:.7em;
}
h1.bravo .pseudo{
font-family:'Montserrat'; 
font-size:38px!important;   
}
.score{
text-align:center;  
margin-bottom:15px;
box-sizing:border-box;
background:white;
padding:16px;
border-radius:8px;
font-size:24px;
color:#000;
}
.score span{
font-size:56px;  
font-weight:600;
}
.endText{
margin-bottom:30px;  
}
.endText p{
margin-bottom:10px!important;  
}

.poserQuestion,
.voirClassement{
display:block;
margin:auto;
text-align:center;
}
.poserQuestion input{
background:black;
color:white;
margin-bottom:30px;
}
.voirClassement input{
background:white;
color:black;
}
.poserQuestion input,
.voirClassement input{
border:none;
padding:12px;
border-radius:4px;
font-size:16px;  
font-weight:600; 
width:50%; 
transition:all ease 0.2s;
cursor:pointer;
}
.poserQuestion input:hover,
.voirClassement input:hover{
background:#ed1e79;
color:white;
}

input#letsGo{
background:black;
color:white;
font-size:2em!important;  
font-family:'Chantal';
width:auto!important;
padding:16px!important;
border-radius:16px!important;
cursor:pointer;
transition:all ease 0.3s;
}
input#letsGo:hover{
background:white;  
color:black;
}

.pied{
margin-top:20px;
display:inline-block;
text-align:center;
width:100%;
font-size:12px;
font-weight:400;
}
.pied img{
max-width:55%;
display:block;
margin:0 auto 50px 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;
text-align:center;
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-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:#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;
text-align:center;
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%;
text-align:left;
}
.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;
text-align:center;
}
#classement .pseudo{
/* background:blue;   */
width:70%!important;
text-align:left;
}
#classement .pts{
/* background:green;   */
width:15%!important;
}
#classement .participant .place,
#classement .participant .pseudo,
#classement .participant .pts,
#classement .participant .date{
font-weight:600!important;
}