* {
  box-sizing: border-box;
}

body {
  font-family: Arial;
  margin: 0;  
}

/* Header */
header {
  padding: 5px;
  text-align: center;
  background: #ff8800;
  color: black;
  font-family: 'playfair display';
}


.navbar {
  display: flex;
  background-color: #333;
}

.navbar a {
  color: white;
  padding: 14px 20px;
  text-decoration: none;
  text-align: center;
}

.navbar a:hover {
  background-color: #ff8800;
  color: black;
}

.container {  
  display: flex;
  flex-wrap: wrap;
}

.side {
  flex: 30%;
  background-color: black;
  padding: 20px;
  color: white;
}

.fourthofjulyimg {
  background-image: url(https://th.bing.com/th/id/R.dd715c3f90cb10b10762fae7e97f4879?rik=eElrLgGUHaw0hw&riu=http%3a%2f%2fchbcamphalf-blood.weebly.com%2fuploads%2f5%2f2%2f7%2f5%2f52752499%2f3204301.jpg%3f250&ehk=q5LFk5S6j7BiqX9OCHkekz%2bvWVvTwcJuX8jaBXDL%2biE%3d&risl=&pid=ImgRaw&r=0&adlt=strict);
  background-repeat: no-repeat;
  padding: 20px;
}

.questimg {
 background-image: url(https://tse1.mm.bing.net/th/id/OIP.L1XxU2zw0-mBy85qKwznrwHaEY?pid=ImgDet&w=131&h=77.60326086956522&c=7&dpr=1.3&o=7&rm=3&adlt=strict);
 background-repeat: no-repeat;
 padding: 20px;
}
  

.main {
  flex: 70%;
  background-color: #f1f1f1;
  padding: 20px;
}

footer a{
  color: white;
  text-decoration: none;
}

footer a:hover{
  color: #ADD8E6;
}

footer h6{
  color:grey;
  text-decoration: none;
  }
  
  footer h6:hover{
    color:white;
    }

footer {
  padding: 20px;
  text-align: left;
  background-color: black;
  color: white;
}

@media screen and (max-width: 500px) {
  .container, .navbar {   
    flex-direction: column;
  }
}