html {
	background-color: #191919;
}

body {
	font-family: serif;
	background: linear-gradient(
		90deg,
		#333333 0% 224px,
		#212121 224px 100%
	);
	color: #f0f0f0;
	text-align: center;
	max-width: 960px;
	margin: 20px auto;
	padding: 12px;
}
body * {
	transition: color 250ms;
}
.main *:hover {
	color: #cf1313;
}
ul:hover {
	color: inherit;
}
table > tbody > tr > * {
	color: black;
}
li {
	transition-duration: 250ms;
}
li:hover {
	color: #cf1313;
}
*, *:after, *:before {
	box-sizing: border-box;
}
.side {
	float: left;
	margin: 0;
	width: 203px;
	height: max-content;
	list-style: none;
	padding-left: 0;
	position: sticky;
	top: 12px;
}
.side:before {
	content: '';
	clip-path: polygon(0 0, 100% 4%, 100% 96%, 0% 100%);
	height: 100%;
	width: 20px;
	position: absolute;
	top: 0px;
	left: calc(100% + 12px);
	background: black;
	opacity: 0.3;
}
.side li {
	height: max-content;
	padding: .6rem;
	border: 2px solid black;
	display: block;
	background: linear-gradient(
		45deg,
		currentColor 0% 60%,
		#f0f0f0 100%
	);
	margin-bottom: 0.3em;
	border-radius: 0px 12px 12px 0px;
	border-style: inset;
	border-width: 0px 3px 3px 0px;
	color: #9e9e93;
}
.side li a {
	color: #f0f0f0;
}
.side li:hover {
	border-style: solid;
	border-width: 0px 2px 2px 0px;
	border-color: white;
	color: #8f4747;
}
.side li:active {
	border-style: outset;
}
.main {
	float: right;
	width: calc(100% - 224px);
}

.main > :nth-child(1) {
	margin-top: 0px;
}

body:after {
	content: ' ';
	height: 0px;
	display: block;
	visibility: hidden;
	clear: both;
}

img {
	max-width: 100%;
	height: auto;
}

@media(max-width: 426px) {
	.side {
		width: auto;
		display: flex;
		float: none;
		background: #333333;
		flex-wrap: wrap;
		justify-content: center;
		position: relative;
		top: 0px;
	}
	.side li {
		flex-grow: 0;
		flex-shrink: 1;
		flex-basis: auto;
		border-radius: 12px;
	}
	.side:before {
		width: 100%;
		height: 20px;
		clip-path: polygon(0 0, 100% 0, 96% 100%, 4% 100%);
		top: 100%;
		left: 0px;
	}
	.side {
		margin-bottom: 6px;
	}
	.main {
		float: none;
		width: auto;
		background: #212121;
		padding: 12px;
	}
	body {
		max-width: none;
		width: auto;
		margin: 20px 0px;
		background: none;
		padding: 0px;
	}
	
}