body
{
	background: url('/image/backdrop.png'); 
	background-size: 64px;
	color: #eee;
	font-family: Verdana, sans-serif;
}

.checkerboard
{
	background:
		linear-gradient(90deg, transparent 0%, midnightblue 33%, midnightblue 66%, transparent 100%),
		url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAJElEQVQoz2NkwAH+/3yGVZyJgUQwqoEYwIgrvBnZpUZDiX4aAD+IBf3bjuoGAAAAAElFTkSuQmCC");
	
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, white 33%, white 66%, transparent 100%);
	mask-image:         linear-gradient(90deg, transparent 0%, white 33%, white 66%, transparent 100%);

	border:       1px solid blue;
	border-left:  none;
	border-right: none;
}

a:link, a:visited
{
	color: #eee;
	text-shadow: 0px 0px 0px transparent;
	transition-property: color, text-shadow;
	transition-duration: .15s;
	transition-timing-function: linear;
}

a:hover
{
	color: white;
	text-shadow: 0px 0px 4px white;
}

/* 
 * Header.
 */
h1
{
	color:     GhostWhite;
	font-family: Garamond, serif;
	text-shadow: 0px 0px 4px white, 0px 0px 8px white, 0px 0px 20px blue, 0px 0px 25px blue, 0px 0px 32px cyan;
	text-align:  center;

	letter-spacing: 0.1rem;
	padding:        0.25em;
}

/*
 * Navigation.
 */
nav
{
	color:     GhostWhite;
	font-family: Garamond, serif;
	font-size:   125%;
	text-align:  center;

	letter-spacing: 0.1rem;
	padding:        0.25em;
	margin-bottom:  1.75em;
}

nav span
{
	padding: 0em 1em 0em 1em;
	background-color: #aaaaaa40;
	border: ridge 1px #dedede;
	display: inline-block;
}

nav span:hover
{
	background-color: midnightblue;
	text-shadow: 0px 0px 4px white, 0px 0px 10px blue, 0px 0px 15px;
	border: ridge 1px #dedede7f;
}

nav span#thispage
{
	background-color: midnightblue;
	text-shadow: 0px 0px 4px white, 0px 0px 10px blue, 0px 0px 15px;
	border: ridge 1px #dedede7f;
}

nav span a
{
	text-decoration: none;
}

nav span a:visited, nav span a:link
{
	color: inherit;
}

/*
 * Banner.
 */

.banner
{
	transition: border 0.05s, box-shadow 0.05s;
	min-width: 32%;
	font-family:'Courier New', Courier, monospace;
	font-weight: bold;
	letter-spacing: 0.125em;
	display: inline-block;
	text-align: center;
	text-shadow: 1px 0px 1px black, -1px 0px 1px black, 0px 2px 1px black, 0px -1px 1px black;
	background: grey;
	background-position: 0px 0px, -4px -2px;
	border-radius: 2px;
	box-shadow: inset 1px 2px 2px black, 1px 2px 2px black;
}

@keyframes bannerhover
{
	from { transform: translateY(0);       background-position: 0px 0px, -4px -2px; }
	50%  { transform: translateY(-0.15em); background-position: 0px 0px, -4px -1px; }
	75%  { transform: translateY( 0.1em);  background-position: 0px 0px, -4px -0px; }
	to   { transform: translateY(0);       background-position: 0px 0px, -4px -2px; }
}

.banner:hover
{
	animation-timing-function: ease-out;
	animation: bannerhover 0.25s;
}

.banner p
{
	text-align: right;
	margin-bottom: 0.1em;
}

.banner a
{
	text-shadow: 1px 0px 1px blue, -1px 0px 1px black, 0px 2px 1px black, 0px -1px 1px black;
	text-align: left;
}

