:root {
	--mugratio: 1.16 ;
	--resmugw: 25% ; }

@font-face { font-family: anjaeliane; src: url('assets/ANJA ELIANE.TTF'); }
@font-face { font-family: digitbold; src: url('assets/DS-Digital Bold.ttf'); }
@font-face { font-family: dustfine; src: url('assets/dustfine.ttf'); }
* { appearance: none; }

html {width:100%; height:100%; overflow:hidden; background-color:black; font-size: 100%; }

body {padding:0; margin:0; width:100%; height:100%; background-color:black;
	font-family:anjaeliane; color:white; font-size:30px; overscroll-behavior: none;}

.buttons { display:inline-block; width:90px; background-color:white; cursor:pointer; text-align:center;
	border:6px solid black; border-radius:20px; color:black; line-height:30px; font-size:30px; padding:12px 20px;}
.redbuttons { display:inline-block; background-color:red; cursor:pointer; text-align:center;
	border:4px solid white; border-radius:20px; color:white; line-height:32px; font-size:30px; padding:12px 12px;}

.mug { position:relative; width: 100%; background-color: white; text-align: center; border-radius:6%;}
.mug img {position:relative; width: 95%; top:2.5%; border-radius:5%; }
.mug a {position:absolute; color:black; bottom: -1%; left:50%; transform:translateX(-50%); }
.witnessmug { position:relative; width: 100%; }
.witnessmug img {position:absolute; top:0; left:0; width: 100%; }




#mainDiv {position:fixed; width:100%; height:100%; text-align:center;
  background-image: url('assets/mugshotbackdrop.jpg');  background-size:cover; }

#logoDiv {width:100%; height:15%; text-align:center; padding-top:30px; }
#logo {width:90%;}

#homeDiv {width:100%; text-align:center;}
#homeDiv-name {font-size:36px; cursor:pointer;}
#homeDiv-stats {font-size:20px; text-align:center; margin-top:10%;}
#homeDiv-install {width:100%; padding:10px 0; background-color:dodgerblue; color:white; text-align:center;
		margin-top:10%; font-weight:bold; font-family:verdana; font-size:20px; cursor:pointer; }
#homeDiv-install-big {font-size:22px;}
#install2Div {height:90%; position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); z-index:9; border: 4px solid white;}
#install2Div img {height:100%;}
#homeDiv-buttons {width:100%; text-align:center; margin-top:25%;}
#homeDiv-helpbutton {position:absolute; bottom:5vw; right:5vw; font-weight:bold; font-family:verdana; font-size:22px; cursor:pointer; }
#homeDiv-practice {display:none;}

#signDiv {width:100%; text-align:center;}
#signDiv input { width:50%; font-family:anjaeliane; color:black; text-align:center; font-size:30px;}

#joinDiv {position:relative; width:100%; height:80%; text-align:center;}
#joinDiv-buttons {margin-top:10%;}
#joinDiv input { width:40%; font-family:anjaeliane; text-transform:uppercase;
				font-size:30px; color:black; text-align:center; }
#joinDiv-cancel {position:absolute; bottom:5%; left:50%; transform:translate(-50%,-50%); z-index:4;}

#roomDiv {width:100%; height:100%; text-align:center;}
#roomDiv-room { display:inline-block; width:40%; height:160px; max-height:20%; background-color:white; overflow-y:scroll; overflow-x:hidden;
	border:6px solid black; border-radius:20px; color:grey; font-size:24px; padding:20px; text-align:center; }
#roomDiv-waiter {font-size:20px; margin-top:10%;}
#roomDiv-leave {position:absolute; bottom:5%; left:50%; transform:translate(-50%,0); z-index:10;}
#roomDiv-vs, #roomDiv-coop {margin-top: 2%}




#gameDiv { position:fixed; width:100%; height:100%; top:0; text-align:center; margin:0; background-color:black; overflow:hidden;}
#gamelogoDiv {width:100%; text-align:center; padding-top:5px}
#gameDiv-infobar {width:100%; text-align:center;}
#gameDiv-round {display:inline-block; width:45%; text-align:center;}
#gameDiv-turn {display:inline-block; width:45%; text-align:center;}
#coopDiv {position:fixed; width:100%; top:50%; text-align:center; font-size:160px; z-index:8; }

#witnessDiv {position:relative; width:100%; height:100%; text-align:center;}
#witnessDiv-container {position:relative; width:100%; height:60%; overflow:hidden; }
#witnessDiv-alert {position:absolute; width:100%; top:30%; left:0; font-size:15vw; text-align:center; background-color:rgba(0,0,0,.5); padding:10px; z-index:5; }
#witnessDiv-pic {position:absolute; width:120%; top:10px; margin-left:50%; transform:translate(-90%,5%); z-index:1;}
#witnessDiv-cache {position:absolute; width:130%; top:10px; margin-left:50%; transform:translate(-90%,0);z-index:2;}
#witnessDiv-timer {position:absolute; color:white; top:0px; left:50%; transform:translate(-55%,0);
				font-family:dustfine; font-size:80px; z-index:3;  }
