html {
	width: 100%;
}

body {
	background-color: #212121;
	color: #ababab;
	font-family: ui-monospace, monospace;
}

h1, h2, h3 {
	font-variant: small-caps;
}

h1, h2 {
	text-align: center;
	color: #fafafa;
}

h1 {
	font-size: 3rem;
}

h2, h3 {
	font-size: 2rem;
}

p, a, a:visited {
	color: #ffffff;
	text-decoration: none;
}

div {
}

.grid-container {
	margin: 0 auto;
	max-width: 64rem;
	width: 100%;
	display: grid;
	gap: 1rem;

	grid-template-columns: repeat(1, 1fr);
}
@media (min-width:960px) {
	.grid-container {
		grid-template-columns: repeat(2, 1fr);
	}
}

.card {
	height: 16rem;
	box-shadow: 0.5rem 0.5rem 0.5rem #000000;
	margin: 1rem;
}
.card > h3 {
	text-align: center;
	padding-top: 0.5rem;
	margin: 0;
}
.card > p {
	padding: 0rem 1rem 0rem 1rem;
}

#games {
	background-color: #03CEA4;
}
#games:hover {
	/*background-color: #22FCD0;*/
	cursor: not-allowed;
}

#blog {
	background-color: #F2BB05;
}
#blog:hover {
	/*background-color: #FBCD37;*/
	cursor: not-allowed;
}

#github {
	background-color: #62466B;
}
#github:hover {
	background-color: #866194;
}

#linkedin {
	background-color: #276EB9;
}
#linkedin:hover {
	background-color: #468CD8;
}