/* Color Scheme */
:root {
    /** Common **/
    --dark_text_main: #2B2D42;
    --navelement: #413F42;
    /* Buttons */
    --navelement_hover: #949494;
    /* Button hover */
    --navelement_textcolor: #FFF9EB;

    /** Index/Home Page **/
    --logo_color: #2B2D42;
    ;
    /* Subtitle below logo, Should match logo color */

    --homepage_background: rgb(247, 236, 219);
    --homepage_background_gradient: linear-gradient(139deg, rgba(247, 236, 219, 1) 0%, rgba(209, 191, 172, 1) 100%);

    --homepage_heading_fontcolor: #2B2D42;

    --homepage_recipecard_background: #413F42;
    --homepage_recipecard_fontcolor: #FFF9EB;

    --homepage_blogcard_background: #aeaeae47;
    --homepage_blogcard_fontcolor: #413F42;
    --homepage_blogcard_border: #413F42;

    --homepage_categorycard_background: #aeaeae47;
    --homepage_blogcard_border: #413F42;
    --homepage_categorycard_heading: #413F42;
    --homepage_categorycard_link: #413F42;
    --error_message: #e96a4d;
    /* Error message text color */

    /** Recipe Page **/
    --recipe_background: rgb(247, 236, 219);
    /* Background of recipe page */
    --recipe_list_text: #2B2D42;
    /* Text color for ingredients and steps */
    --recipe_topsection_fontcolor: #2B2D42;
    /* Text color for recipe title and description */
    --recipe_sectionheading_background: #413F42;
    --recipe_sectionheading_text: #FFF9EB;

    --recipe_line_checkoff_background: #bfaf9e;
    /* Background color for checked off ingredients and steps */

    --recipe_line_odd_background: #fbfbfb;
    /* Background color for odd ingredients and steps */
    --recipe_line_even_background: #FFF9EB;
    /* Background color for even ingredients and steps */

    --recipe_blogcard_background: #413F42;
    --recipe_blogcard_fontcolor: #FFF9EB;

    /** Blog Page **/
    --blog_background: rgb(247, 236, 219);
    --blog_background_gradient: linear-gradient(139deg, rgba(247, 236, 219, 1) 0%, rgba(209, 191, 172, 1) 100%);
    --blog_fontcolor: #2B2D42;
    --blog_navbar: #D3C2AF;
    --blog_widgetheader: #D3C2AF;

}

/* Element-level */
figcaption {
    font-family: 'Mulish', sans-serif;
    font-weight: 500;
    font-size: 90%;
    text-align: center;
    font-style: italic;
    color: var(--dark_text_main);

}

/* Blog pages */
.blogbackground {
    background-color: var(--blog_background);
    background: var(--blog_background_gradient)
}

.blogtitle {
    font-family: 'Copse', serif;
    font-weight: 400;
    font-size: 2.2rem;
    color: var(--blog_fontcolor);
}

.blogbyline {
    font-family: 'Mulish', sans-serif;
    font-weight: 500;
    font-size: 1.0rem;
    color: var(--blog_fontcolor);
}

.blogtag {
    font-family: 'Mulish', sans-serif;
    font-weight: 500;
    font-size: 0.8rem;
    background-color: var(--navelement);
    color: var(--blog_fontcolor);
}

.blogpage p {
    font-family: 'Mulish', sans-serif;
    font-weight: 500;
    font-size: 1.1rem;
    color: var(--blog_fontcolor);
}

.blogpage p strong {
    font-family: 'Mulish', sans-serif;
    font-weight: 500;
    font-size: 1.3rem;
    color: var(--blog_fontcolor);
}

.blogpage h2 {
    font-family: 'Copse', sans-serif;
    font-weight: 700;
    font-size: 1.5rem;
    margin-top: 2.0rem;
    margin-bottom: 0.8rem;
    color: var(--blog_fontcolor);
}

.blogpage h3 {
    font-family: 'Copse', sans-serif;
    font-weight: 700;
    font-size: 1.2rem;
    margin-left: 1.0rem;
    color: var(--blog_fontcolor);
}

