:root {
	--icon-size: 52px;
}

body
{
	background-color: #000000;
	color: #FFFFFF;
	line-height: 1.75;
	font-size: 11pt;
	font-family: Verdana, Arial, sans-serif;
	background: url("assets/spacebg.png");
	background-attachment: fixed;
	animation: slide 15s steps(128, end) infinite;
}

p
{
	margin: 0px 0px 16px 0px;
}

ul
{
	margin: 0px 0px 16px 0px;
}

li
{
	margin: 0px 0px 4px 0px;
}

.heading
{
	margin: 16px 0px 16px 0px;
}

.heading:first-child
{
	margin: 0px 0px 16px 0px;
}

.screenshotcontainer
{
	margin: 0px 0px 16px 0px;
}

@keyframes slide{
	0%
	{
		background-position: 0 0;
	}
	100%
	{
		background-position: 0px -256px;
	}
}

a:not([class])
{
	color:#5BBF4F;
	text-decoration:none;
}

a:not([class]):before, a:not([class]):after
{
	content: url("assets/spinnyfella.gif");
	padding: 4px;
}

a:not([class]):hover:before, a:not([class]):hover:after
{
	content: url("assets/spinnyfella2.gif");
	padding: 4px;
}

a:not([class]):hover
{
	color:#77FF6F;
}

.hideanchor:before, .hideanchor:after
{
	content: "";
}

.hideanchor:hover:before, .hideanchor:hover:after
{
	content: "";
}

a.bigbutton
{
	display: block;
	width: fit-content;
	height: fit-content;
	margin: auto;
	margin-bottom: 16px;
	
	border-width: 16px;
	border-style: solid;
	border-image: url("assets/9slice_button.png");
	border-image-slice: 16 fill;
	
	font-size: 16pt;
	font-weight: bold;
	text-decoration: none;
	color: white;
}

a.bigbutton:hover
{
	border-width: 16px;
	border-style: solid;
	border-image: url("assets/9slice_buttonhover.png");
	border-image-slice: 16 fill;
}

#bigbutton2 
{
	border-image: url("assets/9slice_button2.png");
	border-image-slice: 16 fill;
}

#bigbutton2:hover
{
	border-image: url("assets/9slice_button2hover.png");
	border-image-slice: 16 fill;
}

.bigbutton span
{
	font-size: 12pt;
	display: block;
}

a.bigbutton::before, a.bigbutton:hover::before
{
	padding: 0px;
	background-image: url("assets/downarrow.gif");
	background-size: var(--icon-size);
    width: var(--icon-size);
    height: var(--icon-size);
	font-size: var(--icon-size);
    content: '';
    display: inline-block;
	float: left;
	margin-right: 8px;
}

.screenshot img
{
	height: 96px;
}

.screenshot
{
	display: inline-block;
	position: relative;
	margin: 16px;
	cursor: pointer;
}

.screenshot::after
{
	position: absolute;
	top: 0;
	left: 0;
	content:"";
	margin: -10px;
	width: calc(100% - 18px);
	height: calc(100% - 24px);
	border-width: 18px;
	border-style: solid;
	border-image: url("assets/9slice_outline.png");
	border-image-slice: 18 fill;
}

.screenshot:hover::after
{
	background-color: #77FF6F77;
}

.navbar p
{
	color:#7F7F7F;
	margin:0px;
}

.navbar
{
	max-width: 620px;
	margin: 4px auto 4px auto;
	text-align: center;
}

.navbar ul
{
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.navbar li
{
	display: inline-block;
}

.navbar li:after
{
	content:" \00b7"
}

.navbar li:last-child:after
{
	content:""
}

.imgborder
{
	display: inline-block;
	position: relative;
	margin: 16px;
}

.imgborder:before
{
	position: absolute;
	margin: -10px;
	content: "";
	width: calc(100% - 18px);
	height: calc(100% - 24px);
	border-width: 18px;
	border-style: solid;
	border-image: url("assets/9slice_outline.png");
	border-image-slice: 18 fill;
}

.topbanner
{
	max-width: 620px;
	height: 158px;
	margin: auto;
	border-width: 18px;
	border-style: solid;
	border-image: url("assets/9slice_outline.png");
	border-image-slice: 18 fill;
	background: url("assets/screenie0.png");
	background-position: center center;
	background-origin: border-box;
}

.maincontainer
{
	max-width: 640px;
	margin: auto;
	border-width: 18px;
	border-style: solid;
	border-image: url("assets/9slice_bg.png");
	border-image-slice: 18 fill;
	padding: 32px;
}

.modal
{
	display: none;
	width: 100%;
	height: 100%;
	z-index: 1;
	position: fixed;
	left: 0;
	top: 0;
	overflow: auto;
	background-color: rgba(0,0,0,0.75);
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

#modalimg
{
	display: block;
	max-width: 100%;
	max-height: 75%;
	top: 50%;
	cursor: pointer;
}

.modaltext
{
	display: block;
	max-width: 75%;
	text-align: center;
	padding: 10px;
	background-color: #000000;
	color: #C4C4C4;
}

.modaltext p
{
	margin: 0px;
}

@media screen and (max-width: 680px)
{
	.maincontainer
	{
		padding: 16px;
	}
}