:root{
    --Marinara-Red:  #CF1C44;
    --Leafy-Green: #0B9446;
    --Wine: #5e1211;
    --Espresso: #543136;
    --Cafe: #7B573E;
    --Cannoli: #D8C6B8;
}
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}

body {
	line-height: 1;
}

ol, ul {
	list-style: none;
}

blockquote, q {
	quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
	content: '';
	content: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

body{
    font-family: "Goudy Old Style";
}
h1{
    color: var(--Marinara-Red);
    font-size: 3em;
}
h2{
    color: var(--Marinara-Red);
    font-size: 2em;
}
p{
    color: var(--Wine);    
}
p.alternate {
    color: var(--Cafe);
}
.container{
    position: absolute;
    width: 100%;
    height: 100%;
}
#logo{
    position: fixed; top: 0; left: 0; width: 100%; height: 10%;
    background-color: var(--Cannoli);
    background-clip: content-box;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    min-height: 102px;
}
#logo object{
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}
#navigation{
    position: fixed; left: 88%; top: 102px; width: 100%; height: 100%;
    margin: 0;
    padding: 0;
    background-color: var(--Cafe);
}
#navigation ul{
	overflow-x: hidden;
	overflow-y: auto;
	list-style-type: none;
	margin: 0;
	padding: 0;
	
	
}
#navigation li a{
    display: block;
    width: 100%;
    color: var(--Wine);
    background-color: var(--Cannoli);
    margin: 1% 1%;
    padding: .25% 2%;
    text-decoration: none;
    border: 1px solid var(--Wine);
	 /* Add this as a property for a selector to which the effect has to be applied*/

	/* Chrome and Safari */
	-webkit-border-top-left-radius:40px;
	-webkit-border-top-right-radius:40px;
	-webkit-border-bottom-right-radius:40px;
	-webkit-border-bottom-left-radius:40px;
	/* Firefox */
	-moz-border-radius-topleft:40px;
	-moz-border-radius-topright:40px;
	-moz-border-radius-bottomright:40px;
	-moz-border-radius-bottomleft:40px;
	/* Standard Syntax */
	border-top-left-radius: 40px;
	border-top-right-radius: 40px;
	border-bottom-right-radius: 40px;
	border-bottom-left-radius: 40px;
	
	/*
  	Below is the syntax for adding values to the box shadow property 
  	box-shadow: none|h-shadow v-shadow blur spread color |inset|initial|inherit;
	*/
	-webkit-box-shadow: 6px 6px 12px 8px var(--Espresso);
	/*Standard Syntax*/
	box-shadow: 6px 6px 14px 6px var(--Espresso);
}
#navigation li a:hover{
    background-color: var(--Leafy-Green);
    color: var(--Marinara-Red);
}
#navigation li .active{
    background-color: var(--Wine);
    color: var(--Cannoli);
}

.sub_page_header{
    top: 0;
    left: 0;
    position: fixed;
    height: 10%;
    width: 100%;
    min-height: 102px;
    background-color: var(--Cannoli);
    padding: 0;
    margin: 0;
    background-clip: content-box;
}
.logo_corner{
    display: block;
    position: absolute; left: 0; top: 0;
    min-width: 102px;
    width: 20%;
    max-width: 204px;
    padding: 0;
    margin: 0;
    height: auto;
}
.center_title{
    position: fixed; left: 102px;
    text-align: center;
    font-size: 3em;
    color: var(--Marinara-Red);
    width: 80%
}
.navbar{
    position:absolute; right: 5%; bottom: 0;
    overflow: auto;
    background-color: var(--Cannoli);
    white-space: nowrap;
    margin-left: auto;
    margin-right: 0;
    width: 70%;  
}
.navbar ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: auto;
    white-space: nowrap;
    min-width: 500px;
    display: flex;
    justify-content: flex-end;
}
.navbar li{
    float: left;
    white-space: nowrap;
    overflow: hidden;
}
.navbar li a{
    display: inline-block;
    color: var(--Cannoli);
    background-color: var(--Espresso);
    padding: 2px 5px 2px 5px;
    margin: 10px;
    text-align: center;
    text-decoration: none;
    border: 1px solid var(--Wine);
	
	 /* Add this as a property for a selector to which the effect has to be applied*/

	/* Chrome and Safari */
	-webkit-border-top-left-radius:40px;
	-webkit-border-top-right-radius:40px;
	-webkit-border-bottom-right-radius:40px;
	-webkit-border-bottom-left-radius:40px;
	/* Firefox */
	-moz-border-radius-topleft:40px;
	-moz-border-radius-topright:40px;
	-moz-border-radius-bottomright:40px;
	-moz-border-radius-bottomleft:40px;
	/* Standard Syntax */
	border-top-left-radius: 40px;
	border-top-right-radius: 40px;
	border-bottom-right-radius: 40px;
	border-bottom-left-radius: 40px;
	
	/*
  	Below is the syntax for adding values to the box shadow property 
  	box-shadow: none|h-shadow v-shadow blur spread color |inset|initial|inherit;
	*/
	-webkit-box-shadow: 3px 3px 10px 3px var(--Espresso);
	/*Standard Syntax*/
	box-shadow: 3px 3px 10px 3px var(--Espresso);
}
.navbar li a:hover{
    background-color: var(--Leafy-Green);
    color: #CF1C44;
}
.navbar li .active{
    background-color: var(--Marinara-Red);
    color: var(--Esspresso);
}
.content{
    position: absolute; top:102px; left: 15%; width: 65%; bottom: auto;
    z-index: -1;
    padding: 0;
    margin: 0;
    margin-bottom: 1.5em;
    margin-top:auto;
    
}
.img-centered{
    display: block;
    margin-left: auto;
    margin-right: auto;
}
#feature{
    position: absolute; top:104px; left: 15%; width: 65%; bottom: 90%;
    z-index: -1;
}
#special-offers{
    position: fixed; top:104px; left: 0%; width: 12%;
}

#footer{
	position: fixed;
	left: 0;
	bottom: 0;
	height: 1.5em;
	width: 100%;
	color: var(--Wine);
	background-color: var(--Cannoli);
	padding: 0.01em 16px;
	line-height: 1.5em;
	text-align: center;
}
.legal-info{
    color: var(--Wine);
}

.menu-image{
    width: 200px;
    height: 200px;
    margin-left: 20px;
}
.menu-description{
    margin-left: 20px;
}
.special-aside-image{
    display: block;
    width: 100px;
    height: 100px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;

}