.banner { grid-area: header; ;font-size: 12px; background-color: #1616e6;}

.article { grid-area: article; font-family:verdana; text-align:center;font-size: 22px;background-color: #FEF5ED; text-align:center;}

.footer { grid-area: footer;  font-size: 30px;  text-align:center;background-color: #7d53b9;}

.nav { grid-area: nav;  font-size: 30px;  text-align:center;background-color:#76678a;border-radius: 25px;margin-left:10px;}
.search { grid-area: search;  font-size: 30px;  text-align:center;background-color: #E7CBA9 ;border-radius: 25px;margin-left:10px;}

body{
  display: grid;
  grid-template-areas: 
    "header header"
    "search article"
	"nav article"
    "footer footer";
  grid-template-rows: 200px 120px 1fr 70px;  
  grid-template-columns: 20% 1fr;
  grid-row-gap: 10px;
  grid-column-gap: 10px;
  min-height: 100vh;
  margin: 0;
  background:#FEF5ED;
}
.banner_img{
	height:200px;
}


/* Styling for the table */
#sql_table,th,td{
	border: 1px solid black;
	 margin-left: auto; 
	 margin-right: auto;
	
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

li{
	text-align:left;
}



/* Change the link color on hover */
li a:hover {
  background-color: #555;
  color: white;
  
}