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

.banner_img{
  object-fit: cover;
  width: 100%;
  height: 120px;
}

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

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

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

.search { 
  grid-area: search;  
  font-size: 30px;  
  text-align:center;
  background-color: #ffffff ;
  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:#ffffff;
}

.banner_img{
	height:200px;
}

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

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

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