@font-face {
    font-family: Bernard MT Condensed;
    src: url(https://the-manual.neocities.org/assets/fonts/BernardMTCondensed.ttf);
    }
@font-face {
    font-family: Area51 Military;
    src: url(https://the-manual.neocities.org/assets/fonts/Area51%20Military.otf);
    }
@font-face {
    font-family: Area51 Military Open;
    src: url(https://the-manual.neocities.org/assets/fonts/Area51%20Military%20Open.otf);
    }
@font-face {
    font-family: Area51 Industrial;
    src: url(https://the-manual.neocities.org/assets/fonts/Area51%20Industrial.otf);
    }
@font-face {
    font-family: Area51 Industrial Open;
    src: url(https://the-manual.neocities.org/assets/fonts/Area51%20Industrial%20Open.otf);
    }
@font-face {
    font-family: Russell Square;
    src: url(https://the-manual.neocities.org/assets/fonts/RussellSquareStd.otf);
    }
@font-face {
    font-family: Russell Square Oblique;
    src: url(https://the-manual.neocities.org/assets/fonts/RussellSquareStd-Oblique.otf);
    }
@font-face {
    font-family: Romic Light;
    src: url(https://the-manual.neocities.org/assets/fonts/RomicStd-Light.otf);
    }
@font-face {
    font-family: Romic Bold;
    src: url(https://the-manual.neocities.org/assets/fonts/RomicStd-Bold.otf);
    }
@font-face {
    font-family: Romic Light Italic;
    src: url(https://the-manual.neocities.org/assets/fonts/RomicStd-LightItalic.otf);
    }
@font-face {
    font-family: Romic Medium;
    src: url(https://the-manual.neocities.org/assets/fonts/RomicStd-Medium.otf);
    }

@font-face {
    font-family: ZapfChanceryDemi;
    src: url(https://tollys-cookbook.neocities.org/assets/fonts/ZapfChanceryStd-Demi.otf);
    }
@font-face {
    font-family: ZapfChanceryBold;
    src: url(https://tollys-cookbook.neocities.org/assets/fonts/ZapfChanceryStd-Bold.otf);
    }
@font-face {
    font-family: SnellRoundhand;
    src: url(https://tollys-cookbook.neocities.org/assets/fonts/SnellRoundhandLTStd-Scr.otf);
    }
@font-face {
    font-family: SnellRoundhandBold;
    src: url(https://tollys-cookbook.neocities.org/assets/fonts/SnellRoundhandLTStd-BdScr.otf);
    }
@font-face {
    font-family: SnellRoundhandBlack;
    src: url(https://tollys-cookbook.neocities.org/assets/fonts/SnellRoundhandLTStd-BlkScr.otf);
    }
@font-face {
    font-family: SpringLP;
    src: url(https://tollys-cookbook.neocities.org/assets/fonts/SpringLPStd.otf);
    }
@font-face {
    font-family: SpringLPLight;
    src: url(https://tollys-cookbook.neocities.org/assets/fonts/SpringLPStd-Light.otf);
    }
@font-face {
    font-family: Isadora;
    src: url(https://tollys-cookbook.neocities.org/assets/fonts/IsadoraStd-Regular.otf);
    }
@font-face {
    font-family: IsadoraBold;
    src: url(https://tollys-cookbook.neocities.org/assets/fonts/IsadoraStd-Bold.otf);
    }
@font-face {
    font-family: MeaCulpa;
    src: url(https://tollys-cookbook.neocities.org/assets/fonts/MeaCulpa-Regular.ttf);
    }


/* PALETTE */
:root {
    --oak: rgb(59, 14, 0);
    --chicory: rgb(126, 126, 245);
    --burgundy: rgb(233, 117, 164);
    --leaf: rgb(132, 200, 103);
    --page: #faded7;
    }


/* RESPONSIVE GRID */
.left-sidebar-grid {
    display:grid;
    grid-template-areas:
        'header'
        'navbar'
        'breadcrumbs'
        'main-content'
        'left-sidebar'
        'footer';
    margin-top: 20px;
    margin-bottom: 720px;
    filter: drop-shadow(0.35rem 0.35rem 0.44rem rgba(33, 17, 54, 0.77));
    }

/* GENERAL COLUMN PADDING */
.left-sidebar-grid > * {
    padding:1rem;
    max-width: calc(92vw) !important;
    }

/* ASSIGN COLUMNS TO GRID AREAS */
.left-sidebar-grid > .header {
    grid-area:header;
    background-color: var(--oak);
    background: url("/assets/images/BLACK.png"); 
    background-size: cover;
    padding-top: 0;
    padding-bottom: 0;
    color: white;
    }
.left-sidebar-grid > .navbar {
    grid-area:navbar;
    background-color: var(--burgundy);
    font-family: Bernard MT Condensed;
    padding-top: 5px;
    padding-bottom: 2px;
    padding-right: 0;
    font-size: calc(30px + 0.380625vw); /* 0.380625vw */
    background: url("/assets/images/CUBIC7.png"); 
    background-size: cover;
    background-repeat: repeat;
    color: white;
    text-shadow: 1px 1px 2px black;
    }
@media (min-width:768px) {
    .left-sidebar-grid > .navbar {
        background-size: contain;
        }
    }

.left-sidebar-grid > .breadcrumbs {
    grid-area:breadcrumbs;
    font-family: Russell Square;
    padding-top: 5px;
    padding-bottom: 0;
    font-size: calc(18px + 0.380625vw);
    background-color: var(--burgundy);
    background: url("/assets/images/SILVER4.png"); 
    background-repeat: repeat-x;
    text-shadow: 1px 1px 1px rgba(255, 214, 247, 0.59);
    }
.left-sidebar-grid > .breadcrumbs > b {
    font-family: Russell Square Oblique;
    }

.left-sidebar-grid > .main-content {
    grid-area:main-content;
    background-color: var(--page);
    background: url("/assets/images/PAPER3.jpg"); 
    background-repeat: repeat;
    font-size: calc(17px + 0.380625vw);
    }
.left-sidebar-grid > .main-content > ul {
    padding-top: 0;
    margin-top: 0;
    }
.left-sidebar-grid > .main-content > p {
    margin-left: 10px;
    text-shadow: 1px 1px 1px rgba(33, 17, 54, 0.43);
    }
a {
    font-weight: bold;
    color: #2000ff !important;
    }
a:visited {
    color: #45009f !important;
    }
a:hover {
    color: #a10061 !important;
    }
p > a {
    text-shadow: 1px 1px 1px rgba(227, 248, 255, 0.75);
    }
.left-sidebar-grid > main-content > li > a {
    text-shadow: 1px 1px 1px rgba(227, 248, 255, 0.75);
    }
.left-sidebar-grid > .main-content > p > i {
    font-family: Russell Square Oblique;
    font-style: normal;
    }
.left-sidebar-grid > .main-content > ul {
    text-shadow: 1px 1px 1px rgba(33, 17, 54, 0.43);
    }
.left-sidebar-grid > .main-content > ul > li > a {
    text-shadow: 1px 1px 1px rgba(227, 248, 255, 0.75);
    /* Not !important because it would override FAQ links */
    }

.left-sidebar-grid > .left-sidebar{
    grid-area:left-sidebar;
    background: url("/assets/images/CUBIC7.png"); 
    background-repeat: repeat;
    background-size: contain;
    padding-right: 0;
    color: white;
    font-size: calc(25px + 0.380625vw);
    text-shadow: 1px 1px 2px black !important;
    padding-left: 0.95rem;
    /* list-style-image: url(/right-arrow.svg); */
    }
.left-sidebar-grid > .left-sidebar > h3 {
    padding: 0;
    margin: 0;
    font-size: calc(34px + 0.380625vw);
    }

.left-sidebar-grid > .footer {
    grid-area:footer;
    background-color: var(--chicory);
    background: url("/assets/images/STEEL_FOOTER.png"); 
    background-repeat: repeat;
    font-size: calc(18px + 0.380625vw);
    font-family: Russell Square Oblique;
    text-shadow: 1px 1px 1px rgba(227, 248, 255, 0.75);
    }

/* MOBILE EXCEPTIONS */
@media (max-width:767px) {
    .left-sidebar-grid > * {
        margin-right: 4px;
        }
    .left-sidebar-grid > .header {
        text-align: center;
        padding-top: 4px;
        }
    .left-sidebar-grid {
        padding:1rem;
        }
    .left-sidebar-grid > * {
        padding:0.8rem;
        }
    .left-sidebar-grid > .main-content > ul {
        padding-left: 18px;
        }
    .site-title {
        font-size: 38px;
        padding-bottom: 5px;
        }
    }

/* TABLET AND SMALL DESKTOP */
@media (min-width:768px) and (max-width:1499px) {
    .left-sidebar-grid {
        grid-template-columns: 170px repeat(4, 1fr);
        grid-template-areas:
            'header header header header header'
            'navbar navbar breadcrumbs breadcrumbs breadcrumbs'
            'left-sidebar main-content main-content main-content main-content'
            'footer footer footer footer footer';
        max-width: 620px;
        margin-top: 60px;
        margin-left: 30px;
        margin-bottom: 100vw;
        filter: drop-shadow(0.35rem 0.35rem 0.4rem rgba(33, 17, 54, 0.77));
        }
    .left-sidebar-grid > .navbar {
        width: 265px;
        font-size: calc(16px + 0.380625vw); /* 0.380625vw */
        background-color: var(--burgundy);
        background: url("/assets/images/SILVER4.png"); 
        background-repeat: repeat-x;
        text-shadow: 1px 1px 2px rgba(88, 0, 38, 0.77) !important;
        color: black;
        padding-bottom: 4px;
        }
    .left-sidebar-grid > .breadcrumbs {
        width: 400px;
        padding-left: 5px;
        margin-left: -22px;
        padding-top: 10px;
        text-align: right;
        background-color: var(--burgundy);
        background: url("/assets/images/SILVER4.png"); 
        background-repeat: repeat-x;
        font-size: calc(12px + 0.380625vw);
        }
    .left-sidebar-grid > .left-sidebar {
        width: 155px;
        font-size: 19px;
        }
    .left-sidebar-grid > .main-content {
        width: 500px;
        font-size: calc(15px + 0.380625vw);
        }
    .left-sidebar-grid > .footer {
        font-size: calc(14px + 0.380625vw);
        }
    .left-sidebar-grid > .left-sidebar > h3 {
        padding: 0;
        margin: 0;
        margin-left: -8px;
        font-size: calc(15px + 0.380625vw);
        }
    .site-title {
        font-size: 60px;
        }
    a.back-to-home {
        color: white;
        text-decoration: none;
        }
    }
    
    
/* WIDE DESKTOP */
@media (min-width:1500px) {
    .left-sidebar-grid {
        grid-template-columns:repeat(5, 1fr);
        grid-template-areas:
            'header header header header header'
            'navbar navbar breadcrumbs breadcrumbs breadcrumbs'
            'left-sidebar main-content main-content main-content main-content'
            'footer footer footer footer footer';
        max-width: 640px;
        margin-top: 60px;
        margin-left: 70px;
        margin-bottom: 100vw;
        filter: drop-shadow(0.35rem 0.35rem 0.4rem rgba(33, 17, 54, 0.77));
        }
    .left-sidebar-grid > .navbar {
        width: 270px;
        font-size: calc(17px + 0.380625vw); /* 0.380625vw */
        background-color: var(--burgundy);
        background: url("/assets/images/SILVER4.png"); 
        background-repeat: repeat-x;
        text-shadow: 1px 1px 2px rgba(88, 0, 38, 0.77) !important;
        color: black;
        padding-bottom: 4px;
        }
    .left-sidebar-grid > .breadcrumbs {
        width: 444px;
        padding-left: 5px;
        margin-left: -37px;
        text-align: right;
        background-color: var(--burgundy);
        background: url("/assets/images/SILVER4.png"); 
        background-repeat: repeat-x;
        font-size: calc(16px + 0.380625vw);
        }
    .left-sidebar-grid > .left-sidebar {
        width: 164px;
        font-size: calc(17px + 0.380625vw);
        text-shadow: 2px 2px 3px black !important;
        }
    .left-sidebar-grid > .main-content {
        width: 539px;
        font-size: calc(16px + 0.380625vw);
        }
    .left-sidebar-grid > .footer {
        font-size: calc(15px + 0.380625vw);
        }
    .left-sidebar-grid > .left-sidebar > h3 {
        padding: 0;
        margin: 0;
        font-size: calc(20px + 0.380625vw);
        }
    .site-title {
        font-size: calc(50px + 0.380625vw);
        }
    a.back-to-home {
        color: white;
        text-decoration: none;
        }
    }
    
    
/* DISPLAY ON PHONES ONLY */
@media only screen and (max-width: 600px) {
    .context_tablet {
        display: none;}
    .context_desktop {
        display: none;}
    }

/* DISPLAY ON TABLETS ONLY */
@media only screen and (min-width: 601px) and (max-width: 1100px) {
    .context_phone {
        display: none;}
    .context_desktop {
        display: none;}
    }

/* DISPLAY ON DESKTOPS ONLY*/
@media only screen and (min-width: 1101px) {
    .context_phone {
        display: none;}
    .context_tablet {
        display: none;}
    }

body {
    background: url("/assets/images/7Messerb.jpg") no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    font-family: Russell Square;
    }

.left-sidebar-grid > .main-content > p > i {
    font-family: Russell Square Oblique;
    font-style: none !important;
    }
.left-sidebar-grid > .main-content > h2 {
    text-shadow: 1px 1px 1px rgba(33, 17, 54, 0.43);
    }

.left-sidebar-grid > .main-content > h3 {
    text-shadow: 1px 1px 1px rgba(33, 17, 54, 0.43);
    }

h1 {
    font-family: Area51 Military;
    margin-top: 0;
    margin-bottom: 0;
    font-weight: normal;
    }

h2 {
    font-family: Russell Square;
    margin-bottom: 0;
    }

/* How the Questions look in the FAQs*/
h3 {
    font-family: Russell Square Oblique;
    margin-bottom: 0;
    }
.faq {
    font-family: Romic Light Italic;
    color: #0f004a;
    text-shadow: 1px 1px 1px rgba(227, 248, 255, 0.75);
    }
.faq-list > li {
    margin-bottom: 8px;
    }
.faq-list > li > a {
    color: #0f004a !important;
    text-shadow: 1px 1px 1px rgba(0, 142, 197, 0.75) !important;
    text-decoration: none;
    }
.faq-list > li > a:hover {
    text-decoration: underline;
    }
.quote1 {
    color:#2c1fb7;
    font-family: Romic Medium;
    text-shadow: 1px 1px 1px rgba(227, 248, 255, 0.75);
    }
.quote1 > i {
    color:re;
    font-family: Romic Light Italic;
    font-weight: bold;
    font-style: normal;
    text-shadow: 1px 1px 1px rgba(227, 248, 255, 0.75);
    }
.quote2 {
    color:#a70073;
    font-family: Romic Medium;
    text-shadow: 1px 1px 1px rgba(227, 248, 255, 0.75);
    }
.quote2 > i {
    color:#a70073;
    font-family: Romic Light Italic;
    font-weight: bold;
    font-style: normal;
    text-shadow: 1px 1px 1px rgba(227, 248, 255, 0.75);
    }
.quote2 > i > u {
    color:#a70073;
    font-family: Romic Light Italic;
    font-weight: bold;
    font-style: normal;
    text-decoration: underline;
    text-shadow: 1px 1px 1px rgba(227, 248, 255, 0.75);
    }
.quote3 {
    color:#007755;
    font-family: Romic Medium;
    text-shadow: 1px 1px 1px rgba(227, 248, 255, 0.75);
    }

.site-title {
    margin-top: 1rem;
    margin-bottom: 0.6rem;
    text-shadow: 1px 2px 3px black !important;
    color: white;
    }


.sidebar-list {
    margin-left: -30px;
    list-style-type: square;
    }

a.navbar-link {
    color:black !important;
    text-decoration: none;
    font-size: 23px;
    font-weight: normal !important;
    }
a.navbar-link:hover {
    text-decoration: underline;
    }
    @media (max-width:767px) {
        a.navbar-link {
            color:white !important;
            font-size: 30px;
            }
        }

/* TABLET AND SMALL DESKTOP */
@media (min-width:768px) and (max-width:1499px) {
    .side {
        font-size: 17px;
        }
    }
a.side {
    color: #ffc486 !important;
    text-decoration: none;
    font-weight: normal !important; 
    }
a.side:hover {
    text-decoration: underline;
    }
a.back-to-home {
    color: white !important;
    text-decoration: none;
    font-weight: normal !important;
    }

.bring-element-up {
    margin-top: 0;
    }

.servings {
    font-family: SpringLPLight;
    font-size: 1.3rem;
    margin-top: 3px;
    margin-left: 30px;
    margin-bottom: -10px;
    }

.about-page {
    font-family: Romic Light;
    text-shadow: 1px 1px 1px rgba(33, 17, 54, 0.43);
    }
.about-page > b{
    font-family: Romic Bold;
    }
.about-page > i {
    font-family: Romic Light Italic;
    }
.about-page > ul > li > a {
    font-family: Romic Light;
    text-shadow: 1px 1px 1px rgba(227, 248, 255, 0.75) !important;
    }

.header-divider {
    background-color: var(--chicory);
    background: url("/assets/images/STEEL.png"); 
    background-repeat: repeat;
    text-shadow: 2px 1px 3px rgba(227, 248, 255, 0.87);
    padding-top: 3px;
    padding-bottom: 6px;
    padding-left: 12px;
    filter: drop-shadow(3px 2px 4px rgba(33, 17, 54, 0.9));
    }
a.header-divider-link:link {
    color: black;
    }
a.header-divider-link:visited {
    color: black;
    }
a.header-divider-link:active {
    color: black;
    }
a.header-divider-link:hover {
    color: black;
    }
    @media (max-width:767px) {
        .header-divider {
            padding-top: 6px;
            padding-bottom: 7px;
            font-size: 17px;
            }
        }
     
@media (max-width:767px) {
        .pages_nav {
            font-size: calc(20px + 0.380625vw);
            letter-spacing: .25rem;
            }
        } 

.under-header-divider {
    margin-top: 10px;
    }
    
.blog {
    font-family: SpringLp;}
    
.blog-list {
    list-style-type: none;
    margin: 0;
    padding-left: 7px;
    }

.next_page {
    text-align: right;
    margin-bottom: 1rem;
    font-style: italic;
    font-size: calc(17px + 0.380625vw);
    }
.next_page > b {
    font-size: calc(22px + 0.380625vw);
    }
.jump-container {
    margin-top: -10px;
    /* background-color: aquamarine; */
    }
.news {
    float: right;
    width: 180px;
    text-align: right;
    margin-top: -10px;
    font-style: italic;
    font-size: calc(15px + 0.380625vw);
    position: relative;
    /* background-color: pink; */
    }
.jump-to-top {
    float: right;
    width: 156px;
    text-align: right;
    margin-top: -10px;
    font-style: italic;
    font-size: calc(15px + 0.380625vw);
    position: relative;
    /* background-color: pink; */
    }
.jump {
    position: absolute;
    right: 40px;
    top: 9px;
    color: #970073 !important;
    text-shadow: 1px 1px 1px rgba(227, 248, 255, 0.75);
    }
.jump:hover {
    text-decoration: underline;
    }
.arrows {
    display: inline-block;
    width: 30px;
    }
.next {
    position: absolute;
    right: 4px;
    top: 9px;
    color: #970073 !important;
    text-shadow: 1px 1px 1px rgba(227, 248, 255, 0.75);
    }
.next:hover {
    text-decoration: underline;
    }
    
ol {
    text-shadow: 1px 1px 1px rgba(33, 17, 54, 0.43);
    }
ol > li::marker {
    font-weight: bold;
    font-size: 1.5rem;
    }

ul {list-style-type: square;}

blockquote {
    color: #0f004a;
    font-family: Romic Light Italic;
    text-shadow: 1px 1px 1px rgba(227, 248, 255, 0.75);
    /* text-shadow: 1px 1px 1px rgba(33, 17, 54, 0.43); */
    margin-right: 0;
    }

.excerpt {
    font-family: Russell Square Oblique;
    color: #0f004a;
    text-shadow: 1px 1px 1px rgba(227, 248, 255, 0.75) !important;
    }
.spaced > li {
    margin-bottom: 8px;
    }
.spaced-less > li {
    margin-bottom: 4px;
    }
.scaled {
    max-height:100%;
    max-width:100%;
    }
figure {
    text-align: center;
    font-size: smaller;
    padding: 0;
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 3px;
    text-indent: 0;
    max-height:100%;
    max-width:100%;
    border-style: inset;
    text-shadow: 1px 1px 1px rgba(33, 17, 54, 0.43);
    }

.refs > li {
    margin-bottom: 8px;
    }
.refs > li > a {
    text-shadow: 1px 1px 1px rgba(227, 248, 255, 0.75);
    overflow-wrap: break-word;
    }
.refs > li > a:hover {
    text-decoration: underline;
    }
sup > a {
    text-shadow: 1px 1px 1px rgba(227, 248, 255, 0.75);
    }

table {
    border: outset 3px;
    margin-top: 8px;
    margin-bottom: 8px;
    text-shadow: 1px 1px 1px rgba(227, 248, 255, 0.75);
    }
th {
    border: ridge 2px;
    background: url("/assets/images/CUBIC7.png"); 
    color: white;
    padding: 4px;
    text-shadow: 2px 2px 1px rgba(33, 17, 54, 0.43) !important;
    }
td {
    border: ridge 2px;
    padding: 4px;
    }
tr:hover {background-color: rgba(236, 124, 25, 0.5)}
.indent {
    margin-left: 8px;}

.toc > li > a {
    color: #0f004a !important;
    text-shadow: 1px 1px 1px rgba(0, 142, 197, 0.75) !important;
    text-decoration: none;
    }
.toc > li > a:hover {
    text-decoration: underline;
    }

.white-shadow {text-shadow: 1px 1px 1px rgba(227, 248, 255, 0.75) !important;}

details {
    text-shadow: 1px 1px 1px rgba(33, 17, 54, 0.43);}