/*
CSS for Space Fleet One
*/
:root { --hilite: #C51010;}
@font-face {font-family: "titillium"; font-weight:normal;font-style: normal;src: local("titillium"),url("../fonts/titillium-web.regular.woff2"); font-display: swap;}
html {height:100%; width: 100%; }
body {overscroll-behavior: contain;height:100%;margin:0 auto;padding:0;font-family:titillium;	font-weight:normal;background-color: #030812;width:100%;max-width:850px;position:relative;font-size:105%;overflow:hidden;-webkit-tap-highlight-color: transparent;user-select:none;}
img {user-drag: none;-webkit-user-drag: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;}
#container {width:99%;margin:0px auto;height:99%;text-align:justify;}
#topImg {width:90%; border: 1px solid black;border-radius: 25px;margin: 20px auto 30px auto;padding: 3%; box-shadow: 3px 4px 3px #9C9C9C;animation:none;}
#Planet {position:absolute;right:30px;top:17px;width:auto;height:70px;cursor:pointer;}
#bHero {position:absolute;bottom:0;width:100%;z-index:5;}
#flight {position:absolute;left:-200px;bottom:10vh;max-height:10%;height:100px;z-index:15;}
#menuDiv {position:absolute; left:50%;top:50%;transform:translate(-50%,-50%);height:fit-content;max-height:80%;overflow-y:auto;border:4px double white;color:white;background-color:black;width:30%;min-width:170px;display:none;text-align:center;transition: opacity 0.1s ease-out;z-index:10; }
#menuDiv p:hover {opacity:0.6;cursor:pointer;}
.menuDivheader {cursor:move; border-bottom:1px solid white;background-color:var(--hilite);width:100%;padding:14px 0px;text-shadow: 0.5px 0px 0px currentColor;}
#subPage {width:calc(100% - 8px);height:calc(100% - 8px); color:black;display:none;margin:auto auto;text-align:center;border:4px double black;}
#subHdr {background-color:black; border-bottom:1px solid white;height:105px;font-size:1.2em;width:100%;margin:0px auto;color:white;text-shadow: 0.2px 0px 0px currentColor;display:flex;align-items:center;}
#subTitle {width: calc(100% - 60px);padding-left:2%;text-align:left;}
#subT {width:fit-content;text-align:center;}
#mainPage {display:block;height:100%;position:relative;overflow:clip;}
#subLogo {float:left;height:100%;cursor:pointer;}
#subLogo img {height:60%;vertical-align:middle;cursor:pointer;}
#subContent {height:calc(99% - 105px);overflow-y:auto;padding:0px 5%;scrollbar-width: none;}
#subContent::-webkit-scrollbar { display: none;}
#subContent span {text-align:left; font-weight: bold; margin: 0px 0px 2px 0px;color: var(--hilite); display: block;}
#subContent p {margin-top: 0px;text-align:justify;}
#subEarth {height:100%;cursor:pointer;padding-right:2%;display:flex;align-items:center;}
#subEarth img {height:80px;}
#earth {width: auto;height: 100px;max-height:15%;position:absolute;right:30px;top:17px;cursor:pointer;z-index:10;}
#Introduction, #History, #Agencies, #Fleet, #Crews, #Join, #You {display:none;padding-top:20px;}
#joiner {width:40%;border: 1px solid DarkGray; margin:5% 5% 5% 0px;box-shadow: 5px 5px 5px #9C9C9C; border-radius: 25px;float:left;}
#GEC {width:45%;float:left; margin:0px 3% 2% 0px;border-radius:14px;}
#recruit {width:40%;}
#roles {width:80%;margin:2% 0px;}
#comms {float:right;width:40%;margin:2% 0 2% 2%;border-radius:14px;}
img {animation: fadeIn 5s;animation: fadeOut 2s;}
.instImg {display:block;width:100%;text-align:center !important;}
#MARS {width:90%;border-radius:10%;margin: 30px auto 20px auto;}
#fleet {width:90%;border-radius:16px;margin: 10px auto 20px auto;}
#stone {height:14px;}
.rover {width:45%;border-radius:50%;}
.unfinished {margin:10% auto;text-align:center !important;}


ul  { padding-left: 0;}
ul.tick li {list-style-position: inside;list-style-type: '✓  ';text-align:left;}
ul.tick li::marker { color: green;font-weight:bold;}
ul.tock li {list-style-position: inside;list-style-type: 'x  ';text-align:left;}
ul.tock li::marker { color: red;font-weight:bold;}
/*
Sky
*/
#sky {
  height: 100%;
}

.star {
  box-shadow: 0px 0px 1px 1px rgba(255, 255, 255, 0.4);
  position: absolute;
  width: 1px;
  height: 1px;
  border-radius: 2px;
  background-color: white;
  animation: flicker 2s infinite;
  width: 20px;
  height: 20px;
  background-color: white;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.starSolo {
	height:5px;
	width:5px;
	background-color:bisque;
	animation: flickerSolo 2s infinite;
}
@keyframes flicker {
	0%, 50%, 100% {opacity: 1; }
	 25%, 75% {opacity: 0; }
    }
@keyframes flickerSolo {
	20%, 60%, 100% {opacity: 0.8; }
	 40%, 80% {opacity: 0.3; }
   }
/**/
@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes fadeOut {
   100% { opacity: 1; }
    0% { opacity: 0; }
}
/* Responsiveness*/
@media only screen and (max-height:400px) 
{
	#bHero {bottom:-40%;}
}
@media only screen and (max-height:400px), (max-width:849px)
{
	#bHero {bottom:0;}
}
@media only screen and (max-height:340px) 
{
	#earth {display:none;}
}
/*
*/
.shooter{
    position: absolute;
    left:40%;
    width: 4px;
    height: 4px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 5px rgba(255,255,255,0.1),0 0 0 5px rgba(255,255,255,0.1),0 0 20px rgba(255,255,255,0.1);
	opacity:0;
	/*animation-name: animeteor; set by js as required */
	animation-duration: 2s;
	animation-timing-function: ease-out;
	animation-iteration-count: 1;
}
#shooter1 {top:10%;animation-delay: 0s;}
#shooter2 {top:40%; animation-delay: 7s;}
#shooter3 {top:30%; animation-duration: 3s; animation-delay: 29s; animation-name: animeteor3; animation-iteration-count: 5;}

.shooter::before{
    content:'';
    position: absolute;
    top: 40%;
	left:36%;
    transform: translateY(-50%);
    width: 237px;
    height: 1px;
    background: linear-gradient(90deg,#fff,transparent);
}
@keyframes animeteor
{
    0%  {transform: rotate(225deg) translateX(0); opacity: 1;}
    70% {opacity: 1;}
    100% {transform: rotate(225deg) translateX(-1000px); opacity: 0; }
}
@keyframes animeteor3
{
    0%  {transform: rotate(325deg) translateX(0); opacity: 1;}
    70% {opacity: 1;}
    100% {transform: rotate(325deg) translateX(-1000px); opacity: 0; }
}