:root {
	--dark-blue: #26429b;
	--mid-blue: #4068a8;
	--light-blue: #5a8eb4;

	--dark-green: #abcf46;
	--mid-green: #cce776;
	--light-green: #eeffa5;

	--dark-orange: #fd9f24;
	--mid-orange: #fbb652;
	--light-orange: #f9cd7f;

	--dark-red: #d9370b;
	--mid-red: #ec5634;
	--light-red: #ff755c;

	--dark-purple: #611770;
	--mid-purple: #8f4ba3;
	--light-purple: #bd7fd6;
}
.blue {
	--light-color: var(--light-blue);
	--mid-color: var(--mid-blue);
	--dark-color: var(--dark-blue);
}
.green {
	--light-color: var(--light-green);
	--mid-color: var(--mid-green);
	--dark-color: var(--dark-green);
}
.orange {
	--light-color: var(--light-orange);
	--mid-color: var(--mid-orange);
	--dark-color: var(--dark-orange);
}
.red {
	--light-color: var(--light-red);
	--mid-color: var(--mid-red);
	--dark-color: var(--dark-red);
}
.purple {
	--light-color: var(--light-purple);
	--mid-color: var(--mid-purple);
	--dark-color: var(--dark-purple);
}
html {
	background-color: var(--mid-blue);
	padding: 1em;
	padding-bottom: 50vh;
	overflow-y: scroll;
	scroll-behavior: smooth;
}
body {
	max-width: 1024px;
	margin: auto;
	border-radius: 16px;
	border: 4px solid white;
	box-shadow: 0px 6px 4px -4px black inset;
	overflow: hidden;
	line-height: 1.8;
	font-family: "Droid Serif", "Liberation Serif", "Times New Roman", serif;
}
@media only screen and (max-width: 640px) {
	html {
		padding: 0;
		overflow-y: initial;
	}
	body {
		overflow: initial;
		border: none;
	}
}
header, main, footer {
	padding: 1em;
}
header {
	background-image: repeating-conic-gradient(var(--dark-color) 0deg 10deg, var(--light-color) 10deg 20deg);
	background-size: 100% 250%;
	background-position: 0% 100%;
	border-bottom: 4px solid var(--light-color);
	box-shadow: 0px -4px 4px -4px black inset;
}
nav {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-gap: 1em;
}
@media only screen and (max-width: 640px) {
	nav {
		grid-template-columns: repeat(2, 1fr);
		grid-gap: 0.5em;
	}
}
main {
	background: white;
}
footer {
	background-color: var(--dark-color);
	border-top: 4px solid var(--light-color);
	box-shadow: 0px 4px 4px -4px black inset;

	background-image: repeating-conic-gradient(var(--dark-color) 0deg 6deg, var(--light-color) 6deg 12deg);
	background-size: 200% 200%;
	background-position: 0% 100%;
}
header h1 {
	color: #fdfb36;
	text-align: center;
	margin: 0px auto;
	line-height: 1.2;
	-webkit-text-stroke: 4px black;
	font-size: 100px;
	font-family: "Impact";
}
header h1 span {
	color: #04fff8;
}
header h1 small {
	position: relative;
	left: -10px;
}
@media only screen and (max-width: 720px) {
	header h1 {
		font-size: 50px;
		-webkit-text-stroke: 2px black;
	}
	header h1 small {
		position: relative;
		left: -5px;
	}
}
@media only screen and (max-width: 400px) {
	header h1 small {
		display: none;
	}
}
section h1 {
	font-family: "Comic Sans MS";
}
div.buttons {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 1em;
}
@media only screen and (max-width: 640px) {
	div.buttons {
		grid-template-columns: 1fr;
	}
}
div.categories {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 1em;
	background-image: repeating-linear-gradient(to right, var(--dark-color) 0%, var(--dark-color) 5%, var(--mid-color) 5%, var(--mid-color) 10%);
	border: 4px solid var(--light-color);
	border-radius: 16px;
	box-shadow: 0px 0px 4px 0px black;
}
@media only screen and (max-width: 640px) {
	div.categories {
		grid-template-columns: 1fr;
		background-image: repeating-linear-gradient(to right, var(--dark-color) 0%, var(--dark-color) 10%, var(--mid-color) 10%, var(--mid-color) 20%);
	}
}
div.category {
	padding: 0.5em;
}
div.category h2 {
	font-family: "Comic Sans MS";
	text-align: center;
	margin-top: 0;
	color: white;
	text-shadow: 0px 1px black, 0px -1px black, 1px 0px black, -1px 0px black;
}
div.button-list {
	display: grid;
	grid-gap: 0.5em;
}
div.button-list a.button {
	font-family: "Arial Black";
}
a.button:after {
	background: white;
	content: "";
	height: 300px;
	left: -125px;
	opacity: 0.2;
	position: absolute;
	top: -50px;
	transform: rotate(35deg);
	width: 50px;
	z-index: 10;
}
a.button:hover:after {
	left: 150%;
	transition: all 1s ease;
}
a.button {
	display: block;
	border: 4px solid var(--light-color);
	border-radius: 8px;
	background-image: radial-gradient(ellipse farthest-side at 50% 100%, var(--dark-color) 65%, var(--light-color) 70%, var(--mid-color) 100%);
	background-size: 250% 101%;
	background-position: 50% 0%;
	padding: 0.5em 1em;
	text-decoration: none;
	color: white;
	transition: 0.2s ease;
	position: relative;
	overflow: hidden;
}
a.button:hover {
	box-shadow: 0px 4px 4px -4px black inset;
}
nav a.button {
	text-align: center;
	font-family: "Arial Black";
}
a.button h2 {
	margin: 0;
}
a.button.personal h2:before {
	content: '\01F464\0FE0E\ ';
	font-weight: normal;
}
a.button.project h2:before {
	content: '\01F310\0FE0E\ ';
	font-weight: normal;
}
a.button.repo h2:before {
	content: '\01F5AB\0FE0E\ ';
	font-weight: normal;
}
pre {
	text-wrap: wrap;
}