/*
* The CSS box-sizing property allows us to include the padding and border
* in an element's total width and height. We use universal selector to apply
* this rule to all elements.
* And to choose font family.
*//*
* The userSelect property sets or returns whether the text of an element can be selected or not.
*/
/* For all browsers
* ================= */

* {
    box-sizing: border-box;
    -webkit-box-sizing: border-box; /* -webkit- vendor prefix for Safari */
    -moz-box-sizing: border-box; /* -moz- vendor prefix for Firefox */
    margin: 0;
    padding: 0;
    outline: none;
    outline-color: transparent;
    border: none;
    border-color: transparent;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax *//* CSS user-select Property */
    background-clip: padding-box; /* Default value: border box */
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding-box;
}

*::-moz-focus-inner {
    border-style: none; /* Remove the inner border in Firefox. */
}

/*  Certain types of motion-based animations can cause discomfort for some users. 
*   In particular, people with vestibular disorders have sensitivity to certain motion triggers.
*   The @media at-rule has a media feature called prefers-reduced-motion to set CSS based on the user's preferences. 
*   It can take one of the following values:
*       reduce
*       no-preference
*/
@media (prefers-reduced-motion: no-preference) {
  * {
    scroll-behavior: smooth;
  }
}

html {
    height: auto; /* It will automatically adjust the height to allow the content to be displayed correctly. */
    text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%; /* -webkit- vendor prefix for Safari */
    -moz-text-size-adjust: 100%;  /* -moz- vendor prefix for Firefox */
    scroll-behavior: smooth; /* To add a smooth scrolling effect to the page. */
    font-size: 100%;  /* Most browsers have 16px default  | 1rem = 16px */
}

body {
    height: auto;
    text-align: center;
    letter-spacing: 0.0375rem;
    color: #474838; /* rgb(71,72,56) *//* DarkGreen */
    font-family: "Raleway", sans-serif;
    background: #fffff0 repeating-linear-gradient(90deg,#fff, #f1f1e6 1%); /* White | offWhite */
}

/* The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure 
*  without using float or positioning.*/
/* Flexbox helps me design my webpage so that it looks good on any screen size. */
.flexBox {
    display: flex;
    display: -webkit-flex;
    align-items: center; /* Position the flex items in the center, inside the same container.*/
    justify-content: center;
    flex-flow: column nowrap; /* The "flex-direction: column;" stacks the flex items vertically (from top to bottom) */
}

.flexBoxWrap {
    display: flex;
    display: -webkit-flex;
    align-items: center;
    justify-content: center;
    flex-flow: row wrap; /* flex-flow property is a shorthand property: flex-direction flex-wrap|initial|inherit; */
}

/* box shadow property *//* Images | Buttom-lile links */
.boxShadow {
    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);
}

.hover-shadow:hover {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    -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);
}

/* Overlay Image | Prevent the image from being downloaded or copied.| Placed over the image */
.overlayImg {/* All photos have an image saver */
    position: relative;
    background-color: transparent;
    z-index: 1; /* z-index only works on positioned elements (position: absolute, position: relative, position: fixed, or position: sticky) and flex items. */
    pointer-events: none; /* The pointer-events property defines whether or not an element reacts to pointer events. | Do not allow copying or downloading an image. */
}