#witnessDiv-guesses {display:inline-block; width:100%; overflow-x:scroll; overflow-y:hidden; white-space:nowrap; margin-top:0; }

#guessDiv { position:relative; width:100%; height:80%; overflow:hidden; text-align:center; }
#guessDiv-gradientcont { position:absolute; width:100%; top:50px; z-index:2;}
#guessDiv-gradient { width:100%; }
#guessDiv-mugs { position:relative; width:100%; height:100%; top:50px; text-align:center; overflow-y:scroll; z-index:1;}
#guessDiv-timer {position:absolute; color:white; top:-10px; left:50%; transform:translate(-55%,0);
				font-family:dustfine; font-size:80px; z-index:3;  }
#guessDiv-row { position:relative; width:100%; display:inline-block; text-align:center; margin-bottom:3%; }
#guessDiv-mug { display:inline-block; width:45%; margin:0 1%;}

#resultDiv {position:relative; width:100%; height:80%; text-align:center;}
#resultDiv-spacer { width:100%; height:2%;}
#resultDiv-culprit {position:relative; margin-left:50%; transform:translateX(-50%); text-align:center;}
#resultDiv-guesses {display:inline-block; width:100%; overflow-x:scroll; overflow-y:hidden; white-space:nowrap; margin-top:6%; }
#resultDiv-guess { display:inline-block; width:var(--resmugw); margin:0 2%; }
#resultDiv-guessplayer {width:100%; font-size:22px; }
#resultDiv-guessmug { position:relative; width:100%; overflow:hidden;}
#resultDiv-guesscache {position:absolute; top:-5%; left:-5%; width:110%; z-index:2;}
#resultDiv-guesstime { width:100%; font-family:digitbold; color:grey; font-size:20px; }
#resultDiv-guessscore { width:100%; font-size:20px; margin-top:5%; border-top: 2px solid white; border-bottom: 2px solid white;}
#resultDiv-guesspts { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:4;}
#resultDiv-ready {position:fixed; bottom:2%; left:50%; transform:translate(-50%,0); z-index:10;}
#resultDiv-waiter { color:white; font-size:20px; position:fixed; bottom:50px; left:50%; transform:translate(-50%,0); }
#resultDiv-timer {position:absolute; top:14%; left:50%; transform:translate(-55%,0);
				font-family:dustfine; font-size:80px; z-index:3;  }

#gameoverDiv {width:100%; height:100%; text-align:center;}
#gameoverDiv-spacer { width:100%; height:80px; max-height:10%;}
#gameoverDiv-winners {display:inline-block; position:relative; width:70%; height:auto; background-color:white;
					border:6px solid black; border-radius:20px; padding:16px;}
#gameoverDiv-crown {position:absolute; width:55%; top:10px; transform:translate(-50%,-100%); z-index:2;}
#gameoverDiv-winnernames {float:left; width:80%; height:auto; text-align:left; line-height:34px; color:black; font-size:34px;}
#gameoverDiv-winnerscores {float:right; width:20%; height:auto; text-align:right; line-height:34px; color:black; font-size:34px;}
#gameoverDiv-others {display:inline-block; width:60%; height:220px; max-height:30%; overflow-y:scroll; }
#gameoverDiv-othernames {float:left; width:70%; height:auto; text-align:left; line-height:26px; color:white; font-size:26px;}
#gameoverDiv-otherscores {float:right; width:30%; height:auto; text-align:right; line-height:26px; color:white; font-size:26px;}
#gameoverDiv-done {position:fixed; bottom:50px; left:50%; transform:translate(-50%,0); z-index:10;}

#helpDiv {position:fixed; width:90%; height:80%; top:10%; left:0; background-color:grey; cursor:pointer; text-align:center;
	border:6px solid white; border-radius:20px; padding:12px; z-index:20;}
#helpDiv-text {display:inline-block; overflow-wrap:normal; width:100%; height:85%; color:white; line-height:20px; font-weight:bold; font-family:verdana; font-size:20px; }
#helpDiv-buttons {display:inline-block; width:100%; height:15%; }

#installDiv {position:fixed; width:90%; height:80%; top:10%; left:0; background-color:dodgerblue; cursor:pointer; text-align:center;
	border:6px solid white; border-radius:20px; padding:12px; z-index:20;}
#installDiv-text {display:inline-block; overflow-wrap:normal; width:100%; height:85%; color:white; line-height:40px; font-weight:bold; font-family:verdana; font-size:30px; }
#installDiv-buttons {display:inline-block; width:100%; height:15%; }

#testDiv { position:relative; width:100%; height:100%; overflow:hidden; }
#testDiv-container { position:relative;  width:70%; margin-left:50%; transform:translateX(-50%);}