:root {
	--logoyellow:#ffe400;
	--logocyan:#63c8fc;
	--logoblue:#153f54;
	--mugratio:1.16;
	--resmugw:25%; }

@font-face { font-family:anja; src: url('assets/ANJA ELIANE.TTF'); }
@font-face { font-family:time; src: url('assets/DS-DIGIT.TTF'); }

* { appearance: none; }
*, *::before, *::after { box-sizing: border-box; }

html { width:100vw; height:100vh; overflow:hidden; background-color:black; }

body { position:absolute; padding:0; margin:0; width:100vw; height:100vh; background-color:black; 
	overflow:hidden; font-family:anja; color:white; font-size:30px; overscroll-behavior:none;  }

/* only use if forcing portrait use*/
@media screen and (orientation:landscape) {
	#appcontainer { display:none; }
	#wrongway { display:block; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); height:80%; }
}

@media screen and (orientation:portrait) {
#wrongway { display:none; }
#appcontainer { display:block; position:absolute; height:100%; width:100%; max-width:57vh; left:50%; transform:translateX(-50%); background:black; overflow:hidden; overscroll-behavior:none; }

#back { position:absolute; text-align:center; height:100%; top:0; right:0; }
#backdiv { display:none; position:absolute; height:100%; width:100%; top:0; right:0; }
#cache { position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0, 0, 0, 0.25); }

#loading { position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0, 0, 0, 0.6); }
#loading img { position:absolute; width:50%; bottom:50%; left:25%; }

#signupDiv { display:none; position:relative; width:100%; text-align:center; background:rgba(0, 0, 0, 0.6); }
#i_name { display:inline-block; width:70%; height:60px; padding:0; text-align:center; font-size:40px; line-height:60px; font-family:anja; color:white; background:rgba(0, 0, 0, 0.5); }
#b_signup { display:inline-block; width:30%; height:50px; text-align:center; font-size:40px; line-height:54px; }


#main { display:none; position:absolute; top:0; left:0; width:100%; height:100%; text-align:center; }

#splashdiv { position:absolute; width:100%; height:100%; right:0; bottom:0; }
#logo { position:absolute; width:110%; top:-2%; left:50%; transform:translateX(-50%); filter:drop-shadow(1px 2px 5px var(--logoblue)); }
#host { position:absolute; filter:drop-shadow(1px 2px 5px black); z-index:2; }
#profile { position:absolute; height:60px; bottom:75px; left:20px; transform:translateY(50%); z-index:3; }
#b_settings { position:absolute; height:60px; bottom:75px; left:36px; transform:translateY(50%) rotate(30deg); z-index:3; }
#b_share { position:absolute; height:50px; bottom:130px; left:27px; z-index:3; filter:drop-shadow(1px 2px 5px var(--logoblue) ); }
#b_play { position:absolute; bottom:75px; right:20px; transform:translateY(50%); z-index:3; }

#lobbydiv { display:none; position:absolute; width:100%; height:100%; right:0; bottom:0; }
#speechdiv { position:absolute; width:96%; height:20%; top:1%; left:2%; background:white; color:var(--logoblue); border-radius:30px; border:5px solid var(--logoblue); }
#speechcontent { position:absolute; width:94%; left:3%; top:45%; transform:translateY(-50%); font-size:22px; text-align:center; }
#lobbyhostcode { position:absolute; bottom:2%; right:6%; height:60px; line-height:66px; color:var(--logocyan); text-align:center; font-size:46px; }
#speechquote { position:absolute; width:20%; top:100%; right:20%; }
#lobbyplayerlist { position:absolute; top:50%; right:20px; line-height:34px; color:white; z-index:3; max-height:25%; overflow:hidden; overflow-y:scroll; padding:5%; border-radius:15px;
	text-align:center; font-size:30px; background:var(--logoblue); border:3px solid var(--logocyan); }
.bignum { font-size:36px; color:var(--logocyan); margin-left:2px; margin-right:2px; vertical-align:-5px; }
#b_home { position:absolute; height:55px; bottom:75px; left:25px; transform:translateY(50%); z-index:3; }
#b_join { position:absolute; height:85px; line-height:85px; bottom:40px; right:20px; z-index:3; }
#b_host {  position:absolute; bottom:145px; right:20px; z-index:3; }
#b_start { display:none; position:absolute; width:40%; bottom:40px; right:20px; z-index:3; }
#i_code { appearance:none; position:absolute; padding:0; top:40%; right:20px; font-family:anja; border-color:var(--logoyellow); color:var(--logocyan); background:rgba(0, 0, 0, 0.5); z-index:3;}
 
#gamediv { display:none; position:absolute; width:100%; height:100%; right:0; bottom:0; }
#guessdiv-gradient { position:absolute; width:100%; left:0; top:-10px; }
#gamediv-cache { position:absolute; width:100%; height:100%; right:0; bottom:0; background:#00000033; }
#gamediv-info { position:absolute; top:10px; left:10px; width:80%; height:40px; line-height:40px; text-align:left; font-size:40px; }
#gamediv-timer { position:absolute; top:10px; right:10px; width:80%; height:40px; padding-right:5px; line-height:40px; text-align:right; font-size:40px;  }
#witnessdiv { position:absolute; width:100%; height:100%; left:0; top:0; background:var(--logoblue);  }
#witnessdiv-culprit { position:absolute; top:10%; left:50%; transform:translateX(-50%); }
#witnessdiv-guesses { position:absolute; width:88%; top:65%; left:6%; display:flex; color:white; justify-content:center; overflow-x:scroll; text-align:center; }
.witnessdiv-guess { display:inline-block; flex-shrink:0; justify-content:center; margin-right:2%; }
.witnessdiv-guessname { text-align:center; font-size:20px; }
.witnessdiv-guessmug { display:flex; align-items:center; justify-content:center; }
#guessdiv { position:absolute; width:100%; height:100%; left:0; top:0; background:var(--logoblue); }
#guessdiv-mugs { position:absolute; width:100%; height:100%; top:0; left:0; text-align:center; overflow-y:scroll; }
.guessDiv-row { position:relative; width:100%; display:inline-block; text-align:center; margin-bottom:3%; }
.guessDiv-mug { position:relative; display:inline-block; width:45%; margin:0 1%; }
#guessdiv-help { position:absolute; width:90%; top:30%; left:5%; background:var(--logoyellow); color:var(--logoblue); border-radius:30px; border:5px solid var(--logocyan); 
	text-align:center; padding:20px; }
