body {
  margin: auto;
  background-color: #456868;
  background-image: url(assets/background2.png);
  color: #D6FFFF;
  font-family: Arial;
}

hr
{
	color: #D6FFFF;
}

html{
cursor: url(assets/cursor.png), auto;
scrollbar-color: #2cffff #0e2f35;
}

a{
cursor: url(assets/cursor_pointer.png), pointer;
}

img
{
  max-width: 100%;
  max-height: 100%;
}

@font-face {
    font-family: 'audiowideregular';
    src: url('audiowide-regular-webfont.woff2') format('woff2'),
         url('audiowide-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'orbitronregular';
    src: url('orbitron-variablefont_wght-webfont.woff2') format('woff2'),
         url('orbitron-variablefont_wght-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@keyframes typewriter {
	from { width:0%; overflow: hidden; white-space: nowrap;}
	to { width:100%; overflow: hidden; white-space: nowrap;}
}

@keyframes scrollUp {
	0% { transform: translateY(-10%);}
	100% { transform: translateY(-50%);}
}

@keyframes unblurAnim {
	from { filter: blur(5px); }
	to { filter: blur(0px); }
}

@keyframes opacityAnim {
	0% {opacity: 0;}
	50% {opacity: 0;}
	100% {opacity: 100;}
}

.unsee
{
	animation: opacityAnim .8s linear;
}

#unblur
{
	animation: unblurAnim 0.5s linear;
}

#static
{
	background-image: url(assets/background2.png);
	background-size: auto 20%;
 width: 1000%;
 height: 200%;
 position: fixed;
 z-index: -1;
 animation: scrollUp 50s linear infinite;
	
}

#bluescroll
{
	background-image: url(assets/bluestatic.png);
 width: 1000%;
 height: 200%;
 position: fixed;
 z-index: -1;
 animation: scrollUp 15s linear infinite;

}

#staticLoad
{
	background-image: url(assets/tealstatic.gif);
	background-size: auto 20%;
 width: 125%;
 height: 125%;
 position: fixed;
 z-index: -1;
 animation: scrollUp 5s linear infinite;

}

.monitorFrame{
	border: 1px solid transparent;
	z-index:10;
	top: -1360px;
	height: 425px;
	width: 860px;
	position: relative;
	padding-left: 250px;
	padding-right: 250px;
}

.loadFrame{
	border: 1px solid transparent;
	z-index:9;
	top: -1790px;
	height: 425px;
	width: 860px;
	position: relative;
	padding-left: 250px;
	padding-right: 250px;
}

 a:link {
color: #00c1c1;
}
a:visited {
color: #409d9d;
}
a:hover {
text-shadow: #00ffff 0 0 10px;
color: #00ffff;
} 

.outerborder
{
  border: 16px solid transparent;
    border-top-width: 8px;
    border-right-width: 16px;
    border-bottom-width: 16px;
    border-left-width: 16px;
    background-image: url(assets/background2.png);
    text-align: left; 
}

.outerborder0
{
	max-width: 60vw;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 3em;
  margin-right: 3em;
  border: 16px solid transparent;
    border-top-width: 8px;
    border-right-width: 16px;
    border-bottom-width: 16px;
    border-left-width: 16px;
    background-image: url(assets/background.png);
    text-align: left; 
}

.innerborder
{
  max-width: 100vw;
  max-height: 100%;
  margin-top: 1em;
  padding: 16px;
  background-color: #003E3F;
  text-align: left; 
  background-image: url(assets/background1.png);
  overflow: auto;
  border: 1px solid cyan;
}

.artbox
{
 border: 1px solid cyan;
 padding: 1px;
 height: 100%;
 width: 100%;
 background-image: url(assets/background.png);
 display: inline-block;
 vertical-align: middle;
}

.navbar
{
	top: -1770px;
	position: relative;
	z-index: 9;
	min-width: 1359px;
}

.copyright
{
	position: relative;
	top: -1750px;
	min-width: 1359px;
}

.screen
{
	position: absolute;
	text-align: center;
	max-height: 1457px;
	width: 1359px;
	left: 0px;
	right: 0px;
	margin: auto;
	overflow: clip;
}

.monitor
{
	position: relative;
	top: -50px;
	min-width: 1359px;
}

.screenspace
{
	background-image: url(assets/bluenoise.png);
}

.preload
{
	width: 0px; height: 0px; overflow: hidden;
}

.thumb
{
	width: 24%;
	border: 1px solid cyan;
}

.outerartbox
{
  border: 16px solid transparent;
  background-image: url(assets/background4.png);
  margin: .2%;
  display: inline-block;
  vertical-align: top;
  text-align: center;
  width:20%;
}

.navHome
{
	content: url(assets/home.png);
}

.navHome:hover
{
	content: url(assets/homeBright.png);
}

.navAbout
{
	content: url(assets/about.png);
}

.navAbout:hover
{
	content: url(assets/aboutBright.png);
}

.navProjects
{
	content: url(assets/projects.png);
}

.navProjects:hover
{
	content: url(assets/projectsBright.png);
}

.navComics
{
	content: url(assets/comics.png);
}

.navComics:hover
{
	content: url(assets/comicsBright.png);
}

.navGuestbook
{
	content: url(assets/guestbook.png);
}

.navGuestbook:hover
{
	content: url(assets/guestbookBright.png);
}

.navNewsletter
{
	content: url(assets/newsletter.png);
}

.navNewsletter:hover
{
	content: url(assets/newsletterBright.png);
}

.navRobot
{
	content: url(assets/robot.png);
}

.navRobot:hover
{
	content: url(assets/robotBright.png);
}

.navResources
{
	content: url(assets/resources.png);
}

.navResources:hover
{
	content: url(assets/resourcesBright.png);
}

.container
{
	display: inline-block;
	vertical-align: middle;
	text-align: center; 
	height: 100%;
}

h1
{
	font-family: 'audiowideregular';
	margin-top: 5px;
	margin-bottom: 3px;
}

h2
{
	font-family: 'audiowideregular';
	margin-top: 5px;
	margin-bottom: 3px;

}

.h2_typewriter h2{
animation: typewriter 1s steps(50, end);
}

h3
{
	font-family: 'audiowideregular';
	margin-top: 5px;
	margin-bottom: 3px;
}

h4
{
	font-family: 'audiowideregular';
	margin-top: 5px;
	margin-bottom: 3px;
}

h5
{
	font-family: 'audiowideregular';
	margin-top: 5px;
	margin-bottom: 3px;
}

footer
{
	font-family: 'orbitronregular';
}

table, th, td
{
	 border: 1px solid #517575;
	 text-align: center;
}

.outerartbox .tooltip
{
	margin-left: -100px;
	margin-top: -150px;
	visibility: hidden;
	border: 1px solid cyan;
	padding: 2px;
	max-width: 400px;
	text-align: center;
	background-image: url(assets/background4.png);
	position: absolute;
	z-index: 1;
	opacity: 0;
	transition: opacity 0.25s;
}

.outerartbox:hover .tooltip
{
	visibility: visible;
	opacity: 1;
}