body{
    color: #000;
    font-family: "Roboto Condensed", serif;
 
  }
  
  /* 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;

  }

  /* border for areas*/

header, nav, main, aside, footer {
  border-color: #000;
  padding: 20px;
  border-radius: 10px;
}


  header {
    grid-area: header;
    background-color: #407F7F ; /* light blue*/
    color: white;
    padding: 0;

    height: 84px;
  }

nav, main, aside {
border-style: solid;
border-width: 1px;
}


  nav {
    grid-area: nav;
    background-color: #669999 ; /* lighter blue*/
    color: white;
  }

  main {
    grid-area: main;
    background-color: #0D4D4D ; /* dark blue*/
    color: white;
    
  }

  aside{
    grid-area: aside;
    background-color: #003333 ; /* darker blue*/
    color: white;
  }

  footer{
    grid-area: footer;
    background-color: #407F7F ; /* darker blue*/
    color: white;
    text-align: right;
  }

  /* general formatting */




h1 {
    font-family: "Josefin Sans", serif;
    font-size: 300%;
    padding-left: 150px;
    margin: auto;

    /* transform to vertically centre */
    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 the main section & sidebar */
a:link{color: #ffffff;}
a:visited {color: cyan;}
a:hover {color: #303ad1;} /* navy blue */


/* Top navigation */
nav a{text-decoration: none;}
nav a:link, nav a:visited {color:white;}
nav a:hover {color: navy;}





  /* dropdown menu*/
  /* Style The Dropdown Button */
.dropbtn {
 /* background-color: #4CAF50; */
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

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


.littlearrow{
  font-size: 75%;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #407F7F;
  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: #f1f1f1}

/* 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: #407F7F;
}

iframe{
  width: 85%;
  height: 754px;
  margin: auto;
  border: 0;
}