/* ================================================================================================================================================ */
/* hyperlink styling and animation
/* ================================================================================================================================================ */


a:link, a:visited
{
	color: #FFF;
	text-decoration: underline;
	text-shadow: 0 0 4px #0FF;
}
a:hover, a:active
{
	color: #FFF;
	text-decoration: underline;
	animation-duration: 0.5s;
    animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-name: triblink;
}
@keyframes triblink
{
	0% { opacity: 1; }
	50% { opacity: 0.5; }
	100% { opacity: 1; }
}


/* ================================================================================================================================================ */
/* i don't remember why this was here
/* ================================================================================================================================================ */


html
{
	min-height: 100%;
}

body
{
	overflow-x: hidden;
	overflow-y: auto;
	margin: 0;
}


/* ================================================================================================================================================ */
/* background and header images
/* ================================================================================================================================================ */


div.bkgimg
{
	background-image: linear-gradient(to bottom, rgba(0, 148, 255, 0.52), rgba(0, 187, 255, 0.73)), url('assets/bkg.png');
	z-index: -1;
	position: fixed;
	left: 0; right: 0; top: 0; bottom: 0;
}

div.titlebar
{
	margin-top: 12px;
	margin-left: auto;
	margin-right: auto;
	border: 0;
	padding: 0;
	width: 950px;
	background: none;
	font-size: 0;
}


/* ================================================================================================================================================ */
/* main page layout elements
/* ================================================================================================================================================ */


div.page
{
	margin-top: 0;
	margin-left: auto;
	margin-right: auto;
	width: 950px;
	position: relative;
}

div.sidebar
{
	position: absolute;
	width: 150px;
}

