body{
    color: rgb(0, 0, 0);
    

    font-family: "Roboto Condensed", serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
    font-size: 130%;
  
}

/* ----- set up site grid ---- */
.wrapper {
    display: grid;
  grid-template-columns: 1fr 30%;
  grid-template-rows: auto;
  grid-template-areas:
    "header header"
    "nav nav"
    "main aside"
    "footer footer";
    grid-gap: 4px;
}

header {
  grid-area: header;
  background-color: rgb(250, 228, 176);
  color: #fff;
  font-family: 'Courier New', Courier, monospace;
}

/* border width for light areas*/
* nav, main, aside {
       border-style: solid;
      stroke-width: 1px;
}

nav {
  grid-area: nav;
  background-color: rgb(, 210, 230);
  border-color: rgb(255, 255, 255);
}

main {
  grid-area: main;
  background-color: rgb(58, 94, 74);
  border-color: rgb(255, 255, 255);
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

aside {
  grid-area: aside;
  background-color: rgb(124, 36, 37);
  border-color: rgb(255, 255, 255);
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

footer {
  grid-area: footer;
  background-color: rgb(73, 156, 170);
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
} 


/* general formatting -- */



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

h1{
  font-size: 300%;
  font-family: "Josefin Sans", serif;

}

/* ---- link formatting ---- */

/* ---- links in the main section ---- */
a:link {color: #4a2369;}
a:hover {color: #87b6e2;}
a:visited {color: #4a2e6b;}

/* top navigation */
nav a{text-decoration: none;}
nav a:link, nav a:visited {color: rgb(13, 54, 41);}

/* Style The Dropdown Button */
/*https://www.w3schools.com/Css/css_dropdowns.asp*/

.dropbtn {
  background-color: #462c21;
  color: rgb(255, 255, 255);
  padding: 16px;
  font-size: 28px;
  border: none;
  cursor: pointer;
}

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

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #7e2626;
  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: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ba92d1}

/* 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:rgb(80, 50, 36);};