.hero-horizontal {/* flex box */
    justify-content: flex-end;
    background-color: #f1f1e6; /* colorOffWhite */
    background-image: repeating-linear-gradient(-135deg, rgba(0,0,0,0), rgba(187,165,124,0.2) , rgba(255,255,240,0.5), rgba(187,165,124,0.3) 0.2%),repeating-linear-gradient(45deg,rgba(0,0,0,0), rgba(0,0,0,0.5) 0.5%), repeating-linear-gradient(-45deg,rgba(0,0,0,0), rgba(0,0,0,0.5) 0.5%);
    min-height: 300px;
    max-width: 58.75rem;
    width: 100%;
    padding: 1rem;
}

/* hgroup */
.container-title { /* flex box */
    color: #f1f1e6; /* colorOffWhite */
    width: calc(100% - 334px);
    height: 332px;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.1); /* opacity */
    background-image: repeating-linear-gradient(-135deg, rgba(0,0,0,0), rgba(187,165,124,0.2) , rgba(255,255,240,0.5), rgba(187,165,124,0.3) 0.2%),repeating-linear-gradient(45deg,rgba(0,0,0,0), rgba(0,0,0,0.5) 0.5%), repeating-linear-gradient(-45deg,rgba(0,0,0,0), rgba(0,0,0,0.5) 0.5%);
    border: 16px solid #f1f1e6;   /* colorOffWhite*/
    padding: 16px;
}

/* h1 */
.recipe-name {  /* flex-item */
    font: 400 small-caps 6rem "Anton",sans-serif;               
}

/* p */
.subtitle-description {
    font: 400 small-caps 2rem "Baskervville",sans-serif;

}

/* figure */
.header-fig { /* flex item with class overlayImg *//* 334px * 332px */
    position: relative;
    background-color: #f1f1e6;
    border-left: 2px solid #3c2010; 
    padding: 1rem;
}

/* img */
.header-img {
    max-width: 300px;
}

/* sections for the preparation of the recipe | for the gallery */
h3.preparation-section-title { /* flex item */
    font: small-caps 400 1.5rem 'Raleway', sans-serif; 
    text-align: left;
    width: 100%; /* To be able to place the title on the left.*/
}

/* TODO list | different attributes depending on text positions */
.preparation-list  {
    font: 400 1.2rem 'Raleway', sans-serif;
    list-style: none;
    text-align: justify; 
    overflow: hidden;
    text-overflow: ellipsis; 
    width: 100%; 
    padding: 1rem 0 0 0;  
}

.withoutPadding {
    text-align: justify;  
    width: 100%; 
    padding: 0;
}

.nested-list {
    padding: 0 0 0 2rem;
}

.specialStyle { /* flex item | when the div has an image */
    text-align: justify; 
    width: calc(100% - 332px);
}

.specialStyle-vertical-image { /* flex item | when the div has an image */
    text-align: justify; 
    width: calc(100% - 16rem);
}

/* ::before Pseudo-element to innsert dots before  each <li> element */
li.dot::before {
    content: "";
    display: inline-block;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    margin-right: 7px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); /* This value belongs to w3Schools | to create paper-like cards */
    -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    -moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    background: #2c2d16 linear-gradient(to bottom right, #d7d7b8, #2c2d16);
    background: #2c2d16 -moz-linear-gradient(to bottom right, #d7d7b8, #2c2d16);
    background: #2c2d16 -webkit-linear-gradient(to bottom right, #d7d7b8, #2c2d16);
}

/* For Cream zucchini page -styles
====================================== */
/* section with tex and images */
.paragraphs-images-recipes {
    row-gap: 2rem;
}

/* For a section with a photo */
.preparationContainer {/* flex item | flex box */
    column-gap: 2rem;
    justify-content: space-between;
}

/* <p> with special properties | with a comment about an awesome event */
.event {
    font: 400 1.2rem 'Raleway', sans-serif; 
    line-height: 1.6;
    text-align: justify;
    width: 100%; /* It is necessary. When the text is small and we have text-align justify, it is positioned in the center, to avoid this we set width 100%. */
}

/* According to the position of the photo in the section */
.photo-beginning {
    padding: 48px 0 36px 0;
}

.photo-middle {
    padding: 1rem 0;
}

.framedPhoto { /* flex item with class overlayImg */
    position: relative;
    padding: 16px;
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
    -webkit-box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
    -moz-box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19); 
}

/* section with lemon recipes | carrot recipe */
/* gallery of photos */
.text-subtitle {
    font: small-caps 400 1.2rem "Raleway", sans-serif;
}

.withoutFrame {
    position: relative;
    max-width: 13.9rem;
}

