body {
	background-color:	black;
	margin:				0;
}
.playfield {
	position:	fixed;
	top:		0;
	bottom:		0;
	left:		0;
	right:		0;
	display:			flex;
	flex-wrap:			wrap;
	align-content:		center;
	justify-content:	center;
}

bottle {
	display:			flex;
	flex-direction:		column-reverse;
	flex-wrap:			nowrap;
	border:				2px solid rgba(255,255,255,0.75);
	box-sizing:			border-box;
	margin:				10px;
	padding-top:		10px;
	width:				50px;
	height:				200px;
	overflow:			hidden;
	box-shadow:			rgba(218,165,32,0) 0 0 0px 0px;
	background-color:	rgba(218,165,32,0);
	transition:			
		all 200ms, 
		transform 1000ms, 
		height 400ms 1000ms, width 400ms 1000ms, margin 400ms 1000ms, padding-top 400ms 1000ms, border-width 400ms 1000ms;
	border-bottom-left-radius:	20px;
	border-bottom-right-radius:	20px;
}
bottle.source {
	box-shadow:	goldenrod 0 0 10px 5px;
	background-color:	rgba(218,165,32,0.25);
}
bottle.finished {
	transform:		scale(0) rotate(90deg);
	height:			0px;
	width:			0px;
	margin:			0px;
	padding-top:	0px;
	border-width:	0px;
}

bottleLayer {
	display:	block;
	flex-grow:	1;
	transform-origin:	top;
	transition:			all 1000ms;
}



bottle.pour4 {
	--rotation:		68deg;
	--translate-x:	120px;
	--translate-y:	-95px;
}
bottle.pour3 {
	--rotation:		77deg;
	--translate-x:	120px;
	--translate-y:	-110px;

}
bottle.pour2 {
	--rotation:		82deg;
	--translate-x:	120px;
	--translate-y:	-120px;
}
bottle.pour1 {
	--rotation:	85deg;
	--translate-x:	120px;
	--translate-y:	-125px;
}
bottle.pour1,
bottle.pour2,
bottle.pour3,
bottle.pour4 {
	--offset-x:	0px;
	--offset-y:	0px;
	transform:
		translate(
			calc(
				var(--translate-x) - var(--offset-x)
			),
			calc(
				var(--translate-y) - var(--offset-y)
			)
		) 
		rotate(
			calc(
				-1 * var(--rotation)
			) 
		);
	z-index:	999;
}
bottle.pour1 bottleLayer,
bottle.pour2 bottleLayer,
bottle.pour3 bottleLayer,
bottle.pour4 bottleLayer {
	transform:	skewY( var(--rotation) ) scaleY(7);
}
bottleLayer:nth-last-child(1) {		z-index:	1;	}
bottleLayer:nth-last-child(2) {		z-index:	2;	}
bottleLayer:nth-last-child(3) {		z-index:	3;	}
bottleLayer:nth-last-child(4) {		z-index:	4;	}
bottleLayer:nth-last-child(5) {		z-index:	5;	}
bottleLayer:nth-last-child(6) {		z-index:	6;	}
bottleLayer:nth-last-child(7) {		z-index:	7;	}
bottleLayer:nth-last-child(8) {		z-index:	8;	}
bottleLayer:nth-last-child(9) {		z-index:	9;	}
bottleLayer:nth-last-child(10) {	z-index:	10;	}



#settings-button,
#close-button {
	display:	block;
	position:	fixed;
	top:		0;
	right:		0;
}
settings {
	display:			flex;
	flex-direction:		column;
	align-items:		center;
	justify-content:	center;
	position:			fixed;
	top:				0;
	bottom:				0;
	left:				0;
	right:				0;
	background-color:	rgba(0,0,0,0.9);
	opacity:			0;
	z-index:			-1;
	transition:			opacity 400ms, z-index 0ms 400ms;
	color:				white;
}
settings.show {
	opacity:	1;
	z-index:	1;
	transition:	opacity 400ms, z-index 0ms 0ms;
}