:root{
    --marinara-red: #CF1C44;
    --leafy-green: #0B9446;
    --wine: #5E1211;
    --cafe: #7B573E;
    --espresso: #543136;
    --cannoli: #D8C6B8;
}

html {
/*    Placeholder for the future, if needed.*/
}

body {
    height: 100%;
    background: #FFFFFF;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.06);
    color: var(--cafe);
    font-family: "Klinic Slab Book", "Klinic Slab Medium", sans-serif;
    font-size: 28px;
    line-height: 1.5;
    margin: 0;
    min-height: 100vh;
    max-width: 100%;
    padding: 0;
    position: relative;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--espresso);
    font-family: "Goudy Old Style", sans-serif;
    font-weight: 600;
    line-height: 1.3;
}

a {
    color: #0083e8;
}

b, strong {
    font-weight: 600;
}

samp {
    display: none;
}

img {
    display: block;
    background: transparent;
    border: 0;
    margin: 0;
    max-width: 100%;
}

.grid-container {
    display: grid;
    grid-template: repeat(12, 1fr) / repeat(12, 1fr);
    grid-gap: 0;
    padding: 0;
}

nav {
    width: 100%;
    height: 80px;
    background: var(--marinara-red);
    color: #FFFFFF;
}

.img-frame {
    float: left;
    height: 80px;
    width: 475px;
    white-space: nowrap;
    margin: 0 1em 0 0.5em;
}

.img-helper {
    display: inline-block;
    height: 100%;
}

.nav-logo {
    max-width: 475px;
    max-height: 80px;
    padding-top: 10px;
}

nav > a {
    float: left;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 22px;
    color: white;
    padding-top: 24px;
    height: 42px;
    width: 100px;
}

nav > a:hover {
    background-color: var(--wine);
    color: var(--cannoli);
}

nav > a.active {
    background-color: var(--espresso);
    color: var(--cannoli);
}

.left-content {
    grid-area: 1 / 1 / span 12 / span 6;
    margin: 0 20px 0 20px;
    padding: 0 20px 0 20px;
    font-family: "Goudy Old Style", sans-serif;
    max-width: 100%;
}

.left-content > h2 {
    text-align: left;
}

.right-content {
    grid-area: 1 / 7 / span 12 / span 6;
    float: right;
    margin: 0;
    padding: 0;
}

.price {
    text-align: right;
    font-size: 115%;
    font-weight: bold;
}

footer {
    position: absolute;
    bottom: 0;
    height: 80px;
    width: 100%;
    background-color: var(--espresso);
}