@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:#ffffff;
color:#000000;
max-width:480px;
margin:auto;
position:relative;
}

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

#popupBox{
position:absolute;
z-index:999;
background:#000000;
width:90%;
margin:5%;
padding:calc(5% - 5px);
border:5px solid #386cc5;
margin:auto;
border-radius:10px;
top: 50%;
transform: translateY(-50%);
}
#popupBox input{
width:90%;
background:#ffffff;
border:none;
color:#000000;
padding:5%;
margin:0 0 15px 0;
font-size:1.1em;
}
#popupBox input::placeholder{
color:#000000;
opacity:1;
}
#popupBox h2,
#popupBox p{
color:#ffffff;
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:#386cc5;
width:100%;
border-radius:10px;
margin:10px 0 0 0;
font-size:1.6em;
font-weight:400;
color:#ffffff;
}
#popupBox .error{
color:#fff;
background:#386cc5;
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:#ffffff;}
}
#popupBox p strong{
font-weight:600;
color:#ffffff;
}


h1{
margin:5px 0 15px 0;
text-align:center;
}
h1 img{
max-width:100%;
}

#resps{
text-align:center;
}

#resps h3{
font-weight:800;
}

#timer{
display:inline-block;
width:90%;
margin:30px auto 10px auto;
text-align:center;
}
#timer .sablier{
display:block;
vertical-align:middle;
position:relative;
width:60px;
}
.sablier img{
width:60px;
height:auto;
position:absolute;
top:-10px;
left:0;
}

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

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

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


.button{
width:85%;
background:#386cc5;
color:#ffffff;
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:#000000;
}
.button.good{
background:#eb5e40;
animation: blink 0.3s step-start 0s 3 forwards;
}
@keyframes blink{
50%{background:#386cc5;}
}

#quest{
width:95%;
margin:auto;
text-align:left;
font-size:1.15em;
font-weight:300;
}
#quest p b{
font-weight:600;
text-transform:uppercase;
}
#quest h2{
text-align:left;
font-size:1.3em;
color:#386cc5;
text-transform:uppercase;
margin:0;
padding:0;
line-height:1em;
}
#quest .question h2{
text-align:left;
font-size:1.1em;
color:#386cc5;
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:#386cc5;
font-size:160px;
line-height:1em;
margin:0;
}

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

}



#classement{
margin-top:20px;
padding-top:15px;
border-top:8px dotted #386cc5;
}
#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 #386cc5;
}
#classement p.curank{
background:#000000;
color:black;
animation: blink .6s step-start infinite;
border-top:none;
}
@keyframes blink{
50%{background:#d9c7e6;}
}


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

#classement .score{
float:right;
}

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:#000000
}

#quest.home h2{
text-transform:none;
font-weight:600;
line-height:1.2em;
font-size:1.2em;
}
#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:#000000;
}
.pied a{
margin:0 10px;
}
.home a:hover{
color:#386cc5
}

#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:#386cc5;
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:#000000;
color:#386cc5;
}
#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.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:#386cc5;
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:#386cc5;
}
#text p a:hover{
color:#000000;
}

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