@font-face
{
	font-family:Commodore;
	src: url("../commodore.ttf");
}

body
{
	font-family: 'Roboto', sans-serif;
	line-height:1.4;
	color:#222;
}

.Glowy
{
	color:#ccc; /* white */
	font-family:Commodore, monospace;
	text-shadow: 0 0 3px #aaa , 0 0 4px #aaa;
}

.GlowyDark
{
	color:#ccc !important;
	font-family:Commodore, monospace;
	text-shadow: 0 0 3px #999, 0 0 4px #777;
}

#logo
{
	z-index:-5 !important; /* Ensure the logo is underneath the scan line */
	position:relative;
	margin-left: auto;
	margin-right: auto;
}

a:link /* unvisited */
{
	color:#0C0019;
	font-weight:bold;
}

a:visited
{
	color:#A2A69B;
}

a:hover
{
	color:#76A19A;
}

img
{
	border:0px;
}

@keyframes vline {
  0%   { top: -3%;}
  100% { top: 103%;}
}

#scanLine {
  z-index: 0;
  position:fixed;
  width:100%;
  height:100%;
  margin:0;
  padding:0;
  left:0;
  z-index:-2;
}

#scanLine:before {
  content: '';
  position: absolute;
  top: 0px;
  width: 100%;
  height: 4px;
  background: #fff;
  background: linear-gradient(to bottom, rgba(255,0,0,0) 0%,rgba(255,250,250,1) 50%,rgba(255,255,255,0.98) 51%,rgba(255,0,0,0) 100%); /* W3C */
  opacity: 0.03;
  animation: vline 10.5s linear infinite;
  z-index:-2;
}

/* Turn off the scanline for Microsoft Edge (it can't render it correctly) */
_:-ms-lang(x), _:-webkit-full-screen, #scanLine:before { animation:none !important; }
 
#scanLine:after {
  box-shadow: 0 2px 6px rgba(25,25,25,0.2),
              inset 0 1px rgba(50,50,50,0.1),
              inset 0 3px rgba(50,50,50,0.05),
              inset 0 3px 8px rgba(64,64,64,0.05),
              inset 0 -5px 10px rgba(25,25,25,0.1);
}

.NavBar
{
	z-index:-2;
	
	/* Center horizontally */
	width:100%;
	margin: 2ex auto;
	padding:0;
	
	font-family:Commodore, monospace;
	font-size:125%;
	text-align:center;
	padding:0px;
	color:#333;
	
	background:transparent;
}

.NavBar a
{
	text-decoration:none !important;
	right:0;
	font-size:large;
}

.NavBar .SelectedLink
{
	color:#26c100 !important;
	font-family:Commodore, monospace;
	text-shadow: 0 0 3px #1c8c00, 0 0 4px #1c8c00;
}

#Note
{
	font-family:monospace;
	text-align:center;
	font-size:100%;
	color:#eee !important;
	
	/* Center horizontally */
	width:auto;
	margin-left:auto;
	margin-right:auto;
}

/* Mobile styles */
@media (pointer: coarse), @media (pointer: none)
{
	#content
	{
		width: 90% !important;
		font-size:100%;
	}
	
	.ProjectTitle
	{
		font-size:200%;
		text-align:right;
		vertical-align: top;
		border-right:1px solid grey;
	}
	
	#logo
	{
		width:75% !important;
	}
}

#logo
{
	width:50%;
}

#bgScanLines
{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index:-1;
	background-repeat: repeat;
	
	background-image:url('../images/stripey.png');
	mix-blend-mode: soft-light;
}