@charset "UTF-8";

/* General */
* {
	background-color: #f0f0f4;
	color: #390457;
	font-family: "Iowan Old Style", "Bodoni 72", "Palatino", serif;
	margin: 0;
}

a, a:visited, input {
	color: #bb3480;
	text-decoration: none;
}

input {
	border: none;
	background: transparent;
	font-size: 1em;
	text-align: left;
}

a:active, input:active {
	color: #980e5c;
}

a:hover, input:hover {
	color: #d568a6;
}

body {
	font-size: 16px;
	line-height: 1.5;	/* 24 px */
	padding: 0;
}

h1 {
	font-size: 1.25em;	/* 20px */
	line-height: 1.2;
	margin: 0 0 0 0;
}

/* Header & Footer */
body > header {
	clear: both;
	padding: 1em 2em 1em 2em;
}

body > header img {
	display: inline-block;
	height: 3em;
	vertical-align: -0.6em;
}

body > footer {
	clear: both;
	margin: 3em auto;
	padding: 0 12em 0 0;
	text-align: center;
	width: 30em;
}

article#index + footer {
	padding-right: 0;
	width: 100%;
}

body > footer img {
	height: 3em;
	margin: 0 auto;
}

body > footer p {
	margin: 0 auto;
}

nav {
	display: inline-block;
}

nav .on {
	font-weight: bold;
}

.banner {
	background-repeat: no-repeat;
	background-position: center center;
	background-color: #58127f;
	background-size: cover;

	height: 4.5em;
	width: 100%;
}

.summary {
	font-style: italic;
}

/* Article */
article {
	margin: 3em auto;
	width: 42em;
}

/* Content */
abbr {
	font-variant-caps: small-caps;
}

@media (pointer: fine) { abbr {
	cursor: help;
	text-decoration: underline;
	text-decoration-style: dotted;
	-webkit-text-decoration-style: dotted;
	text-decoration-color: #76319b;
	-webkit-text-decoration-color: #76319b;
} }

article figure, article img, p, ul, .context, section {
	font-variant-numeric: oldstyle-nums;
	width: 30em;
}

article img {
	/*height: 21.25em; */
	margin-top: 0.75em;
	margin-bottom: 0.75em;
}

article input, article .purchase {
	font-variant: small-caps;
	font-variant-numeric: oldstyle-nums;
	padding: 0;
	margin: 0.5em 0 1.0em 0;
}

article input {
	display: block;
}

.game input {
	display: inline;
}

article .purchase + .purchase,
article form > input + .purchase,
article .purchase + form > input 
{
	margin: -0.5em 0 1.0em 0;
}

article p + p {
	text-indent: 1.5em;
}

.context {
	font-style: italic;
	font-weight: bold;
	margin-bottom: 1.5em;
}

.context em {
	font-style: normal;
}

figcaption {
	font-style: italic;
}

figure {
	margin-bottom: 1.5em;
}

.vid-wrapper {
	position: relative;
	padding: 0 0 56.25% 0;
	height: 0;
}

