@font-face {
    font-family: 'astronaut_iiregular';
    src: url('asset/astri_-webfont.woff2') format('woff2'),
         url('asset/astri_-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal; }
	
@font-face {
    font-family: 'ethnocentricregular';
    src: url('asset/ethnocentric_rg-webfont.woff2') format('woff2'),
         url('asset/ethnocentric_rg-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal; }
			
html, body {
	border: 0;
	display: block;
	font-family: Arial;
	height: 100%;
	margin: 0px;
	padding: 0px;
	width: 100%; }

body{
background-color: #000000;}
	
	
/* ------ MAIN AREA ------- */
a:link{
	color: #57ACE9;
	text-decoration: none; }
	
a:visited{
	color: #1E8CDD; }
	
a:hover{
	color: #9DCEF2; }
	
h3{
	color:#83F9FD;
	font-family: helvetica;
	font-weight: normal;
	margin: 0;
	text-transform: uppercase; }
	
p{
	display: block;
	line-height: 1.5em;
	text-indent: 50px; }

table span{
	color: #FF8B8B; }
	
input , textarea {
	background-color: #141D26;
	background-position: 10px 10px;
	background-repeat: no-repeat;	
	border: 2px solid #577BA8; /*#337CAB;*/
	border-radius: 4px;
	box-sizing: border-box;
	color: #CCC;
	display: block;
	font-family: Courier;
	font-size: 16px;
	margin: 5px 5px 0 auto;
	padding: 6px 20px 6px 20px;
	width: 100%; }

	.keys{
	background-color: #2F4259;
	box-shadow: 0px 8px 8px 0 rgba(0, 0, 0, 0.2);
	display: inline-block;
	float: left;
	height: 400px;
	margin: 5px;
	padding: 0px;
	width: 200px; }

.keys span{
	border: 2px solid #577BA8;
	box-shadow: 3px 3px 5px #333333;
	display: inline-block;
	height: 25px;
	margin: 2px;
	text-align: center; 
	width: 25px; }

.future{
	/*color: #AE7A00; }*/
	/*color: #999999; }*/
	/*color: #577BA8; }*/
	background-color: #2F4259 !important;
	color: #85BCFF; }
	
.future i{
	color: #ABC3E0;
	font-size: 11pt; }
	
.current i{
	color: #CCCCCC; }
	
.past{
	background-color: #2F4259 !important;
	color: #C5C4C4; }
	
.past i{
	color: #A6A6A6; }
	
#title-container{
	left: 50%;
	position: absolute;
	top: 35%;
	transform: translate(-50%, -50%);
	width: 450px;
	z-index: 69; }
	
#title-spacecat{
	color: #FFFFFF;
	display: block;
	font-family: astronaut_iiregular; 
	font-size: 80pt;
	line-height: 50%;
	margin: 0;
	text-align: center; }
	
#title-forever{
	color: #65ADEB; 
	display: block;
	font-family: ethnocentricregular; 
	font-size: 48pt;
	margin: 0;
	text-align: center; }
	
#title-alpha{
	color: #D93600; 
	display: block;
	font-family: ethnocentricregular; 
	font-size: 25pt;
	line-height: 60%;
	margin: 0;
	text-align: right; }
	
#nav-menu{
	font-family: ethnocentricregular; 
	font-size: 25pt;
	text-align: center;
	margin-top: 25px; }
	
#nav-start{
	color: #77EEE4;
	display: block;
	text-decoration: none; }
	
#nav-start:hover{
	color: #3B7772; }
	
#nav-about{
	color: #FFC230;/*#AAF4EF;*/
	display: block;
	text-decoration: none;}
	
#nav-about:hover{
	color:#AE7A00; /*#48918B;*/}
	
#nav-quit{
	color: #FF8B8B;
	display: block;
	text-decoration: none; }
	
#nav-quit:hover{
	color: #804545; }
	
#roadmap{
	width: 100%; }
	
#roadmap tr{
	background-color: #354B66;
	height: 65px; }

#roadmap th{
	background-color: #273649;
	border: 1px solid #1B2634; }

#roadmap td{
	border: 1px solid #1B2634;
	padding-left: 10px; }
	
#roadmap td:nth-of-type(1){
	width: 16.5%; }
	
