body{
    background-color: #000;
}

.main {
    position: fixed;
    top: 50%;
    left: 50%;  
    background-color: #fff;
    border-radius: 50%;
    box-shadow: -42vw -4vh 0px 0px #fff,25vw -41vh 0px 0px #fff,-20vw 49vh 0px 1px #fff,5vw 40vh 1px 1px #fff,29vw 19vh 1px 0px #fff,-44vw -13vh 0px 0px #fff,46vw 41vh 0px 1px #fff,-3vw -45vh 0px 1px #fff,47vw 35vh 1px 0px #fff,12vw -8vh 1px 0px #fff,-34vw 48vh 1px 1px #fff,32vw 26vh 1px 1px #fff,32vw -41vh 1px 1px #fff,0vw 37vh 1px 1px #fff,34vw -26vh 1px 0px #fff,-14vw -49vh 1px 0px #fff,-12vw 45vh 0px 1px #fff,-44vw -33vh 0px 1px #fff,-13vw 41vh 0px 0px #fff,-36vw -11vh 0px 1px #fff,-23vw -24vh 1px 0px #fff,-38vw -27vh 0px 1px #fff,16vw -19vh 0px 0px #fff,28vw 33vh 1px 0px #fff,-49vw -4vh 0px 0px #fff,16vw 32vh 0px 1px #fff,36vw -18vh 1px 0px #fff,-25vw -30vh 1px 0px #fff,-23vw 24vh 0px 1px #fff,-2vw -35vh 1px 1px #fff,-25vw 9vh 0px 0px #fff,-15vw -34vh 0px 0px #fff,-8vw -19vh 1px 0px #fff,-20vw -20vh 1px 1px #fff,42vw 50vh 0px 1px #fff,-32vw 10vh 1px 0px #fff,-23vw -17vh 0px 0px #fff,44vw 15vh 1px 0px #fff,-40vw 33vh 1px 1px #fff,-43vw 8vh 0px 0px #fff,-48vw -15vh 1px 1px #fff,-24vw 17vh 0px 0px #fff,-31vw 50vh 1px 0px #fff,36vw -38vh 0px 1px #fff,-7vw 48vh 0px 0px #fff,15vw -32vh 0px 0px #fff,29vw -41vh 0px 0px #fff,2vw 37vh 1px 0px #fff,7vw -40vh 1px 1px #fff,15vw 18vh 0px 0px #fff,25vw -13vh 1px 1px #fff,-46vw -12vh 1px 1px #fff,-18vw 22vh 0px 0px #fff,23vw -9vh 1px 0px #fff,50vw 12vh 0px 1px #fff,45vw 2vh 0px 0px #fff,14vw -48vh 1px 0px #fff,23vw 43vh 0px 1px #fff,-40vw 16vh 1px 1px #fff,20vw -31vh 0px 1px #fff,-17vw 44vh 1px 1px #fff,18vw -45vh 0px 0px #fff,33vw -6vh 0px 0px #fff,0vw 7vh 0px 1px #fff,-10vw -18vh 0px 1px #fff,-19vw 5vh 1px 0px #fff,1vw 42vh 0px 0px #fff,22vw 48vh 0px 1px #fff,39vw -8vh 1px 1px #fff,-6vw -42vh 1px 0px #fff,-47vw 34vh 0px 0px #fff,-46vw 19vh 0px 1px #fff,-12vw -32vh 0px 0px #fff,-45vw -38vh 0px 1px #fff,-28vw 18vh 1px 0px #fff,-38vw -46vh 1px 1px #fff,49vw -6vh 1px 1px #fff,-28vw 18vh 1px 1px #fff,10vw -24vh 0px 1px #fff,-5vw -11vh 1px 1px #fff,33vw -8vh 1px 0px #fff,-16vw 17vh 0px 0px #fff,18vw 27vh 0px 1px #fff,-8vw -10vh 1px 1px #fff;
  
  /* stars were too big with the layers above but left the code in case no one cares  -- as in, if noone's just that  one other loner who actually cares    */
  
  box-shadow: 24vw 9vh 1px 0px #fff,12vw -24vh 0px 1px #fff,-45vw -22vh 0px 0px #fff,-37vw -40vh 0px 1px #fff,29vw 19vh 0px 1px #fff,4vw -8vh 0px 1px #fff,-5vw 21vh 1px 1px #fff,-27vw 26vh 1px 1px #fff,-47vw -3vh 1px 1px #fff,-28vw -30vh 0px 1px #fff,-43vw -27vh 0px 1px #fff,4vw 22vh 1px 1px #fff,36vw 23vh 0px 0px #fff,-21vw 24vh 1px 1px #fff,-16vw 2vh 1px 0px #fff,-16vw -6vh 0px 0px #fff,5vw 26vh 0px 0px #fff,-34vw 41vh 0px 0px #fff,1vw 42vh 1px 1px #fff,11vw -13vh 1px 1px #fff,48vw -8vh 1px 0px #fff,22vw -15vh 0px 0px #fff,45vw 49vh 0px 0px #fff,43vw -27vh 1px 1px #fff,20vw -2vh 0px 0px #fff,8vw 22vh 0px 1px #fff,39vw 48vh 1px 1px #fff,-21vw -11vh 0px 1px #fff,-40vw 45vh 0px 1px #fff,11vw -30vh 1px 0px #fff,26vw 30vh 1px 0px #fff,45vw -29vh 0px 1px #fff,-2vw 18vh 0px 0px #fff,-29vw -45vh 1px 0px #fff,-7vw -27vh 1px 1px #fff,42vw 24vh 0px 0px #fff,45vw -48vh 1px 0px #fff,-36vw -18vh 0px 0px #fff,-44vw 13vh 0px 1px #fff,36vw 16vh 0px 1px #fff,40vw 24vh 0px 0px #fff,18vw 11vh 0px 0px #fff,-15vw -23vh 1px 0px #fff,-24vw 48vh 0px 1px #fff,27vw -45vh 1px 0px #fff,-2vw -24vh 0px 1px #fff,-15vw -28vh 0px 0px #fff,-43vw 13vh 1px 0px #fff,7vw 27vh 1px 0px #fff,47vw 5vh 0px 0px #fff,-45vw 15vh 1px 1px #fff,-5vw -28vh 0px 1px #fff,38vw 25vh 1px 1px #fff,-39vw -1vh 1px 0px #fff,5vw 0vh 1px 0px #fff,49vw 13vh 0px 0px #fff,48vw 10vh 0px 1px #fff,19vw -28vh 0px 0px #fff,4vw 7vh 0px 0px #fff,21vw 21vh 1px 1px #fff,-15vw -15vh 0px 1px #fff,-6vw -42vh 1px 0px #fff,-15vw 48vh 1px 1px #fff,-23vw 25vh 1px 1px #fff,-48vw 25vh 0px 1px #fff,-31vw -19vh 0px 1px #fff,4vw 37vh 1px 1px #fff,-43vw 28vh 0px 0px #fff,3vw -25vh 0px 1px #fff,-39vw 14vh 0px 1px #fff,-40vw 31vh 0px 1px #fff,35vw -36vh 1px 1px #fff,16vw 49vh 0px 0px #fff,6vw 39vh 0px 0px #fff,3vw -35vh 0px 1px #fff,-44vw -2vh 1px 0px #fff,-6vw 21vh 1px 0px #fff,48vw 9vh 1px 1px #fff,-43vw 30vh 1px 1px #fff,29vw -12vh 1px 1px #fff,-48vw 13vh 1px 0px #fff,-42vw 32vh 1px 1px #fff,34vw 15vh 1px 1px #fff,29vw -37vh 1px 1px #fff,28vw 2vh 0px 0px #fff;
  animation: zoom 16s alternate infinite; 
}

