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

html, body {
  height:100%;
  width: 100%;
  overflow: hidden;
  font-family: "Press Start 2P", cursive;
}

* {
    box-sizing: border-box;
}

#main_container {
  overflow: hidden;
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: black;
  perspective: 100px;
  animation-iteration-count: 1;
}

@keyframes screen_dim {
  0%    {opacity: 1.0;}
  60%   {opacity: 1.0;}
  100%  {opacity: 0.0;}
}

@keyframes screen {
  0%    {opacity: 1.0;}
  60%   {opacity: 1.0;}
  60.1% {opacity: 0.0;}
  100%  {opacity: 0.0;}
}

@keyframes screen_text {
  0%    {opacity: 1.0;}
  60%   {opacity: 1.0;}
  60.1% {opacity: 0.0;}
  100%  {opacity: 0.0;}
}

#screen {
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  position: absolute;
  height: 100%;
  width: 100%;
  opacity: 0.0;
  background-color: black;
  color: white;
  animation-name: screen;
  animation-duration: 10s;
}

#screen_dim {
  position: absolute;
  height: 100%;
  width: 100%;
  opacity: 0.0;
  background-color: black;
  animation-name: screen_dim;
  animation-duration: 10s;
}

#screen_text {
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  position: absolute;
  height: 100%;
  width: 100%;
  opacity: 0.0;
  color: white;
  animation-name: screen_text;
  animation-duration: 10s;
}

#logo {
  height: 256px;
  width: 256px;
  margin-left: auto;
  margin-right: auto;
  image-rendering: pixelated;
}

#text1{
  opacity: 0.0;
  text-shadow: 0 0 5px white;
  white-space: nowrap;
  overflow: hidden;
  margin: 0 auto;
  animation: 
    typing 7s steps(100, end);
}

#text2{
  opacity: 0.0;
  text-shadow: 0 0 5px white;
  white-space: nowrap;
  overflow: hidden;
  margin: 0 auto;
  animation: 
    typing 7s 2s steps(100, end);
}

#text3{
  opacity: 0.0;
  text-shadow: 0 0 5px white;
  white-space: nowrap;
  overflow: hidden;
  margin: 0 auto;
  animation: 
    typing 7s 4s steps(100, end);
}

@keyframes typing {
  from { width: 0 }
  to { width: 100% }
  0% {opacity: 0.0;}
  1% {opacity: 1.0;}
  100% {opacity: 1.0;}
}


@keyframes galaxy {
  0%    {transform: translate3d(0,0,-300px);
        opacity: 0.0;
  }
  80%   {opacity: 0.3;
  }
  100%  {transform: translate3d(0,0,100px);
        opacity: 1.0;
  }
}

@keyframes galaxy_text {
  0%    {transform: translate3d(0,0,-300px);
        opacity: 0.0;
  }
  80%   {opacity: 0.0;
  }
  81%   {opacity: 1.0;
  }
  100%  {transform: translate3d(0,0,100px);
        opacity: 1.0;
  }
}

#galaxy {
  position: absolute;
  left: calc(45% - 256px);
  top: calc(55% - 256px);
  opacity: 0.1;
  height: 512px;
  width: 512px;
  animation-name: galaxy;
  animation-duration: 59s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

#galaxy_text {
  position: absolute;
  left: calc(45% - 220px);
  top: calc(55% - 0px);
  opacity: 1.0;
  color: white;
  font-size: 7px;
  text-shadow: 0 0 5px white;
  animation-name: galaxy_text;
  animation-duration: 59s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes shipyard_large {
  0%    {transform: translate3d(0,0,-300px);
        opacity: 0.0;
  }
  70%   {opacity: 0.1;
  }
  95%   {opacity: 1.0;}
  100%  {transform: translate3d(0,0,100px);
        opacity: 1.0;
  }
}

