* {
  box-sizing: border-box;
}

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

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

/* Top navigation bar */
.navbar {
  display: flex;
  background-color: #333;
}

/* Navigation bar links */
.navbar a {
  color: white;
  padding: 14px 20px;
  text-decoration: none;
  text-align: center;
}

/* Change color on hover */
.navbar a:hover {
  background-color: #ff8800;
  color: black;
}

/* Column container */
.container {  
  display: flex;
  flex-wrap: wrap;
}

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

.chironimg {
  background-image: url(https://tse4.mm.bing.net/th/id/OIP.7u7aQndVM80kvWyzm2Dl_wHaMa?pid=ImgDet&w=129.375&h=180&c=7&dpr=1.3&o=7&rm=3&adlt=strict);
   background-repeat: no-repeat;
  padding: 100px;
}

.festusimg{
  background-image: url(https://tse4.mm.bing.net/th/id/OIP.phbE4ZQc_B3saaT9EzfZDgHaIz?pid=ImgDet&w=131&h=155.60243902439024&c=7&dpr=1.3&o=7&rm=3&adlt=strict);
  background-repeat: no-repeat;
  padding: 100px;
}
/* Main column */
.main {
  flex: 70%;
  background-color: white;
  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;
  }
}