@keyframes zoom {
    0%{
        transform: scale(1);
    }
    100%{
        transform: scale(1.5);
    }
}

#textInfo{

}
#companyName h2{
 text-align:center;
 font-size:55px;
 color:white;
}

#soonText h2{
	padding-top:50px;
 text-align:center;
 font-size:55px;
 color:white;
}
/**/

$i: 0;

@while $i < 3 {
  #orbit#{$i} {
    @extend .orbit;
    animation-delay:-$i+s;
  }
  #pos#{$i}{
    @extend .pos;
    animation-delay:-$i+s;
  }
  #dot#{$i}{
    @extend .dot;
    animation-delay:-$i+s;
  }
  $i: $i+1;
}
 

#universe {
  z-index: 1;
  position: absolute;
  width: 95%;
  height: 95%;
}

#galaxy {
  transform: rotateX(75deg);
  transform-style: preserve-3d;
  position: relative;
  width: 100%;
  height: 100%;
}

.circle {
  border-radius: 50%;
  border: 1px solid #eee;
  width: 1em;
  height: 1em;
  margin-top: -.5em;
  margin-left: -.5em;
  -webkit-animation: spinner 1.5s infinite ease;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: rotateX(-75deg);
}

.circle2 {
  border-radius: 50%;
  border: 1px solid #eee;
  width: 1em;
  height: 1em;
  margin-top: -.5em;
  margin-left: -.5em;
  -webkit-animation: spinner2 2s infinite ease;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: rotateX(-75deg);
}