div.sidebar > div::before
{
	display: block;
	z-index: -1;
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 10px;
	bottom: 10px;
	background: url('assets/sidebar_bkg.png'), linear-gradient(to bottom, #AADBFF, rgba(0, 148, 255, 1) 32px, rgba(0, 148, 255, 1) calc(100% - 32px), #00BBFF);
}

div.sidebar > div
{
	background: url('assets/sidebar_top.png') left top no-repeat, url('assets/sidebar_bottom.png') left bottom no-repeat;
	line-height: 0;
}

div.sidebar > div > img, div.sidebar > div > a > img
{
	margin-bottom: 4px;
}

div.sidebar > div > p
{
	margin: 0;
	
}

div.leftcolumn { left: 0; }
div.rightcolumn { right: 0; }

div.centercolumn
{
	position: absolute;
	left: 162px;
	right: 162px;
	
}

div.centercolumn > div
{
	background: url('assets/content_top.png') left top no-repeat, url('assets/content_bottom.png') left bottom no-repeat;
	overflow: hidden;
}

div.centercolumn > div::before
{
	display: block;
	z-index: -1;
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 10px;
	bottom: 10px;
	background: url('assets/content_bkg.png'), linear-gradient(to bottom, #AADBFF, rgba(0, 148, 255, 1) 32px, rgba(0, 148, 255, 1) calc(100% - 32px), #00BBFF);
}

div.sidebar > div, div.centercolumn > div
{
	margin-top: 12px;
	border: 0;
	box-sizing: border-box;
	padding-left: 9px; padding-right: 9px; padding-top: 14px; padding-bottom: 14px;
	position: relative;
}



/* ================================================================================================================================================ */
/* horizontally scrolling gallery
/* ================================================================================================================================================ */


div.gallery
{
	width: 100%;
	overflow-x: auto;
	white-space: nowrap;
}
div.gallery > a > img, div.gallery > img
{
	margin-right: 4px;
	max-height: 200px;
	max-width: 100%;
	border: 1px solid #fff;
}


/* ================================================================================================================================================ */
/* vertical list gallery
/* ================================================================================================================================================ */


div.galleryrow
{
	display: flex;
	margin-bottom: 12px;
}
div.galleryrow img
{
	width: 250px;
	border: #FFF solid 1px;
	margin-right: 12px;
}
div.galleryrow > div
{
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
div.galleryrow > div > h2
{
	margin-bottom: 0;
}
div.galleryrow > div > p > img
{
	width: unset;
	border: unset;
	margin-right: 4px;
}


/* ================================================================================================================================================ */
/* fonts and text
/* ================================================================================================================================================ */


@font-face { font-family: title_font; src: url('assets/planet opti.TTF'); }
@font-face { font-family: body_font; src: url('assets/Nintendo-DS-BIOS.woff'); }
@font-face { font-family: cyber_font; src: url('assets/FreePixel_16px.ttf'); }

h1
{
	font-family: title_font;
	font-weight: normal;
	font-size: 32px;
	line-height: 1;
	text-align: center;
	color: #FFF;
	
	padding: 0;
	margin-top: 10px;
	margin-bottom: 10px;
	margin-left: 0;
	margin-right: 0;
}

h2
{
	font-family: title_font;
	font-weight: normal;
	font-size: 16px;
	line-height: 1;
	color: #fff;
	
	padding: 2px;
	margin-top: 8px;
	margin-bottom: 8px;
	margin-left: 0;
	margin-right: 0;
	
	border: 1px solid rgba(255, 255, 255, 1);
	background: rgba(0, 148, 255, 0.35);
}

h3
{
	font-family: cyber_font;
	font-weight: normal;
	font-size: 16px;
	color: #FFF;
	
	padding: 0;
	padding-left: 1px;
	margin-top: 8px;
	margin-bottom: 8px;
	margin-left: 0;
	margin-right: 0;
	
	border-bottom: 1px solid rgba(255, 255, 255, 0.8);
	background: linear-gradient(to top, rgba(0, 148, 255, 0.35), rgba(0, 148, 255, 0));
}

.nobkg > *
{
	color: #FFF;
	border: none;
	background: transparent;
	border-radius: 0;
}

p, ul, pre, label
{
	font-family: body_font;
	font-weight: normal;
	font-size: 16px;
	line-height: 14px;
	color: #FFF;
	
	padding: 0;
	margin-top: 8px;
	margin-bottom: 8px;
	margin-left: 0;
	margin-right: 0;
}

h1, h2, h3, p, ul, pre, label { text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5); }

pre
{
	font-family: cyber_font;
	background-color: rgba(255, 255, 255, 0.2);
	border-radius: 4px;
	padding: 2px;
	overflow-x: auto;
}

p.caption
{
	text-align: center;
	margin-top: 2px;
}

p.breadcrumb
{
	margin: 0;
	padding: 3px;
	background: linear-gradient(to right, rgba(0, 148, 255, 0.5), rgba(0, 148, 255, 0));
}

ul
{
	list-style-image: url('assets/bullet.png');
	padding-left: 16px;
}

span.tag
{
	font-size: 12px;
	line-height: 0;
	color: #0094FF;
	background-color: rgba(255, 255, 255, 0.8);
	text-shadow: none;
	padding: 1px;
	border-radius: 3px;
	margin-left: 3px;
	margin-right: 3px;
}

hr
{
	border: 1px solid #EAF6FF;
}

img.float
{
	float: right;
	max-width: 35%;
	margin-left: 8px;
	border: 1px solid #fff;
}

img.returnbutton
{
	position: absolute;
	margin-left: 0;
	margin-top: 0;
}

img.fullwidth
{
	width: 100%;
}
img.center, video.center
{
	/*max-height: 250px;*/
	max-width: 400px;
	border: 1px solid #fff;
	display: block;
	margin-left: auto;
	margin-right: auto;
}



/* ================================================================================================================================================ */
/* cool home page graphics
/* ================================================================================================================================================ */


img.spinny
{
	position: absolute;
	right: 20px;
	bottom: 12px;
	width: 250px;
	z-index: -1;
	opacity: 0.3;
	animation: rotatez 10s linear infinite;
}
@keyframes rotatez
{
	0% { transform: rotateX(245deg) rotateY(50deg) rotateZ(0deg); }
	100% { transform: rotateX(245deg) rotateY(50deg) rotateZ(360deg); }
}
@keyframes scalein
{
	0% { opacity: 0; right: 100px; }
	100% { opacity: 0.3; right: 20px; }
}

p.cybertext
{
	text-align: center;
	font-family: cyber_font;
	font-weight: normal;
	font-size: 16px;
	letter-spacing: 4px;
	text-shadow: 2px 2px 3px #FFF;
	margin-top: 18px;
	margin-bottom: 18px;
	animation-duration: 1s;
    animation-iteration-count: 1;
	animation-timing-function: ease-out;
	animation-name: cybertextin;
}
@keyframes cybertextin
{
	0% { filter: blur(7px); letter-spacing: 1px; }
	100% { filter: none; letter-spacing: 4px; }
}

span.blinkcursor
{
	animation-duration: 1s;
    animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-name: blinkcursor;
}
@keyframes blinkcursor
{
	0% { opacity: 1; }
	33% { opacity: 1; }
	66% { opacity: 0; }
	100% { opacity: 0; }
}


/* ================================================================================================================================================ */
/* generic table for showing lists of interests and stuff
/* ================================================================================================================================================ */


table { border-collapse: collapse; }
table, tr, td { border: 0; margin: 0; }
td { vertical-align: top; padding: 0; padding-bottom: 4px; }

table.toc td { vertical-align: middle; }
table.toc p { margin-left: 8px; }
table.toc img { border: 1px solid #fff; display: block; }

td.leftcol
{
	padding-right: 8px;
}
td.rightcol
{
	background: rgba(255, 255, 255, 0.2);
	width: 30%;
	padding: 4px; 
}


/* ================================================================================================================================================ */
/* webring widgets
/* ================================================================================================================================================ */


div.ringcontainer
{
	display: flex;
	width: 100%;
	flex-direction: row;
	justify-content: space-between;
	gap: 4px;
	align-items: stretch;
	flex-wrap: wrap;
	padding-bottom: 4px;
}

div.ringcontainer > div
{
	flex-grow: 1;
	flex-basis: 0;
	background: rgba(255, 255, 255, 0.27);
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%);
	padding-left: 4px;
	padding-right: 4px;
}

div.centertext
{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 8px;
}
div.centertext > *
{
	text-align: center;
	margin-top: 5px;
	margin-bottom: 5px;
}
div.centertext > div { margin: 0 auto; }