@import url('https://fonts.googleapis.com/css2?family=Kalnia+Glaze:wght@100..700&family=Orbitron:wght@400..900&display=swap');
  
  
/*This is for the heading 1*/
h1 {
  background-color: transparent;
  color: #e6e600;
  font-family: "Kalnia Glaze";
  text-align: center;
}

/*This is for the body element in the HTML*/
body {
  background-image: url("Spacejack.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-color: black;
  color: white;
  font-family: "Orbitron";
}

/*This is the class for the navigation bar at the top of the screen*/
.navBar ul {
  list-style-type: none;
  margin: 12;
  padding: 0;
  overflow: hidden;
  background-color: #00004d;
            
}

/*Nav bar to list, this is what organizes the nav bar at the top*/
.navBar ul li{
  float: left;
}


.navBar ul li a{
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  
}

/*When the mouse hovers over the nav bar, the background of that block will change color, not the whole background */
.navBar ul li a:hover{
    background-color: #00001a;
}

/*T*/
  
.navBar li div .dropDown{
   position: relative;
   display: inline-block;
}

.dropStyle{
  background-color: #00004d;
  font-family: "Orbitron";
  color: white;
  font-size: 16px;
  padding: 16px;
  border: none;
  cursor: pointer;
}

.navBar li div .dropDown .dropDown-box{
  position: absolute;
  
}

.navBar li div .dropDown:hover .dropDown-box{
  display: block;
}