@font-face {font-family:"pressstart2p" ; src:local("PressStart2P-Regular.ttf"), url("PressStart2P-Regular.ttf");}
body { font-family:"pressstart2p", monospace;font-size:1em; overflow: hidden;}
body > img {display: none;}

h1 {font-size: 1.4em;margin:1em 0;}

section {width: 94vw;height:92vh;border:4px solid #000;position: fixed;padding:2vh 2vw;display:none; }

section:first-of-type{z-index: 1;display: block;}

input,button,a {text-align: center;border:4px solid #000;font-family:"pressstart2p", monospace;
text-decoration: none;}
input,button {display: block;}

input[type="text"] {width: 95%;height: 2em;background-color:#ddd;font-size:1.2em;margin:1em 0;  }
button,a {font-size:1em;padding:.6em .8em;border-radius: .1em;margin:1vh 1vw;
box-shadow: inset -4px -4px rgba(0,0,0,.1);background-color: #fff;cursor: pointer;}

#quiz > button {float: left;text-align: left!important; }
#quiz > button:has(span) { z-index: 20;}
button:hover:not(.no_answer),.selected_answer,a:hover {background-color: #29f;}
.no_answer:hover {cursor:default; }
.correct_answer,.wrong_answer,button:hover:not(.no_answer),.selected_answer ,a
{color: #fff;box-shadow: inset -4px -4px rgba(0,0,0,.1);}
a {color: #000;}
a:hover  {color: #fff;}
.wrong_answer {background-color: #f75;}
.correct_answer {background-color: #9c4;}
button:disabled {opacity: .6;pointer-events: none;}

#salledattente img {text-align: center;margin: 0 auto;border:4px solid #000;height: 20vh;}


#hiddenform {display: none;}




#time_bar {position: absolute; left: 0; bottom: 0; width: 0; height: 2vh;
					background-color: #29f; z-index: 2;}
#submit_pseudo {display: block; position: fixed; bottom: 4vh; right: 4vw;}	
#launch_btn {display: block; position: fixed; bottom: 4vh; right: 4vw;}					
#ranks_btn {display: none; position: fixed; bottom: 4vh; right: 4vw;}
#next_btn {display: none; position: fixed; bottom: 4vh; right: 4vw;}
#gb_btn {display: none; position: fixed; bottom: 4vh; right: 4vw;}
#sav_btn {display: block; position: fixed; bottom: 4vh; right: 4vw;}


input::placeholder {color: #ccc;}

.players {border:4px solid #000;border-radius: .2em;float: left;padding : .4em .8em;margin:.4em;
			user-select: none; color: #fff}
.players::first-letter,button:not(.admin_btn)::first-letter  {font-size: x-large;padding-top: 0;
-webkit-text-stroke: 2px #000;
 text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000;}
 button span {border-radius: 2em;border:4px solid #000;margin: .6em 0 0 -.6em;
 padding:.8em .8em .7em .9em; background-color:#fa0;position:absolute;color:#000;z-index: 1; }
 
 #compteur {position: fixed; bottom: 4vh; left: 4vw;border:4px solid #000;border-radius: .1em;
 padding:.6em .8em; background-color:#fa0;position:fixed;color:#000;margin:1vh 1vw;}

#comptearebours {width: 100vw;height: 100vh;z-index: 4;position: fixed;top:0;left: 0;text-align: center;
					margin: auto; backdrop-filter: blur(10px);pointer-events: none; margin: 0 auto;padding:0;}
					
#figures {border:4vw solid #f75;border-radius: 3em;
font-size: 20vw;padding:0;padding-top: 6vw;color: #f75;margin: 0 auto;margin-top: 2vw;width: 34vw;
height: 28vw; animation: blinker 1s linear infinite fill: "forwards";}

@keyframes blinker { 100% { opacity: 0;}}

@media screen and (max-width: 480px) {
	section {width: 90vw;height: 82vh}
	body{font-size: .9em}
}