/*
HALEEM
https://www.color-hex.com/color-palette/5435
*/

:root {
	--red: rgb(133,43,35);
	--blue: rgb(37,136,178);
	--beige: rgb(216,205,187);
	--yellow: rgb(206,137,16);
	--gray: rgb(170,170,170);
}

* {
	box-sizing: border-box;
}


body {
	font-family: Verdana, sans-serif;
	margin: 0 0 0 0;
	background-color: var(--beige);
	box-sizing: border-box;
}

br {
	clear: both;
}

div#top {
	background-image: url(images/haleem.jpg);
	width: 100%;
	height: 950px;
	background-size: cover;
	background-position: center;
}


h1 {
	text-align: center;
	padding-top: 250px;
	color: ivory;
	margin: 0 0 0 0;
	font-family: "Vast Shadow", serif;
	font-size: 80px;
	font-weight: 400;
	font-variant: small-caps;
	text-shadow: 5px -2px 5px black;
}


h2 {
	font-family: "Oswald", sans-serif;
	font-weight: 400;
	font-size: 36px;
	clear: both;
	border-style: none none dotted none;
	margin-left: 50px;
	margin-right: 50px;
	margin-bottom: 10px;
}


h3 {
	text-align: center;
	color: ivory;
	font-family: "Hammersmith One", serif;
	text-shadow: 5px -2px 5px black;
	font-size: 36px;
}

.food-pic {
	box-sizing: border-box;
	background-size: 90%;
	background-repeat: no-repeat;
	background-position: center;
	height: 100%;
}

.food-pic-container {
	box-sizing: border-box;
	height: 300px;
}


p {
	font-family: Calibri, sans-serif;
	font-size: 20px;
}


p#contact-top {
	text-align: center;
	color: ivory;
	text-shadow: 5px -2px 5px black;
}

.description {
	font-size: 16px;
}


li.description {
	color: dimGray
	font-weight: 800;
	font-variant: none;
}

.caption {
	font-size: 18px;
	color: white;
	position: absolute;
	top: -8px;
	font-weight: 600;
	padding: 5px;
	padding-left: 5%;
}


ul.prices, ul.servings {
	list-style-position: inside;
	padding-left: 10px;
	margin-top: 10px;
}


span.seperator {
	display: inline-block;
	width: 100px;
}

	
a.button {
	display: inline-block;
	width: 120px;
	margin-bottom: 2px;
	margin-top: 2px;
	background-color: dimGray;
	border-style: outset;
	border-color: gray;
	border-radius: 20px;
	text-align: center;
	font-family: Calibri, sans-serif;
	font-weight: 600;
	color: white;
	text-decoration: none;
}



a.button:active {
	border-style: inset;
}


#navigation {
	position: -webkit-sticky;
	position: sticky;
	top: 0px;
	padding: 10px;
	background-color: #737c89;
	border: 0;
	border-top: 5px double black;
	border-bottom: 5px double black;
	z-index: 1;
}


#footer {
	box-sizing: content-box;
	padding: 10px;
	padding-left: 50px;
	margin-top: 50px;
	border-top: 5px double black;
	clear: both;
	background-color: var(--yellow);
}


#contact-bottom {
	color: white;
	text-shadow: 2px -2px 5px black;
}


div.note {
	font-family: Calibri, Arial, sans-serif;
	font-size: 20px;
	box-sizing: border-box;
	padding: 10px 50px;
	font-weight: 400;
}

span.sizes {
	text-decoration-line: underline;
}


div#minimum {
	font-family: Calibri, Arial, sans-serif;
	font-size: 36px;
	font-weight: 400;
	text-align: center;
	padding-top: 20px;
	color: ivory;
	text-shadow: 5px -2px 5px black;
}




div.food-item {
	font-family: Calibri, Arial, sans-serif;
	font-size: 20px;
	box-sizing: border-box;
	padding: 10px 50px;
	font-weight: 600;
	font-variant: small-caps;
}


/********** Large devices only **********/
@media (min-width: 1200px) {
  .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-6, .col-lg-12 {
    float: left;
  }
  .col-lg-1 {
    width: calc(100% / 12);
  }
  .col-lg-2 {
    width: calc(100% / 6);
  }
  .col-lg-3 {
    width: calc(100% / 4);
  }
  .col-lg-4 {
    width: calc(100% / 3);
  }
  .col-lg-6 {
    width: calc(100% / 2);
  }
  .col-lg-12 {
    width: calc(100%);
  }
  .lg-clear {
    clear: both;
  }
}

/********** Medium devices only **********/
@media (min-width: 800px) and (max-width: 1199px) {
  .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-6, .col-md-12 {
    float: left;
  }
  .col-md-1 {
    width: calc(100% / 12);
  }
  .col-md-2 {
    width: calc(100% / 6);
  }
  .col-md-3 {
    width: calc(100% / 4);
  }
  .col-md-4 {
    width: calc(100% / 3);
  }
  .col-md-6 {
    width: calc(100% / 2);
  }
  .col-md-12 {
    width: calc(100%);
  }
  .md-clear {
    clear: both;
  }
  h1 {
    font-size: 48px;
  }
  h3 {
    font-size: 20px;
  }
}

/********** Small devices only **********/
@media (max-width: 799px) {
  .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-6, .col-sm-12 {
    float: left;
  }
  .col-sm-1 {
    width: calc(100% / 12);
  }
  .col-sm-2 {
    width: calc(100% / 6);
  }
  .col-sm-3 {
    width: calc(100% / 4);
  }
  .col-sm-4 {
    width: calc(100% / 3);
  }
  .col-sm-6 {
    width: calc(100% / 2);
  }
  .col-sm-12 {
    width: calc(100%);
  }
  .sm-clear {
    clear: both;
  }
  a.button {
    box-sizing: border-box;
    width: calc(25% - 8px);
    font-size: 12px;
  }
  div#navigation {
    text-align: center;
  }
  h1 {
    font-size: 48px;
  }
  div#minimum {
    font-size: 20px;
  }
  h3 {
    font-size: 20px;
  }
  p#contact-top {
	  font-size: 16px;
  }
}