body{
   font-family: "Roboto Condensed", sans-serif;
   font-weight:400;
   font-style: normal;
} 

/*---- Set up site grid ---- */

.wrapper {
   display: grid;
   grid-template-columns: 1fr 300px;
   grid-template-rows: auto;
   grid-template-areas:
   "header header"
   "nav nav"
   "main aside"
   "footer footer";
   grid-gap: 4px;
}

nav, main, aside, header, footer{
   border-color: #ffffff;
   padding: 20px;
   border-radius: 10px;
}
 
header {
   grid-area: header; 
   background-color: #4673b4; /* cool purple */
   color: #fff;
   padding: 0;
   height: 100px;
}
/* border width for light areas */



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

nav {
   grid-area: nav;
   background-color: #124288; /* light pink */
   color: #fff;
}

main{
   grid-area: main;
   background-color: #9fbbe4; /* light purple */
   color: #fff;
}

aside{
   grid-area: aside;
   background-color: #6b92cc; /* eggplant purple */
   color: #fff;
}

footer{
   grid-area: footer;
   background-color: #2a5ba4; /* Fairy pink */
   color: #fff;
   text-align: right;
}

/* --- grid for front page images ---*/

.homeimages {
   display: grid;
   grid-template-columns:250px 250px;
   grid-template-rows: auto;
   grid-template-areas:
   "turtle seal"
   "fish dolphin";
   grid-gap: 80px;
   width: 520px;
   margin: auto;
   padding-right: 50px;
}

.turtle {grid-area: turtle;}
.seal{grid-area: seal;}
.fish{grid-area: fish;}
.dolpin{grid-area: dolpin;}

/* ---- Genral formatting ---- */


h1 {
   font-family: "Anton", sans-serif;
   font-weight: 400;
   font-style: normal;
   font-size: 500%;
   padding-left: 20%;
   margin: 1px;
 }

 h2 {
   font-family: "Anton", sans-serif;
   font-weight: 400;
   font-style: normal;
   font-size: 200%;
 }

 h3 {
   font-family: "Anton", sans-serif;
   font-weight: 400;
   font-style: normal;
   font-size: 100%;
  
 }

img.roundleft{
   border-top-left-radius: 10px;
   border-bottom-left-radius: 10px;
   border-top-right-radius: 10px;
   border-bottom-right-radius: 10px;
   box-shadow: 1px 0px 10px #000000;
   float: left;

}

.allround{
   border-radius: 10px;
   box-shadow:1px 0px 10px ;
}

.centered {
   text-align: center;
}



/* --- Hover Text Formatting ---*/
/* from http://css-workshop.com/hover-box-text-over-images-on-hover-and-more/ */

.hvrbox,
.hvrbox * {
	box-sizing: border-box;
}
.hvrbox {
	position: relative;
	display: inline-block;
	overflow: hidden;
	max-width: 100%;
   border-radius: 20px;
	height: auto;
}
.hvrbox img {
	max-width: 100%;
}
.hvrbox .hvrbox-layer_bottom {
	display: block;
}
.hvrbox .hvrbox-layer_top {
	opacity: 0;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	background: rgba(95, 109, 172, 0.6);
	color: #fff;
	padding: 15px;
	-moz-transition: all 0.4s ease-in-out 0s;
	-webkit-transition: all 0.4s ease-in-out 0s;
	-ms-transition: all 0.4s ease-in-out 0s;
	transition: all 0.4s ease-in-out 0s;
}
.hvrbox:hover .hvrbox-layer_top,
.hvrbox.active .hvrbox-layer_top {
	opacity: 1;
}
.hvrbox .hvrbox-text {
	text-align: center;
	font-size: 18px;
	display: inline-block;
	position: absolute;
	top: 50%;
	left: 50%;
	-moz-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
.hvrbox .hvrbox-text_mobile {
	font-size: 15px;
	border-top: 1px solid rgb(179, 179, 179); /* for old browsers */
	border-top: 1px solid rgba(179, 179, 179, 0.7);
	margin-top: 5px;
	padding-top: 2px;
	display: none;
}
.hvrbox.active .hvrbox-text_mobile {
	display: block;
}

/* ---- Hidden Box Formatting --- */

#hidden{
   display: none;
}

.poemtype {
   font-size: 150%;
   font-weight: bold;
   padding-right: 15px;
}
.info{
border-style: solid;
border-width: 1px;
background-color: #2a5ba4;
border-color: #ffffff;
padding: 10px;
width: 85%;
}


#showhide {
   background-color: #ffffff;
   font-style: italic;
   padding: 2px;
   padding-left: 5px;
   padding-right: 5px;
}

#showhide:hover {
   color: #ffffff;
   background-color: #2a5ba4;
}

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

/* Links in main section & Sidebar */
a:link {color: #124288;}
a:visited {color: #124288;}
a:hover {color: #ffffff;}


/*  Top Navigation */
nav a{text-decoration: none;}
nav a:link, nav a:visited {color: #ffffff;}
nav a:hover {color: #fdfeff;}

/* Links for info div */
.info a {
   color: #9fbbe4;

}

.info a:hover {
   color: #fff;

}

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

/* Style The Dropdown Button */
.dropbtn {
 /*  background-color: #4CAF50; */
   color:#ade4a2;
   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.w3school.com/css/css_dropdown.asp */

.littlearrow{
   font-size: 75%;
}

 .dropdown-content {
   display: none;
   position: absolute;
   background-color: #4D648D;
   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: #152c55}
 
 /* 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: #7688A9;
 }

 /* --- Google Form styling --- */

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