@keyframes shipyard_large_text {
  0%    {transform: translate3d(0,0,-300px);
        opacity: 0.0;
  }
  70%   {opacity: 0.0;
  }
  79%   {opacity: 1.0;}
  80%   {opacity: 1.0;}
  100%  {transform: translate3d(0,0,100px);
        opacity: 1.0;
  }
}

#shipyard_large {
  position: absolute;
  left: calc(65% - 256px);
  top: calc(55% - 256px);
  opacity: 0.9;
  height: 512px;
  animation-name: shipyard_large;
  animation-duration: 36s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

#shipyard_large_text {
  position: absolute;
  left: calc(65% - 10px);
  top: calc(55% + 120px);
  opacity: 1.0;
  color: white;
  font-size: 7px;
  text-shadow: 0 0 5px white;
  animation: shipyard_large_text 36s linear infinite;
}

@keyframes shipyard_small {
  0%    {transform: translate3d(0,0,-300px);
        opacity: 0.0;
  }
  70%   {opacity: 0.1;
  }
  95%   {opacity: 1.0;}
  100%  {transform: translate3d(0,0,100px);
        opacity: 1.0;
  }
}

@keyframes shipyard_small_text {
  0%    {transform: translate3d(0,0,-300px);
        opacity: 0.0;
  }
  70%   {opacity: 0.0;
  }
  79%   {opacity: 1.0;}
  80%   {opacity: 1.0;}
  100%  {transform: translate3d(0,0,100px);
        opacity: 1.0;
  }
}

#shipyard_small {
  position: absolute;
  left: calc(45% - 128px);
  top: calc(45% - 128px);
  opacity: 0.9;
  height: 256px;
  animation-name: shipyard_small;
  animation-duration: 23s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

#shipyard_small_text {
  position: absolute;
  left: calc(45% - 140px);
  top: calc(45% + 80px);
  opacity: 1.0;
  color: white;
  font-size: 7px;
  text-shadow: 0 0 5px white;
  animation: shipyard_small_text 23s linear infinite;
}

@keyframes ship {
  0%    {transform: translate3d(0,-15px,0);
  }
  50%   {transform: translate3d(0,15px,0);
  }
  100%  {transform: translate3d(0,-15px,0);
  }
}

@keyframes ship2 {
  0%    {transform: translate3d(0,0,400px);
  }
  25%    {transform: translate3d(0,0,400px);
  }
  40%   {transform: translate3d(0,0,20px);
  }
  60%   {transform: translate3d(0,0,-55px);
  }
  67%   {transform: translate3d(0,0,-600px);
  }
  100%  {transform: translate3d(0,0,-600px);
  }
}

#ship {
  position: absolute;
  height: 400px;
  width: 400px;
  left: calc(50% - 200px);
  top: calc(50% - 200px);
  transform: translate3d(0,-15px,0px);
  animation-name: ship;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

#ship2 {
  position: absolute;
  height: 400px;
  left: calc(25% - 200px);
  top: calc(75% - 200px);
  transform: translate3d(0,-15px,400px);
  animation-name: ship2;
  animation-duration: 12s;
  animation-iteration-count: infinite;
  animation-delay: 27s;
  animation-timing-function: linear;
}

@keyframes light {
  0%    {opacity: 0.0;}
  25%   {opacity: 0.0;}
  50%   {opacity: 1.0;}
  75%   {opacity: 0.0;}
  100%  {opacity: 0.0;}
}

#light1 {
  position: absolute;
  opacity: 0.0;
  left: calc(50% - 202px);
  top: calc(50% + 8px);
  height: 12px;
  width: 12px;
  border-radius: 6px;
  background-color: white;
  box-shadow: 0 0 8px 3px white;
  transform: translate3d(0,-15px,0);
  animation: ship 2s infinite, light 4s infinite;
}

#light2 {
  position: absolute;
  opacity: 0.0;
  left: calc(50% + 193px);
  top: calc(50% - 11px);
  height: 12px;
  width: 12px;
  border-radius: 6px;
  background-color: white;
  box-shadow: 0 0 8px 3px white;
  transform: translate3d(0,-15px,0);
  animation: ship 2s infinite, light 4s infinite;
}

