/* ** Fonts */ @font-face { font-family: 'Vollkorn'; src: url('/fonts/vollkorn/vollkorn-bold-webfont.woff2') format('woff2'), url('/fonts/vollkorn/vollkorn-bold-webfont.woff') format('woff'); font-weight: 700; font-style: normal; } @font-face { font-family: 'Vollkorn'; src: url('/fonts/vollkorn/vollkorn-bolditalic-webfont.woff2') format('woff2'), url('/fonts/vollkorn/vollkorn-bolditalic-webfont.woff') format('woff'); font-weight: 700; font-style: italic; } @font-face { font-family: 'Vollkorn'; src: url('/fonts/vollkorn/vollkorn-italic-webfont.woff2') format('woff2'), url('/fonts/vollkorn/vollkorn-italic-webfont.woff') format('woff'); font-weight: 400; font-style: italic; } @font-face { font-family: 'Vollkorn'; src: url('/fonts/vollkorn/vollkorn-regular-webfont.woff2') format('woff2'), url('/fonts/vollkorn/vollkorn-regular-webfont.woff') format('woff'); font-weight: 400; font-style: normal; } /* ** Base */ html { font-size: 1em; } body { background-color: black; font-family: 'Vollkorn', serif; font-weight: 400; line-height: 1.45; color: white; max-width: 1024px; margin: auto; padding-bottom: 100px; } a { color: inherit; } p { margin-bottom: 1.3em; } h1, h2, h3, h4 { margin: 1.414em 0 0.5em; font-weight: bold; line-height: 1.2; } h1 { margin-top: 0; font-style: italic; font-size: 3.157em; } h2 { font-size: 2.369em; margin: 0; } h3 { font-size: 1.777em; } h4 { text-transform: uppercase; font-size: 1.333em; } small { font-size: 0.75em; } /* ** Layout */ .owl, .spread-item { border-top: 1em solid black; border-bottom: 1em solid black; display: flex; color: black; justify-content: space-around; flex-flow: row wrap; } .owl div { align-self: center; padding: 2em; } .spread-item h1 { padding-top: 0.5em; flex: 1 100%; text-align: center; } .entree-name { display: flex; justify-content: space-between; margin-bottom: 0; } .entree-item p { margin-bottom: 0; } .entree-item { margin-bottom: 2.5em; } .notice { position: fixed; bottom: 20px; background-color: #4c0d0a; padding: 1em; } .notice h3 { padding: 0; margin: 0; } /* ** Theme */ .owl, .spread-item { padding: 0 0.5em; background-size: cover; background-repeat: no-repeat; background-position: center; } .owl, .spread-item h1 { color: white; text-shadow: 1px 1px 2px black; } .owl section { padding: 2em; max-width: 300px; background-color: rgba(0, 0, 0, .8); } .spread-item section { padding: 2em; width: 300px; background-color: rgba(255, 255, 255, .8); } .collection-item h3 { color: #d04c27; } .owl { background-image: url(/images/img_01_owl.jpg); } .sandwich { background-image: url(/images/img_02_sandwich.jpg); } .burger { background-image: url(/images/img_03_burger.jpg); } .salad { background-image: url(/images/img_04_salad.jpg); } .burrito { background-image: url(/images/img_05_burrito.jpg); } .vegan { background-image: url(/images/img_06_vegan.jpg); }