#roadmap td:nth-of-type(2){
	width: 66%; }
	
#roadmap td:nth-of-type(3){
	text-align: center;
	width: 16.5%; }
#roadmap li{
	margin: 5px 0; }
	
#cntctreset{
	background-color: #577BA8;
	border: 0px;
	color: #FFFFFF; }
	
#cntctreset:hover{
	background-color: #57ACE9; }
	
#cntctsubmit{
	background-color: #577BA8;
	border: 0px;
	color: #FFFFFF; }
	
#cntctsubmit:hover{
	background-color: #57ACE9; }



/* ------ ANIMATIONS AREA ------- */
#sleepingcat{
	animation:barrelroll 240s linear infinite; 
	bottom: 50px;
	height: 375px;
	position: absolute;
	right: 50px;
	width: 450px;
	z-index: 99; }
	
#asteroid00{
	animation:barrelroll 20s linear infinite, asteroid00 25s linear infinite;
	height: 83px;
	position: absolute;
    width: 86px;
	z-index: 20; }

#asteroid01{
	animation:barrelroll 20s linear infinite, asteroid01 60s linear infinite;
	height: 75px;
	position: absolute;
    width: 79px;
	z-index: 99; }
	
#asteroid02{
	animation:barrelroll 20s linear infinite, asteroid02 75s linear infinite;
	height: 97px;
	position: absolute;
    width: 76px;
	z-index: 25; }
	
#asteroid03{
	animation:barrelroll 20s linear infinite, asteroid03 90s linear infinite;
	height: 55px;
	position: absolute;
    width: 140px;
	z-index: 25; }
	
@keyframes asteroid00 {
    0%   {left:-200px; top:5%;}
    50%  {left:2500px; top:10%;}
    100% {left:5000px; top:10%;}}
	
@keyframes asteroid01 {
    0%   {left:-150px; top:25%;}
    50%  {left:2500px; top:25%;}
    100% {left:5000px; top:25%;}}
	
@keyframes asteroid02 {
    0%   {left:-1000px; top:50%;}
    50%  {left:2500px; top:75%;}
    100% {left:5000px; top:75%;}}
	
@keyframes asteroid03 {
    0%   {left:-2000px; top:75%;}
    50%  {left:2500px; top:10%;}
    100% {left:5000px; top:10%;}}

/*Do a barrel rolL! To do a barrel roll press Z or R twice!*/
@keyframes barrelroll { 100% { transform:rotate(360deg); } }


	

/* ------ GAME AREA ------- */
canvas {
	background: transparent;
	display: block;
	position: absolute;
	left: 0%;
}	
			
#arena {
	z-index: 0; }
			
#spacecat {
	z-index: 5; }
	
.score{
	color: #57ACE9;
	left: 5%;
	position: absolute;
	top: 5%;
	z-index: 10; }
	
.score span{
	color: #FFFFFF; }
	
.yourewinner{
	background-color: #1B2634;
	border-radius: 2px;
	color: #FFFFFF;
	display: none;
	left: 50%;
	padding: 5px;
	position: absolute;
	text-align: center;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 9; }
	
.yourewinner span{
	cursor: pointer;
	text-align: center; }
	
.yourewinner span:hover{
	color: #9DCEF2; }
	
.closeit {
    color: #7799A6;
    float: right;
    font-size: 28px;
    font-weight: bold;
	margin: 5px 10px 0 0; }

.closeit:hover,
.closeit:focus {
    color: #25B7CB;
	cursor: pointer;
    text-decoration: none; }


/* ------ ABOUT OVERRIDE ------- */
#keys_wasd{
	box-shadow: -10px 4px 8px 0 rgba(0, 0, 0, 0.2) !important;
}
#keys_wasd img{
	margin: 0px !important;
	padding: 0px !important;
	width: 200px !important;
}
#keys_wasd div{
	background-color:#273649 !important;
	border: 0px !important;
	border-radius: 0px !important;
	padding: 0 5px 5px 5px !important;
	margin-bottom: 10px !important;
	width: 190px !important;
}
#keys_wasd-w{
	display: block !important;
	margin-left: 81px !important;
}
#keys_wasd-a{
	margin-left: 48px !important;
	margin-bottom: 10px !important;
}

