
<style>

body{
   max-width: 1200px;
   margin: auto;
   background-color: beige;
   color: black;
}


.topnav {
  background-color: #142028;
  overflow: hidden;
}


/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 8px 7px;
  text-decoration: none;
  font-size: 14px;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: gold;
  color: black;
}

/* Change the color of visited links*/
.topnav a:visited {
  color: blue;
}


/* Add an active class to highlight the current page */
.topnav a.active {
   background-color: blue;
   background-image: linear-gradient(aqua, blue);
  color: white;
}

/* Hide the link that should open and close the topnav on shavre screens */
.topnav .icon {
  display: none;
}


/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}




*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}


a:hover {
   color: white;
   background-color: #800020;

}


a:visited {
   color: blue;
   background-color: #800020;

}




.container {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(225px, 1fr));
	grid-template-rows: 110px 350px 350px 350px 350px 350px 250px 250px ;
	grid-template-areas:
	"box1   box1"
	"havrepic1 havrepic2"
	"havrepic3 havrepic4"
	"havrepic5 havrepic6"
	"havrepic7 havrepic8"
	"havrepic9 havrepic10"
	"narrative narrative"
	"early early";
	grid-gap:  10px;
	background-color: black;	

}

.box1{
	grid-area: box1;
 	max-width: 100%;
	margin: auto;
   /*	border: 2px solid #800020;  */
}


.havrepic1 {
	grid-area: havrepic1;
	max-width: 100%;
	margin: auto;
	padding: 0px;
	border: 2px solid #800020;
}


.havrepic2 {
	grid-area: havrepic2;
	max-width: 100%;
	margin: auto;
	padding: 0px;
	border: 2px solid #800020;
}



.havrepic3 {
	grid-area: havrepic3;
	max-width: 100%;
	margin: auto;
	padding: 0px;
	border: 2px solid #800020;
}


.havrepic4 {
	grid-area: havrepic4;
	max-width: 100%;
	margin: auto;
	padding: 0px;
	border: 2px solid #800020;
}



.havrepic5 {
	grid-area: havrepic5;
	max-width: 100%;
	margin: auto;
	padding: 0px;
	border: 2px solid #800020;
}


.havrepic6 {
	grid-area: havrepic6;
	max-width: 100%;
	margin: auto;
	padding: 0px;
	border: 2px solid #800020;
}



.havrepic7 {
	grid-area: havrepic7;
	max-width: 100%;
	margin: auto;
	padding: 0px;
	border: 2px solid #800020;
}


.havrepic8 {
	grid-area: havrepic8;
	max-width: 100%;
	margin: auto;
	padding: 0px;
	border: 2px solid #800020;
}


.havrepic9 {
	grid-area: havrepic9;
	max-width: 100%;
	margin: auto;
	padding: 0px;
	border: 2px solid #800020;
}


.havrepic10 {
	grid-area: havrepic10;
	max-width: 100%;
	margin: auto;
	padding: 0px;
	border: 2px solid #800020;
}



.navigate {
	grid-area: navigate;
	max-width: 70%;
/*	border: 2px solid #800020;*/
}


.listen {
	grid-area: listen;
	max-width:70%;
	margin: auto;
	padding: 5px 5px;
	border: 2px solid #800020;
}



.urvadi {
	grid-area: urvadi;
	max-width: 70%;
	margin: auto;
	padding: 5px 5px;
	border: 2px solid #800020;
}



.narrative {
	grid-area: narrative;
 	max-width: 70%;
	max-width:70%;
	margin: auto;
	padding: 10px 10px;
	border: 2px solid #800020;
	margin: auto;
}




.early {
	grid-area: early;
	max-width: 70%;
	max-width:70%;
	margin: auto;
	padding: 10px;
	border: 2px solid #800020;
}



	

.img{
   display: block;
   max-width: 13%;
   margin-left: auto;
   margin-right: auto;
  /* border: 3px solid #800020;*/
}


.img1{
   display: block;
   max-width: 100%;
   margin-left: auto;
   margin-right: auto;
   margin-top: 2px;
   margin-bottom: 2px;
   box-shadow: 0px 0px 20px blue;
   /* border: 3px solid #800020;*/
}



.img2{
   display: block;
   max-width: 90%;
   margin-left: auto;
   margin-right: auto;
   margin-bottom: 10px;
  /* border: 3px solid #800020;*/
}



.img3{
   display: block;
   max-width: 95%;
   margin-left: auto;
   margin-right: auto;
   margin-top: 10px;
   margin-bottom: 5px;
  /* border: 3px solid #800020;*/
}


.img4{
   display: block;
   max-width: 90%;
   margin-left: auto;
   margin-right: auto;
   margin-bottom: 10px;
  /* border: 3px solid #800020;*/
}


.img5{
   display: block;
   max-width: 90%;
   margin-left: auto;
   margin-right: auto;
   margin-bottom: 10px;
  /* border: 3px solid #800020;*/
}





.p1 {
   text-align: center;
   font-family: Helvetica, sans-serif;
   color: #e8c816;
   font-weight: bold;
}


.p2 {
   text-align: center;
   margin-top:  20px;
   margin-bottom:  20px;
}


.p3 {
   text-align: center;

}



.p5 {
   text-align: center;
}



h3 {
   text-align: center;
   margin-bottom: 10px;
   background-color: gold;
   background-image: linear-gradient(blue, #f7a92c);
}


span{
   background-color: white;
   color: black;
   background-image: linear-gradient(gold, #f7a92c)
}


.p4{
	text-align: center;
   font-family: Helvetica, sans-serif;
   background-color: white;
   background-image: linear-gradient(gold, #f7a92c)
}


#footer {
   position: fixed;
   padding: 10px 10px 0px 10px;
   left: 0; 
   bottom: 0px;
   height: 50px;
   width: 100%;
   text-align: center;
   background-color: gold;
   background-image: linear-gradient(blue, #f7a92c);
}


@media screen and (max-width: 600px) {
	.container {
		grid-template-columns: repeat(auto-fit, minmax(225px, 1fr));
		grid-template-rows: 200px 350px 350px 350px 350px 350px 350px 350px 350px 350px 350px 210px 275px;
		grid-template-areas:
		"box1"
		"havrepic1"
		"havrepic2"
		"havrepic3"
		"havrepic4"
		"havrepic5"
		"havrepic6"
		"havrepic7"
		"havrepic8"
		"havrepic9"
		"havrepic10"
		"narrative"		
		"early";
    }
}







</style>