body {
	background-color: #1A1A1A;
	padding: 0;
	margin: 0;
}

.main {
	position: absolute;
	height: 100%;
	width: 100%;
	display: grid;
	grid-template-columns: 1fr 2fr 1fr;
}

.left {
	background-color: #0D0D0D;
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	border-right: 1px solid white;
}

.left a {
	color: white;
	font-size: 2.5em;
}

.center {
	height: 100%;
	width: 100%;
}

.right {
	background-color: #0D0D0D;
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	border-left: 1px solid white;
}

.right a {
	color: white;
	font-size: 2.5em;
}

.content {
	height: 100%;
	width: 100%;
	color: white;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
}

.content p {
	z-index: 1;
	font-size: 1.5em;
}

#trigrams {
	filter: invert(95%);
	height: 25%;
	width: 55%;
	z-index: 1;	
}

#frog {
	filter: invert(90%);
	opacity: 0.5;
	height: 70%;
	width: 50%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	position: absolute;
	z-index: -1;
}