.circle3 {
  border-radius: 50%;
  border: 1px solid #eee;
  width: 1em;
  height: 1em;
  margin-top: -.5em;
  margin-left: -.5em;
  -webkit-animation: spinner3 2.5s infinite ease;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: rotateX(-75deg);
}


.orbit {
  transform-style: preserve-3d;
  position: absolute;
  top: 50%;
  left: 50%;
   animation-name: orbit;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  width: 8em;
  height: 8em;
  margin-top: -4em;
  margin-left: -4em;
  border-radius: 50%;
}

.pos {
  position: absolute;
  width: 2em;
  height: 2em;
  margin-left: -1em;
  margin-top: -1em;
  animation-name: invert;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  left: 50%;
  top: -1px;
}

.dot {
  background-color: #eee;
  width: .5em;
  height: .5em;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -.25em;
  margin-left: -.25em;
  border-radius: 50%;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}


/* Planet animation durations */

.orbit,
.pos {
  animation-duration: 3s;
}

.circle{
  font-size: 6em;
}
.circle2 {
  font-size: 5em;
}
.circle3 {
  font-size: 4em;
}

.dot {
  font-size: 0.2em;
}

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

@keyframes invert {
  0% {
    transform: rotateX(-90deg) rotateY(360deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
  }
}

@keyframes spinner {
  0% {
    -webkit-transform: rotate3d(1, 0, 1, 0deg);
  }
  50% {
    -webkit-transform: rotate3d(1, 0, 1, 180deg);
  }
  100% {
    -webkit-transform: rotate3d(1, 0, 1, 360deg);
  }
}

@keyframes spinner2 {
  0% {
    -webkit-transform: rotate3d(0, 1, 1, 0deg);
  }
  50% {
    -webkit-transform: rotate3d(0, 1, 1, 180deg);
  }
  100% {
    -webkit-transform: rotate3d(0, 1, 1, 360deg);
  }
}

@keyframes spinner3 {
  0% {
    -webkit-transform: rotate3d(1, 1, 0, 0deg);
  }
  50% {
    -webkit-transform: rotate3d(1, 1, 0, 180deg);
  }
  100% {
    -webkit-transform: rotate3d(1, 1, 0, 360deg);
  }
}


/*-------------*/

body{
 
}
.backg{
  position:relative;
  height:500px;
  width:500px;
  border-radius:50%;
  background-color:rgba(0,0,0,0.1);
  transform:scale(0.7);
  }
.planet{
  height:200px;
  width:200px;
  border-radius: 50%;
  position: relative;
  background-color: #ff9933;
  top:45px;
  left:220px;
}
.r1{
  background-color: #ffbf80;
  height:20px;
  width:110px;
  border-radius:10px;
  position: relative;
  top:60px;
  left:85px;
}
.r2{
  background-color: #ffbf80;
  height: 15px;
  width:90px;
  border-radius:6.5px;
  position: relative;
  top:80px;
  left:110px;
}
.r3{
  background-color: #ffbf80;
  height:30px;
  width:120px;
  border-radius: 15px;
  position: relative;
  top:78px;
  left:50px;
}
.r4{
  background-color: #ffbf80;
  height:22px;
  width:90px;
  border-radius:11px;
  position: relative;
  top:70px;
  left:12px;
}
.r5{
  background-color: rgba(204, 102, 0,0.3);
  height:15px;
  width:40px;
  border-radius:7.5px;
  position: relative;
  bottom:50px;
  left:70px;
}
.r6{
  background-color: rgba(204, 102, 0,0.3);
  height:20px;
  width:60px;
  border-radius:11px;
  position: relative;
  bottom:25px;
  left:10px;
}
.r7{
  background-color: rgba(204, 102, 0,0.3);
  height:15px;
  width:45px;
  border-radius:7.5px;
  position: relative;
  top:40px;
  left:130px;
}
.r8{
  background-color: rgba(255,255,255,0.4);
  height:12px;
  width:30px;
  border-radius:7.5px;
  position: relative;
  top:7px;
  left:32px;
}
.shad{
  background-color: transparent;
  box-shadow: 15px 15px rgba(204, 102, 0,0.3);
  position: relative;
  height:200px;
  width:200px;
  border-radius: 50%;
  bottom: 164px;
  right:16px;
}
.astro{
  position: relative;
  left:131px;
  bottom: 250px;
  transform: rotate(-30deg);

}
.an{
  animation-name: flo;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  position: relative;
  bottom: 80px;
  left:20px;

}
@keyframes flo{
  50%{
    transform: translateY(30px);
  }
}
.tank{
  background-color: #a6a6a6;
  height:120px;
  width:120px;
  border-radius: 10px;
  position: relative;
  left:95px;
  top:50px;
  transform: rotate(-30deg);
}
.helmet{
  background-color: white;
  height:93px;
  width:100px;
  border-radius:45%;
  position: relative;
  left:20px;
  z-index: 5;
}
.glass{
  background-color: #666666;
  height:60px;
  width:80px;
  border-top-left-radius:60%;
  border-top-right-radius:60%;
  border-bottom-left-radius:40%;
  border-bottom-right-radius:40%;
  position: relative;
  left:10px;
  top:7px;
}
.shine{
  background-color: rgba(166, 166, 166,0.7);
  height:15px;
  width:15px;
  border-radius: 50%;
  position: relative;
  left:10px;
  top:15px;
}
.dress{
  background-color:#f2f2f2;
  height:100px;
  width: 100px;
  border-radius: 10%; 
  position: relative;
  bottom:5px;
  left:20px;

}
.handr{
  height: 26px;
  width:75px;
  background-color: #f2f2f2;
  border-radius:40px;
  position: relative;
  bottom:138px;
  left:95px;
  transform: rotate(-20deg);
}
.handl{
  height: 26px;
  width:75px;
  background-color: #f2f2f2;
  border-radius:40px;
  position: relative;
  bottom:111px;
  right:29px;
  transform: rotate(20deg);
}
.handr1{
  height: 26px;
  width:57px;
  background-color: #f2f2f2;
  border-radius:26px;
  position: relative;
  bottom: 18px;
  left:35px;
  transform: rotate(90deg);
}
.handl1{
  height: 26px;
  width:57px;
  background-color: #f2f2f2;
  border-radius:26px;
  position: relative;
  bottom: 17px;
  right:17px;
  transform: rotate(-90deg);
}
.glover{
  height:28px;
  width:26px;
  background-color: white;
  border-top-left-radius:50%; 
  border-top-right-radius:50%;
  transform: rotate(-90deg);
  position: relative;
  bottom: 1px;
  right:16px;
}
.glovel{
  height:28px;
  width:26px;
  background-color: white;
  border-top-left-radius:50%; 
  border-top-right-radius:50%;
  transform: rotate(90deg);
  position: relative;
  bottom: 1px;
  left:42px;
}
.thumbr{
  height: 10px;
  width:10px;
  border-radius: 50%;
  background-color: white;
  position: relative;
  right:7px;
  top:19px;
}
.thumbl{
  height: 10px;
  width:10px;
  border-radius: 50%;
  background-color: white;
  position: relative;
  left:21px;
  top:19px;
}
.b1{
  background-color: tomato;
  width:28px;
  height:5.5px;
  border-radius:13px;
  position: relative;
  top:18px;
  right: 1px;
}
.b2{
  background-color: tomato;
  width:28px;
  height:5.5px;
  border-radius:13px;
  position: relative;
  top:18px;
  right: 1px;
}
.c{
  background-color: white;
  width:55px;
  height:30px;
  border-radius:8px;
  position: relative;
  top:25px;
  left:23px;
}
.btn1{
  height:12px;
  width: 12px;
  border-radius: 50%;
  background-color: #4775ff;
  position: relative;
  left:5px;
  top:10px;
}
.btn2{
  height:12px;
  width: 12px;
  border-radius: 50%;
  background-color: #ffd147;
  position: relative;
  left:21px;
  bottom:2px;
}
.btn3{
  height:12px;
  width: 12px;
  border-radius: 50%;
  background-color: tomato;
  position: relative;
  bottom:14px;
  left:38px;
}
.btn4{
  height:20px;
  width:20px;
  border-radius: 50%;
  background-color: #a6a6a6;
  position: relative;
  left:19px;
  top:4px;
}

.legl{
  height:100px;
  width:40px;
  background-color: #f2f2f2;
  position: relative;
  bottom: 68px;
  left:5px;
  transform: rotate(20deg);
}
.legr{
  height:100px;
  width:40px;
  background-color: #f2f2f2;
  position: relative;
  bottom: 168px;
  left:96px;
  transform: rotate(-20deg);
}
.bootl1{
  background-color: white;
  width: 43px;
  height:35px;
  border-top-left-radius: 50%;
  border-top-right-radius:50%;
  position: relative;
  top:65px;
  right:1.5px;
}
.bootr1{
  background-color: white;
  width: 43px;
  height:35px;
  border-top-left-radius: 50%;
  border-top-right-radius:50%;
  position: relative;
  top:65px;
  right:1.5px;
}
.bootl2{
  background-color: tomato;
  width:45px;
  height: 5px;
  border-radius:21px;
  position: relative;
  top:30px;
  right: 1.5px;
}
.bootr2{
  background-color: tomato;
  width:45px;
  height: 5px;
  border-radius:21px;
  position: relative;
  top:30px;
  right: 1.5px;
}
.pipe{
  background-color:  transparent;
  height:80px;
  width:80px;
  border:10px solid #4775ff;
  border-radius:40px 0px 0px 70px;
  border-right: none;
  transform: rotate(180deg);
  position: relative;
  bottom: 330px;
  left:130px;
}
.pipe2{
  background-color:  transparent;
  height:90px;
  width:42px;
  border:10px solid #4775ff;
  border-radius:40px 0px 0px 0px;
  border-right: none;
  transform: rotate(90deg);
  position: relative;
  border-bottom: none;
  left:67px;
  bottom:34px;

}
.pipe3{
  height:10px;
  width: 10px;
  background-color: #4775ff;
  position: relative;
  border-radius: 65%;
  bottom:10px;
  left:37px;
}
.s1,.s2,.s3,.s4,.s5,.s6{
  background-color: white;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  position: relative;
}
.s1{
  bottom:150px;
  left:200px;
}
.s2{
  top:130px;
  left:254px;
}
.s3{
  bottom:98px;
  left:65px;
}
.s4{
  top: 216px;
  left:249px;
}
.s5{
  top: 139px;
  left:100px;
}
.s6{
  top:60px;
  left:370px;
}
a{
    color: white;
    font-size: 25px;
    font-family: "Rubik",sans-serif;
    position:absolute;
    right:20px ;
    top:20px;
    padding:8px 12px 8px 12px;
    border:2px solid white;
    text-decoration:none;
}