@charset "UTF-8";
/* CSS Document */

/*Reset*/
/* 
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com 
Twitter: @rich_clark
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}
body {
    line-height:1;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
    display:block;
}
nav ul {
    list-style:none;
}
a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}
table {
    border-collapse:collapse;
    border-spacing:0;
}
input, select {
    vertical-align:middle;
}

/*
Colors:
	hex:
		blue:  #2a8ddb
		gren: #1b9c23
		red: #d60005
		yellow: #f7d114
	rgb:
		blue:  42, 141, 219
		gren: 27, 156, 35 
		red: 214, 0, 5
		yellow: 247, 209, 20
*/
/*fonts*/
@font-face {
    font-family: 'Alien';
    src: url('../fonts/alien5.eot');
    src: url('../fonts/alien5.eot?#iefix') format('embedded-opentype'),
         url('../fonts/alien5.woff') format('woff'),
         url('../fonts/alien5.ttf') format('truetype'),
         url('../fonts/alien5.svg#alien5') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Cubos';
    src: url('../fonts/cubos.eot');
    src: url('../fonts/cubos.eot?#iefix') format('embedded-opentype'),
         url('../fonts/cubos.woff') format('woff'),
         url('../fonts/cubos.ttf') format('truetype'),
         url('../fonts/cubos.svg#cubos') format('svg');
    font-weight: normal;
    font-style: normal;
}

/*headings and text*/
h1 { font-size:350%; }
h2 { font-size:200%; margin-bottom:5px; }
h3 { font-size:150%; }
p  { font-size:110%; }
a  {	font-size:125%; border-radius:2px;}
button { border-radius:2px;}

/*styles*/
html, body { width:100%; height:100%; }
body { overflow:hidden; font-family:Alien; color:#eee; background:#000;
       display:flex; align-items:center; justify-content:center; }
.wrap { border-radius:2px; width:40%; height:45%; position:relative; top:20%; margin:auto; padding:5% ; background:rgba(0,0,0,0.8); }

/*show and hide scenes*/
.scene  { display:none; width:100%; height:100%;  background:url(../img/bg/main_menu.jpg);}
.active { display:block; }


/*game — fixed 1024x768 coordinate space, scaled to the viewport via JS transform*/
#game { width:1024px; height:768px; flex:0 0 auto; transform-origin:center center; position:relative; }

/*mute toggle*/
#mute-toggle { position:absolute; top:10px; right:10px; z-index:10;
               width:44px; height:44px; font-size:22px; line-height:1;
               background:rgba(0,0,0,0.5); color:#eee; border:1px solid #eee;
               border-radius:6px; cursor:pointer; }
#mute-toggle:hover { background:rgba(255,255,255,0.9); }

/*loading scene*/
#loading-scene { text-align:center;  margin:0 auto; }
#loading-scene h3 { text-align:center;  margin-top: 25%; }

/*main menu scene*/
#main-menu-scene 			{ background:url(../img/bg/main_menu.jpg);}
#main-menu-scene #main-nav 	{ border-radius:2px; text-align:center; width:40%; height:45%; position:relative; top:20%; margin:auto; padding:5% 10%; background:rgba(0,0,0,0.5);}
#main-menu-scene h1 		{ text-shadow:5px 5px 15px #2a8ddb; color:#fff; }
#main-menu-scene ul 		{ list-style:none; }
#main-menu-scene li 		{ border-radius:2px; font-size:150%;  padding:10px; margin:5px 0; background:rgba(0,0,0,0.5); border:1px solid #eee; }
#main-menu-scene li:hover, 
#main-menu-scene li:active 	{ cursor:pointer; border:1px solid #fff; background:rgba(255,255,255,1); color:#000; }

/*instructions scene*/
#instructions-scene .wrap { height:30%;}

/*highscore scene*/
.highscore { overflow:auto; height:50%;}
#highscore-scene .highscore { height:70%;}

/*credits scene*/
#credits-scene .wrap { height:30%;}

/*write-alias scene*/
#write-alias-scene 			{ background:url(../img/bg/main_menu.jpg);}
#write-alias-scene div 		{ border-radius:2px; text-align:center; width:40%; height:15%; position:relative; top:20%; margin:auto; padding:5% 10%; background:rgba(0,0,0,0.5);}
#write-alias-scene input 	{ display:block; width:45%; height:25px; font-size:125%; font-family:Alien; margin:15px auto 25px auto; padding-left:2px;}
#write-alias-scene a		{ margin:20px 15px; }
a 							{ padding:10px 25px; text-align:center; min-width:300px; border:1px solid #fff; background:rgba(0,0,0,0.5); }
a:hover, 
a:active 					{ color:#000; background:#fff; cursor:pointer;} 

/*command-center scene*/
#command-center-scene {	background:url(../img/bg/ui.jpg);}
#command-center-scene #planet {	float:right; text-align:right; }
#command-center-scene #mission-briefing { border-radius:2px; width:50%; height:77%;  padding:5%; margin-bottom:25px; fbackground:rgba(0,0,0,0.5); border:1px solid #fff; }
#command-center-scene h3 { margin-bottom:5px; font-weight:bold;}
#command-center-scene .planetInfo { font-size:80%; margin-right:25px; font-family:Cubos; letter-spacing:2px;}

/*game scene*/
#game-scene { background:url(../img/bg/Space1.png);}

/*level-complete scene*/
#level-complete-scene { background:url(../img/bg/Space1.png); }
#level-complete-scene .wrap { height:auto;}
#level-complete-scene p { margin:5px 0px;}

/*compact feedback + share box (below the score on the score screens). Kept
  small and low-key so it doesn't compete with the score / continue button —
  dimmed by default, fading to full opacity on hover/focus.*/
.score-extras { width:40%; margin:14px auto 0; padding:10px 3% 8px;
    position:relative; top:20%; /*track the .wrap's 20% downward shift*/
    text-align:center; font-size:80%; opacity:0.55;
    border:1px solid rgba(255,255,255,0.15); border-radius:4px;
    background:rgba(0,0,0,0.35);
    transition:opacity 0.2s ease; }
.score-extras:hover, .score-extras:focus-within { opacity:1; }

/*feedback widget ("Was this fun?")*/
.feedback { margin:0 0 8px; padding:0; }
.feedback-question { font-size:100%; }
.feedback-yes, .feedback-no, .feedback-send {
    font-family:Alien; color:#eee; font-size:95%; line-height:1;
    background:rgba(0,0,0,0.5); border:1px solid #eee; border-radius:4px;
    padding:3px 9px; margin:0 3px; cursor:pointer; }
.feedback-yes:hover, .feedback-no:hover,
.feedback-send:hover { background:#fff; color:#000; }
.feedback-followup { margin-top:8px; }
.feedback-comment { font-family:Alien; font-size:95%; width:55%; height:22px;
    color:#000; padding:2px 6px; margin-right:6px; vertical-align:middle; }
.feedback-thanks { margin-top:8px; font-size:100%; color:#f7d114; }

/*share button inside the extras box — small, not a full-width call-to-action
  (overrides the wide default anchor button styling)*/
.score-extras .btn-share { display:inline-block; min-width:0; font-size:90%;
    padding:4px 16px; margin-top:2px; }

/*game-over scene*/
#game-over-scene { background:url(../img/bg/game_over.jpg);}
#game-over-scene h2 { margin-bottom:5px;}
#game-over-scene .wrap { height:48%;}