#guessdiv-arrow { position:absolute; height:80px; bottom:20px; left:50%; transform:translateX(-50%); 
	animation:pointdown 0.3s infinite ease-in-out alternate; }
@keyframes pointdown { 0% {bottom:20px;} 100% {bottom:0px;} }

#resultdiv { position:absolute; width:100%; height:100%; left:0; top:0; color:white; background:var(--logoblue); }
#resultdiv-culprit { position:absolute; top:8%; left:7%; }
#resultdiv-witness { position:absolute; width:42%; top:8%; right:3%; text-align:center; font-size:34px; }
#resultdiv-witness a { font-size:20px; color:var(--logocyan); }
#resultdiv-witness span { font-size:54px;  }
#resultdiv-guesses { position:absolute; width:86%; height:45%; top:38%; left:7%; text-align:center; overflow-y:scroll; }
.resultdiv-guess { display:flex; flex-direction:row; align-items:center; width:100%; margin-bottom:2%; background:var(--logoblue); border:3px solid white; border-radius:6px; }
.resultdiv-guessmug { display:flex; margin-top:-2px; margin-left:-2px; align-items:center; justify-content:center; text-align:center; }
.resultdiv-guessinfo { display:flex; flex-direction:column; justify-content:flex-start; flex:1; height:100%; margin-left:15px; }
.resultdiv-guessplayer { display:flex; align-items:start; font-size:30px; }
.resultdiv-guesstime { display:flex; align-items:start; font-family:time; font-size:26px; }
.resultdiv-guesspts { display:flex; align-items:flex-start; justify-content:right; height:100%; margin-right:15px; font-size:50px; }
#resultdiv-ready { position:absolute; width:40%; bottom:40px; left:50%; transform:translateX(-50%); }

#scorediv { position:absolute; width:100%; height:100%; left:0; top:0; color:white; }
#scorediv-logo { position:absolute; width:110%; top:-2%; left:50%; transform:translateX(-50%); filter:drop-shadow(1px 2px 5px var(--logoblue));  }
#scorediv-scores { position:absolute; width:70%; height:40%; top:43%; left:15%; overflow-y:scroll; }
.scorediv-player { width:100%; height:50px; margin-bottom:2%; font-size:30px; line-height:50px; background:var(--logoblue); border:3px solid white; border-radius:6px; } 
.scorediv-leader { width:100%; height:50px; margin-bottom:2%; font-size:30px; line-height:50px; color:var(--logoblue); background:var(--logoyellow); border:3px solid white; border-radius:6px;  }
.scorediv-name { display:inline-block; width:70%; margin-left:5%; height:100%; text-align:left; }
.scorediv-score { display:inline-block; width:20%; margin-right:5%; height:100%; text-align:right; }
#scorediv-crown { position:absolute; height:75px; left:7%; top:35%; transform:rotate(-15deg); animation: flip 0.4s infinite linear alternate; }
@keyframes flip { 0%, 49% {transform:rotate(-20deg);} 50%,100% {transform:rotate(-10deg);} }
#scorediv-info { position:absolute; width:100%; bottom:120px; left:0; font-size:24px; text-align:center; }
#scorediv-ready { position:absolute; bottom:40px; width:40%; left:50%; transform:translateX(-50%); }
#scorediv-waiter { position:absolute; width:100%; bottom:60px; left:0; font-size:24px; font-style:italic; text-align:center; }


.button { width:35%; height:65px; border:3px solid var(--logocyan); border-radius:15px; text-align:center; font-size:40px; min-width:33%; padding-left:8px; padding-right:8px;
	line-height:65px; color:var(--logoblue); background:var(--logoyellow); box-shadow:3px 5px 5px 1px var(--logoblue); }
.button:active { transform: scale(1.2); }

.mug { position:relative; background-color:white; text-align:center; border-radius:6%; box-shadow:3px 5px 5px 1px var(--logoblue); }
.mug img { position:absolute; width:94%; top:3%; left:3%; border-radius:6%; }
.mug a { position:absolute; width:100%; color:black; bottom:-0.5%; left:50%; transform:translateX(-50%); }


#dummy {
	background:#153f5499; background: #63c8fc99;
	text-shadow: -2px -2px var(--logoblue), 2px -2px var(--logoblue), -2px 2px var(--logoblue), 2px 2px var(--logoblue);
	-webkit-text-stroke: 5px var(--logoblue);
	overflow-y:scroll;
	overflow-wrap:anywhere;
	filter:drop-shadow(0 0 1px black);
	transform:rotate(-12deg);
	transform:translateX(80px) translateY(-105px) translateY(100%);
	transition:opacity 0.7s; -webkit-transition:opacity 0.7s;
}

}