@import url('https://fonts.googleapis.com/css?family=Rubik+Mono+One|Saira+Semi+Condensed&display=swap');
 
 body {
     background: linear-gradient(180deg, #18253d, #062783, #364d8b) fixed;
     animation: bg-move 3s linear 0s infinite;
     font-family: 'Saira Semi Condensed', sans-serif;
 }

 /* background color */

 @keyframes bg-move {
     0% {
         background: linear-gradient(60deg, #18253d, #062783, #364d8b) fixed;
     }
     10% {
         background: linear-gradient(80deg, #18253d, #062783, #364d8b) fixed;
     }
     20% {
         background: linear-gradient(100deg, #18253d, #062783, #364d8b) fixed;
     }
     30% {
         background: linear-gradient(120deg, #18253d, #062783, #364d8b) fixed;
     }
     40% {
         background: linear-gradient(140deg, #18253d, #062783, #364d8b) fixed;
     }
     50% {
         background: linear-gradient(160deg, #18253d, #062783, #364d8b) fixed;
     }
     60% {
         background: linear-gradient(140deg, #18253d, #062783, #364d8b) fixed;
     }
     70% {
         background: linear-gradient(120deg, #18253d, #062783, #364d8b) fixed;
     }
     80% {
         background: linear-gradient(100deg, #18253d, #062783, #364d8b) fixed;
     }
     90% {
         background: linear-gradient(80deg, #18253d, #062783, #364d8b) fixed;
     }
     100% {
         background: linear-gradient(60deg, #18253d, #062783, #364d8b) fixed;
     }
 }

 html {
     scroll-behavior: smooth;
 }

 .container {
     display: grid;
     grid-template-rows: repeat(3, 1fr);
     justify-items: center;
     align-items: center;
     color: aliceblue;
 }

 .section-0, .section-1, .section-2, .section-3 {
    display: grid;
    justify-items: center;
    align-items: center;
<<<<<<< HEAD
    margin-top: 7%;
=======

>>>>>>> dd45f2a5f1d3b72fa10e130f7c538ade218c889c
}
 img {
     height: 250px;
     width: 250px;
 }
 #mars{
     height: 100px;
     width: 100px;
     
 }
 h2, h1{
     font-size: 2.5em;
     font-family: 'Rubik Mono One', sans-serif;
 }
 .stars{
     width: 4px;
     height: 4px;
     background-color: rgba(255, 241, 202, 0.8);
     border-radius: 2px;
     box-shadow: 0 0 5px rgba(255, 241, 202, 0.8), 0 0 8px rgba(255, 241, 202, 0.8), 0 0 15px rgba(255, 241, 202, 0.9);
     display: inline-block;
     position: fixed;
     z-index: -1;
 }
 .header{
     width: 40%;
     font-size: 1.5em;
     margin-right: 50%;
     opacity: 0;
     transform: translateX(-80px);
     transition: all 1.2s ease-out;
 }
 .header-blue {
    width: 40%;
    font-size: 1.5em;
    margin-left: 40%;
    opacity: 0;
    transform: translateX(100px);
    transition: all 1.2s ease-out;
 }
  .headerVisible {
    opacity: 1;
    transform: translateX(0);
  }
  .h1title {
    font-weight: 800;
    font-size: 2.6em;
    letter-spacing: 0.02em;
    overflow: hidden;
    grid-column: none;
    margin-bottom: 200px;
  }
  .h1title .letter {
    display: inline-block;
    line-height: 1em;
  }
  #rocket{
      width: 150px;
  }
 /* shooting star */
.shootingstar{
    position: absolute;
    width: 4px;
    height: 4px;
    background-color: rgba(252, 250, 245, 0.8);
    border-radius: 2px;
    box-shadow: 0 0 5px rgba(255, 241, 202, 0.8), 0 0 8px rgba(255, 241, 202, 0.8), 0 0 15px rgba(255, 241, 202, 0.9);
    right: 5%;
  }