/* W3.CSS 4.15 December 2020 by Jan Egil and Borge Refsnes */
html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}
/* Extract from normalize.css by Nicolas Gallagher and Jonathan Neal git.io/normalize */
html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}
article,aside,details,figcaption,figure,footer,header,main,menu,nav,section{display:block}summary{display:list-item}
audio,canvas,progress,video{display:inline-block}progress{vertical-align:baseline}
audio:not([controls]){display:none;height:0}[hidden],template{display:none}
a{background-color:transparent}a:active,a:hover{outline-width:0}
abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}
b,strong{font-weight:bolder}dfn{font-style:italic}mark{background:#ff0;color:#000}
small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
sub{bottom:-0.25em}sup{top:-0.5em}figure{margin:1em 40px}img{border-style:none}
code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}hr{box-sizing:content-box;height:0;overflow:visible}
button,input,select,textarea,optgroup{font:inherit;margin:0}optgroup{font-weight:bold}
button,input{overflow:visible}button,select{text-transform:none}
button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}
button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}
button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}
fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}
legend{color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto}
[type=checkbox],[type=radio]{padding:0}
[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}
[type=search]{-webkit-appearance:textfield;outline-offset:-2px}
[type=search]::-webkit-search-decoration{-webkit-appearance:none}
::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}
/* End extract */
:root {
  --dark-background: rgb(35,27,27);
  --very-dark-brown: rgb(22,10,0);
  --bluish-background: rgb(20,18,30);
  --xog-yellow: rgb(195,170,118);
  --xog-dark-orange: rgb(128,51,0);
  --xog-brown: rgb(91,40,0);
  --shadow-blue: rgb(0,0,80);
  --xog-brown-compliment: rgb(0,56,91);
  --xog-yellow-compliment: rgb(118,142,195);
  --xog-bluish-dark-grey: rgb(41,41,52);
  --xog-light-text: rgb(200,200,200);
  --xog-dark-blue: rgb(0,88,143);
}
h1{
	margin-bottom: 1em;

}
h2{
	margin-bottom: -0.5em;
}
img
{
    max-width: 85%;
    height: auto;
    margin: 0;
    padding: 0;
}
figure 
{
	display: float;
	text-align: center;
}
figcaption
{
	width: auto;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0.4em;
}

body
{
	width: 100%;
	height:auto;
	font-family: Andale Mono,Verdana,"Lato", sans-serif; 
	font-size:16px;
	background-color: black;
	min-width: 250px;
	margin:0;
	color:red;
	text-align: center;
	position: relative;
}
@keyframes fading{
	0%{transform:	scale(.6,1)}35%{top: 34; transform:	scale(1.1,1)}45%{transform:	scale(.9,1)}65%{transform: scale(1.05,1)}100%{transform: scale(1,1)}}
/*img { max-width: 85%; height: auto; width: auto; position: relative; max-height: 58px;}*/
@keyframes top_down{0%{opacity:0}100%{opacity: 1}}

.xog_h1
{
	color: var(--xog-dark-blue);
	font-weight: 600;
	font-family: Arial,Verdana;
	font-size: 1.2em;
	text-align: center;
	width:95%;
	margin-left: auto;
	margin-right: auto;
	max-width: 800px;
	margin-top: -160px;
	padding-top: 160px;
	user-select: none; /* supported by Chrome and Opera */
   -webkit-user-select: none; /* Safari */
   -khtml-user-select: none; /* Konqueror HTML */
   -moz-user-select: none; /* Firefox */
   -ms-user-select: none; /* Internet Explorer/Edge */
}

