/* removes white space around */
*{

 margin: 0; 
 padding: 0; 
 box-sizing: border-box; 

}

.mainpage {
    background-image: url(https://www.shutterstock.com/shutterstock/videos/22001746/thumb/1.jpg?ip=x480);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    min-height: 100vh;
}
.tatooine-page {
    background-image: url(tatoinestars.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    min-height: 100vh;
}
.naboo-page {
    background-image: url("naboostars.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 100vh;
}
.coruscant-page {
    background-image: url("corusantstars.png"); 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 100vh;
}
.deathstar-page {
    background-image: url("deathstars.png"); 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 100vh;
}
.mustafar-page {
    background-image: url("mustafarstars.png"); 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 100vh;
}
.planet{
    width: 300px;
    height: 300px;
      position: absolute;
    top: 2%;
    left: 4%;
  
}
    .courcant{
         width: 480px;
    height: 270px;
      position: absolute;
    top: 60%;
    left: 15%;   
    }
    .naboo{
              width: 480px;
    height: 300px;
      position: absolute;
    top: 20%;
    left: 30%;    
    }
    .death{
          width: 300px;
    height: 300px;
      position: absolute;
    top: 45%;
    left: 62%;  
    }
    .mustafar{
                width: 300px;
    height: 300px;
      position: absolute;
    top: 5%;
    left: 75%;   
    }
.star{
       width: 400px;
    height: 300px;
      position: absolute;
    top: 0%;
    left: 35%;   
}
.pod{
   width: 1000px;
    height: 700px;
      position: absolute;
    top: 200%;
    left: 20%; 
}
.jarjar{
  width: 800px;
    height: 550px;
      position: absolute;
    top: 200%;
    left: 20%; 
}
.speeder{ 
 width: 600px;
    height: 400px;
      position: absolute;
    top: 230%;
    left: 20%; 
}
.fight{
  width: 800px;
    height: 500px;
      position: absolute;
    top: 200%;
    left: -5%; 
}
.vadar{
  width: 300px;
    height: 400px;
      position: absolute;
    top: 220%;
    left: 10%;
}

  h1{
    text-align-last: center;
     font-family: "Special Gothic", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
    line-height: 1.8;
    margin-top: 300px;
     font-size: 25px; 
    color: rgb(255, 232, 59)
}
h2{
   text-align-last: center;
     font-family: "Special Gothic", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
    line-height: 1.8;
    margin-top: 75px;
     font-size: 25px; 
    color: rgb(255, 232, 59)
}
h3{
   text-align-last: center;
     font-family: "Special Gothic", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
    line-height: 1.8;
    margin-top: 75px;
     font-size: 25px; 
    color: rgb(255, 232, 59)
}


   .move-right {
  width: 200px;
  height: 150px;
  position: absolute;

  top: 0;
  left: 0;

  animation: slideDiagonal 4s linear forwards;
}

@keyframes slideDiagonal {
  from {
    top: 0;
    left: 0;
  }

  to {
    top: 100%;
    left: 100%;
    transform: translate(-100%, -100%);
  }

         
      
      
  }