body {
     color: #5d4620;
     font-family: "Farsan", serif ;
     font-size: 125% ;
      }
    
/* ---- Set up site grid ---- */
.wrapper {
  display: grid;
  grid-template-columns: 1fr 400px;
  grid-template-rows: auto;
  grid-template-areas:
    "header header"
    "nav nav"
    "main aside"
    "footer footer";
  grid-gap: 4px;
}

header {
  grid-area: header;
  background-color: #d1a560; /* mid brown */ 
  color: #5d4620; /* dark brown font */
  padding: 0;
  border-radius: 10px;

  height: 84px;

}

/* border width */
nav, main, aside {
  border-style: solid;
  border-width: 1px;
  border-color:#927039;
}

nav {
  grid-area: nav;
  background-color: #ffcd7e; /* dark honey */
}

main{
  grid-area: main;
  background-color: #ffd38d; /* light honey */
}

aside{
  grid-area: aside;
  background-color: #d1a560;
}

footer{
  grid-area: footer;
  background-color: #d1a560; 
  text-align: right;
}

/* ---- General formatting ---- */


.box{
  padding: 20px;
  border-radius: 10px;
}

h1, h2, h3 {
      font-family: "Julee", serif
}

h1 {
  font-size: 300% ;
  padding-left: 150px;
  margin: auto;

  /* -- transform to vertically center heading */
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);

}

img.roundleft{
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  float: left;
}


/* ---- Link Formatting ---- */

/* Links in main and sidebar */
a:link {color: #5d4620;}
a:visited {color: #0000;}
a:hover {color: #926f39;} /* dark-mid brown */


/* Top Nav */
nav a{text-decoration: none;}
nav a:link, nav a:visited {color:#5d4620;}
nav a:hover {color: #926f39;} /* side bar bg color */

/* ---- Drop DownMneu ---- */
/* Style The Dropdown Button */
.dropbtn {
  /* background-color: #ffd38d; */
  color: #5d4620;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
/* Customised from
https://www.w3schools.com/Css/css_dropdowns.asp */

.littlearrow {
  font-size: 75%;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #ffd38d;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: #5d4620;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #5d4620;
color: #ffd38d;}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
  background-color: #5d4620;
  color: #ffd38d;
}