.blogpage img {
    max-width: 100%;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
    border-radius: 10px;
}

.blogpage em {
    display: block;
    text-align: center;
}

.blognavbar {
    background-color: var(--blog_navbar);
}

.blogwidget {
    background-color: var(--blog_widgetheader);
    border-radius: 0;
    border-width: 0;
    color: var(--blog_fontcolor);
}

.blogwidgetheader {
    font-family: 'Copse', sans-serif;
    font-weight: 600;
    font-size: 1.0rem;
    margin-bottom: 0px;
    background-color: var(--blog_widgetheader);
    border-radius: 0;
    border-width: 0;
    color: var(--blog_fontcolor);
}

.blogwidgetbody {
    font-family: 'Mulish', sans-serif;
    font-weight: 500;
    font-size: 1.0rem;
    background-color: var(--blog_widgetheader);
    border-radius: 0;
    border-width: 0;
    color: var(--blog_fontcolor);
}

.blogwidgetlink {
    font-family: 'Mulish', sans-serif;
    font-weight: 500;
    font-size: 0.9rem;
    line-height: 80%;
    font-size: 0.9rem;
    text-decoration: underline;
    color: var(--blog_fontcolor);
}

.blogwidgetlink:hover {
    font-family: 'Mulish', sans-serif;
    font-weight: 500;
    font-size: 0.9rem;
    text-decoration: none;
    line-height: 80%;
    color: var(--blog_fontcolor);
}

.blogpagerecipecard {
    background-color: var(--homepage_recipecard_background);
    border-radius: 0;
    border-width: 0;
    /*box-shadow: 0px 0px 3px #333333;*/
}

.blogpagerecipetitlelink {
    font-family: 'Mulish', sans-serif;
    font-weight: 00;
    font-size: 70%;
    color: var(--homepage_recipecard_fontcolor);
    text-decoration: none;
}

/* Recipe pages */
.recipebackground {
    background-color: var(--recipe_background);
}

.recipetitle-normalview {
    font-family: 'Copse', serif;
    font-weight: 400;
    font-size: 1.7rem;
    color: var(--recipe_topsection_fontcolor);
}

.recipetitle-thumbview {
    font-family: 'Copse', serif;
    font-weight: 400;
    font-size: 300%;
    color: var(--recipe_topsection_fontcolor);
}

.recipedescription {
    font-family: 'Mulish', sans-serif;
    font-weight: 500;
    font-size: 1.0rem;
    color: var(---recipe_topsection_fontcolor);
}

.recipenavelement {
    background-color: var(--navelement);
    color: var(--navelement_textcolor);
}

.recipenavelement:hover {
    background-color: var(--navelement_hover);
    color: var(--navelement_textcolor);
}

.sharesectionheading-text {
    font-family: 'Mulish', sans-serif;
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--navelement);
}

.socialsharebutton {
    background-color: var(--navelement);
    color: var(--navelement_textcolor);
    min-width: 8rem;
}

.socialsharebutton:hover {
    background-color: var(--navelement_hover);
    color: var(--navelement_textcolor);
}

.recipesectionheading-rect {
    background-color: var(--recipe_sectionheading_background);
}

.recipesectionheading-text {
    font-family: 'Mulish', sans-serif;
    font-weight: 700;
    font-weight: bold;
    font-size: 1.2rem;
    color: var(--recipe_sectionheading_text);
}



.recipeingredient {
    font-family: 'Mulish', sans-serif;
    font-size: 1.15rem;
    color: var(--recipe_list_text);
}

.table-striped>tbody>tr:nth-child(odd)>td,
.table-striped>tbody>tr:nth-child(odd)>th {
    background-color: var(--recipe_line_odd_background); // Choose your own color here
}

.table-striped>tbody>tr:nth-child(even)>td,
.table-striped>tbody>tr:nth-child(even)>th {
    background-color: var(--recipe_line_even_background); // Choose your own color here
}


.recipestep {
    font-family: 'Mulish', sans-serif;
    font-weight: 500;
    font-size: 1.15rem;
    color: var(--recipe_list_text);
}

