intro-to-dotnet-web-dev/5-blazor/1-complete/ConnectFour/Shared/Board.razor.css

div {
	position: relative;
}

nav {
	top: 4em;
	width: 30em;
	display: inline-flex;
	flex-direction: row;
	margin-left: 10px;
}

nav span {
	width: 4em;
	text-align: center;
	cursor: pointer;
	font-size: 1em;
}

div.board {
	margin-top: 1em;
	flex-wrap: wrap;
	width: 30em;
	height: 24em;
	overflow: hidden;
	display: inline-flex;
	flex-direction: row;
	flex-wrap: wrap;
	z-index: -5;
	row-gap: 0;
	pointer-events: none;
	border-left: 10px solid var(--board-bg);
}

span.container {
	width: 4em;
	height: 4em;
	margin: 0;
	padding: 4px;
	overflow: hidden;
	background-color: transparent;
	position: relative;
	z-index: -2;
	pointer-events: none;
}

.container span {
	width: 3.5em;
	height: 3.5em;
	border-radius: 50%;
	box-shadow: 0 0 0 3em var(--board-bg);
	left: 0px;
	position: absolute;
	display: block;
	z-index: 5;
	pointer-events: none;
}

.player1, .player2 {
	width: 3.5em;
	height: 3.5em;
	border-radius: 50%;
	left: 0px;
	top: 0px;
	position: absolute;
	display: block;
	z-index: -8;
}

.player1 {
	background-color: var(--player1);
	animation-timing-function: cubic-bezier(.5, 0.05, 1, .5);
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
	box-shadow: 0 0 0 4px var(--player1);
}

.player2 {
	background-color: var(--player2);
	animation-timing-function: cubic-bezier(.5, 0.05, 1, .5);
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
	box-shadow: 0 0 0 4px var(--player2);
}

.col1 {
	left: calc(0em + 9px);
}

.col2 {
	left: calc(4em + 9px);
}

.col3 {
	left: calc(8em + 9px);
}

.col4 {
	left: calc(12em + 9px);
}

.col5 {
	left: calc(16em + 9px);
}

.col6 {
	left: calc(20em + 9px);
}

.col7 {
	left: calc(24em + 9px);
}

.drop1 {
	animation-duration: 1s;
	animation-name: drop1;
}

.drop2 {
	animation-duration: 1.5s;
	animation-name: drop2;
}

.drop3 {
	animation-duration: 1.6s;
	animation-name: drop3;
}

.drop4 {
	animation-duration: 1.7s;
	animation-name: drop4;
}

.drop5 {
	animation-duration: 1.8s;
	animation-name: drop5;
}

.drop6 {
	animation-duration: 1.9s;
	animation-name: drop6;
}

@keyframes drop1 {
	75%, 90%, 97%, 100% {
		transform: translateY(1.27em);
	}

	80% {
		transform: translateY(0.4em);
	}

	/*-15% */
	95% {
		transform: translateY(0.8em);
	}

	/* -7% */
	99% {
		transform: translateY(1.0em);
	}

	/* -3% */
}

@keyframes drop2 {
	75%, 90%, 97%, 100% {
		transform: translateY(5.27em);
	}

	80% {
		transform: translateY(3.8em);
	}

	/*-15% */
	95% {
		transform: translateY(4.6em);
	}

	/* -7% */
	99% {
		transform: translateY(4.9em);
	}

	/* -3% */
}

@keyframes drop3 {
	75%, 90%, 97%, 100% {
		transform: translateY(9.27em);
	}

	80% {
		transform: translateY(7.2em);
	}

	/*-15% */
	95% {
		transform: translateY(8.3em);
	}

	/* -7% */
	99% {
		transform: translateY(8.8em);
	}

	/* -3% */
}

@keyframes drop4 {
	75%, 90%, 97%, 100% {
		transform: translateY(13.27em);
	}

	80% {
		transform: translateY(10.6em);
	}

	/*-15% */
	95% {
		transform: translateY(12em);
	}

	/* -7% */
	99% {
		transform: translateY(12.7em);
	}

	/* -3% */
}

@keyframes drop5 {
	75%, 90%, 97%, 100% {
		transform: translateY(17.27em);
	}

	80% {
		transform: translateY(14em);
	}

	/*-15% */
	95% {
		transform: translateY(15.7em);
	}

	/* -7% */
	99% {
		transform: translateY(16.5em);
	}

	/* -3% */
}

@keyframes drop6 {
	75%, 90%, 97%, 100% {
		transform: translateY(21.27em);
	}

	80% {
		transform: translateY(17.4em);
	}

	95% {
		transform: translateY(19.4em);
	}

	99% {
		transform: translateY(20.4em);
	}
}