/* ** 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; } 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-size: 3.157em; } h2 { font-size: 2.369em; } h3 { font-size: 1.777em; } h4 { text-transform: uppercase; font-size: 1.333em; } small { font-size: 0.75em; } /* ** Layout */ .spread-item { display: flex; color: black; justify-content: space-around; flex-wrap: wrap; } .entree-name { display: flex; justify-content: space-between; } /* ** Theme */ .owl, .spread-item { padding: 0; background-size: cover; background-repeat: no-repeat; background-position: center; } .owl { color: white; text-shadow: 1px 1px 2px black; } .owl section { padding: 2em; max-width: 35%; background-color: rgba(0, 0, 0, .8); } .spread-item section { padding: 2em; max-width: 35%; 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); } .evening { background-image: url(/images/img_07_evening.jpg); } .dessert { background-image: url(/images/img_08_dessert.jpg); }