@media screen and (max-width: 1366px) and (max-height: 1919px) {
body { 
	width: 1366px;
	height: 768px;
	background-color: ivory;
}
}

* {
		margin: 0;
		padding: 0;
		font-family: Bodoni, Arial, sans-serif;
		list-style-type: none;
	}
@font-face {
font-family: neons;
src: url("../fonts/neons.otf")
}

@font-face {
font-family: europe;
src: url("../fonts/europe.ttf")
}

@font-face {
font-family: heptaslab;
src: url("../fonts/heptaslab.ttf")
}

	html {
		scroll-behavior: smooth;
	}

	section {
		width: 78vw;
		height: 98vh;
		padding: 2vh 20vw 0 2vw;
	}
	footer {
		width: 78vw;
		height: 15vh;
		padding: 2vh 20vw 0 2vw;
	}
		header {
		width: 78vw;
		height: 30vh;
		padding: 2vh 20vw 0 2vw;
	}

	h3 {font-family: Trebuchet;
			font-size: 40pt;
			font-weight: normal;
			text-align: left;
			color: chocolate;
			margin-top: 3%;
		}
	
		h1 {font-family: heptaslap;
			font-size: 27pt;
			font-weight: normal;
			text-align: center;
			color: black;
			margin-top: 3%;}

			h2, h6 {
				font-size: 11pt;
				font-weight: normal;
				color: white;
			}
			h4{font-family: heptaslab, bold;
				font-size: 14pt;
				color: #4d1a00;

			}
			a { text-decoration: none }

			h4:hover { font-family: "neons";
	color: orange;
	font-size:  14pt;
	text-align: left;

}
			div {
			
	display: inline-block;
	float: left;
	margin-top: 3vh;
	border: 2px; 
	padding: 6px;
	margin-left: 3%;
	}

	article.background {
		width: 40vw;
	height: 30vh;
	top: 32vh;
	left: 3vw;
	background-color: #662200;
	opacity: 0.7;
	}
	article.transbox p {
		font-family: helvetica;
		font-weight: bold;
		color: white;
		opacity: 1;
		margin-left: 30px;
		font-size: 12pt;
	}
	h5 {font-family: helvetica;
		color: white;
		opacity: 1;
		margin-left: 30px;
		font-size: 10pt;


	}

	nav {
		position: fixed;
		top: 25vh;
		right: 2vw;
	}

		nav a:link {
			display: inline-block;
			width: 2vw;
			height: 2vw;
			border: 0.2vw solid black;
			border-radius: 50%;
			background-color: rgba(255,255,255,0.2);
			margin-bottom: 2vh;
			text-decoration: none;
			color: #000;
		}

			span {
				display: block;
				text-align: right;
				width: 10vw;
				font-size: 1.7vw;
				color: black;
				right: 0;
				opacity: 0;
				position: relative;
				top: 0.2vw;
				transition: right 0.2s, opacity 0.2s;
			}

				a:hover span {
					font-size: 1.7vw;
					right: 11vw;
					opacity: 1;
				}

footer {background-color: #4d1a00;
		width: 100vw;
		height: 13vh;
		float: left;
		}

.none {
	background-color: none;
}

.black {
	background-color: #000;
}

.gray {
	background-color: #aaa;
}

.white {
	background-color: #fff;
}

.white {
	background-color: white;
}

.orange {
	background-image: url("../images/food6.jpg");
	background-size: cover;
	background-repeat: no-repeat;
}

.yellow {
	background-image: url("../images/food3.jpg");
	background-size: cover;
	background-repeat: no-repeat;
}

.green {
	background-image: url("../images/drink.webp");
	background-size: cover;
	background-repeat: no-repeat;
}

.cyan {
	background-image: url("../images/dessert4.jpg");
	background-size: cover;
	background-repeat: no-repeat;
}


.brown {
	background-color: brown;
}


.white-hover:hover {
	background-color: chocolate;
}

.orange-hover:hover {
	background-color: chocolate;
}

.yellow-hover:hover {
	background-color: chocolate;
}

.green-hover:hover {
	background-color: chocolate;
}

.cyan-hover:hover {
	background-color: chocolate;
}


.brown-hover:hover {
	background-color: chocolate;