body {
     color: #531818;
     font-family: "Lisu Bosa", 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: #d8654b; /* orage red */ 
  color: #531818; /* dark red font */
  padding: 0;
  border-radius: 10px;

  height: 84px;

}

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

nav {
  grid-area: nav;
  background-color: #e9acbe; /* light purple nav background */
}

main{
  grid-area: main;
  background-color: #ffa9a9; /* light pink */
}

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

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

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


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

h1, h2, h3 {
  font-family: "Permanent Marker", 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: #000000;}
a:visited {color: #000000;}
a:hover {color: #531818;} /* links go black to dark red when hovered over */


/* Top Nav */
nav a{text-decoration: none;}
nav a:link, nav a:visited {color:#000000;}
nav a:hover {color: #c26c6c;} /* when home sources and contact are hovered over they go from black to greyish pink*/

/* ---- Drop DownMneu ---- */
/* Style The Dropdown Button */
.dropbtn {
  /* background-color: #ffd38d; */
  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: #ffa9a9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.red{
  background-color: #d8654b;
}

.purple{
  background-color: #906598;
}

.green{
  background-color: #acc9c6;
}


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

/* Change color of dropdown links on hover */
.dropdown-content a:hover {
background-color: #000000;
filter:opacity(25%);
color: #ffffff;}

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

/* Change the background color of the classes button when the dropdown content is shown */
.dropdown:hover .dropbtn {
  background-color: #e6bae6;
  color: #531818;
}