html, body, div, span, applet, object, iframe,
		h1, h2, h3, h4, h5, h6, p, blockquote, pre,
		a, abbr, acronym, address, big, cite, code,
		del, dfn, em, img, ins, kbd, q, s, samp,
		small, strike, strong, sub, sup, tt, var,
		b, u, i, center,
		dl, dt, dd, ol, ul, li,
		fieldset, form, label, legend,
		table, caption, tbody, tfoot, thead, tr, th, td,
		article, aside, canvas, details, embed, 
		figure, figcaption, footer, header, hgroup, 
		menu, nav, output, ruby, section, summary,
		time, mark, audio, video {
			margin: 0;
			padding: 0;
			border: 0;
			font-size: 100%;
			font: inherit;
			vertical-align: baseline;
		}
		/* HTML5 display-role reset for older browsers */
		article, aside, details, figcaption, figure, 
		footer, header, hgroup, menu, nav, section {
			display: block;
		}
		body {
			line-height: 1;
		}
		ol, ul {
			list-style: none;
		}
		blockquote, q {
			quotes: none;
		}
		blockquote:before, blockquote:after,
		q:before, q:after {
			content: '';
			content: none;
		}
		table {
			border-collapse: collapse;
			border-spacing: 0;
		}

       /*don't touch the reset above*/

       /*colors: 
       grey: #6E7780
       sky blue: #8FC7FF
       baby blue: #DBEDFF;
       navy: #476380
       grey/blue: #B3C2D1;

       */

		body {
			background-color: #B3C2D1;
		}

		#wrapper {
			min-width: 260px;
			max-width: 1000px;
			background-color: #DBEDFF;
			margin: 2% auto;
			
		}

		

		body h1 {
			color: #6E7780;
			font-family: 'Oswald', sans-serif;
			font-size:3em;
			margin: 0 auto;
	    	width: 80%;
	    	
		}

		header h1 {
			color: #6E7780;
			font-family: 'Oswald', sans-serif;
			font-size:3em;
			padding-top: none;
			
		}

		h2{
			font-family: 'Oswald', sans-serif;
			font-size: 2em;
			margin: 1%;
			padding-top: 1%;
			padding-left: 2%;
			color: #6E7780;
			text-align: center;	
		}

		header {
			display: grid;
			grid-template-columns: 1fr;
			text-align: center;
			padding: 3%;
			background-color: #ffffff;
		}


		nav {
			width: 100%;
			height: auto;
			font-family: 'Mukta', sans-serif;
			text-decoration: none;
			font-size: 1.2em;
			padding-top: 2%;
		}

		

		nav ul {
			display: grid;
			grid-template-columns: repeat(5, 1fr);
			font-size: 1em;
			grid-gap: 2px;

		}

	    nav li a  {
	       display: block;
	       text-align: center;
	       text-decoration: underline;
	       color:#8FC7FF;
	    }

	    nav li a:hover {
	    	color: #476380;
	    }

		a{
			color: #476380;
		}

		a:hover{
			color: #8FC7FF;
		}  

	    p {
	    	font-size: 1.2em;
	    	color:#6E7780;
	    	font-family: 'Fira Sans', sans-serif;
	    	display: block;
	    	margin: 0 auto;
	    	width: 80%;
	    	line-height: 1.3em;
	    	padding-top: 2%;
	    	padding-bottom: 2%;
	    	}

	    ul.pli {
	    	font-size: 1.3em;
	    	color:#6E7780;
	    	font-family: 'Fira Sans', sans-serif;
	    	display: block;
	    	margin: 0 auto;
	    	width: 60%;
	    	line-height: 1.3em;
	    	padding-top: 2%;
	    	padding-bottom: 2%;
	    	list-style-type: disc;
	    	font-weight: bold;
	    }

	    img {
	    	display: block;
	    	margin: 0 auto;
	    	width:85%;
	    	padding: 3%;
	    }

	    iframe {
	    	display: block;
	    	padding: 3%;
	    	width: 784px;
	    	height: 441px;
	    	margin: 0 auto;

	    }


	    footer {
	    	padding: 5%;
	    	text-align: center;
	    	font-family: 'Fira Sans', sans-serif;
	    	color:#193441;
	    	background-color: #ffffff;
	    }

	    footer h1{
	    	padding-top: none;
	    	margin: 0px auto; 
	    }

/* tablet and desktop styles */
@media only screen and (min-width: 600px) {

	

	nav {
		width:95%;
		height: auto;
	}
nav ul {
			display: grid;
			grid-template-columns: repeat(5, 1fr);
			grid-gap: 2px;
		}



		

	}