@charset "UTF-8";
/* CSS Document */

/* 

 (                         *         (                                         
 )\ )                    (  `        )\ )                              )    )  
(()/(   (     )          )\))(      (()/(     (   (       )         ( /( ( /(  
 /(_)) ))\ ( /(   (     ((_)()\   (  /(_))   ))\  )(     (      (   )\()))\()) 
(_))  /((_))(_))  )\ )  (_()((_)  )\(_))_   /((_)(()\    )\  '  )\ (_))/(_))/  
/ __|(_)) ((_)_  _(_/(  |  \/  | ((_)|   \ (_))   ((_) _((_))  ((_)| |_ | |_   
\__ \/ -_)/ _` || ' \)) | |\/| |/ _| | |) |/ -_) | '_|| '  \()/ _ \|  _||  _|  
|___/\___|\__,_||_||_|  |_|  |_|\__| |___/ \___| |_|  |_|_|_| \___/ \__| \__|  

*/

/*CSS Reset*/

* {
	margin: 0;
	padding: 0;
	text-decoration: none;
	list-style-type: none;
} 

/* Mobile */

@media screen and (max-width: 640px) {
	
}

/* Tablet */

@media screen and (min-width: 641px) and (max-width:1200px) {
	
}

	@keyframes fade-in {
		0%		{opacity: 0;}
		100%	{opacity: 1;}
	}

		@-moz-keyframes fade-in {
			0%		{opacity: 0;}
			100%	{opacity: 1;}
		}

		@-o-keyframes fade-in {
			0%		{opacity: 0;}
			100%	{opacity: 1;}
		}
		
		@-webkit-keyframes fade-in {
			0%		{opacity: 0;}
			100%	{opacity: 1;}
		}


/* Typography */

@font-face{
	font-family: 'Oswald', sans-serif;
	src: url('../fonts/oswald-regular.ttf');
}

@font-face{
	font-family: 'Roboto', sans-serif;
	src: url('../fonts/roboto-regular.ttf');
}

@font-face{
	font-family: 'Lato', sans-serif;
	src: url('../fonts/lato-regular.ttf');
}

header {
	background: rgba(0,0,300,0.65);
	z-index: 2;
	padding-top: 3vh;
	padding-bottom: 3vh;
}

body {
	text-align: center;
	background-image: url('../img/tablecloth-458019__340.jpg');
    background-repeat: repeat-x repeat-y;
}

h1 {
	font-family: 'Oswald', sans-serif;
	font-size: 3vw;
	color: white;
	text-align: center;
}

h2 {
	font-family: 'Oswald', sans-serif;
	font-size: 2.5vw;
	color: white;
	text-align: center;
}

h3 {
	font-family: 'Oswald', sans-serif;
	font-size: 2vw;
	color: white;
	text-align: center;
}

h4 {
	font-family: 'Oswald', sans-serif;
	font-size: 1.5vw;
	color: white;
	text-align: center;
}

p {
	font-family: 'Oswald', sans-serif;
	font-size: 1.5vw;
	color: white;
	text-align: center;
}

ul {
	margin-top: 1.5vh;
	margin-bottom: 1.5vh;
}

li {
	display: inline-block; 
	border: 0.3vw solid black;
	font-weight: bold;
	transition: transform 1s;
	width: auto; 
	text-align: center; 
	margin-bottom: 2vh;
	margin-top: 2vh;
}

nav {
	width: 100%;
	text-align: center;
	
}

head {
	width: 100%;
	height: 20%;
}

img {
	height: auto;
}

footer {
	margin-top: 2.5vh;
	padding-top: 2vh;
	padding-bottom: 2.5vh;
	text-align: center;
	background: rgba(0,0,300,0.65);
	z-index: 2;
	font-size: 1.4vw;
	color: white;
}

section {
	background: rgba(10,10,10,0.50);
	z-index: 2;
}

form {
	padding-top: 3vh;
	padding-bottom: 3vh;
	max-width:100vw; 
}

.form-input {
	width: 50%;
	text-align: center;
	margin-bottom: 5vh;
	padding: 0.5vw;
	border:3px solid black;
	color:black;
  	font-family: 'Oswald', sans-serif;
  	font-size: 1.25vw;
}

[type="submit"] {
	width: 50%;
	text-align: center;
	margin-bottom: 0.5vh;
	padding: 0.5vw;
	border:3px solid black;
	background-color: blue;
	color:white;
  	font-family: 'Oswald', sans-serif;
  	font-size: 1.25vw;
	font-weight: bold;
}

/* unvisited link */

a:link {
	background-color: blue; 
	color: white;
	display: inline-block;
	font-family: 'Oswald', sans-serif;
	padding-top: 3vh;
	padding-bottom: 3vh;
	padding-left: 2vw;
	padding-right: 2vw;
}

/* visited link */

a:visited {
	color: white; 
	background-color: blue;
}

/* mouse over link */

a:hover {
	background-color: red;
	color: white;
}

/* selected link */

a:active {
	background-color: black; 
	color: white;
}

img#logo {
	width: 100%;
}

.home-img {
	width: 60%;
}

#menu1 {
	width: 65%
}

#menu2 {
	width: 65%
}

.reservation-form {
	margin-bottom: 2vh;
}

.nav-links:hover {
	transform: rotate(360deg);
		-ms-transform: rotate(360deg);
		-webkit-transform: rotate(360deg);
		}

li:hover {
		cursor: pointer;
}

.scale:hover {
	transform: scale(1.15);
}

.fade-in {
	animation-name: fade-in;
		-moz-animation-name: fade-in;
		-ms-animation-name: fade-in;
		-o-animation-name: fade-in;
		-webkit-animation-name: fade-in;
	animation-duration: 1s;
		-moz-animation-duration: 1s;
		-o-animation-duration: 1s;
		-webkit-animation-duration: 1s;
	animation-fill-mode: backwards;
		-moz-animation-fill-mode: backwards;
		-o-animation-fill-mode: backwards;
		-webkit-animation-fill-mode: backwards;
}