#keys_shift img{
	margin: 0px !important;
	padding: 0px !important;
	width: 200px !important;
}
#keys_shift div{
	background-color:#273649 !important;
	border-radius: 0px !important;
	padding: 5px !important;
	margin-bottom: 10px !important;
	width: 190px !important;
}
#keys_shift span{
	display: block !important;
	margin: 32px auto !important;
	width: 100px !important;
}
#keys_cakes img{
	margin: 0px !important;
	padding: 0px !important;
	width: 200px !important;
}
#keys_cakes div{
	background-color:#273649 !important;
	border-radius: 0px !important;
	padding: 5px !important;
	margin-bottom: 10px !important;
	width: 190px !important;
}


/* ------ FOOTERAREA ------- */
footer{
	background-color: #243447;
	bottom: 0px;
	color: #FFFFFF;
	font-size: 13.5pt;
	height: 45px;
	left: 0px;
	padding-top: 5px;
	position: absolute;
	width: 100%;
	z-index: 99; }
	
footer a:link{
	color: #57ACE9;
	text-decoration: none; }
footer a:visited{}
footer a:hover{
	color: #8CC6F0; }

.toast {
	display: inline-block;
	margin: 0px;
    position: relative; }
	
.toast .toasttext {
	background-color: #243447;
	border-radius: 6px;
	bottom: 135%;
	color: #EEEEEE;
	left: 50%;
	margin-left: -125px;
	opacity: 0.8;
	padding: 5px;
	position: absolute;
	text-align: center;
    visibility: hidden;
    width: 130px;
	z-index: 1; }

.toast:hover .toasttext {
    visibility: visible; }

#realisim{
	color: #77EEE4; }
	
#realisim:hover{
	color: #3B7772; }

/* * * 2021 RESPONSIVENESS * * */
/* MOBILE */
@media only screen and (min-width: 320px) and (max-width : 767px){
	/* index */
	#sleepingcat{
		display: none;
	}
	#title-spacecat{
		font-size: 4em;
	}
	#title-forever{
		font-size: 2.5em;
	}
	#title-alpha{
		font-size: 1.25em;
		position: absolute;
		right: 80px;
		width: auto;
	}
	
	/* game */
	#instructions{
		display: none; /* Devices under 1000px width are not supported */
	}
	
	/* about */
	#content{
		left: 0px !important;
		width: 100% !important;
	}
	#about_space-cat-og{
		display: inline;
		float: right;
		margin: 4.5% 0px 0px 0px !important;
		padding-bottom: 0.75em !important;
		width: 40%;
	}
	#about_space-cat-og img{
		margin: 0px !important;
		width: 100%;
	}
	#about_space-cat-og div{
		margin: 0px !important;
		padding: 0px !important;
		width: 100%;
	}
	.keys{
		display: block;
		float: none;
		margin: 7.5% auto;
	}
	#roadmap{
	margin-left: -10px !important;
	}
}

/* TABLET */
@media only screen and (min-width: 768px) and (max-width : 1023px){
	/* about */
	#content{
		left: 0px !important;
		width: 100% !important;
	}
	#about_space-cat-og{
		display: inline;
		float: right;
		margin: 4.5% 0px 0px 0px !important;
		padding-bottom: 0.75em !important;
		width: 40%;
	}
	#about_space-cat-og img{
		margin: 0px !important;
		width: 100%;
	}
	#about_space-cat-og div{
		margin: 0px !important;
		padding: 0px !important;
		width: 100%;
	}
}

/* DESKTOP */
@media only screen and (min-width: 1024px){
	/* about */
	#about_space-cat-og{
		background: transparent;
		display: inline-block;
		float: right;
		margin-left: 20px;
		width: 347px;
	}
	#about_space-cat-og img{
		display: block;
		height: 525px;
		width: 347px;
	}
	#about_space-cat-og div{
		background: transparent;
		color: #CCCCCC;
		margin: 0;
		text-align: center;
		width: 347px;
	}
}
	
/* QUICK FIX - TODO: refactor JS & CSS later */
@media only screen and (min-width: 1050px){
	canvas {
		left: 10%;
	}
}
@media only screen and (min-width: 1300px){
	canvas {
		left: 25%;
	}
}