body {
	overflow: hidden;
}

#game {
	position: relative;
	display: block;
	margin: auto;
	box-sizing: border-box;
	width: 80vw;
	height: 40vw;
	background-color: #006701;
	border: 2em solid #a86234;
	border-radius: 0.5em;
}

@media (orientation: portrait) {
	#game {
		width: 80vh;
		height: 40vh;
		transform: translateX(-15vh) translateY(30vh) rotate(90deg);
	}
}

.hole {
	position: absolute;
	display: block;
	background-color: black;
	width: 6%;
	height: 12%;
	border-radius: 50%;
	box-shadow: 0 0 2px solid black;
}

#hole1 { top: -3%; left: -1.5%; }
#hole2 { top: -3%; left: 47%; }
#hole3 { top: -3%; left: 95.5%; }
#hole4 { top: 91%; left: -1.5%; }
#hole5 { top: 91%; left: 47%; }
#hole6 { top: 91%; left: 95.5%; }

.ball {
	position: absolute;
	height: 8%;
	width: 4%;
	border-radius: 50%;
	box-shadow: 0 0 3px black;
	z-index: 1;
}

#b1, #b9  { background-color: yellow; }
#b2, #b10 { background-color: blue; }
#b3, #b11 { background-color: red; }
#b4, #b12 { background-color: pink; }
#b5, #b13 { background-color: orange; }
#b6, #b14 { background-color: green; }
#b7, #b15 { background-color: darkred; }
#b8       { background-color: black; }

#main {
	top: 46%;
	left: 48%;
	background-color: white;
}

#queue {
	position: absolute;
	height: 4%;
	width: 60%;
	border-radius: 0.2em;
	background-image: linear-gradient(to right, black 0, black 2%, brown 2.1%, brown 100%);
	box-shadow: -3px 0 3px white;
	transform: rotate(190deg) translate(100%, 0);
	z-index: 2;
}