/* body, html {
  position: fixed;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  font-family: 'Lato', sans-serif;
  color: #FFF;
  background: radial-gradient(ellipse at bottom, #0C1116 0%, #090a0f 100%);
  overflow: hidden;
} */

#stars, #stars2, #stars3 {
  position: absolute;
  top: 0;
  left: 0;
  background: transparent;
}



#horizon {
  position: absolute;
  width: 160%;
  height: 70%;
  border-radius: 100% / 100%;
  background: #038bff;
  filter: blur(30px);
  left: 50%;
  bottom: -20%;
  margin-left: -80%;
}

#horizon::before {
  content: " ";
  position: absolute;
  width: 81.25%;
  height: 70%;
  border-radius: 100% / 100%;
  background: #51AFFF;
  filter: blur(30px);
  opacity: 0.6;
  margin-left: 9.375%;
}

#horizon::after {
  content: " ";
  position: absolute;
  width: 32%;
  height: 20%;
  border-radius: 650px / 350px;
  background: #B0DAFF;
  filter: blur(30px);
  opacity: 0.5;
  margin-left: 34%;
}

.glow {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 100% / 100%;
  background: #215496;
  filter: blur(200px);
  opacity: 0.7;
  top: -10%;
}

#earth {
  position: absolute;
  width: 200%;
  height: 100%;
  background: black;
  border-radius: 100% / 100%;
  left: 50%;
  bottom: -50%;
  margin-left: -100%;
}

#earth::before {
  content: " ";
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 100% / 100%;
  box-shadow: inset 0px 0px 62px 20px rgba(60, 105, 138, 0.85);
}

#earth::after {
  content: " ";
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 100% / 100%;
  background: linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,1) 100%);
}

#title {
  position: absolute;
  font-weight: 300;
  top: 36%;
  left: 0;
  right: 0;
  margin-top: -80px;
  font-size: 130px;
  text-align: center;
  letter-spacing: 20px;
  padding-left: 20px;
  background: linear-gradient(white, rgb(219, 221, 224), #38495a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: animGravity 6s ease infinite;
}

#subtitle {
  position: absolute;
  font-weight: 300;
  top: 70%;
  left: 0;
  right: 0;
  font-size: 25px;
  text-align: center;
  letter-spacing: 6px;
}

@media (max-width: 768px) {
  #title{
    font-size: 30px;
    margin-top: -60px;
  }

  #subtitle{
    font-size: 15px;
  }
}

#subtitle span {
  color: rgb(216, 216, 216);
  animation-duration: 6s;
  animation-iteration-count: infinite;
  animation-timing-function: ease;
  display: inline-block;
}

#subtitle span:nth-child(1) {
  animation-name: animDont;
}

#subtitle span:nth-child(2) {
  animation-name: animLet;
}

#subtitle span:nth-child(3) {
  animation-name: animGo;
}

#subtitle span:nth-child(4) {
  animation-name: animInvent;
}


/* Animations */
@keyframes animStar {
  from { transform: translateY(0px); }
  to { transform: translateY(-2000px); }
}

@keyframes animGravity {
  0%   { transform: translateY(-26px); opacity: 0; }
  30%, 80% { letter-spacing: 40px; padding-left: 40px; transform: translateY(0); opacity: 1; }
  92%, 100% { letter-spacing: 35px; padding-left: 35px; transform: translateY(-4px); opacity: 0; }
}

@keyframes animDont {
  0%, 15%   { transform: translateY(-26px); opacity: 0; }
  35%, 80%  { transform: translateY(0); opacity: 1; }
  92%, 100% { transform: translateY(-4px); opacity: 0; }
}

@keyframes animLet {
  0%, 25%   { transform: translateY(-26px); opacity: 0; }
  45%, 80%  { transform: translateY(0); opacity: 1; }
  92%, 100% { transform: translateY(-4px); opacity: 0; }
}

@keyframes animGo {
  0%, 35%   { transform: translateY(-26px); opacity: 0; }
  55%, 80%  { transform: translateY(0); opacity: 1; }
  92%, 100% { transform: translateY(-4px); opacity: 0; }
}

@keyframes animInvent {
  0%, 45%   { transform: translateY(-26px); opacity: 0; }
  65%, 85%  { transform: translateY(0); opacity: 1; }
  92%, 100% { transform: translateY(-4px); opacity: 0; }
}






#stars {
  width: 1px;
  height: 1px;
  background: transparent;
  box-shadow: 1452px 1784px #FFF, 784px 1101px #FFF, 311px 760px #FFF, 543px 1702px #FFF, 1923px 150px #FFF, 1385px 638px #FFF, 105px 940px #FFF, 1694px 1811px #FFF, 312px 141px #FFF, 48px 1626px #FFF;
  animation: animStar 50s linear infinite;
}
#stars::after {
  content: " ";
  position: absolute;
  top: 2000px;
  width: 1px;
  height: 1px;
  background: transparent;
  box-shadow: 1452px 1784px #FFF, 784px 1101px #FFF, 311px 760px #FFF, 543px 1702px #FFF, 1923px 150px #FFF, 1385px 638px #FFF, 105px 940px #FFF, 1694px 1811px #FFF, 312px 141px #FFF, 48px 1626px #FFF;
}


#stars2 {
  width: 2px;
  height: 2px;
  background: transparent;
  box-shadow: 256px 1924px #FFF, 1902px 743px #FFF, 1274px 1610px #FFF, 364px 952px #FFF, 1679px 1450px #FFF;
  animation: animStar 100s linear infinite;
}
#stars2::after {
  content: " ";
  position: absolute;
  top: 2000px;
  width: 2px;
  height: 2px;
  background: transparent;
  box-shadow: 256px 1924px #FFF, 1902px 743px #FFF, 1274px 1610px #FFF, 364px 952px #FFF, 1679px 1450px #FFF;
}


#stars3 {
  width: 3px;
  height: 3px;
  background: transparent;
  box-shadow: 402px 1024px #FFF, 1583px 503px #FFF, 870px 1712px #FFF, 1302px 340px #FFF, 1991px 1198px #FFF;
  animation: animStar 150s linear infinite;
}
#stars3::after {
  content: " ";
  position: absolute;
  top: 2000px;
  width: 3px;
  height: 3px;
  background: transparent;
  box-shadow: 402px 1024px #FFF, 1583px 503px #FFF, 870px 1712px #FFF, 1302px 340px #FFF, 1991px 1198px #FFF;
}