html
{

}
body
{
	padding:0px;
	margin:0px;
	color:#000;
	font-family: 'Roboto', sans-serif;
	font-size:16px;
	font-weight:300;
	background:url(images/bg.png) repeat;
	background-size:32px;
}
#container
{
	margin:0px auto;
	max-width:800px;
	min-height:570px;
}
#subcontainer
{
	max-width:100%;
	max-height:100%;
	text-align:center;
	border:32px solid transparent;
	border-image:url(images/border.png) 128 round;
}
.headerimg
{
	margin-top:20px;
	width:128px;
	height:128px;
}
h2, h3, h4, h5, h6
{
	font-weight:400;
	margin-bottom:10px;
}
h1
{
	font-weight:300;
	font-size:46px;
	margin:5px;
}
.subtitle
{
	display:block;
	font-size:14px;
	font-weight:300;
	margin-bottom:20px;
}
.footerimg
{
	width:16px;
	height:16px;
}
p
{
	margin:20px auto;
	display:block;
	max-width: 80%;
}
ul
{
	margin:0 auto;
	width: 100%;
	padding-left:0px;
  list-style-type: none; /* Remove bullets */
  padding: 0; /* Remove padding */
  margin: 0; /* Remove margins */
}
pre h3 {
	font-weight:bold;
	font-size:12px;
	margin-bottom:0px;
}
pre p {
	margin-top:0px;
	margin-bottom:0px;
}
pre b {
	font-size:12px;
}
b, .bold
{
	font-weight:bold;
}
p a
{
	display:inline-block;
	text-decoration:none;
	margin-top:5px;
}
span
{
	position:relative;
	font-size:12px;
}
li
{
	margin-bottom:5px;
}
li span
{
	display:inline-block;
	margin-bottom:0px;
}
span.date
{
	font-weight:400;
	color:#444 !important;
	margin-bottom:0px;
}
ul.changelog span
{
	color:#060;
	font-weight:400;
}
ul.todo span
{
	color:#a00;
	font-weight:400;
	margin-bottom:7px;
}
p a span
{
	padding-left:5px;
	color:#66f;
}
.play
{
	margin:10px;
	width:180px;

}
.play:hover
{
	opacity:0.8;
}
.playkye
{
	max-width:100%;
	width:620px;
	height:424px;
	border:none;
}
.myButton {
	box-shadow:inset 0px 1px 0px 0px #97c4fe;
	background:linear-gradient(to bottom, #3d94f6 5%, #1e62d0 100%);
	background-color:#3d94f6;
	border-radius:6px;
	border:1px solid #337fed;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:20;
	font-weight:bold;
	padding:6px 10px;
	text-decoration:none;
	text-shadow:0px 1px 0px #1570cd;
	text-align:left;
	width:200px;
	margin-bottom:5px;
}
.myButton:hover {
	background:linear-gradient(to bottom, #1e62d0 5%, #3d94f6 100%);
	background-color:#1e62d0;
}
.myButton:active {
	position:relative;
	top:1px;
}
.myButton img {
	height:32px;
	width:32px;
	float:left;
	margin-top:3px;
	margin-right:15px;
}
.myButton span {
	font-size:12px;
}

.screenshots
{
	width:80%;
	max-width:700px;
	margin:20px auto 30px;
}

.screenshot-frame
{
	position:relative;
	line-height:0;
	touch-action:pan-y;
}

.screenshot-frame > img
{
	display:block;
	width:100%;
	height:auto;
	aspect-ratio:1472 / 1080;
	object-fit:contain;
	box-shadow:0px 0px 3px #000;
	cursor:zoom-in;
	user-select:none;
	-webkit-user-drag:none;
	opacity:1;
	transition:opacity 0.2s ease;
}

.screenshot-frame > img.fading
{
	opacity:0;
}

.screenshot-prev,
.screenshot-next
{
	position:absolute;
	top:50%;
	transform:translateY(-50%);

	```
	width:48px;
	height:72px;

	border:0;
	border-radius:3px;

	background:rgba(0,0,0,0.4);
	color:#fff;

	font-family:Arial,sans-serif;
	font-size:42px;
	font-weight:300;
	line-height:1;

	cursor:pointer;
	opacity:0.65;

	transition:opacity 0.15s ease;
	```

}

.screenshot-prev:hover,
.screenshot-next:hover,
.screenshot-prev:focus-visible,
.screenshot-next:focus-visible
{
	opacity:1;
}

.screenshot-prev
{
	left:8px;
}

.screenshot-next
{
	right:8px;
}

/* Full-size screenshot overlay */
.lightbox
{
	position:fixed;
	z-index:1000;
	inset:0;

	```
	display:flex;
	align-items:center;
	justify-content:center;

	padding:20px;
	box-sizing:border-box;

	background:rgba(0,0,0,0.92);

	cursor:zoom-out;
	```

}

.lightbox[hidden]
{
	display:none;
}

.lightbox img
{
	display:block;
	max-width:100%;
	max-height:100%;
	width:auto;
	height:auto;
	cursor:default;
}

.lightbox-close
{
	position:absolute;
	z-index:1001;
	top:8px;
	right:15px;

	```
	width:48px;
	height:48px;

	border:0;
	background:transparent;

	color:#fff;
	font-family:Arial,sans-serif;
	font-size:42px;
	font-weight:300;
	line-height:48px;

	cursor:pointer;
	opacity:0.7;
	```

}

.lightbox-close:hover,
.lightbox-close:focus-visible
{
	opacity:1;
}

body.lightbox-open
{
	overflow:hidden;
}

/* Phones */
@media (max-width:600px)
{
	.screenshots
	{
		width:90%;
		margin-top:15px;
	}

	```
	.screenshot-prev,
	.screenshot-next
	{
		width:44px;
		height:64px;
		font-size:36px;
		opacity:0.75;
	}

	.screenshot-prev
	{
		left:4px;
	}

	.screenshot-next
	{
		right:4px;
	}

	.lightbox
	{
		padding:8px;
	}

	.lightbox-close
	{
		top:2px;
		right:6px;
	}
	```

}

/* Don't animate for users who request reduced motion */
@media (prefers-reduced-motion:reduce)
{
	.screenshot-frame > img
	{
		transition:none;
	}
}