body{

}

.container {
	width: 80%;
	justify-content: center;
	border: 1px solid black;
	border-radius: 10px;
	z-index: 2;
	background-color: yellow;
	opacity: 1;
}

.rack{
	background-color: orange;
}

.therow{
	display: flex;
	justify-content: space-between;
}

.a, .b, .c, .d, .e, .f, .g{
	width: 10vw;
	height: 9vw;
	flex: 1;
	border: 1px solid black;
	border-radius: 100%;
	margin: 1vw;
	z-index: 0;
/*	position: relative; */
	background-color: white;
}

.slot{
	width: 10vw;
	height: 9vw;
	flex: 1;
	border: 1px solid black;
	border-radius: 100%;
	margin: 1vw;
	z-index: 0;
	background-color: white;
	opacity: 1;
}



.redpiece{
	width: 9vw;
	height: 9vw;
	border-radius: 100%;
	background-color: red;
	position: absolute;
	left: 13vw;
	top: 0vw;
	display: inline-block;
	z-index: 1;
}

.bluepiece{
	width: 9vw;
	height: 9vw;
	border-radius: 100%;
	background-color: blue;
	position: absolute;
	left: 15vw;
	top: 8vw;
	display: inline-block;
	z-index: 1;
}

.placeholder{
	width: 9vw;
	height: 9vw;
	border: 1px solid black;
	border-radius: 100%;
	position: relative;
	left: 15vw;
	display: none;
	z-index: 3;
}

.playAgain{
	background-color: orange;
	margin-left: 10vw;
	height: 5vw;
	border-radius: 10px;
}