.vid-wrapper > iframe.vid {
	border: 0;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

article h1 {
	font-size: 1.35em;
	font-weight: normal;
	line-height: 1.11;
}

article h2 {
	font-size: 1.25em;
	font-weight: normal;
	line-height: 1.2;
	margin: 1.0em 0 0.2em 0;
}

article h3 {
	font-size: 1.15em;
	font-weight: normal;
	line-height: 1.3;
	margin: 1.0em 0 0.3em 0;
}

article ul {
	font-variant-numeric: oldstyle-nums;
	margin: 0.5em 0 1.0em 0;
	padding: 0;
}

pre {
	font-family: monospace;
	white-space: pre;
}

ruby {
}

rt {
	font-size: 0.75em;
}

/* Sidebar */
.sidebar {
	float: right;
	font-size: 0.9em;
	font-variant-numeric: oldstyle-nums;
	line-height: 1.67;
	width: 11.11em;
}

.sidebar ul {
	list-style: none;
	padding: 0;
	width: auto;
}

.sidebar ul + ul {
	margin-top: 1.67em;
}

/* Games */
.game {
	margin: 1em auto 2em auto;

	height: 26em;
	width: 42em;
}

.game h1 {
	float: right;
	font-size: 1.154em;/*1.35em;*/
	font-weight: normal;
	line-height: 1.3;/*1.11;*/
	margin: 0.867em 0 0.433em 0;
	width: 29.463em;	/* 34rem */
}

.game h2 {
	float: right;
	font-size: 1.0em;
	font-weight: normal;
	font-style: italic;
	line-height: 1.5;
	margin: 0;
	width: 34em; /* 34rem; */
}

.game > a {
	float: left;
	display: block;
}

.game img {	
	margin: 0;

	height: 16em;
	width: 42em;	
}

.game .vitals {
	float: right;
	font-size: 0.9em;
	font-variant-numeric: oldstyle-nums;
	line-height: 1.67;
	list-style: none;
	margin: 1.67em 0 0 0;
	padding: 0;
	text-align: right;
	width: 8.88em;
}

.game .vitals li {
}

.game .setting {
	height: 0;
	display: none;
	width: 0;
}

.game .links {
	clear: right;
	float: left;
	font-variant: small-caps;
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
}

.game .links li {
	display: inline-block;
}

.game .links li + li {
	margin-left: 1em;
}

.game .links form {
	display: inline;
}

.game .links input {
	margin: 0;
}

@media screen and (max-width: 750px) 
{
article#game, article .sidebar ul, section p {
	width: 100%;
}

article figcaption, article ul, #game input, h1, h2, p, section,
	.contact, .context, article .purchase, .summary 
{
	display: block;
	width: 90%;
	margin-left: auto;
	margin-right: auto;
}

article figcaption, #game input { margin-left: 0; }

article figure, article .purchase, figure > a, figure img {
	height: auto;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
}

article > figure {
	width: 90%;
}


article figure.video {
	width: 90%;
}

article, .game {
	height: auto;
	width: 100%;
}

body {
	font-size: 20px;
}

body > footer {
	padding: 0;
	width: 100%;
}

.game img {
	height: auto;
	width: 100%;
}

.game .vitals {
	margin: 0;
	text-align: center;
	width: 100%;
}

.game .vitals li {
	display: inline-block;
	margin: 0 1em 0 0;
}

.game .vitals, .game h1, .game h2, .game .links {
	clear: both;
	float: none;
	margin: 0 auto;
	width: 90%;
}

.game .links li {
	display: inline-block;
	width: 49%;
}

.game .links li + li {
	margin-left: 0;
}

.game .links li:last-child {
	display: block;
}

.game h1 {
	font-size: 1.3em;
	margin: 0.74em auto 0.37em auto;
}

.game h2 {
	font-size: 1em;
}

.game .links {
	margin: 1em auto 4em auto;
}

.sidebar, .vitals {
	clear: both;
	display: block;
	float: none;
	margin: 0 auto;
	width: 90%;
}

.sidebar .vitals {
	width: 100%;
}

.sidebar ul + ul {
	margin-top: 0em;
}

.sidebar .credits {
	display: none;
}

.sidebar li {
	display: inline-block;
	margin-right: 1em;
}

.mechanics {
	display: none;
}

}

@media screen and (min-width: 1500px) {
article, .game {
	height: 21em;
}

article#game {
	height: auto;
}

body {
	font-size: 21px;
	line-height: 1.3334;
}

body > footer {
	padding-top: 5em;
}

#index {
	width: 68em;
}
#index > .game {
	width: 68em;
}

.game .display {
	display: block;
	float: left;
	margin-left: 2em;
	width: 42em;
}

.game img {
	clear: none;
}

.game .vitals {
	line-height: 1.4815;
	margin: 0;
	text-align: center;
	width: 46.66em;
}

.game .vitals li {
	display: inline-block;
	margin: 0 1em 0 0;
}

.game h1, .game h2, .game .links {
	clear: right;
	float: right;
	margin: 0
}

.game .setting {
	float: right;
	height: auto;
	/*margin: 1em 2em 0.5em 0;*/
	margin: 0 2em 1.3333em 0;
	display: block;
	width: 21em;
}

.game h1 {
	line-height: 1.1555;
	margin: 0 1.73em 0.2889em 0;
	width: 18.2em;
}

.game h2 {
	line-height: 1.3334;
	margin: 0 2em 1em 0;
	width: 21em;
}

.game .links {
	margin: 0 2em 0 0;
	width: 21em;
}

.game .links li {
	display: block;
}

.game .links li + li {
	margin-left: 0;
}

}

@media print {
abbr {
	text-decoration: none;
}

article, .game {
	height: 21em;
}

article#game {
	height: auto;
}

body {
	font-size: 11px;
	line-height: 1.5;
}

body > footer {
	padding-top: 5em;
}

#index {
	width: 68em;
}
#index > .game {
	width: 68em;
}

.game .display {
	display: block;
	float: left;
	margin-left: 2em;
	width: 42em;
}

.game img {
	clear: none;
}

.game .vitals {
	line-height: 1.4815;
	margin: 0;
	text-align: center;
	width: 46.66em;
}

.game .vitals li {
	display: inline-block;
	margin: 0 1em 0 0;
}

.game h1, .game h2, .game .links {
	clear: right;
	float: right;
	margin: 0
}

.game .setting {
	float: right;
	height: auto;
	/*margin: 1em 2em 0.5em 0;*/
	margin: 0 2em 1.3333em 0;
	display: block;
	width: 21em;
}

.game h1 {
	line-height: 1.1555;
	margin: 0 1.73em 0.2889em 0;
	width: 18.2em;
}

.game h2 {
	line-height: 1.3334;
	margin: 0 2em 1em 0;
	width: 21em;
}

.game .links {
	margin: 0 2em 0 0;
	width: 21em;
}

.game .links li {
	display: block;
}

.game .links li + li {
	margin-left: 0;
}

