body {
  background-color: #ECE0D8;
  margin-left: 20%;
  margin-right: 20%;
  margin-top: 1%;
  margin-bottom: 1%;
}

/* The header */
.heading {
  box-sizing: border-box;
  text-align: center;
  border: 2px solid;
  border-color: #4a3c38;
  border-radius: 5px;
  padding: 2%;
  float: right;
  width: 83%;
  margin-bottom: 2%;
}
.heading h1 {
  font-weight: 300;
}

/* Sidebar Menu */
.sidenav {
  box-sizing: border-box;
  float: left;
  width: 15%;
  border: 2px solid;
  border-color: #4a3c38;
  border-radius: 5px;
  padding: 2%;
  margin-bottom: 1%;
}

/* Sidebar Menu Text & Links */
.sidenav a {
  color: #4a3c38;
  text-decoration: none;
  display: block;
  text-align: center;
  font-size: large;
  height: 98%;
}
.sidenav a:hover, a:active {
  color: #736960;
  background-color: #896b666e;  
}
.sidenav p {
  color: black;
  text-align: center;
}
.sidenav img{
  width: 80%;
}

/* Main content */
.main {
  box-sizing: border-box;
  float: right;
  width: 83%;
  border: 2px solid;
  padding-left: 5%;
  padding-right: 5%;
  padding-top: 5%;
  padding-bottom: 5%;
  border-color: #4a3c38;
  border-radius: 5px;
  margin-bottom: 2%
}
.main a {
  color: #4a3c38;
  text-decoration: none;
  display: block;
  text-align: center; 
}
.main a:hover, a:active {
  color: #736960;  
}
.main figure {
  text-align: center;
}
.main figcaption {
  font-style: italic;
}
.main h2 {
  text-align: center;
  font-weight: 300;
}
.main h3{
  text-align: center;
  font-weight: 300;
}
.main p{
  padding-right: 20%;
  padding-left: 20%;
  font-size: large;
}
.main img {
  max-width: 100%;
  height: 100%;
}

@media screen and (max-width: 600px){
  body{
    margin-left: 1%;
    margin-right: 1%;
  }
  .main {
  width: 78%
  }
  .main img{
    max-width: 100%;
    height: 100%
  }
  .heading {
    font-size: 70%;
    width: 78%;
  }
  .sidenav {
    width: 20%;
  }
  .sidenav a{
    font-size: 100%
  }
  .sidenav img{
    width: 100%;
  }
}