body {
	background: black url(bg.gif);
	color: lightpink;
	font-family: serif;
	font-size: 1.3em;

	text-align: center;

	image-rendering: pixelated;

	margin: auto 2em;
}

hr {
	border:none;
	max-width: 800px;
	height:3px;
	background-image: url(rainbow.gif);
}

a:link {
	color: royalblue
}
a:link img {
	outline: 3.5px solid;
	outline-color: royalblue;
}
a:visited {
	color: slateblue
}
a:visited img {
	outline-color: slateblue;
}
a img {
	outline: none !important
}

table {
	background: black url(bg-dim.gif);
	border: 2px outset #ccc;
	margin-left: auto;
	margin-right: auto;
}

tr {
	border: 2px inset #ccc;
}

th, td {
	border: 2px inset #ccc;
	padding: 4px 8px
}

input {
	border: 3px inset #ccc;
	font-size: 1em;
	margin: 0.5em;
}


#quotes tr.hidden {
	display: none
}


#quotes th {
	background-color: #0c0e21;
}


#quotes {
	max-width: 1024px;
}
#quotes tr {
	height: 2.5em;
}
#quotes tr > *:nth-child(2) { 
	text-align: left;
}
#quotes tr > *:nth-child(3) { 
	font-size: smaller;
	font-style: italic;
	color: lightgray
}
#quotes tr > *:nth-child(4) { 
	font-size: smaller;
	font-style: italic;
	color: lightgray
}

@media only screen and (max-width: 830px) {
	#quotes tr {
		margin: 2px;
		height: auto;
		display: grid;
		grid-template: 
			"number quote quote link"
			"number game  date  link"
			/ 2em auto auto 3.5em;
	}
	#quotes tr > * {
		border: none;
	}
	#quotes tr > *:nth-child(1) { grid-area: number; }
	#quotes tr > *:nth-child(2) { grid-area: quote; }
	#quotes tr > *:nth-child(3) { grid-area: game; text-align: left; }
	#quotes tr > *:nth-child(4) { grid-area: date; text-align: right;  }
	#quotes tr > *:nth-child(5) { grid-area: link; }
	#quotes a img {
		padding: 8px
	}
	#quotes #emptyquote {
		display: table-row
	}

	.resize {
		max-width: 100%
	}
}	

#quotes #emptyquote td {
	border: none;
}