/* images responsive */
.responsive {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* <span> */
span.family-recipe {
    font: small-caps 400 1.5rem 'Montserrat', sans-serif; 
}

span.note {
    display: block;
    font: 400 1rem 'Raleway', sans-serif;
    color: #000; /* black */
    width: 100%;
    padding: 0 0 2rem 0;
}

/* palette #474838 #acac9a #fafaeb */
.containerTags { /* flex box */
    display: flex;
    display: -webkit-flex;
    flex-flow: row wrap;
    row-gap: 1rem;
    column-gap: 1rem;
    max-width: 1200px;
    padding: 2rem; 
    background-color: rgba(97,98,71, 0.4); /* #616247 */
    border-top: 2px inset rgba(97,98,71,0.7); 
}

span.tag { /* flex item */
    display: inline-block;
    font: small-caps 400 0.95rem 'Raleway', sans-serif;
    background-color: rgb(71,72,56); /* #474838 */
    color: #fafaeb;
    padding: 0.5rem 1rem;
}

hr.divide {
    display: block;
    border: 2px inset #fffff0;
    background-color: #fffff0;
    width: 100%;
}

span.separate {
    display: inline-block;
    width: 0.85rem;
    height: 0.85rem;
}

span.position-text-block {
    display: inline-table;
    max-width: calc(100% - 2.5rem); /* It has not effect for small screens because display is inline. */
    text-align: justify;
}

/* To separate paragraphs */
.lineBreak32 {
    padding: 2rem 0;
}

.lineBreak16 {
    padding: 1rem 0;
}

/*  <button class="openDialog> to open modal | <a class="link">  to open an external page */
.open-dialog,
.blog-link {
    display: inline-block;
    padding: 0 0.85rem; 
    cursor: pointer;
    text-decoration: none;
    font: 400 1.1rem "Raleway", sans-serif;
    color: #f1f1e6;
    background: #616247 linear-gradient(to right, #616247, #b8861b);
}

 /* underline special to links */
.line {
    text-decoration: underline;
    text-decoration-thickness: 2px; /* To set the thickness of the decoration line. */
    text-underline-offset: 5px; /* To improve readability, I use CSS properties like text-underline-offset to separate the text from the line. */
    cursor: pointer;
}

.open-dialog:focus,
.open-dialog:hover,
.blog-link:focus,
.blog-link:hover {
    text-decoration: none;
    background: #1e6483 linear-gradient(to right, #b8861b, #1e6483); /* SeaGreen */
    color: #f1f1e6;
}

/* canvas 
*===================*/
main { /* flex-box */
    margin-inline: auto;
    width: 100%;
    max-width: 58.75rem;
    padding: 2rem 2rem 0 2rem;
    background-color: #f1f1e6;
    row-gap: 3rem;
}
            
/* section | flex item | flex-box */
.heading {
    row-gap: 3rem;
}

/* header *//* flex item | flex-box */
.hero {
    row-gap: 1rem;
}

.hero-figure { /* flex item */
    position: relative;
    background-color: #4f4537; /* rgb(79,69,55) *//* DarkWood*/
    border: 1px solid rgba(0, 0, 0, 0.8);
    padding: 1rem;
    border-block-start: 2px #393a2b solid;
    border-inline-end: 4px #9e9f8d solid;    
}

.hero-img {
    padding: 0.73rem;
    background-color: #2c2d1e; /* rgb(44,45,30)*/
}

.hero-title { /* flex-item */
    font: 500 6rem 'Anton', sans-serif;
    text-align: center;
    color:#116a6b; /* rgb(17,106,107) */ /* SeaGreen */
}

.hero-subtitle { /* flex-item */
    font: small-caps 500 2rem  "Baskervville", sans-serif;
    text-align: center;
    color: #116a6b; /* SeaGeren */
}

/* div container author name  | flex item & flex box */
.author { 
    width: 100%; /* It is necessary to modify the position of the text on the left. */
    font: 400 1.125rem "Raleway", sans-serif;
    align-items: flex-start;
}

.publish-date { /* flex-item*/
    color: rgba(71,72,56, 1);
}

/* section flex-box */
.text {
    column-count: 3;
    column-gap: 1.5rem;
    font: 400 1.2rem "Raleway", sans-serif;
    text-align: left;
}

/* pseudo-element to add a special style to the first letter of a text. */
.first-paragraph::first-letter {
    font-size: 3.75rem;
    color: #116a6b; /* SeaGreen */
    margin-right: 1rem;
    float: left;
}

/* <blockquote> */
.text-quote {  /* flex item */
    display: table;
    text-align: center;
}

.line-quotes {
    margin: 1rem 0;
    border: 1px solid rgba(120, 120, 120, 0.6);
}

.quote {
    color: #116a6b; /* SeaGreen */
    font: 400 1.375rem  "Raleway", sans-serif;
}

/* pseudo-element to style specified parts of an element. */
/* To remove quotes */
q::before {
    content: "";
}

q::after {
    content: "";
}

/* section with 2 columns: <article> and <aside> */
.text-with-images {/* flex box*/
    font: 400 1.2rem "Raleway", sans-serif;
    text-align: left;
    column-count: 2;
    row-gap: 2rem;
    column-gap: 1.5rem;
    align-items: flex-start;
}

/* <article> *//* flex-item */
.brief-history { 
    flex: 1;
    -webkit-flex: 1;
}

/*TODO A description list with chronological facts */
.list-title, 
.list-subtitle { /* <dt> to define the term (name) */
    color: #116a6b; /* SeaGreen */
    font-weight: bold;
}

.lists { /* <dl> to define  the description list */
    list-style-type: none;
    margin: 2rem 0 0 0;
}
            
.lists dd { /* To describe each term */
    margin: 0 0 1.5rem 0;
}

/* <aside> *//*flex item | */
.image-wrapper { /*<aside>*/
    row-gap: 2rem;
    column-gap: 1rem;
    flex: 2;
    -webkit-flex: 2;
}

.img-with-quote { /* flex-box */
    column-gap: 1rem;
    row-gap: 1rem;
    column-count: 2;
    max-width: 600px;
}

.frame-images {
    position: relative;
    padding: 16px;
}

figcaption {
    color: #474838;
    margin: 1rem 0 0 0;
    padding: 0 0 0 0.73rem;
    border: 4px inset rgba(0, 0, 0, 0.6);
}

.figure-square {
    max-width: 338px;
}

.figure-rectangle {
    max-width: 600px;
}

.img-with-quote .square { /* flex-item */
    flex: 2;
    -webkit-flex: 2;
}

.image-quote { /* flex-item *//* blockquote */
    text-align: center;
    flex: 1;
    -webkit-flex: 1;
}

/* Last section | <aside> *//* images */
.image-1, 
.image-3 {
    max-width: 600px;
    padding: 0.73rem;
    background-color: #f1f1e6; /* rgb(241,241,230) */
}
.image-2 {
    max-width: 338px;
}

/* frame design for images */
.painted-wooden-frame {/* special  */
    border: 4px inset rgba(0, 0, 0, 0.6);
}

/* for <figure> */
.frameBlue {
    background-color: #1e6483; /* rgb(30, 100, 131) *//* BlueTurquoise */
    background-image: repeating-linear-gradient(-135deg, rgba(0,0,0,0), rgba(30,100,131,0.2) , rgba(255,255,240,0.5), rgba(97,98,71,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%);
}

/* blockquote lines */
.up {
    margin: 0 0 1rem 0;
}

.down {
    margin: 1rem 0 0 0;
}

/*==============
================*/
/* The ::marker selector selects the marker of a list item.*/
/* This selector works on any element set to display:list-item.*/
details { /* default values: display: block | attribute open,  a boolean attribute. */
    width: 100%;
    min-height: 11rem;
    margin-inline: 2rem;
}

/* The ::marker selector selects the marker of a list item. */
/* This selector works on any element set to display:list-item. */
/* display:list-item let the element behave like a <li> element */
summary { /* default values: display: list-item */
    font: small-caps 400 1.5rem "Raleway", sans-serif;
    max-width: 110px;
}

.color-palette { /* flex box */
    column-gap: 0.35rem;
    row-gap: 0.35rem;
}

.colorBox{ /* flex item | flex box */
    row-gap: 0.35rem;
}

.color { /* flex item */
	width: 60px;
    height: 60px;
}

.colorDarkGreen {
    background-color: #474838;
}

.colorBrightGreen {
    background-color: #567b03;
}

.colorTerrariumMoss {
    background-color: #616247;
}

.colorLightYellow {
    background-color: #fbfbdb;
}

.colorOffWhite {
    background-color: #f1f1e6;
}

.colorBlueTurquoise {
    background-color: #1e6483;
}

.colorSeaBlue {
    background-color: #284048;
}

.colorSeaGreen {
    background-color: #116a6b;
}

.colorDarkWood {
    background-color: #4f4537;
}

.colorWood {
    background-color: #8d7344;
}

.colorGolden {
    background-color: #b8861b;
}

.hexadecimal-color-value { /* flex item */
    font: 400 0.85rem "Raleway", sans-serif;
    text-align: center;
}

/* Bloxckquote 
***************/
.aldioxHuxley { /* flex item */
    color: #116a6b;
    border-top: 6px groove #f1f1e6; /* Sweet Corn *//* The Hottest Spring/Summer Colors 2019 */
    border-bottom: 6px groove #f1f1e6;
    padding: 3rem 2rem; /* Visual efect */
    width: 100%;
    max-width: 58.75rem;
    background-color: #f1f1e6; /* offWhite */
    cursor: text;
    margin-inline: auto;
}

.aldioxHuxley q {
    display: block; /* because it is an inline element */
    font: small-caps 500 1.6rem 'Cinzel', sans-serif;
    max-width: 600px; /* To set the maximum width of the element. */
    margin-inline: auto;
}

blockquote.mediumQuote q, 
blockquote.largeQuote q {
    max-width: 800px;
}

.aldioxHuxley .author-quote {
    margin: 10px 0 0 0;
    font: 400 1rem 'Raleway', sans-serif;
}

/* <footer> */
footer { /* flex box */
    width: 100%;
    max-width: 58.75rem;
    border-top: 0.125rem inset rgba(97,98,71,0.5);
    background-color: rgb(51,51,51); 
    color: #fffff0; /* Ivory */
    cursor: text;
    margin-inline: auto;
}

footer div.backgroundTransparent { /* flex item | flex box */
    width: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    font: 400 0.85rem "Raleway", sans-serif; 
    text-align: center;
    line-height: 1.6;
}

/* a div with an image */
.divide-spaces {/* flex item | flex box */
    padding: 2rem;
    column-gap: 2rem;
}

.footer-section { /* flex item | flex box */
    border-top: 0;
    padding: 0;
    width: calc(100% - 308px);
}

.footer-title {/* flex item */
    width: 100%;
    font: small-caps 400 1rem "Raleway", sans-serif; 
}

p.comment-footer { /* flex item */   
    text-align: justify;
}

/* <figure>*/
.footer-fig {
    border: 4px inset #fffff0;
}

.footer-fig img {
    max-width: 268px;
}

div.signature-validator,
div.conditions-editor {
    padding: 16px 32px 20px 32px;
}

/* Validator CSS3 *//* Tha container is a flex box with flex-wrap: wrap */
a.validator-link { /* Contained into a flex item */
    display: block;
    padding: 0.25rem 0; 
}

img.validator-img {
    display: block;
    width: 42px;
    height: 0.85rem;
}

/* links */
#w3SchoolsLink,
a#goDoc {/* values of the link class that it does not need or different. */
    display: inline-block;
    padding: 0;
    margin: 0;
    color: #fffff0; /* Ivory */
    text-decoration-color: #fffff0;
}


/* BREAKPOINTS WITH *//* CSS3 MEDIA QUERIES 
********************************************/
@media only screen and (max-width: 844px){
    .text-with-images {
        column-count: 1;
    }

    /* <article> *//*<aside>*/
    .brief-history,
    .image-wrapper { 
        flex: auto; 
        -webkit-flex: auto;
    }
}  

@media only screen and (max-width: 800px){
    /* <footer> */
    .divide-spaces {
        row-gap: 32px;
        flex-flow: column nowrap;
    }

    .footer-section { /* flex item | flex box */
        width: 100%;
    }

}

@media only screen and (max-width: 720px) {
    .hero-title {
        font-size: 4.5rem;
    }

    .text {
        column-count: 2;
    }

    /* footer text */ 
    p.comment-footer { /* flex item */   
    text-align: center;
    }
}

@media only screen and (max-width: 560px) {
    .hero-title {
        font-size: 3.5rem;
    }
                
    .hero-subtitle {
        font-size: 1.75rem ; 
    }

    .author,
    .quote,
    .list-title {
        font: 400 1.125rem "Raleway", sans-serif;
    }
                            
    .text {
        /*
        display: grid;*/ /* It is necessary to use the gap between the rows in a flexbox or grid layout. */
        /*row-gap: 1rem;*/
        column-count: 1; 
        font: 400 1rem "Raleway", sans-serif;
    }

    .blog-link,
    .text-with-images {
        font: 400 1rem "Raleway", sans-serif;
    }

   .img-with-quote { /* flex-box */
        flex-direction: column;
        column-count: 1;
        row-gap: 2rem;
    }

    .img-with-quote .figure-square {
        flex: 1;
        -webkit-flex: 1;
    }

    .figure-square,
    .image-2 {
        max-width: 600px;
    }

    /* <footer> */
    div.signature-validator,
    div.conditions-editor {
        padding: 16px 16px 20px 16px;
    }
}

@media only screen and (max-width: 480px) {
    .hero-title {
        font-size: 2.5rem;
    }

    .hero-subtitle {
        font-size: 1.5rem ; 
    }  
}