@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;900&display=swap');

body {
  font-family: 'Orbitron', sans-serif;
  height: 100%;
  background-color: black;
  animation: background_color_animation 10.0s infinite alternate;
}

.adventure {
    font-size: calc(1.5em + 3vw);
    font-weight: 600;
    background: linear-gradient(90deg, rgba(0,236,255,1) 0%, rgba(116,71,241,1) 50%, rgba(255,0,153,1) 100%);
    background-clip: border-box;
    background-size: 200% auto;
    color: #fff;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: background_color_text_animation 10.0s linear infinite alternate;
}

.adventure_small {
    font-size: calc(1em + 1vw);
    font-weight: 700;
    background: linear-gradient(90deg, rgba(0,236,255,1) 0%, rgba(116,71,241,1) 50%, rgba(255,0,153,1) 100%);
    background-clip: border-box;
    background-size: 200% auto;
    color: #fff;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: background_color_text_animation 10.0s linear infinite alternate;
}

@keyframes background_color_animation {
	to {
        background-color: rgb(0, 2, 91);
	}
}

  @keyframes background_color_text_animation {
    to {
      background-position: 100% center;
    }
  }

.btn-secondary,
.btn-secondary:hover,
.btn-secondary:focus {
  color: #333;
  text-shadow: none; /* Prevent inheritance from `body` */
}

.mb-auto{
  padding: 3%;
}

h3 {
  font-weight: 900;
}

h3, #main_name {
    background: linear-gradient(90deg, rgba(0,236,255,1) 0%, rgba(116,71,241,1) 50%, rgba(255,0,153,1) 100%);
    background-clip: border-box;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.navbar {
    padding-left: 0;
}

@media screen and (min-width: 2560px) {
    .navbar {
        padding-left: 5em;
    }
}

@media screen and (min-width: 3840px) {
    .navbar {
        padding-left: 10em;
    }
}

@media screen and (min-width: 7680px) {
    .navbar {
        padding-left: 15em;
    }
}

.ms-auto {
    padding-right: 200px;
}

@media screen and (max-width: 1200px) {
    .ms-auto {
        padding-right: 0;
    }
}


.nav-link {
    color: rgba(255, 255, 255, .5);
    background-color: transparent;
    border-bottom: .25rem solid transparent;
    font-weight: 900;
}

@media screen and (min-width: 501px) {
    .nav-link {
        font-size: calc(0.2em + 2vw);
    }
}

@media screen and (min-width: 1000px) {
    .nav-link {
        font-size: calc(0.2em + 1vw);
    }
}

.nav-link:hover,
.nav-link:focus {

}

.nav-link {
  margin-left: 1rem;
}

.nav-link:visited {
  color: #fff;
  border-bottom-color: #fff;
}

.btn{
    font-weight: 900;
    font-size: calc(0.7em + 0.7vw);
    width: calc(5em + 5vw);
    margin-left: 2%;
}

.nav-link{
    font-weight: 900;
    font-size: calc(0.7em + 0.7vw);
    width: calc(5em + 5vw);
    margin-left: 2%;
}

.nav-link .btn:hover {
  color: #ffffff;
}

@media screen and (max-width: 501px) {
    .nav-link .btn {
        width: calc(5em + 5vw);
        margin-top: 5%;
        margin-left: 5%;
    }
}

footer {
    font-size: calc(0.5em + 0.5vw);
    padding-top: 1rem;
}

#stars {
    width: 1px;
    height: 1px;
    background: transparent;
    animation: animStar 70s linear infinite;
}

#stars2 {
    width: 2px;
    height: 2px;
    background: transparent;
    animation: animStar 90s linear infinite;
}

#stars3 {
    width: 4px;
    height: 4px;
    background: transparent;
    border-radius: 4px;
    animation: animStar 100s linear infinite;
}

@keyframes animStar {
    from {
        transform: translateY(0px);
    }

    to {
        transform: translateY(-2000px);
    }
}

.ufo_high {
  width: calc(0.5em + 2vw);
  position: absolute;
  animation: infinite linear alternate;
  animation-name: ufo_fly_high;
  animation-duration: 20s;
  left: 20px;
  top: 30px;
}

@keyframes ufo_fly_high {
  0%   {top:5%;width: 0;}
  5%   {top:10%;}
  10%  {top:5%;}
  15%  {top:15%;}
  40%  {top:5%;width: calc(0.5em + 3vw);}
  80%  {top:15%;}
  90%  {top:15%;left:90%;width: 0;}
  100% {width: 0;}
}

.lead {
    font-size: calc(0.5em + 2vw);
}

.download_button {
    position: relative;
    font-weight: 700;
    border: 0.15vw solid rgb(0,236,255);
    text-decoration: none;
    padding: 1%;
    text-transform: uppercase;
    color: white;
    border-radius: 2em;
    transition: all 0.2s ease-in-out;
    display: block;
    text-align: center;
    background-color: #000d369f;
    font-size: calc(0.7em + 0.7vw);
}

