@charset "utf-8";
/* CSS Document */
body {
  background-color: gray;
}
@font-face { font-family: Khaleefa; src: url("assets/Khaleefa.otf")
}

/* Add a black background color to the top navigation */
.topnav {
/*  float: none;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%); */
  background-color: #8bc141;
  overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: center;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 10px 14px;
  text-decoration: none;
  font-size: 14px;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: darkorange;
  color: black;
}

/* Add an active class to highlight the current page */
.topnav a.active {
  background-color: darkorange;
  color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}

h1{
	text-align: center;
	background-color: lavenderblush;
}
h2{
	text-align: center;
	background-color: coral;
	color: aliceblue;
}
table {
  alignment-baseline: center;
}
td {
  padding-right: 8px;
  align-content: center;
}
div#name {
	align-content: center;
	height: 250px;
	font-family: Khaleefa;
	font-size: 45px;
	color: whitesmoke;
	background-image: url("images/seasoning.jpg");
	}
div#menu {
  width:450px;
  margin:auto;
  background-color:#D9EEE1;
}
div#catering {
  width:450px;
  margin:auto;
  background-color:#EBD9ED;
}
div#location {
	text-align: center;
	background-color: bisque;
}
div#gallery {
  width:450px;
  margin:auto;
  background-color:#D9EEE1;
}
p.loc {
	font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif";
	font-size: 25px;
	color: blueviolet;
}
p.address{
	color: darkblue;
}

table.vegetable {
	margin-left: auto;
	margin-right: auto;
}
table.nonvegetable {
	margin-left: auto;
	margin-right: auto;
}
table.naanpizza {
	margin-left: auto;
	margin-right: auto;
}
table.tandoori {
	margin-left: auto;
	margin-right: auto;
}
table.vegentree {
	margin-left: auto;
	margin-right: auto;
}
table.chicken {
	margin-left: auto;
	margin-right: auto;
}
table.goat {
	margin-left: auto;
	margin-right: auto;
}
table.lamb {
	margin-left: auto;
	margin-right: auto;
}
table.seafood{
	margin-left: auto;
	margin-right: auto;
}
table.biryani{
	margin-left: auto;
	margin-right: auto;
}
table.indo {
	margin-left: auto;
	margin-right: auto;
}
table.soup {
	margin-left: auto;
	margin-right: auto;
}
table.salad {
	margin-left: auto;
	margin-right: auto;
}
table.chili {
	margin-left: auto;
	margin-right: auto;
}
table.bread {
	margin-left: auto;
	margin-right: auto;
}
table.beverages {
	margin-left: auto;
	margin-right: auto;
}
table.desserts {
	margin-left: auto;
	margin-right: auto;
}
table.sides {
	margin-left: auto;
	margin-right: auto;
}
table.appetizers {
	margin-left: auto;
	margin-right: auto;
}
table.naanroti {
	margin-left: auto;
	margin-right: auto;
}
table.vegentreecat {
	margin-left: auto;
	margin-right: auto;
}
table.chickencat {
	margin-left: auto;
	margin-right: auto;
}
table.biryanicat{
	margin-left: auto;
	margin-right: auto;
}
table.lambcat {
	margin-left: auto;
	margin-right: auto;
}
table.goatcat {
	margin-left: auto;
	margin-right: auto;
}
table.tandooricat {
	margin-left: auto;
	margin-right: auto;
}

.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  flex-wrap: wrap;
  gap: 10px;
}
.media {
  max-width: 300px;
  max-height: 450px;
  overflow: hidden;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.media img {
  max-width: 100%;
  height: auto;
}
.layer {
  opacity: 0;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 10px;
  height: 90%;
  background: #fff;
  color: #151e3f;
  transition: all 0.9s ease;
  p {
    transition: all 0.9s ease;
    transform: scale(0.1);
  }
}
p.description {
  text-align: center;
  font-size: 15px;
  letter-spacing: 1px;
}
.media:hover .layer {
  opacity: 0.8;
  width: 90%;
  transition: all 0.5s ease;
  p {
    transform: scale(1);
    transition: all 0.9s ease;
  }
}