section {
	break-inside: avoid;
}

}

/*
#####  Color Palette by Paletton.com
#####  Palette URL: http://paletton.com/#uid=54H0u0kn5tc6uQPgkA8t2nQCggn


*** Primary color:
   shade 0 = #76319B = rgb(118, 49,155) = rgba(118, 49,155,1) = rgb0(0.463,0.192,0.608)
   shade 1 = #D5B8E4 = rgb(213,184,228) = rgba(213,184,228,1) = rgb0(0.835,0.722,0.894)
   shade 2 = #985FB8 = rgb(152, 95,184) = rgba(152, 95,184,1) = rgb0(0.596,0.373,0.722)
   shade 3 = #58127F = rgb( 88, 18,127) = rgba( 88, 18,127,1) = rgb0(0.345,0.071,0.498)
   shade 4 = #390457 = rgb( 57,  4, 87) = rgba( 57,  4, 87,1) = rgb0(0.224,0.016,0.341)

*** Secondary color (1):
   shade 0 = #BB3480 = rgb(187, 52,128) = rgba(187, 52,128,1) = rgb0(0.733,0.204,0.502)
   shade 1 = #EFBFDA = rgb(239,191,218) = rgba(239,191,218,1) = rgb0(0.937,0.749,0.855)
   shade 2 = #D568A6 = rgb(213,104,166) = rgba(213,104,166,1) = rgb0(0.835,0.408,0.651)
   shade 3 = #980E5C = rgb(152, 14, 92) = rgba(152, 14, 92,1) = rgb0(0.596,0.055,0.361)
   shade 4 = #69003B = rgb(105,  0, 59) = rgba(105,  0, 59,1) = rgb0(0.412,0,0.231)

*** Secondary color (2):
   shade 0 = #523AA0 = rgb( 82, 58,160) = rgba( 82, 58,160,1) = rgb0(0.322,0.227,0.627)
   shade 1 = #C6BDE6 = rgb(198,189,230) = rgba(198,189,230,1) = rgb0(0.776,0.741,0.902)
   shade 2 = #7B67BC = rgb(123,103,188) = rgba(123,103,188,1) = rgb0(0.482,0.404,0.737)
   shade 3 = #331A83 = rgb( 51, 26,131) = rgba( 51, 26,131,1) = rgb0(0.2,0.102,0.514)
   shade 4 = #1B085A = rgb( 27,  8, 90) = rgba( 27,  8, 90,1) = rgb0(0.106,0.031,0.353)

#####  Generated by Paletton.com (c) 2002-2014
*/
/*
#####  Color Palette by Paletton.com
#####  Palette URL: http://paletton.com/#uid=54H0u0kn5tc6uQPgkA8t2nQCggn


*** Primary color:
   shade 0 = #76319B = rgb(118, 49,155) = rgba(118, 49,155,1) = rgb0(0.463,0.192,0.608)
   shade 1 = #D5B8E4 = rgb(213,184,228) = rgba(213,184,228,1) = rgb0(0.835,0.722,0.894)
   shade 2 = #985FB8 = rgb(152, 95,184) = rgba(152, 95,184,1) = rgb0(0.596,0.373,0.722)
   shade 3 = #58127F = rgb( 88, 18,127) = rgba( 88, 18,127,1) = rgb0(0.345,0.071,0.498)
   shade 4 = #390457 = rgb( 57,  4, 87) = rgba( 57,  4, 87,1) = rgb0(0.224,0.016,0.341)

*** Secondary color (1):
   shade 0 = #BB3480 = rgb(187, 52,128) = rgba(187, 52,128,1) = rgb0(0.733,0.204,0.502)
   shade 1 = #EFBFDA = rgb(239,191,218) = rgba(239,191,218,1) = rgb0(0.937,0.749,0.855)
   shade 2 = #D568A6 = rgb(213,104,166) = rgba(213,104,166,1) = rgb0(0.835,0.408,0.651)
   shade 3 = #980E5C = rgb(152, 14, 92) = rgba(152, 14, 92,1) = rgb0(0.596,0.055,0.361)
   shade 4 = #69003B = rgb(105,  0, 59) = rgba(105,  0, 59,1) = rgb0(0.412,0,0.231)

*** Secondary color (2):
   shade 0 = #523AA0 = rgb( 82, 58,160) = rgba( 82, 58,160,1) = rgb0(0.322,0.227,0.627)
   shade 1 = #C6BDE6 = rgb(198,189,230) = rgba(198,189,230,1) = rgb0(0.776,0.741,0.902)
   shade 2 = #7B67BC = rgb(123,103,188) = rgba(123,103,188,1) = rgb0(0.482,0.404,0.737)
   shade 3 = #331A83 = rgb( 51, 26,131) = rgba( 51, 26,131,1) = rgb0(0.2,0.102,0.514)
   shade 4 = #1B085A = rgb( 27,  8, 90) = rgba( 27,  8, 90,1) = rgb0(0.106,0.031,0.353)

#####  Generated by Paletton.com (c) 2002-2014
*/