
<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 small 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 600px 350px 350px 350px 250px 250px ;
	grid-template-areas:
	"box1   box1"
	"mallpic1 mallpic2"
	"mallpic3 mallpic4"
	"mallpic5 mallpic6"
	"mallpic7 mallpic8"
	"mallpic9 mallpic10"
	"mallpic11 mallpic12"
	"mallpic13 mallpic14"
	"narrative narrative"
	"early early";
	grid-gap:  10px;
	background-color: black;	

}

.box1{
	grid-area: box1;
 	max-width: 100%;
	margin: auto;
   /*	border: 2px solid #800020;  */
}


.mallpic1 {
	grid-area: mallpic1;
	max-width: 100%;
	margin: auto;
	padding: 0px;
	border: 2px solid #800020;
}


.mallpic2 {
	grid-area: mallpic2;
	max-width: 100%;
	margin: auto;
	padding: 0px;
	border: 2px solid #800020;
}



.mallpic3 {
	grid-area: mallpic3;
	max-width: 100%;
	margin: auto;
	padding: 0px;
	border: 2px solid #800020;
}


.mallpic4 {
	grid-area: mallpic4;
	max-width: 100%;
	margin: auto;
	padding: 0px;
	border: 2px solid #800020;
}



.mallpic5 {
	grid-area: mallpic5;
	max-width: 100%;
	margin: auto;
	padding: 0px;
	border: 2px solid #800020;
}


.mallpic6 {
	grid-area: mallpic6;
	max-width: 100%;
	margin: auto;
	padding: 0px;
	border: 2px solid #800020;
}



.mallpic7 {
	grid-area: mallpic7;
	max-width: 100%;
	margin: auto;
	padding: 0px;
	border: 2px solid #800020;
}


.mallpic8 {
	grid-area: mallpic8;
	max-width: 100%;
	margin: auto;
	padding: 0px;
	border: 2px solid #800020;
}


.mallpic9 {
	grid-area: mallpic9;
	max-width: 100%;
	margin: auto;
	padding: 0px;
	border: 2px solid #800020;
}


.mallpic10 {
	grid-area: mallpic10;
	max-width: 100%;
	margin: auto;
	padding: 0px;
	border: 2px solid #800020;
}



.mallpic11 {
	grid-area: mallpic11;
	max-width: 100%;
	margin: auto;
	padding: 0px;
	border: 2px solid #800020;
}


.mallpic12 {
	grid-area: mallpic12;
	max-width: 100%;
	margin: auto;
	padding: 0px;
	border: 2px solid #800020;
}




.mallpic13 {
	grid-area: mallpic13;
	max-width: 100%;
	margin: auto;
	padding: 0px;
	border: 2px solid #800020;
}


.mallpic14 {
	grid-area: mallpic14;
	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 600px 600px 350px 350px 350px 350px 350px 350px 210px 275px;
		grid-template-areas:
		"box1"
		"mallpic1"
		"mallpic2"
		"mallpic3"
		"mallpic4"
		"mallpic5"
		"mallpic6"
		"mallpic7"
		"mallpic8"
		"mallpic9"
		"mallpic10"
		"mallpic11"
		"mallpic12"
		"mallpic13"
		"mallpic14"
		"narrative"		
		"early"
    }
}







</style>