.descriptionPhoto {
    margin: 0;
    padding: 0 0.25rem;
    border: none;
    text-align: left;
}

.colorZanahoria {
    background-color: #f28718;
}

.colorChia {
    background-color: #655244;
}

.colorArandanos {
    background-color: #101419;
}

.colorLimon {
    background-color: #fff0c1;
}

.preparation-list-vertical-image {
    width: calc(100% - 14.25rem);
    list-style: none;
}

/* figure with vertical image */
.withoutFrame-vertical-image {
    position: relative;
    max-width: 196px;
}

/* figure located at the end of the article */
.end-article {
    margin-inline: auto;
}

.link-information {
    display: block;
    font: 400 0.8rem 'Raleway', sans-serif;
    color: #2c2d16; /* rgb(44,45,30) *//* DarkGreen */
    width: 100%;
}


/* BREAKPOINTS WITH *//* CSS3 MEDIA QUERIES 
********************************************/
@media only screen and (max-width: 560px) {
    /* h1 */
    .recipe-name {  /* flex-item */
        font: 400 small-caps 1.5rem "Raleway",sans-serif;
    }

    /* p */
    .subtitle-description {
        font: 400 small-caps 1.2rem "Baskerville",sans-serif;
    }


    /* title section */
    h3.preparation-section-title {
        font: small-caps 400 1.2rem 'Raleway', sans-serif; 
    }

    /* TODO list */
    .preparation-list,
    .nested-list {
        text-align: left;
        font: 400 1rem 'Raleway', sans-serif;
    }

    li.dot::before {
        width: 0.5rem;
        height: 0.5rem;
    }

    /* <p> with special properties | with a comment about an awesome event */
    .event {
        font: 400 1rem 'Raleway', sans-serif;
    }
}

@media only screen and (max-width: 665px) {
    /* header*/
    .hero-horizontal {
        background-color: #f1f1e6; /* rgb(187,165,124) */
        background-image: repeating-linear-gradient(-135deg, rgba(0,0,0,0), rgba(187,165,124,0.2) , rgba(255,255,240,0.5), rgba(187,165,124,0.3) 0.2%),repeating-linear-gradient(45deg,rgba(0,0,0,0), rgba(0,0,0,0.5) 0.5%), repeating-linear-gradient(-45deg,rgba(0,0,0,0), rgba(0,0,0,0.5) 0.5%);
        justify-content: center;
        width: 100%;
        min-height: 0;
        height: auto;           
    }

    /* hgroup */
    .container-title {
        background-color: rgba(0, 0, 0, 0.2);
        max-width: 334px;
        width: 100%;
        height: auto;
        padding: 16px; 
    }
    
    .container-title,
    .header-fig {
        border: 1px solid rgba(0, 0, 0, 0.2);
    }

    /* TODO list */
    .preparation-list,
    .nested-list {
        text-align: left;
    }

    ul.nested-list {
        padding: 0;
    }

    span.position-text-block {
        display: inline; /* Thus, max-width has no effect on this element since its display value is inline. */
        text-align: left;
    }

    /* <p> with a comment about an awesome event */
    .event {
        text-align: left;
    }

    /* TDOO list with images */
    .specialStyle-vertical-image {
        width: 100%;
    }

    /* figure with vertical image */
    .withoutFrame-vertical-image {
        position: relative;
        max-width: 300px;
    }
}

@media only screen and (max-width: 800px){
    .preparationContainer {
        row-gap: 2rem;
        justify-content: center;
    }

    .photo-middle {
        padding: 0;
    }

    /* TODO list */
    .preparation-list,
    .specialStyle,
    .nested-list,
    .withoutPadding,
    span.position-text-block {
        text-align: left;
    }

    .specialStyle {/* I modify initial values for small screens. */
        width: 100%;
        padding: 0;
    }

    span.position-text-block {
        display: inline; /* Thus, max-width has no effect on this element since its display value is inline. */
    }

    /* images section preparation and gallery */
    .square {
        max-width: 300px;
    }

    .rectangle {
        max-width: 300px;
    }
}

@media only screen and (max-width: 800px) and (min-width: 561px){
    /* h1 */
    .recipe-name {  /* flex-item */
        font: 400 small-caps 3rem "Anton",sans-serif;
    }

    /* p */
    .subtitle-description {
        font: 400 small-caps 1.5rem "Baskervville",sans-serif;
    }
}

@media only screen and (max-width: 1004px) and (min-width: 801px){
    /* h1 */
    .recipe-name {  /* flex-item */
        font: 400 small-caps 4rem "Anton",sans-serif;
    }

    /* p */
    .subtitle-description {
        font: 400 small-caps 1.5rem "Baskervville",sans-serif;
    }
}