html,
body {
	font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
	background-color: #222;
	color: #eee;
	margin: 0;
	padding: 0;
	font-size: 20px;
	overflow-x: hidden;
}

nav {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items: center;
	padding-top: 20px;
	padding-bottom: 20px;
	font-weight: bold;
	margin: 0;
	padding: 0;
	padding-top: 2px;
	gap: 14px;
}

nav img {
	height: 100px;
}

nav .icon {
	height: 32px;
}

#homeLink {
	font-size: 50px;
}

.cols {
	display: flex;
	flex-flow: column wrap;
	justify-content: center;
	align-items: center;
}

.rows {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items: center;
}

.refs {
	gap: 14px;
	height: 24px;
}

.ref {
	font-size: 16px;
	text-align: center;
}

.container {
	display: flex;
	flex-flow: row wrap;
}

.item {
	width: 25%;
}

.item-content {
	padding: 10px;
}

.item-info {
	font-size: 26px;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
}

.item-iframe {
	border: transparent solid 1px;
}

iframe {
	width: 100%;
}

.gameLink {
	position: absolute;
	width: 100%;
}

iframe,
.gameLink,
.item-iframe {
	height: 320px;
}

.btn,
.btn:visited {
	color: #eee;
	text-decoration: none;
	padding: 5px;
	border: #eee solid 1px;
	border-radius: 0.5em;
}

a {
	cursor: pointer;
	color: #eee;
	text-decoration: none;
}

a:hover,
.btn:hover {
	color: #0ff;
	border-color: #0ff;
}

.item-iframe:hover {
	border-color: #0ff;
}

#pageNav {
	padding-top: 20px;
	padding-bottom: 20px;
	text-align: center;
}

footer {
	text-align: center;
	padding-top: 20px;
	padding-bottom: 20px;
}

/* reference */

code {
	tab-size: 2;
}

.center {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
}

#list {
	display: flex;
	flex-flow: row wrap;
	justify-content: start;
	border: #eee solid 1px;
	gap: 28px;
	padding: 28px;
	margin: 14px;
	padding-right: 30px;
	padding-top: 14px;
	width: max-content;
}

#list h3 {
	margin-top: 7px;
	margin-bottom: 7px;
}

#list div {
	display: flex;
	flex-flow: column wrap;
	gap: 14px;
}

.body {
	display: flex;
	justify-content: center;
}

.body div {
	width: 750px;
}

table {
	border-collapse: collapse;
}

tr {
	border-bottom: #aaa solid 1px;
}

thead tr {
	border-bottom: #aaa solid 2px;
}

th,
td {
	padding: 12px;
}

li {
	margin-bottom: 12px;
}

@media screen and (max-width: 1300px) {
	.item {
		width: 33%;
	}

	iframe,
	.gameLink,
	.item-iframe {
		height: 250px;
	}
}

@media screen and (max-width: 1000px) {
	.item {
		width: 50%;
	}

	iframe,
	.gameLink,
	.item-iframe {
		height: 250px;
	}
}

@media screen and (max-width: 790px) {
	.body div {
		min-width: 95vw;
		max-width: 95vw;
		width: auto;
	}
}