@media screen and (max-width: 500px) {
    .download_button{
        width: 100%;
    }
}

.download_button:hover {
    background-color: #0018689f;
    border: 0.15vw solid rgb(255,0,153);
    color: white;
    transition: all 0.2s ease-in-out;
}

.download_button:after {
    content: "";
    display: block;
    position: absolute;
    border-radius: 4em;
    left: 0;
    top:0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: all 0.5s;
    box-shadow: 0 0 10px 40px white;
}

.download_button:active:after {
    box-shadow: 0 0 0 0 white;
    position: absolute;
    border-radius: 4em;
    left: 0;
    top:0;
    opacity: 1;
    transition: 0s;
}

.download_button:active {
    top: 1px;
}

.px-3 {
    padding: 2%;
}

.ufo_low {
    position: absolute;
    left: 90%;
    top: 60%;
    animation: infinite alternate linear;
    animation-name: ufo_fly_low;
    animation-duration: 10s;
    width: calc(5em + 5vw);
}

#ufo_spaceship {
    position: absolute;
}

#ufo_inside {
    position: absolute;
}

.ufo_high {
  width: calc(0.5em + 2vw);
  position: absolute;
  animation: infinite linear alternate;
  animation-name: ufo_fly_high;
  animation-duration: 20s;
  left: 20px;
  top: 30px;
}

@keyframes ufo_fly_low {
  0%   {left:85%;}
  15%  {top:90%;}
  25%  {top:75%;}
  40%  {top:85%;}
  50%  {top:90%;}
  60%  {top:85%;}
  80%  {top:90%;}
  100% {left:0%;top:50%;}
}


#ufo_propulsion2 {
    position: absolute;
    animation: infinite alternate;
    animation-name: ufo_propulsion_opacity2;
    animation-duration: 0.8s;
    z-index: -1;
}

#ufo_propulsion {
  animation: infinite alternate;
  animation-name: ufo_propulsion_opacity;
  animation-duration: 0.5s;
}

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

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

#red_dot {
    fill: red;
    animation: alarmOn 0.5s infinite;
}

@keyframes alarmOn {
    to {
        opacity: 0.0;
    }
}

#moon_div {
  position: absolute;
  width: 2%;
  animation: moon_orbit 30s infinite linear;
}

#moon {
  position: absolute;
  right: 9%;
  top: 1%;
  animation: spin 15s infinite linear;
}

@keyframes moon_orbit {
  0%   {top:1%;right:9%;}
  25%  {top:8%;right:4%;}
  50%  {top:15%;right:9%;}
  75%  {top:8%;right:15%;}
  100% {top:1%;right:9%;}
}

#mars {
  position: absolute;
  left: 5%;
  top: 43%;
  width: 10%;
}


#planet_stars {
  animation: sparkle 2.0s infinite ease-in-out alternate;
}

@keyframes sparkle {
  0% {
    opacity: 1;
    transform: translateY(2%);
  }
  100% {
    opacity: 0.3;
    transform: translateY(-2%);
  }
}

#planet_stars2{
  animation: sparkle2 5.0s infinite ease-in-out alternate;
}

@keyframes sparkle2 {
  0% {
    opacity: 1;
    transform: translateY(2%);
  }
  100% {
    opacity: 0.3;
    transform: translateY(-2%);
  }
}

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

#mars_blue {
  position: absolute;
  width: 6%;
  right: 8%;
  top: 8%;
  transform: rotateZ(120deg);
}

#moon_div {
  position: absolute;
  width: 2%;
  animation: moon_orbit 30s infinite linear;
}

#moon {
  position: absolute;
  right: 9%;
  top: 1%;
  animation: spin 15s infinite linear;
}

@keyframes moon_orbit {
  0%   {top:1%;right:9%;}
  25%  {top:8%;right:4%;}
  50%  {top:15%;right:9%;}
  75%  {top:8%;right:15%;}
  100% {top:1%;right:9%;}
}

#mars {
  position: absolute;
  left: 5%;
  top: 43%;
  width: 10%;
}

#green_mars {
  position: absolute;
  right: 4%;
  width: 17%;
  top: 50%;
  transform: rotateZ(50deg);
}

.mars_rings{
  animation: hover 2s infinite ease-in-out alternate;
}
.hover {
  animation: hover2 2s infinite ease-in-out alternate;
}

.mars_rings2,
.hover2 {
  animation: hover2 4s infinite ease-in-out alternate;
}

@keyframes hover {
  0% {
    transform: translateY(5%);
  }
  100% {
    transform: translateY(-5%);
  }
}

@keyframes hover2 {
  0% {
    transform: translateY(5%);
    opacity: 1.0;
  }
  100% {
    transform: translateY(-5%);
    opacity: 0.5;
  }
}


input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active{
    -webkit-background-clip: text;
    -webkit-text-fill-color: #ffffff;
    box-shadow: inset 0 0 20px 20px #23232329;
}