html,body{
	margin:0;
	padding:0;
	width:100%;
	height:100%;
	font-size:1em;
	line-height:1.2em;
}
body{
	display:flex;
	flex-direction:column;
	background-color:#111;
	min-width:640px;
	min-height:400px;
}
#toptext{
	background:grey;
	color:#f9fff9;
	text-shadow:1px 1px 2px #040409;
	min-height:3em;
	padding:0.6em 1.25em 1.65em;
	font-size:1.2em;
	position:relative;
	top:0;left:0;right:0;
}
#toptext::selection, #toptext div::selection{
	text-shadow:none;
	color:black;
	background-color:lightblue;
}
#game,#mainc{width:100%;height:100%;position:absolute;}
#main{filter:invert(1);position:absolute;top:8%;font-size:200%;left:20%;right:20%;text-align:center;color:#202021;}
#main>div>span{color:#999;}#main>div{text-align:center;line-height:1.5em;}
#bob{width:130px;height:150px;float:left;margin-top:10px;margin-left:50px;}
@supports (background-image:linear-gradient(#000,#111)){
	#toptext{
		background:transparent;
	}
	#toptext:before{
		background:linear-gradient(179.8deg, silver, #889, #666, #777, #667, #888 75%, transparent);
		border-bottom-right-radius:99%;
		position:absolute;
		top:0;right:0;left:0;bottom:0;
		content:'';
		z-index:-1;
	}
}
#toptext>div{
	display:flex;
	flex-direction:row;
	margin:0.15em 0;
}
#toptext>div>div:first-of-type{
	padding-right:0.3em;
}
#toptext span{
	
}
.infopopup{
	display:inline-block;
	width:1em;
	height:1em;
	margin:0 0.05em 0 0.15em;
	cursor:help;
	position:relative;
}
.infopopup:before{
	content:'\24d8';
	font-size:0.9em;
}
.infopopup div{
	position:absolute;
	pointer-events:none;
	top:1em;
	left:-0.5em;
	display:none;
	background:grey;
	background:linear-gradient(135deg, #999c 5%, #777c, #888c, #777c);
	border:2px dotted silver;
	padding:0.25em 0.45em;
	min-width:92px;
	border-radius:0.3em;
}
.infopopup:hover div{
	display:block;
}
.nowrap{white-space:nowrap;}
@supports (opacity:1) and (pointer-events:none) and (transition:none){
	.infopopup div{
		display:block;
		opacity:0;
		max-height:0;
		transition:opacity 0.4s, max-height 0.5s ease-out;
		overflow:hidden;
	}
	.infopopup:hover div{
		opacity:1;
		max-height:6em;
		transition:opacity 0.2s, max-height 0.2s ease-in;
	}
	.infopopup[small]:hover div{max-height:4em;}
	.infopopup[large]:hover div{max-height:8em;}
}
#garage{
	background:url();
	flex-grow:7;
	position:relative;
	overflow:hidden;
}
#container{
	top:10%;
	left:10%;
	bottom:10%;
	right:10%;
	position:absolute;
}
#game{
	
}
#figure, #figure_hopin {
	position:absolute;
	left:-3.5em;
	bottom:-2em;
	width:150px;
	height:200px;
}
#figure_hopin {
	background: url(drink.gif);
	animation: hopin 20s linear, hopinimg 20s linear;
}
#figure_hopin.stationary {
	background-image: url(drink-stationary.png);
}
@keyframes hopinimg{
	from{background:url(hop.gif);}
	to{background:url(hop.gif);}
}
@keyframes hopin{
	from{left:115%;bottom:5%;}
	5%{bottom:12%;}
	10%{bottom:2%;}
	15%{bottom:11%;}
	20%{bottom:-5%;}
	25%{bottom:8%;}
	30%{bottom:1%;}
	35%{bottom:11%;}
	40%{bottom:3%;}
	45%{bottom:12%;}
	50%{bottom:-3%;}
	55%{bottom:13%;}
	60%{bottom:2%;}
	65%{bottom:11%;}
	70%{bottom:-4%;}
	75%{bottom:11%;}
	80%{bottom:-3%;}
	85%{bottom:12%;}
	90%{bottom:-2%;}
	95%{bottom:9%;}
	to{left:-3.5em;bottom:-2em;}
}
#wfredlogocont{
	position:absolute;
	top:0;
	bottom:0;
	right:2em;
	z-index:-1;
	display:none;
}
@supports (object-fit:contain){
	#wfredlogocont{display:block;}
	#wfredlogo{object-fit:contain;opacity:0.7;max-height:2.2em;position:absolute;bottom:0;right:0;}
	@media (min-width:800px){
		#wfredlogo{opacity:0.8;max-height:2.5em;}
	}
	@media (min-width:950px){
		#wfredlogo{max-height:3.5em;}
	}
	@media (min-width:1150px){
		#wfredlogo{opacity:0.9;max-height:4.2em;}
	}
	@media (min-width:1300px){
		#wfredlogo{max-height:5em;}
	}
	@media (min-width:1400px){
		#wfredlogo{max-height:6em;}
	}
	@media (min-width:1500px){
		#wfredlogo{max-height:8em;}
	}
}

.jsanilayer {
	position: absolute; z-index: 1;
	top: 0; left: 0; right: 0; bottom: 0;
	pointer-events: none;
	overflow: hidden;
}
.bottle {
	pointer-events: all;
	position: absolute;
	transition: none 0.1s linear;
	transition-property: left, right, bottom, top, width, height, padding, transform, opacity;
	transform: none;
	width: 50px; height: 120px;
	background: url(beer.png);
}
.bottle.fading {
	opacity: 0;
	transition-duration: 0.4s;
}