.xog_top_logo
{
	text-align:center; 
	display: block;
	max-width: 250px;
	margin-left: auto;
	margin-right: auto;
	padding-bottom: 0;
	max-height: 59px;
	clear:both;
	position: relative;
}
.xog_animate_fade_in{animation-timing-function: ease-in; animation:fading .5s}
.xog_animate_top_quote{animation-delay: 1.5s; animation-timing-function: ease-in; animation:top_down 1.5s}
.xog_page_header
{
	width: 100%;
	background-color: var(--xog-bluish-dark-grey);
	height: auto;
	margin: 0;
	padding-top: 10px;
	padding-bottom:0;
	margin-bottom:0;
}
.xog_header_p
{
	color: var(--xog-light-text);
	padding-top:0;
	margin-top:0;
	padding-bottom:0;
	text-align:center;
	font-family: Verdana,Georgia,Verdana;
	font-size:1.1em;
}
.xog_puzzle_image img
{
	text-align:center;
	background-color: transparent;
	min-width: 250px;
	max-width: 80%;
	width: 350px;
	height: 350px;
	margin: 0;
	padding-left:auto;
	padding-right:auto;
	padding: 0;
}
.xog_bug_image
{
	text-align:center;
	background-color: transparent;
	min-width: 250px;
	max-width: 327px;
	width: 75%;
	height: auto;
	margin: 0;
	padding-bottom: 1.5rem;
}
.xog_nav_list
{
  /* (A1) FLEXIBLE BOX */
  display: block;
  clear:both;
  text-align: center;
  width: 100%;
  /* (A2) REMOVE DEFAULT INDENTATIONS */
  padding: 0;
  margin: 0;
  font-family: Verdana,Arial;
}
.xog_nav_list ul 
{ 
	display: block;
	padding:0;
	width: 100%;
	margin: auto;
	text-align: center;
}
.xog_nav_list a 
{ 
	width: 250px;
	display: block;
	text-align: center;
	list-style-type: none; 
	background-color: rgb(20,20,20);
	color: var(--xog-light-text);
	padding: 5px;
	margin-bottom: 15px;
	margin-left:auto;
	margin-right:auto;
	box-shadow: 2px 0px 5px 5px var(--xog-bluish-dark-grey);
	border-radius: 8px;
    text-decoration: none;
    font-family: Verdana,Arial;
	user-select: none; /* supported by Chrome and Opera */
	-webkit-user-select: none; /* Safari */
	-khtml-user-select: none; /* Konqueror HTML */
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* Internet Explorer/Edge */
}
.xog_nav_list a:visited
{
	color: rgb(200,200,220);
}
@media(hover: hover) and (pointer: fine)
{
	.xog_nav_list a:hover{background:#555!important;}
}
.xog_normal_paragraph
{
	width: 95%;
	margin-left: auto;
	margin-right: auto;
	padding: 0;
	display: block;
	color: var(--xog-light-text);
	text-align: center;
}
.xog_normal_paragraph > p
{	
	color: var(--xog-light-text);
	text-align:center;
	width: 85%;
	max-width: 600px;
	margin-left:auto;
	margin-right:auto;
}
.xog_normal_paragraph > li
{	
	color: white;
	text-align:justify;
	width: 50%;
	max-width: 500px;
	margin-left:auto;
	margin-right:auto;
	margin-bottom: 0;
	padding-bottom: 0;
}
.xog_list_container
{
	color: rgb(110,110,110);
	width: 80%;
	margin-left:auto;
	margin-right:auto;
	max-width:450px;
	text-align:left;
	margin-bottom:2rem;
	padding:0;
}
.xog_list_container > li
{
	list-style-position: inside;
}
.xog_contact_container
{
	font-size: 0.9em;
	color: rgb(110,110,110);
	width: 70%;
	margin-left:auto;
	margin-right:auto;
	max-width:500px;
	text-align:center;
	margin-bottom:2rem;
	padding:0;
	line-height:0.9em;
}.xog_contact_container a
{
    color: rgb(110,110,110);
}
.xog_footer_bar
{
	position:fixed;
	bottom:0;
	font-size: 0.9rem;
	font-weight:500;
	width:100%;
	height:auto;
	display:block;
	color: rgb(200,200,200);
	padding-top: .5rem;
	padding-bottom: 0.5rem;
	text-align: center;
	background-color: var(--xog-bluish-dark-grey);
}
@media screen and (max-width: 375px) 
{
img.xog_puzzle_image {max-width: 85%;}
img.xog_bug_image {max-width: 85%;}
}
@media screen and (min-width: 1000px) 
{
img.xog_puzzle_image {max-width: 800px;}
img.xog_bug_image {max-width: 327px;}
}