@keyframes satellite1 {
  0%    {transform: translate3d(0,0,-500px); opacity: 0.0;
  }
  40%   {transform: translate3d(0,0,-500px); opacity: 0.0;
  }
  50%   {opacity: 1.0;
  }
  60%   {transform: translate3d(0,0,100px); opacity: 1.0;
  }
  100%  {transform: translate3d(0,0,100px); opacity: 1.0;
  }
}

@keyframes satellite2 {
  0%    {transform: translate3d(0,0,-500px); opacity: 0.0;
  }
  80%  {transform: translate3d(0,0,-500px); opacity: 0.0;
  }
  50%   {opacity: 1.0;
  }
  100%  {transform: translate3d(0,0,100px); opacity: 1.0;
  }
}

@keyframes satellite_rotation{
  0%    {transform: rotateZ(0);}
  100%  {transform: rotateZ(360deg);}
}

.satellite{
  position: absolute;
  height: 256px;
  width: 256px;
  left: calc(50% - 128px);
  top: calc(50% - 128px);
  animation-name: satellite_rotation;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

#satellite1 {
  perspective: 100px;
  position: absolute;
  height: 256px;
  width: 256px;
  left: calc(25% - 128px);
  top: calc(40% - 128px);
  transform: translate3d(0,0,-500px);
  animation-name: satellite1;
  animation-duration: 15s;
  animation-iteration-count: infinite;
}

#satellite2 {
  perspective: 100px;
  position: absolute;
  height: 256px;
  width: 256px;
  left: calc(75% - 128px);
  top: calc(60% - 128px);
  transform: translate3d(0,0,-500px);
  animation-name: satellite2;
  animation-duration: 15s;
  animation-iteration-count: infinite;
}

@keyframes stars {
  0% {  transform: translate3d(0,0,0); opacity: 0.0;}
  50% { opacity: 0.7; }
  100% {  transform: translate3d(0,0,100px); opacity: 0.7;}
}

.star {
  overflow: hidden;
  position: absolute;
  height: 300%;
  width: 300%;
  opacity: 0.0;
  background-position: center;
  background-size: 80px 80px;
  background-image: url(starfield.png);
  background-repeat: repeat;
}

.star:nth-child(1) {
  animation-delay: 0s;
  animation-name: stars;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.star:nth-child(2) {
  animation-delay: 1s;
  animation-name: stars;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.star:nth-child(3) {
  animation-delay: 2s;
  animation-name: stars;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.star:nth-child(4) {
  animation-delay: 3s;
  animation-name: stars;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

#destination {
  position: absolute;
  height: 100%;
  width: 100%;
  text-align: center;
}

#text_destination {
  position: relative;
  top: 20%;
  color: white;
  opacity: 0.0;
  text-shadow: 0 0 5px white;
  white-space: nowrap;
  overflow: hidden;
  margin: 0 auto;
  animation: 
    typing 7s 10s steps(100, end);
}

.distance_counter {
  position: absolute;
  height: 100%;
  width: 100%;
  color: white;
  opacity: 1.0;
  text-shadow: 0 0 5px white;
  justify-content: space-between;
  align-items: flex-start;
  padding: 20px;
}

#small_logo {
  position: absolute;
  left: 20px;
  top: 50px;
  height: 64px;
  width: 64px;
  image-rendering: pixelated;
}

#links {
  position: absolute;
  height: 100%;
  width: 100%;
  display: flex;
  color: white;
  opacity: 1.0;
  text-shadow: 0 0 5px white;
  justify-content: space-between;
  align-items: flex-end;
  padding: 20px;
}

a:link, a:visited, a:active {
  text-decoration: none;
  color: white;
  padding: 10px;
}

a:hover {
  background-color: white;
  color: black;
}