/*There are so many tags that even I got confuses while programming*/
/*I had to revise this list multiple times and rearrange it couple of times.*/


		html{
			scroll-behavior:smooth;
		}
        body {
			font-family: sans-serif;
            font-size: 16px;
            line-height:24px;
            margin:0;
            font-weight: 400;
		}
		h1{
			font-size: 28px;
			line-height: 30px;
			text-align: auto;

		}
		h2 {
			font-size: 18px;
            border-top:1px solid #dddddd;
            padding-top:20px;
            text-align: center;
            font-family: cursive;
		}
		h3{
			font-size: 18px;
            border-top:1px solid #dddddd;
            padding-top:20px;
            text-align: center;
		}

		showcase h1{
			color: black;
			font-family: cursive;
			text-align: center;
		}
		showcase h3{
			color: black;
			text-align: center;
			letter-spacing: 2px;
		}
		h4{
			font-size: 1.5rem;
			margin: 3%;
		}
		

		p {
  			font-family: verdana;
  			font-size: 15px;
  			line-height: 24px;
			margin-bottom: 22px;
		}
		video{
			width: 100%;
			height: 100%;
		}

        main {
			width: 90%;
			max-width: 800px;
			display: block;
			margin-bottom: 20px;
            margin-right: auto;
            margin-left: auto;
		}
		

/*Starting from here is the code that only concerns navigation and top menu in each page*/
		.container {
	width: 80%;
	margin: 0 auto;
		}
		 

		header::after {
		  content: '';
		  display: table;
		  clear: both;
		}

		.logo {
		  float: left;
		  padding: 10px 0;
		}

		nav {
		  float: right;

		}

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

		nav li {

		  display: inline-block;
		  margin-left: 70px;
		  padding-top: 23px;

		  position: relative;
		}

		nav a {

		  color: white;
		  text-decoration: none;
		  text-transform: uppercase;
		  font-size: 18px;
		}

		nav a:hover {
		  color: #000;
		}

		nav a::before {
		  content: '';
		  display: block;
		  height: 5px;
		  background-color: white;

		  position: absolute;
		  top: 0;
		  width: 0%;

		  transition: all ease-in-out 250ms;
		}

		nav a:hover::before {
		  width: 100%;
		}
/*Navigation and top menu ends here*/


/*This piese of code starting from here only concerns the slideshow on index.html*/
		/*keyFrames*/
		@keyframes layer2Anim{
			0%{
				opacity: 0;
			}
			17%{
				opacity: 0;
			}
			33%{
				opacity: 1;
			}
			50%{
				opacity: 1;
			}
			67%{
				opacity: 0;
			}
			100%{
				opacity: 0;
			}

		}
		@keyframes layer3Anim{
			0%{
				opacity: 0;
			}
			50%{
				opacity: 0;
			}
			67%{
				opacity: 1;
			}
			83%{
				opacity:1;
			}
			100%{
				opacity: 0;
			}
		}
		

		/*RESETS*/
		*{
			box-sizing: border-box;

		}
	
		.slideShow{
			position: relative;
		}
		.placeHolder{
			width: 100%;
			visibility: hidden;
		}
		.layer1, .layer2, .layer3 {
			position: absolute;
			width: 100%  ;
			height: 100%  ;
			top:0px;
			left:0;
			background-size: cover;
			background-repeat: no-repeat;

		}
		.layer1{
			background-image: url(images/1.jpg);

		}
		.layer2{
			background-image: url(images/2.jpg);
			animation: layer2Anim 10s infinite;
		}
		.layer3{
			background-image: url(images/3.jpg);
			animation: layer3Anim 10s infinite;
		}

		/*Slideshow code ends here*/

		.img-right{
		     float: right;
		     margin-left: 15px;
		     width:150px;
			 height:100px; 
			 border: 1px solid black;

		}

		/*menu*/
		.contain{
			width:90%;
			margin: auto;
			overflow: hidden;
			margin-top: 1%;
		}

		.category{
			color: black;
			margin-top: 5%;
			display: flex;
			text-align: center;
			font-family: cursive;
		}
/*Starting from here is the code that only concrens grids on restaurant-menu.html*/
		.circle{
			width: 70%;
			border-radius: 30%;

		}
		.snack, .grill{
			padding-left: 0rem;
		}
		
		
		.review{
			display: block;
	 		margin-left: auto;
	  		margin-right: auto;
	  		width: 30%;	
		}

/*Grid code ends here*/

		.specialp{
			 text-align: center;
			 text-transform: capitalize;
		}
		.full{

		}
		.review2{
			display: block;
	 		margin-left: auto;
	  		margin-right: auto;
	  		width: 100%;	
		}
/*This piece of code only concerns the go to top green button. I had to seek some help with this one.*/
		.gotopbtn{
  position: fixed;
  width: 50px;
  height: 50px;
  background: #27ae60;
  bottom: 40px;
  right: 50px;

  text-decoration: none;
  text-align: center;
  line-height: 50px;
  color: white;
  font-size: 22px;
}
/*Starting here is the code that concerns footer and some other stuff*/
		.footer-main-div{
			width: 100%;
			height: auto;
			margin:auto;
			background: #444;
			padding: 20px 0px;
		}
		.footer-social-icons{
			width: 100%;
			height: auto;
			margin: auto;
		}
		.footer-social-icons ul{
			margin: 0px;
			padding: 0px;
			text-align: center;
		}
		.footer-social-icons ul li {
			display: inline-block;
			width: 60px;
			height: 0px;
			margin: 20px 30px;
			border-radius: 200%;
			
		}
		.footer-p ul li{
			display: inline;	
			 color:white;
			 text-transform: capitalize;
		}
		.header-container-wrapper{
			 background-color: #444;
		}

/*I have learned a lot in these few weeks professor. All thanks to you.*/