.bannertall
{
	transition: border 0.05s, box-shadow 0.05s;
	font-family:'Courier New', Courier, monospace;
	font-weight: bold;
	letter-spacing: 0.1em;
	max-width: 50%;
	margin:auto;
	display: block;
	text-align: center;
	text-shadow: 1px 0px 2px black, -1px 0px 2px black, 0px 2px 2px black, 0px -1px 2px black;
	background: grey;
	background-repeat: repeat;
	background-position: 0px 0px, -4px -2px;
	border-radius: 2px;
	border: 2px outset #506070;
	padding-bottom: 0.1em;
	box-shadow: inset 1px 2px 2px black, 1px 2px 2px black;
}

@keyframes bannertallhover
{
	from { transform: translateX(0);      background-position: 0px 0px, -4px -2px; }
	25%  { transform: translateX(-0.1em); background-position: 0px 0px, -5px -2px; }
	75%  { transform: translateX( 0.1em); background-position: 0px 0px, -6px -2px; }
	to   { transform: translateX(0);      background-position: 0px 0px, -4px -2px; }
}

.bannertall:hover
{
	border: 2px outset #95a8bb;
	box-shadow: inset 1px 2px 2px black, 1px 2px 4px #506070;
	animation-timing-function: ease-out;
	animation: bannertallhover 0.25s;
}

.bannertall span
{
	display: block;
	text-align: right;
}

.bannertall ul
{
	font-family: 'Courier New', Courier, monospace;
	list-style-type: none;
	text-align: justify;
}

.bannertall ul li pre
{
	white-space: pre-wrap;
	margin: 1em 0em 1em 0em;
}

.bannertall a
{
	text-shadow: 1px 0px 2px blue, -1px 0px 2px black, 0px 2px 2px black, 0px -1px 2px black;
	text-align: left;
}

#banner_pengu
{
	border: 2px outset #85734e;
	background-color: #4c4b53;
	background-image: linear-gradient(#00000040, rgba(0, 0, 0, 0.75) 85%), url("/image/pengu.png");
}

#banner_pengu:hover
{
	border: 2px outset #ccb890;
	box-shadow: inset 1px 2px 2px black, 1px 2px 4px #413a2c;
}

#banner_paanaple
{
	border: 2px outset #165e56;
	background-color: #032723;
	background-image: linear-gradient(#00000040, rgba(0, 0, 0, 0.75) 85%), url("/image/paanaple.png");
}

#banner_paanaple:hover
{
	border: 2px outset #27c7b6;
	box-shadow: inset 1px 2px 2px black, 1px 2px 4px #1f3634;
}

#banner_dmi1407
{
	border: 2px outset #0a0c85;
	background-color: #000148;
	background-image: linear-gradient(#00000040, rgba(0, 0, 0, 0.75) 85%), url("/image/dmi1407.gif");
}

#banner_dmi1407:hover
{
	border: 2px outset rgb(0, 59, 173);
	box-shadow: inset 1px 2px 2px black, 1px 2px 4px #1c1e44;
}

#banner_floppy
{
	background-color: lightslategrey;
	background-image: linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.75) 85%), url("/image/floppy.png");
}

h2
{
	color: whitesmoke;
	text-shadow: 0px 2px 2px black, 0px 0px 4px blue;
	font-family: monospace;
	font-size: xx-large;
	text-align: center;
}

h2:not(:first-of-type)
{
	margin-top: 2em;
}

h3
{
	font-size: 100%;
}

h4
{
	font-size: small;
}

hr
{
	border-top: 1px solid lightgrey;
	border-bottom: 1px solid grey;

	margin-bottom: 2em;
	width:25%;
	margin-left:0;
}

/*
 * Table.
 */
table
{
	border: 1px solid grey;
	backdrop-filter: blur(2px) saturate(50%);
}
th
{
	border-bottom: 1px dashed grey;
}

/*
 * Image.
 */
img.preview
{
	display: inline;
	transition: transform .1s cubic-bezier(0.0, 1.1, 0.75, 1.1);
}
img.preview:hover
{
	transform: scale(1.75); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}

div.imageshelf
{
	text-align: center;
}

footer
{
	color: #444;
	font-size: smaller;
	text-align: center;
	margin-top: 2em;
}