@charset "UTF-8";

/*  stili per il solo indice       */

html {}

body {
    /*font-size: 160%;*/
    font: 160% Georgia, "Times New Roman", Times, serif;
    font-size: clamp(1rem, 2.5vw, 3.5rem); 
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: bold;
    font-family: "georgia" serif;
    text-transform: capitalize;
    page-break-after: avoid;
    -webkit-column-span: all;
    /* Chrome, Safari, Opera */
    column-span: all;
    margin-bottom: 0;
}

h1 {
    font-size: 2rem;
    margin-top: 0;
}

h2 {
    font-size: 1.4rem;
}

h3 {
    font-size: 1.2rem;
}

p {
    margin: 0;
    padding: 0;
}

p+p {
    text-indent: 2rem;
    margin: 0;
    padding: 0;
}

a {}

article {
    font-size: 1.2rem;
    /*max-width: 80%;*/
    margin: auto;
    padding: 1rem;
    margin-top: 1rem;
}


/**** Styling *****/

figure {}

span.label {
    font-weight: bold;
}


/*INDEX button*/


header {
    width: 90%;
    padding: 0 1em;
    text-align: left;
    color: #fff;
}

ul li {
    margin: 0;
    padding: 0;
    text-indent: 0;
}


/*INDEX styles*/

#index {
    text-align: center;
    background-color: #455A64;
    display: inline;
    padding: 0;
    margin: 0;
    color: #212121;
}
.a2a_kit {text-align: center; margin: auto;}

#colophon {
    background-color: #827373;
    /*607D8B*/
    color: #CFD8DC;
    margin: 0;
    /*display: block;
    max-width: 100%;*/
    text-align: left;
    font-size: 1rem;
}


/* colonne */

#colophon section, ul.index {
    -webkit-column-gap: 3em;
    /* Chrome, Safari, Opera */
    -moz-column-gap: 3em;
    /* Firefox */
    column-gap: 3em;
    -webkit-column-rule: 1px solid #BDBDBD;
    /* Chrome, Safari, Opera */
    -moz-column-rule: 1px solid #BDBDBD;
    /* Firefox */
    column-rule: 1px solid #BDBDBD;
    page-break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
    -webkit-columns: 25rem 3;
    -moz-columns: 25rem 3;
    columns: 25rem 3;
    max-width: 100%;
}

#colophon footer {
    padding: 1rem 0;
}

#colophon a {
    color: #CDDC39;
    text-decoration: underline;
}

#colophon p {
    text-align: left;
    text-indent: 0;
    padding: 0 2rem;
    /* margin-bottom: .5rem;*/
}

#colophon header {
    color: #FFFFFF;
    background-image: url("egg.png");
    background-position: right;
    /*95% 0%*/
    background-repeat: no-repeat;
    background-size: auto 75%;
    /*contain*/
}


/*contain*/

#mum {
    width: 25%;
    float: left;
    margin 0;
    padding 0;
    text-align: center;
    font-style: italic;
    break-inside: avoid;
    font-size: .6em;
}

#mum img {
    width: 100%;
    margin: 0;
    padding: 0;
}

ul.index {
    font-size: 1.2rem;
    list-style: none;
    text-align: left;
}

li a {
    text-decoration: none;
    color: #BDBDBD;
    /*font-family: verdana,sans-serif;*/
    display: inline-block;
    width: 100%;
    text-indent: 1rem;
    font-style: italic;
}

li:nth-child(odd) a {
    color: white;
}

.index a:hover {
    color: #CDDC39;
    background-color: #827373;
}
#copy {
    background-color: #827373;
    color: #CFD8DC;
    font-size: 1rem;
    padding:  1rem 0;
}

/* responsive */

@media all and (max-width: 1920px) {
    article {
        -webkit-flex-flow: column wrap;
        flex-flow: column wrap;
        max-width: 90%;
        width: 90%;
    }
    #colophon {
        max-width: 100%;
        width: 100%;
        padding: 0 1rem;
    }
}

@media all and (max-width: 1200px) {
    #colophon header {
        background-image: none;
    }
    article {
        /*font-size: 1.8rem !important;*/
        font-size: clamp(14px, 2.5vw, 3.5rem); 
        -webkit-flex-flow: column wrap;
        flex-flow: column wrap;
        max-width: 100%;
        width: 100%;
    }
    #colophon {
        max-width: 100%;
        width: 100%;
    }
}


@media (any-pointer: coarse) {
    .container a {
      padding: .8em;
    }
  }
/*PRINT STYLES*/

@media print {
    * {
        color: black;
        background-color: white;
    }
    h1, h2, h3, h4, h5, h6 {
        break-after: avoid;
    }
    section {
        break-inside: avoid;
        widows: 3;
        orphans: 3;
    }
    body {
        font-size: 12pt;
    }
    nav {
        display: none;
    }
    .recipe, .index {
        font-size: 10pt;
        max-width: 100%;
    }
    .ing {
        border: none;
        margin: 0;
        padding: 0;
    }
    figure {
        max-width: 4.5cm;
    }
    a {
        text-decoration: none;
    }
    a:link:after {
        content: " (" attr(href) ") ";
    }
    .ing li::before {
        content: "☐ "
    }
    li.inggroup::before {
        content: ""
    }
    .inggroup .ing li::before {
        content: "☐ "
    }
    .index tr {
        border-bottom: .1pt dotted silver
    }
    .index a:link:after {
        content: "";
    }
    @page {
        margin: 0.5cm;
    }
}