@charset "UTF-8";
/*This CSS file does not validate to W3 CSS3 due to vendor prefixes required to create gradients in CSS3,
this causes parsing errors in the validator. The correct syntax has been used according to each browser
vendor.*/

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html, body {
	width: 100%;
	height: 100%;
	overflow: hidden !important;
	background: #000;
	font-family: 'Arial', sans-serif;
}

/* Landscape Mode Canvas Optimization */
@media screen and (orientation: landscape) {
	#gameSection {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100vw;
		height: 100vh;
	}
	
	#gameCanvas {
		display: block;
		width: auto !important;
		height: 100vh !important;
		max-width: 100vw;
		max-height: 100vh;
		object-fit: contain;
	}
}

body.info {
	background-image: url("../images/menu/backdrop/stars.png");
}

h1.error {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: #fff;
	text-align: center;
	font-size: 1.5rem;
	padding: 20px;
	z-index: 10;
}

header {
	text-align: center;
	text-decoration: underline;
}

header#top{
	background-color: #000000;
	position:absolute;
	width: 100%;
	height: 70px;
	top: 0px;
	left:0px;
	z-index: 1;
}

nav {
	position: absolute;
	top: 0px;
	left: 360px;	
	z-index: 2;
}

 nav#buttons ul{
list-style-type:none;
text-align:center;
}

 nav#buttons li{
display:inline;
padding:0 30px;
font-size:1.1em;
}

nav#buttons a{
	display: inline-block;
	color: white;
	font-family:sans-serif;
	letter-spacing:0.035em;
	text-shadow: 0px -1px 0px #b1b1b1;
	padding:2px 100px;
	background:#136caa; /*for unsupported browsers*/
	background: -webkit-linear-gradient(top, #136caa, #4f98cb);
	background: -moz-linear-gradient(top, #136caa, #4f98cb);
	background: -o-linear-gradient(top, #136caa, #4f98cb);
	background: -ms-linear-gradient(top, #136caa, #4f98cb);
	background: linear-gradient(top, #136caa, #4f98cb);

	/*add a drop shadow to the button*/
	-webkit-box-shadow: rgba(93, 100, 106, .75) 0 1px 10px;
	-moz-box-shadow: rgba(93, 100, 106, .75) 0 1px 10px;
	box-shadow: rgba(93, 100, 106, .75) 0 1px 10px;
}

nav#buttons a:hover, nav#buttons a:focus{
	color:#e0e0d5;
	text-shadow:none;
	/*reduce the size of the box-shadow to give an impression of the button being pushed*/
	-webkit-box-shadow: rgba(93, 100, 106, .75) 0 0 2px;
	-moz-box-shadow: rgba(93, 100, 106, .75) 0 0 2px;
	box-shadow: rgba(93, 100, 106, .75) 0 0 2px;
}

div#logo {
	background-image: url("../images/logo/logo_small.png");
	background-position:center; 
	background-repeat:no-repeat;
	position:absolute;
	left: 0px;
	width: 387px;
	height: 70px;
	top: 0px;
	z-index: 4;
}

section#gameSection {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(135deg, #0a0015 0%, #1a0530 25%, #0d1b3e 50%, #0a0820 75%, #000000 100%) !important;
  animation: backgroundShift 20s ease-in-out infinite !important;
}

@keyframes backgroundShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

#gameCanvas {
  display: block !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  object-fit: contain;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  touch-action: none;
}

@font-face {
    font-family: 'zephyrean_brknormal';
    src: url('zephyrea-webfont.eot');
	/*Ensures increased browser compatibility*/
    src: url('zephyrea-webfont.eot?#iefix') format('embedded-opentype'),
         url('zephyrea-webfont.woff') format('woff'),
         url('zephyrea-webfont.ttf') format('truetype'),
         url('zephyrea-webfont.svg#zephyrean_brknormal') format('svg');
    font-weight: normal;
    font-style: normal;
}

article#about {
	position: absolute;
	top: 70px;
	left: 4%;
	width: 90%;
	color: yellow;
	font-size:	130%;
	font-family: zephyrean_brknormal, Futura, "Trebuchet MS", Arial, sans-serif;
}

article#about ul {
	font-size:	85%;
	font-family: Futura, "Trebuchet MS", Arial, sans-serif;
}

article#about p {
	font-family: Futura, "Trebuchet MS", Arial, sans-serif;
}

article#about h2 {
	text-shadow: 2px 2px 3px #333333;
}

section.credits {
	position: relative;
	left: 5%;
}

section.credits a {
	color:#FF8000;
}

#gameCanvas {
    cursor: crosshair;
    position: absolute;
    top: 0px !important;
    left: 0px !important;
}

/* SFX Toggle Switch Styles */
.check-input {
    position: relative;
    z-index: 2;
    cursor: pointer;
    width: 90px;
    height: 35px;
    border-radius: 20px;
    transition: all ease .3s;
    margin: 0;
    display: inline-block;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}

.border-check {
    position: absolute;
    top: 0;
    left: 0;
    width: 90px;
    height: 36px;
    border-radius: 20px;
    border: 2px solid red;
    transition: border 0.2s ease;
    z-index: 0;
}

.check-input:hover {
    background: #f5f5f5;
}

.check-input .input {
    cursor: pointer;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 3;
    opacity: 0;
    margin: 0;
    padding: 0;
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: transparent;
}

.check-input .input:focus,
.check-input .input:active,
.check-input .input:checked {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}

.check-input:focus,
.check-input:active {
    outline: none !important;
    box-shadow: none !important;
}

.circle {
    cursor: pointer;
    background: red;
    position: absolute;
    text-align: center;
    justify-content: center;
    align-items: center;
    display: flex;
    top: 2px;
    left: 2px;
    z-index: 1;
    width: 31px;
    height: 31px;
    border-radius: 50px;
    transition: left 0.3s ease, background 0.3s ease, transform 0.3s ease;
}

.circle span,
.circle i {
    position: relative;
    transition: .3s;
    color: #fff;
}

.check-input:active .circle {
    width: 52px;
}

.check-input .input:checked ~ .circle {
    left: 57px !important;
    background: #41ffb4 !important;
}

.check-input .input:checked ~ .circle span,
.check-input .input:checked ~ .circle i {
    transform: rotate(540deg);
}

.check-input .input:checked ~ .border-check {
    border: 2px solid #41ffb4 !important;
}

.check-input:active .input:checked ~ .circle {
    left: 38px !important;
}