/*
CSS for Space Force 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;}
#container {width:99%;margin:0px auto;height:99%;text-align:justify;}
#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:30%;top:10%;height:fit-content;border:4px double white;color:white;background-color:black;min-width:30%;width:fit-content;display:none;text-align:center;transition: opacity 0.2s ease-in-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;}
#subBlurb {text-align:left;padding:0px 5%;}
#subBlurb hr {width:99%; color:ghostwhite; margin:13px auto;opacity:0.4;}
.bh {font-weight:bold;margin:0px 0px 2px 0px;color:var(--hilite);}
.bt {margin-top: 0px;}
#subFtr {padding:0px 5%;text-align:justify;}
#const { text-align: center;padding-top: 10%;}
/*#mainPage {display:block;height:100%;background-image: url('/images/topHero.png');background-size:100% 100%;background-repeat:repeat;position:relative;overflow:clip;}*/
#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%;}
#subContent p {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, #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;}
#recruitold {width:40%;float:right;margin:5% 0px 5% 5%;border: 1px solid DarkGray;box-shadow: 5px 5px 5px #9C9C9C; border-radius: 25px;}
#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;}
.rover {width:45%;border-radius:50%;}
.unfinished {margin:10% auto;text-align:center !important;}

ul  { padding-left: 0;}
ul li {list-style-position: inside;list-style-type: '✓  ';text-align:left;}
li::marker { color: green;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;}
}