body{
    color: #000;
        font-family: "Playfair Display", serif;
        font-optical-sizing: auto;
        font-weight: 400;
        font-style: normal;      
}

/* ---- 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: #094281; /* dark blue */
    color: #fff;
    height: 84px;
}

/* border width for light area */
nav, main, aside {
    border-style: solid;
    border-width: 1px;
    border-color: #094281;
}

nav{
    grid-area: nav;
    background-color:#0C5AB1; /* blue */
    color: #fff;
}

main{
    grid-area: main;
    background-color: #76A5D9;  /* light blue */
    color: #fff;
}

aside{
    grid-area: aside;
    background-color: #2E70BA; /* lightish blue */
    color: #fff;
}

footer{
    grid-area: footer;
    background-color: #094281; /* dark blue */
    color: #fff;
}

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


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

h1 {
    font-family: "Montserrat", serif;
    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-radius: 10px;
    float: left;
}


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

/* Links in the main section & Sidebar */
a:link {color: #a5d1ff;} /* light blue */
a:visited{color: #094281;} /* dark blue */
a:hover {color: #094281;} /* darker light blue */


/* Top Navigation */
nav a{text-decoration: none;}
nav a:link, nav a:visited {color: #a5d1ff} /* light blue */
nav a:hover {color: #094281;} /* darker light blue */


/* ---- Drop Down Menu ---- */

/* Style The Dropdown Button */
.dropbtn {
  /* background-color: #4CAF50; */
  color: #a5d1ff; /* light blue */
  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) */
/* Coustomised from
https://www.w3schools.com/css/css_dropdowns.asp */

.littlearrow {
  font-size: 75%;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #094281; /* dark blue */
  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: #fff;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
  
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #a5d1ff}
  
/* 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: #3e8e41; 
} */


/* --- Google Form Styling --- */

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