/* General CSS */
	* {
		margin:0;
		padding:0;
		border:0;
	}
	html, body {
		margin:0;
		padding:0;
		font-family:comfortaa;
		font-size:1em;
		height: 100vh;
		overflow-y: scroll;
	}
	#BG_Spaceship{
		/* Stars gif background  */
		background-attachment: fixed;
		background-image: url(../source/j-space_spaceship_BG.gif);
		background-repeat: no-repeat;
		background-position: center center;
		background-size: cover;
	}
	#BG_Blank {
		background-color: rgba(0, 0, 0, 1);
	}
	#BackgroundVideo {
		position: fixed;
		right: 0;
		bottom: 0;
		min-width: 100%;
		min-height: 100%;
		/* Needed HTML for Video
		<!-- Background Video 
		<video autoplay muted loop id="BackgroundVideo"> 
		<source src="source\space.mp4" type="video/mp4"> 
		</video>
		-->
		*/
	}
	h1{
		font-size:2em;
	}
	a, a:focus, a:active {
		text-decoration: none;
		color: inherit;
	}
	a:hover{
		color:#c0c0c0;
	}
	li {
		padding-top: 10px;
		list-style-type: none;
	}
	footer {
		position: fixed;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		color: #f1f1f1;
		width: 100%;
		padding: 20px;
		font-size:16px;
		text-align: center;
	}

/* Start Page formatting */
	.sp-content {
	  position: fixed;
	  top: 24vh;
	  background: rgba(0, 0, 0, 0.5);
	  color: #f1f1f1;
	  padding: 20px;
	  min-width: 42%;
	  text-align: right;
	}
	.sp-content-right > details {
	  background: rgba(0, 0, 0, 0.7);
	  color: #f1f1f1;
	  padding: 10px;
	  text-align: left;
	  margin-bottom: 3vh;
	  right: 0;
	}
	.sp-content-language{
	  position: fixed;
	  top: 0;
	  right: 0;
	  font-size: 24px;
	  background: rgba(0, 0, 0, 0.5);
	  color: #f1f1f1;
	  padding: 8px;
	}
	.sp-content-right {
	  position: fixed;
	  right: 0;
	  top: 48%;
	  min-width: 42%;
	  max-width: 42%;
	  display: flex;
	  flex-direction: column;
	  align-items: end;
	}
	.sp-item-1 {
	  	min-width: 100%;
	  	max-width: 100%;
		overflow-x: hidden;
    	overflow-y: auto;
		max-height:25vh;
	}
	.sp-item-2{
		min-width: 90%;
		max-width: 90%;
		overflow-x: hidden;
    	overflow-y: auto;
		max-height:25vh;
	}
	.sp-item-3{
		min-width: 80%;
		max-width: 80%;
		overflow-x: hidden;
    	overflow-y: auto;
		max-height:20vh;
	}
/* Style Pages general */
	.main_title_bg_window{
		position: fixed;
		top: 16vh;
		background: rgba(0, 0, 0, 0.7);
		color: #f1f1f1;
		padding: 20px;
		min-width: 32%;
		text-align: right;
	}
	.main_bg_window{
		position: fixed;
		top: 24vh;
		right: 0;
		background: rgba(0, 0, 0, 0.7);
		color: #f1f1f1;
		padding: 30px;
		min-width: 80%;
		max-width: 80%;
		margin-right:10%;	
	}

/* Style displayable blocks */
	summary {
	  cursor: pointer;
	}
	details > summary {
	  list-style: none;
	}
	details > summary::-webkit-details-marker {
	  display: none;
	}
	details[open] summary ~ * {
	  animation: sweep .5s ease-in-out;
	}
	@keyframes sweep {
	  0%    {opacity: 0; margin-left: -10px}
	  100%  {opacity: 1; margin-left: 0px}
	}

/* Page Time */
	.time_bg_window{
		position: fixed;
		padding: 30px;
		margin-left:10%;
		margin-right:10%;
		top: 20%;
		max-height:50%;
		min-height:50%;
	}
	.time_text{
		font-size:10rem;
		text-align:center;
		display:flex;
		justify-content:center;
		align-items:center;
		/* Color Text*/
		background: -webkit-linear-gradient(#eee, #335);
 		-webkit-background-clip: text;
  		-webkit-text-fill-color: transparent;
		font-family: 'IBM Plex Mono', monospace;
	}
	@media all and (min-width:0px) and (max-width: 1024px) {
		.time_text{
			font-size:3rem;
		}
		.time_bg_window{
			max-height:95%;
			min-height:95%;
			padding:0;
			top: 5%;
		}
	}

/*style spaceship game (sg)*/
	.sg_intro {
		display: block;
		opacity: 0;
		transition: opacity 1s ease-in-out;
		/*Base positioning*/
		position: absolute;
		top: 30%;
		left: 50%;
		transform: translate(-50%, -50%);			
		}
	.sg_displayed{
		opacity: 1;
		transition: opacity 1s ease-in-out;
	}
	.sg_controls {
	 	position: absolute;
	  	top: 5px;
	 	left: 5px;
	 	z-index: 1; /*Makes controls overlap with game*/
	}
	.sg_playpause-btn {
		width: 50px;
		height: 50px;
		border: none;
		background-color: transparent;
		background-image: url(../source/sg_visuals/pause_white.svg);
		background-repeat: no-repeat;
		background-position: center;
		background-size: 30px 30px;
		cursor: pointer;
	}
	.sg_playpause-btn.is-paused {
		background-image: url(../source/sg_visuals/play_white.svg);
	}
	.sg_controls button:hover {
		background-size: 40px 40px;
	}
	.sg_spaceship{
		width: 120px;
		height: 70px; 
		background-image: url(../source/sg_visuals/spaceship.png);
		background-size: 120px 70px;
		/*Base positioning*/
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	.sg_window{
		width:1500px;
		height:750px;
		background-color: rgba(255,255,255,0.3);
		border: 5px solid gold;
		padding: 5px; /* Used, to make spaceship stay inside game_window without comming across border */
		 /*Base positioning*/
		position: relative;
		top: 50%;
  		left: 50%;
  		-ms-transform: translate(-50%, -50%);
  		transform: translate(-50%, -50%);
	}
	.sg_comet_small{
		width: 50px;
		height: 50px;
		background-image: url(../source/sg_visuals/comet.png);
		background-size: 50px 50px;
		/*Base positioning*/
		position: relative;
		float: right;
	}
	.sg_comet_medium{
		width: 100px;
		height: 100px;
		background-image: url(../source/sg_visuals/comet.png);
		background-size: 100px 100px;
		/*Base positioning*/
		position: relative;
		float: right;
	}
	.sg_comet_large{
		width: 150px;
		height: 150px;
		background-image: url(../source/sg_visuals/comet.png);
		background-size: 150px 150px;
		/*Base positioning*/
		position: relative;
		float: right;
	}

/* CSS only for Mobile */
@media all and (min-width:0px) and (max-width: 1024px) {
	html {
		font-size:1.25em;
	}
	h1 {
		font-size:2.25em;
	}
	.sp-content {
	  min-width: 90%;
	}
	.sp-content-right {
	  min-width: 90%;
	}
	.sp-item-1{
	  min-width: 90%;
	  max-width: 90%;
	}
	.sp-item-2{
	  min-width: 86%;
	  max-width: 86%;
	}
	.sp-item-3{
	  min-width: 82%;
	  max-width: 82%;
	}
}