@import url("https://fonts.googleapis.com/css?family=Montserrat:300,700");

body {
  //background-image: url('../img/bg.jpg');
  //background-position: center center;
  //background-repeat: no-repeat;
  //background-attachment: fixed;
  //background-size: cover;
  background-color: #021826;
  font-family: 'Montserrat', sans-serif;
}
.earth {
  height: 200px;
  width: 200px;
  border-radius: 50%;
  background-color: #3380b5;
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -40%);
  overflow: hidden;
  z-index: 2;
}

/* Land */
.earth:before {
  content: "";
  position: absolute;
  background: #85c567;
  height: 30px;
  width: 75px;
  left: 0;
  top: 50px;
  display: block;
  border-radius: 40px;
  animation: rotateElement linear 25s infinite;
  box-shadow: 0px 75px 0 -5px #85c567, 5px 35px 0 -3px #85c567,
    35px 125px 0 -9px #85c567, 120px -15px 0 -7px #85c567,
    135px -55px 0 -9px #85c567, 150px 25px 0 7px #85c567,
    220px 70px 0 -2px #85c567, 235px -35px 0 -3px #85c567,
    280px 85px 0 3px #85c567, 320px 30px 0 1px #85c567, 400px 0 0 0 #85c567,
    400px 75px 0 -5px #85c567, 405px 35px 0 -3px #85c567,
    435px 125px 0 -9px #85c567, 520px -15px 0 -7px #85c567,
    535px -55px 0 -9px #85c567, 550px 25px 0 7px #85c567,
    620px 70px 0 -2px #85c567, 635px -35px 0 -3px #85c567,
    680px 85px 0 3px #85c567, 720px 30px 0 1px #85c567;
}

/* Clouds */
.earth:after {
  content: "";
  position: absolute;
  background: white;
  height: 20px;
  width: 60px;
  left: 0px;
  top: 50px;
  display: block;
  border-radius: 40px;
  animation: rotateElement linear 15s infinite;
  box-shadow: 10px 50px 0 3px white, 50px -15px 0 2px white,
    70px 70px 0 -1px white, 100px 25px 0 1px white, 110px 105px 0 -4px white,
    140px 75px 0 -3px white, 250px -25px 0 -1px white, 210px 50px 0 1px white,
    340px 130px 0 1px white, 400px 0px 0 0 white, 410px 50px 0 3px white,
    500px 25px 0 1px white, 450px -15px 0 2px white, 470px 70px 0 -1px white,
    540px 75px 0 -3px white, 510px 105px 0 -4px white, 650px -25px 0 -1px white,
    610px 50px 0 1px white, 740px 130px 0 1px white;
}

.earth--shadow {
  height: 100%;
  width: 100%;
  border-radius: 50%;
  position: absolute;
  background-color: transparent;
  z-index: 4;
  box-shadow: inset -30px 0 rgba(0, 0, 0, 0.1);
}

.moon {
  height: 20px;
  width: 20px;
  border-radius: 50%;
  position: absolute;
  background-color: #a5a5a5;
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -40%);
  overflow: auto;
  z-index: 10;
  box-shadow: inset -3px 0 rgba(0, 0, 0, 0.2);
  animation: moonOrbit ease-in-out 15s infinite;
}
.moon:after {
  content: "";
  height: 5px;
  width: 5px;
  border-radius: 50%;
  background: gray;
  position: absolute;
  top: 8px;
  left: 10px;
  box-shadow: -4px 3px 0 -1px gray, 4px 2px 0 -1px gray, -2px -6px 0 -1px gray;
}

.stars {
  display: none;
  height: 10px;
  width: 10px;
  border-radius: 50%;
  position: absolute;
  background-color: white;
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -40%);
  overflow: auto;
  z-index: 1;
  box-shadow: 510px -450px 0 1px white, 490px -125px 0 -2px white,
    150px -150px 0 -1px white, 130px 270px 0 -1px white,
    480px 475px 0 -3px white, -610px 605px 0 -4px white,
    570px 750px 0 -3px white, -550px 425px 0 1px white,
    650px -105px 0 -2px white, 310px 60px 0 -1px white,
    -340px 175px 0 -3px white, -610px 1205px 0 -4px white,
    500px 450px 0 -3px white, -500px 125px 0 1px white,
    -150px -615px 0 -2px white, -110px -370px 0 -1px white,
    -440px -175px 0 -3px white, -610px -205px 0 -4px white,
    410px -450px 0 -3px white, 390px -125px 0 -2px white,
    50px -250px 0 -1px white, 30px -170px 0 -1px white, 380px 375px 0 -5px white,
    -710px 705px 0 -6px white, 470px -650px 0 -3px white,
    -450px 425px 0 1px white, 550px -205px 0 -5px white, 210px 50px 0 -1px white,
    -240px 275px 0 -5px white, -510px 120px 0 -4px white,
    600px 550px 0 -3px white, -400px 225px 0 1px white,
    -250px -515px 0 -2px white, -310px -170px 0 -4px white,
    -340px -275px 0 -4px white, -510px -305px 0 -5px white;
}


@keyframes rotateElement {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-400px, 0);
  }
}

@keyframes moonOrbit {
  0% {
    transform: translate(-250px, 0);
    z-index: 10;
  }
  20% {
    z-index: -1;
  }
  50% {
    transform: translate(250px, 0);
  }
  100% {
    transform: translate(-250px, 0);
  }
}







.logo {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translate(-50%, -10%);
  overflow: hidden;
  z-index: 10;
  text-align: center;
  width: 100%;
}

.logo img {
  width: 80%;
  max-width: 400px;
  background-color: #021826;
}

.footer {
  position: absolute;
  top: 75%;
  left: 50%;
  transform: translate(-50%, -75%);
  overflow: hidden;
  z-index: 10;
  text-align: center;
  color: #FFFFFF;
  width: 100%;
background-color: #021826;
}

@media (max-width: 430px) {
    .footer {
      top: 80%;
      transform: translate(-50%, -80%);
    }
}

.footer .head {
font-size: calc(18px + 2vw);
    font-weight: 700;
    color: #ffffff;
    line-height: calc(36px + 2vw);
    letter-spacing: 2px;
  width: 80%;
  max-width: 800px;
margin: auto auto 10px auto;
}
.footer .sub {
font-size: calc(10px + 0.5vw);
    font-weight: 300;
    color: #ffffff;
    line-height: calc(20px + 0.5vw);
    letter-spacing: 1px;
  width: 80%;
  max-width: 800px;
margin: auto;
}

a {
  color: #FFFFFF;
  position: relative;
  text-decoration: none;
}

a:after {
    content: '';
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 1px;
    border-width: 0 0 1px;
    border-style: solid;
}