/*
AUthor: Lika Brown
Date: 04-06-2026
File name: style.css
*/


/* CSS Reset */
body, header, nav, main, footer, h1, h3,legend, label, div, img, ul, aside, figure, figcaption {
	margin: 0;
	padding: 0;
	border: 0;
	color: #f5f5dc;
}

/* Style rules for body and images */


a {
	color: #fffdd0;
	text-decoration: none;
}

.hero {
  position: relative;
}

.hero img {
  width: 100%;
  height: 100vh;
  object-fit: cover;
}

.hero h1 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fffdd0;
  font-size: 3em;
  text-align: center;
}


body {
	background-color: #522722;
}

p {
	color: #f5f5dc;
}


p {
	text-align: center;	
	color: #f5f5dc;
}


nav ul {
	list-style-type: none;
	margin: 0;
	text-align: right;
}

nav li {
	display: inline-block;
	font-size: 1.75em;
}

nav li a {
	display: block;
	color: #f5f5dc;
	text-align: center;
	padding: 0.5em 1em;
	text-decoration: none;
}
	

main {
	clear: left;
	background-color: #522722;
	padding: 2%;
	font-size: 1.25em;
}

.menu-title {
	background-color: #f5f5dc;
	padding: 5px 10px;
	display: inline-block;
	border-radius: 4px;
}

main p {
	color: #f5f5dc;
}

aside {
	text-align: center;
	font-size: 1.5em;
	weight: bold;
	text-shadow: 5px 6px 10px #c5a687;
}

figure {
	border: 4px #2a1f14;
	max-width: 400px;
	margin: 2%;
}

figcaption {
	padding: 2%;
	border: 4px #2a1f14;
}

#menu {
	display: flex;
	flex-wrap: wrap;
	gap:20px;
	align-items: stretch;
	justify-content: center;
}

.menu-item {
	width: 250px;
	color: #fffdd0;
	text-align: center;
}

.menu-item img {
	width: 100%;
	height: 200px;
	object-fit: contain;
	border-radius: 10px;
	background-color: #fff;
}



figure {
	border: 4px round #2a1f14;
	box-shadow: 5px 10px 18px black;
	max-width: 400px;
	margin: 2% auto;
}

figcaption {
	padding: 2%;
	border: 4px solid #000000 #ffffff;
}

.grid {
	grid-template-columns: 1fr 1fr;
	grid-gap: 10px;
}

aside {
	grid-column: 1 / span 2;
}

/* Style rules for contact elements */

fieldset, input, textarea {
	margin-bottom: 2%;
}

fieldset legend {
	font-weight: bold;
	font-size: 1.25em;
}

label {
	display: block;
	padding-top: 2%;
}

#submit {
	margin-top: 0;
	margin-bottom: 0;
	margin-left: auto;
	margin-right: auto;
	display: block;
	padding: 2%;
	background-color: #f5f5dc;
	color: #522722;
	font-size: 1.25em;
	border-radius: 10px;
}

input {
  display: block;
  margin: 10px 0;
  padding: 8px;
  width: 250px;
  border: 1px solid #fffdd0;
  border-radius: 6px;
}

label {
  font-weight: bold;
}

form {
  width: 300px;
  margin: 20px auto;
  font-family: Arial, sans-serif;
}

button {
  background-color: #522722;
  color: #fffdd0;
}

h1 {
	color: #fffdd0;
	text-align: center;
}

main h1 {
	color: #fffdd0;
}
	
	


/*Style rules for the about area */

.about {
	text-align: center;
	color: #f5f5dc;
}

.about img {
	display: block;
	margin: 20px auto;
}

.about p {
	max-width: 600px;
	margin: auto;
	color: #f5f5dc;
}

.about #info {
	max-width: 700px;
	margin: 0 auto;
}

/* Style rules for the footer area */

footer {
	text-align: center;
	font-size: 0.80em;
	font-color: #f5f5dc;
	padding-top: 0%;
	padding-bottom: 0%;
	padding-left: 0%;
	padding-right: 0%;
}
footer a {
	font-color: #f5f5dc;
	text-decoration: none;
}

.copyright {
	margin-bottom: 15px;
}

.social img {
	display: inline-block;
	padding: 2%;
}


