div, h1, h2, h3, p, a, li {font-family: Sans-serif;} /* I intuitively found serifless fonts more appropriate and didn't think it's worth spending more time on that decision. */

h1 { color: #fff; text-shadow: 0px 2px 2px rgba(0,0,0,0.5); }
h2 { margin-top: 0px; } /* I don't need the margin, because the card class has padding. */
p { text-align: justify; }

img {
	font-family: Sans-serif; color: rgba(0,0,0,0.5); /* Makes the image's alt text less obtrusive. */
}

ul,ol {
	padding-left: 1em;
}

a { text-decoration: none; }	/* Dont underline links. The line draws too much attention, when the link is embedded in text. */
a:hover { text-decoration: underline; } /* Underline links on hover for some nice visual feedback. */
h1 a { color: rgba(255,255,255,0.75); }

table, th, td {
    border: 1px solid black;
	text-align: center;
}
table {
	margin-left: auto;
	margin-right: auto;
	
	border-collapse: collapse;
    border-style: hidden;
}
th, td {
    padding: 4px;
}

pre {
	background-color: #444;
	color: #fff;
	margin: -8px -16px;
	padding: 8px 16px;
	white-space: pre-wrap;
}

.main {
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
	
	position: relative; /* Allows children to be positioned absolutely. */
}

.centered {
	/*max-width:100%;*/
	height: auto;
	display: block; 
	margin-left: auto;
	margin-right: auto;
}

.thumbnail-grid {
	display:flex;
	justify-content: space-around;
	flex-direction: row;
	flex-wrap: wrap;
}

.thumbnail {
}

.card {
	margin: 8px 4px;
	padding: 8px 16px;
	
	border-radius: 2px;
	box-shadow: 0px 2px 2px rgba(0,0,0,0.5);
	background: #FFF;
	position: relative; /* Required to make .default-link work. */
}

.flexbox {
	display:flex;
	justify-content: space-between;
	flex-direction: row;
	flex-wrap: wrap;
}

.links {
	margin-left: 8px;
}

.caption {
	text-align: center;
	font-size: 94%;
	margin-top: 8px;
}

.red  { background-color: #846; }
.green{ background-color: #486; }
.blue { background-color: #468; }
.gray { background-color: #666; }
.weak {
	font-size: 94%;
	color: rgba(0,0,0,0.5);
}

.code{
	font-family: monospace;
	background-color: rgba(0,0,0,0.1);
	
	margin: -1px;
	padding: 1px;
	border-radius: 2px;
}