app.scss

@import url( 'https://fonts.googleapis.com/css2?family=Source+Sans+Pro&display=swap' );
body {
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'Source Sans Pro', sans-serif;
}
.grid {
	border: 3px solid black;
	border-collapse: collapse;
}
.row:nth-child( 3n ) .cell {
	border-bottom-width: 3px;
}
.cell {
	border: 1px solid black;
	width: 64px;
	height: 64px;
	position: relative;
	text-align: center;
	&:nth-child( 3n ) {
		border-right-width: 3px;
	}
	&.is-focused {
		outline: none;
		background-color: rgba( yellow, 0.4 );
	}

	.value {
		font-size: 32px;
	}

	.snider-notation {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		display: grid;
		grid-template-columns: repeat( 3, 1fr );
		grid-template-rows: repeat( 3, 1fr );
		padding: 4px;
		box-sizing: border-box;
		span {
			display: flex;
			line-height: 1;
		}
		// row 1
		span:nth-child( 1 ),
		span:nth-child( 5 ),
		span:nth-child( 2 ) {
			align-items: flex-start;
		}
		// row 2
		span:nth-child( 7 ),
		span:nth-child( 9 ),
		span:nth-child( 8 ) {
			align-items: center;
		}
		// row 3
		span:nth-child( 3 ),
		span:nth-child( 6 ),
		span:nth-child( 4 ) {
			align-items: flex-end;
		}
		// column 1
		span:nth-child( 1 ),
		span:nth-child( 7 ),
		span:nth-child( 3 ) {
			justify-content: flex-start;
		}
		// column 2
		span:nth-child( 5 ),
		span:nth-child( 9 ),
		span:nth-child( 6 ) {
			justify-content: center;
		}
		// column 3
		span:nth-child( 2 ),
		span:nth-child( 8 ),
		span:nth-child( 4 ) {
			justify-content: flex-end;
		}
	}
}