.recipelinetransition {
    transition: background-color 200ms ease-in-out;
}

.recipeimagesection-rect {
    background-color: var(--recipe_background);
}

.recipeimagesection-caption {
    font-family: 'Mulish', sans-serif;
    font-weight: 500;
    font-size: 105%;
    text-align: center;
    color: var(--dark_text_main);
    text-decoration: none;
}

/* Non-recipe pages */

.mainpagebackground {
    background-color: var(--homepage_background);
    background: var(--homepage_background_gradient)
}

.mainpageheading {
    font-family: 'Copse', serif;
    font-weight: 400;
    font-size: 170%;
    ;
}

.mainpagesearcherror {
    font-family: 'Mulish', sans-serif;
    font-weight: 700;
    font-size: 100%;
    color: var(--error_message)
}

.mainpagefineprint {
    font-family: 'Mulish', sans-serif;
    font-weight: 500;
    font-size: 75%;
    color: var(--dark_text_main);
    text-align: center;
}

.mainpagetagline {
    font-family: 'Mulish', sans-serif;
    font-weight: 700;
    font-size: 80%;
    color: var(--logo_color);
    text-align: center;
    text-shadow: 0px 0px 1px #00000044;
}

.mainpagelegal {
    font-family: 'Mulish', sans-serif;
    font-weight: 500;
    font-size: 100%;
    color: var(--dark_text_main);
}

.mainpagefineprint_link {
    color: var(--dark_text_main);
    text-decoration: underline;
}

.mainpagefineprint_link:hover {
    color: var(--dark_text_main);
    text-decoration: none;
}


.mainpagerecipetitlelink {
    font-family: 'Mulish', sans-serif;
    font-weight: 00;
    font-size: 90%;
    color: var(--homepage_recipecard_fontcolor);
    text-decoration: none;
}

.mainpagerecipecard {
    background-color: var(--homepage_recipecard_background);
    border-radius: 0;
    border-width: 0;
    /*box-shadow: 0px 0px 3px #333333;*/
}

.blogcard {
    background-color: var(--homepage_blogcard_background);
    border-radius: 0;
    border-width: 1px;
    border-color: var(--homepage_blogcard_border);
    text-decoration: none;
    /*box-shadow: 0px 0px 3px #333333;*/
}

.blogcardheader {
    font-family: 'Copse', sans-serif;
    font-weight: 500;
    font-size: 110%;
    color: var(--homepage_blogcard_fontcolor);
    text-align: center;
    text-decoration: none;
}

.blogcardtext {
    font-family: 'Mulish', sans-serif;
    font-weight: 500;
    font-size: 90%;
    color: var(--homepage_blogcard_fontcolor);
    text-align: center;
    text-decoration: none;
}


.rcpblogcard {
    background-color: var(--recipe_blogcard_background);
    border-radius: 8px;
    border-width: 0;
    text-decoration: none;
    /*box-shadow: 0px 0px 3px #333333;*/
}

.rcpblogcardheader {
    font-family: 'Copse', sans-serif;
    font-weight: 500;
    font-size: 100%;
    color: var(--recipe_blogcard_fontcolor);
    text-align: center;
    text-decoration: none;
}

.rcpblogcardtext {
    font-family: 'Mulish', sans-serif;
    font-weight: 500;
    font-size: 100%;
    color: var(--recipe_blogcard_fontcolor);
    text-align: center;
    text-decoration: none;
}

.categorycard {
    background-color: var(--homepage_categorycard_background);
    border-radius: 0;
    border-width: 1px;
    border-color: var(--homepage_blogcard_border)
}

.mainpagecategoryheader {
    font-family: 'Mulish', sans-serif;
    font-weight: 700;
    font-size: 110%;
    color: var(--homepage_categorycard_heading);
    text-align: center;
    text-decoration: none;
}

.mainpagecategorylink {
    font-family: 'Mulish', sans-serif;
    font-weight: 500;
    font-size: 90%;
    text-align: center;
    color: var(--homepage_categorycard_link);
    text-decoration: none;
}

.mainpagecategorylink:hover {
    text-decoration: underline;
}