/*Media Query for Tablet Viewport */
@media screen and (min-width: 620px) print {
	
	/* Tablet Viewport: Style rules for the area */
	footer {
		overflow: auto;
	}
	
	
	
	.copyright {
		float: left;
		width: 65%;
	}
	
	.social {
		float: right;
		width: 25%;
	}
	
	/* Tablet Viewport: Style rule for from element */
	
	form {
		width: 70%;
		margin-top: 0;
		margin-bottom: 0;
		margin-left: auto;
		margin-right: auto;
	}
	
	
	/* a. Tablet Viewport: Show tab-desk class, hide mobile class */
	.tablet-desktop #menu-links {
		display: block;
	}
	
	.mobile, .mobile-nav {
		display: none;
	}
	
	/* b. Tablet Viewport: Style rules for nav area */
	
	nav li {
		border-top: none;
		display: inline-block;
		font-size: 1.25em;
	}
	nav li a {
		padding: 0.5em;
	}
}

/* Style rules for skip navigation link */

.skip {
	position: absolute;
	left: -999px;
}

.skip:focus {
	color: #fff;
	background-color: #2a1f14;
	text-decoration: none;
	padding: 0.5%;
	top: auto;
	left: auto;
	right: 1px;
	z-index: 1;
}

.grid {
	display: grid;
	grid-template-columns: auto auto;
	grid-gap: 10px;
}

aside {
	grid-column: 1 / span 2;
}

/* Tablet Viewport: Style rule for form element */

form {
	width: 70%;
	margin-top: 0;
	margin-bottom: 0;
	margin-left: auto;
	margin-right: auto;
}


	
	
	/*Media Query for Deskop Viewport */
	@media screen and (min-width: 1000px) {
		
		/* Show deskop class, hide mobile-tablet class */
		
		.desktop {
			display: block;
		}
		
		.mobile-tablet {
			display: none;
		}
		
		/* Desktop Viewport: Style rules from form elements */
		
		form {
			width: auto;
		}
		
		.form-grid {
			display: grid;
			grid-template-columns: auto auto;
			grid-gap: 20px;
		}
		.btn {
			grid-column: 1 / span 2;
		}
		
		#submit:active {
			background-color: #000;
			color: #fff;
		}
		
		
		/* Style rules for table */
		
		table {
			border: 1px solid #fffdd0;
			border-collapse: collapse;
			margin: 0 auto;
		}
		
		caption {
			font-size: 1.5em;
			font-weight: bold;
			padding: 1%;
		}
		
		th, td {
			border: 1px solid #fffdd0;
			padding: 1%;
		}
		
		th {
			background-color: #fff;
			color: #fffdd0;
			font-size: 1.15em;
		}
		
		
		tr:nth-child(odd) {
			background-color: #deccba;
		}
		
		
		/* Deskot viewport: Style rules for form elements */
		
		form {
			width: auto;
		}
		
		.form-grid {
			display: grid;
			grid-template-columns: auto auto;
			grid-gap: 20px;
		}
		
		.btn {
			grid-column: 1 / span 2;
		}
			
					
		
			
		/*Deskop Viewport: Style rules for nav area */
		nav li {
			font-size: 1.5em;
		}
		nav li a {
			padding-top: 0.5em;
			padding-bottom: 0.5em;
			padding-left: 1.5em;
			padding-right: 1.5em;
		}
		
		nav li a:hover {
			color: #000;
			background-color: #f5f5dc;
			opacity: 0.5;
		}
	}
	
	.grid {
		grid-template-columns: auto auto auto;
		grid-gap: 30px;
	}
	
	aside {
		grid-column: 1 / span 3;
		font-size: 2em;
	}
	
	
			 			
		/*Deskop Viewport: Style rules for main content. */
		#info ul {
			margin-left: 5%;
			}
		}
		
						
		/*Media Query for Large Deskop Viewport. */
		@media screen and (min-width: 1921px) print {
			
			body {
				background: linear-gradient(#f6eee4, #78593a);
			}
			
			#wrapper {
				width: 1920px;
				margin-top: 0;
				margin-bottom: 0;
				margin-left: auto;
				margin-right: auto;
			}
			
			main {
				background: #fffdd0;
			}
		}
		
		.grid {
			grid-template-columns: auto auto auto auto;
		}
		
		aside {
			grid-column: 1 / span 4;
			font-size: 3em;
		}
	}
			
			/*Media Query for Print */
			@media print {
				
				body {
				background-color: white;
				color: black;
			}