body{
  margin: 30px;
  background-color: rgb(255, 247, 187);
}
  
h3{
  text-align: center;
  font-family: 'Josefin Sans', sans-serif;
}

p{
  font-family: 'Roboto', sans-serif;
}

nav{
  background-color:rgb(255, 226, 0);
  color:#000000;
  width:100%;
  margin: auto;
  font-family: 'rubik', sans-serif;
  text-align:center; 
  padding:2% 16% 2% 16%;
  max-width:68%;
  font-size:18px;
}

#title{
  text-align: center;
  background-size: cover;
  background-image: url(black.jpg);
}
#title h1{
  font-family: 'Rubik', sans-serif;
  text-align: center;
  color: white;
  font-size: 200%;
}
#intro{
  padding: 50px;
  color: rgb(255, 226, 0);
  background-size: cover;
  background-image:url(earth.jpg);
  font-size: 20px;
}
#condition{
  padding: 50px;
  background-size: cover;
  background-color: rgb(255, 226, 0);
  font-size: 20px;
}
#research {
  padding: 50px;
  color: rgb(255, 226, 0);
  background-size: cover;
  background-color: black;
  font-size: 20px;
}

#death{
  padding: 50px;
  color: rgb(255, 255, 255);
  background-size: cover;
  background-image:url(stars.jpg);
  font-size: 20px;
}

@media (max-width: 500px){
  h1{
    padding: 0% 10% 0% 11%;
  }
  #intro{
    font-size: 18px;
    padding: 8%;
    position:static;
  }
  #condition{
    font-size: 18px;
    color: white;
    padding: 8%;
    position:static;
    background-image:url(born.jpg);
  }
  #condition img{
    margin: auto;
    resize: both;
    width: 100%;
  }
  #research{
    font-size: 18px;
    padding: 8%;
    position:static;
    background-image:url(outer.jpg);
  }
  #research img{
    margin: auto;
    resize: both;
    width: 100%;
  }
  #death{
    font-size: 18px;
    padding: 8%;
    position:static;
    background-image:url(clouds.jpeg);
  }
  #death img{
    margin: auto;
    resize: both;
    width: 100%;
  }
  #resource{
    font-size: 12px;
    text-align:center;
  }
}