/*
* 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
* ================= */

*, ::before, ::after {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box; /* -moz- vendor prefix for Firefox */
}

* {
    margin: 0;
    padding: 0;
    outline: none;
    outline-color: transparent;
    border: none;
    border-color: transparent;
    user-select: none; /* Standard syntax *//* CSS user-select Property */
    -webkit-user-select: none; /* Safari */
    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 {
    width: 100%;
    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 {
    width: 100%;
    height: auto;
    text-align: center;
    letter-spacing: 0.0375rem;
    color: #2c2d16; /* rgb(44,45,30) *//* 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;
    margin-inline: auto;
    width: 100%;
    height: auto;
    object-fit: cover;
}

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

.square {
    max-width: 268px;
}

.rectangle {/* special image: preparation coucous */
    max-width: 268px;
}

/* <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: 62.75rem;
    padding: 2rem; 
    background-color: rgba(44,45,22, 0.3); /* #2c2d16 |colorDarkGreen */
    border-top: 2px inset rgba(44,45,22,0.7); 
}

.containerTags-wood { /* flex box */
    display: flex;
    display: -webkit-flex;
    flex-flow: row wrap;
    row-gap: 1rem;
    column-gap: 1rem;
    width: 100%;
    max-width: 62.75rem;
    padding: 2rem; 
    background-color: rgba(135,115,68, 0.3); /* #877344 |colorWood */
    border-top: 2px inset rgba(135,115,68,0.7); 
}

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

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

hr.divide-margin { /* recipe page */
    margin: 0 0 2rem 0;
}

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

/* children of li elements*/
span.position-text-block {
    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%. */
    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;
}

.lineBreak32-bottom {
    padding: 0 0 2rem 0;
}

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

 /* 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;
}

#winning-recipe:focus,
#winning-recipe:hover,
.blog-link:focus,
.blog-link:hover {
    text-decoration: none;
    background: #3c2010 linear-gradient(to right, #bba57c, #3c2010); 
    color: #f1f1e6;
}

/* Use the transition-duration property specifies how many seconds (s) a transition effect takes to complete. 
*  Only for some blocks. */
.transitionEffect {
    transition-duration: 2s;
    -webkit-transition-duration: 2s;
    -moz-transition-duration: 2s;
    -o-transition-duration: 2s;
}

/* canvas 
*================================================*/
.magazineContainer {
    width: 100%;
    max-width: 62.75rem;
    margin-inline: auto;
    background-color: #f1f1e6;
}

/* nav *//* flex box */
.magazineIndex {
    width: 100%; 
    max-width: 62.75rem;/* real value: max-width 58.65rem + from padding-inline  2rem + 2rem */
    padding: 3rem 2rem 1.5rem 2rem;
    font: small-caps 500 1rem "Raleway", sans-serif;
    text-transform: capitalize;
}

/* nav *//* flex box */
#openNavResponsiveChangeColor {
    display: none;
}

.magazineIndex,
ul.mediumLargeDevice { /* flex-box */
    justify-content: flex-start;  
}

/* TODO  an unordered list with link buttons to open other pages */
ul.mediumLargeDevice {
    list-style: none;
}

ul.mediumLargeDevice .list-item { /* flex-item */
    display: inline-block;
    border-top-left-radius: 7px;
    border-bottom-left-radius: 7px;
}

/* button-like link */
.btnLink {
    display: inline-block;
    padding: 4px;
    color: #2c2d16; /* colorDarkGreen */
    background-color: rgba(241,241,230,0.7); /* colorOffWhite */
    border: 4px groove #f1f1e6;
    border-radius: 7px;
    text-decoration: none;
    cursor: pointer;
}

.btnLink:hover {
    outline: none;
    text-decoration: none;
    background-color: #f1f1e6;
    border: 4px solid #f1f1e6;
    border-radius: 7px;
}

.no-active {
    display: inline-block;
    padding: 4px;
    color: #2c2d16;
    text-decoration: none;
    cursor: text;
}

.slash::after {
    content: "/";
    display: inline-block;
    font-size: 80%;
    padding: 0 0.50rem;
    color: #2c2d16;
}

/* when open dialog change colors */
.btnLink-modal {
    display: inline-block;
    padding: 4px;
    color: #f1f1e6;
    border: 4px groove #bba57c; /* colorBoscPear */
    border-radius: 7px;
    text-decoration: none;
    cursor: pointer;
}

.btnLink-modal:hover {
    text-decoration: none;
    color: #3c2010; /* colorDarkCooper */
    background-color: #f1f1e6;
    border: 4px solid #f1f1e6;
    border-radius: 7px;
}

.no-active-modal {
    display: inline-block;
    padding: 4px;
    color: #f1f1e6;
    text-decoration: none;
    cursor: text;
}

/* main */
main { /* flex-box */
    position: relative;
    margin-inline: auto;
    width: 100%; /* real value: max-width 58.65rem + from padding-inline  2rem + 2rem */
    padding: 1.5rem 2rem 0 2rem;
    row-gap: 3rem;
}

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

.hero-figure { /* flex item *//* frameBurlapCanvas */
    position: relative;
    border: 1px solid rgba(0, 0, 0, 0.8);
    padding: 1rem;
    border-block-start: 2px #2c2d16 solid; /* rgb(44,45,22) range with a yellow touch */
    border-inline-end: 4px #9e9f8d solid;  /* rgb(158,159,141) greenish gray*/
}

.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:#3c2010; /* rgb(80,43,22) darkCooper */
}

.hero-subtitle { /* flex-item */
    font: small-caps 500 2rem  "Baskervville", sans-serif;
    text-align: center;
    color: #3c2010; /* rgb(60,32,16) darkCopper */
}

/* section with tex and images */
.paragraphs-images {
    row-gap: 3rem;
}

/* hgroup container author name  | flex item & flex box */
.paragraphs-images hgroup {
    width: 100%;
    text-align: left;
}

.author-name { 
    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, 0.7);
}

/* 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: #3c2010; /* rgb(60,32,16) darkCopper */
    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: #3c2010; /* rgb(60,32,16) darkCopper */
    font: small-caps 500 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: 1rem;
    align-items: flex-start;
}

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

/*TODO A description list with chronological facts */
.list-title, 
.list-subtitle { /* <dt> to define the term (name) */
    color: #3c2010; /* rgb(60,32,16) darkCopper */
    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;
}

/* Last section | <aside> *//* images */
/* <aside> *//*flex item | */
.image-wrapper { /*<aside>*/
    row-gap: 2rem;
    column-gap: 1rem;
    flex: 2;
    -webkit-flex: 2;
    -ms-flex: 2;  /* IE 10 */ 
}

/* class figure */
.frame-width {
    position: relative;
    padding: 16px;
}

#photoToChange-2,
#photoToChange-4 {
    display: none;
}

/* images */
.image-1, 
.image-3 {
    max-width: 600px;
    padding: 0.73rem;
    background-color: #f1f1e6; /* rgb(241,241,230) *//* colorOffWhite */
}

.image-2 {
    max-width: 300px;
}

/* 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%);
}

.frameBurlapCanvas {
    background-color: #bba57c; /* 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%);
}

.frameBurlapCanvas-gray {
    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%);
}

.frameBrown {
    background-color: #8d7344; /* rgb(135,115,64) */
    background-image: repeating-linear-gradient(-135deg, rgba(0,0,0,0), rgba(135,115,68,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%);

}

.frameGreen {
    background-color: #5c7b03; /*rgb(92, 123, 30)*/
    background-image: repeating-linear-gradient(-135deg, rgba(0,0,0,0), rgba(92,123,30,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%);
}

/* all figcation */
figcaption {
    color: #2c2d16; /* colorDarkGreen */
    margin: 1rem 0 0 0;
    padding: 0 0 0 0.73rem;
    border: 4px inset rgba(0, 0, 0, 0.6);
}

/* div wiht an image + quote */
.img-with-quote { /* flex-box */
    column-gap: 1rem;
    row-gap: 1rem;
    column-count: 2;
    max-width: 632px;
}

.img-with-quote .figure-square { /* flex-item */
    flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;  /* IE 10 */ 
}

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

/* 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%;
    max-width: 62.75rem;
    min-height: 11rem;
}

/* 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: 250px;
    text-align: left;
}

.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: #2c2d16; /* rgb(44,45,22) */
}

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

.colorTerrariumMoss {
    background-color: #616247;
}

.colorLightYellow {
    background-color: #fbfbdb;
}

.colorOffWhite {
    background-color: #f1f1e6; /* rgb(241,241,230) */
}

.colorBlueTurquoise {
    background-color: #1e6483; /* rgb(30,100,130) */
}

.colorSeaBlue {
    background-color: #284048; /* rgb(40,64,72) */
}

.colorSeaGreen {
    background-color: #116a6b; /* rgb(17,106,107) */
}

.colorDarkWood {
    background-color: #4f4537; /* rgb(79,69,55) */
}

.colorWood {
    background-color: #8d7344; /* rgb(141,115,68) */
}

.colorGolden {
    background-color: #b8861b; /* rgb(184,134,27) */
}

.colorDarkCooper {
    background-color: #3c2010; /* rgb(60,32,16) darkCopper */
}

.colorBurlapCanvas {
    background-color: #bba57c; /* 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%);
}

.colorBoscPear {
    background-color: #bba57c; /* rgb(187,165,124) */
}

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

/* Back To Top Button */
.button-container {
    position: absolute;
    right: 2rem;
    bottom: 2rem;
    z-index: 30;
    border-radius: 7px;
}

.back-to-top:visited,
.back-to-top {
    font: small-caps 1.2rem "Raleway", sans-serif;
    padding: 0 12px 4px 12px;
    display: block;
    color: #2c2d16;
    text-decoration: none;
    text-transform: capitalize;
    border: 4px groove #f1f1e6;
    border-radius: 7px;
    cursor: pointer;
}

.back-to-top:focus,
.back-to-top:hover {
    color: #bba57c;
    background-color: #2c2d16;
    border: 4px solid #2c2d16;
    border-radius: 7px;
}

/* <footer> */
footer { /* flex box */
    width: 100%;
    max-width: 62.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% - 300px); /* figure width 268px  + 32rem from column-gap */
}

h5 {/* 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: 260px;
}

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: 835px){
    .magazineIndex {
        padding: 3rem 2rem 2rem 2rem;
    }

    main {
        padding: 1rem 2rem 3rem 2rem ;
    }

    .hero {
        row-gap: 3rem;
    }

     .text-with-images {
        column-count: 1;
    }

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

    /* image + quote */
    #photoToChange-3,
    #photoToChange-1 {
        display: none;
    }

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

    #photoToChange-4,
    #photoToChange-2 {
        display: block;
    }

    .img-with-quote #photoToChange-2,
    .img-with-quote #photoToChange-4 { /* flex-item */
        flex: 1;
        -webkit-flex: 1;
        -ms-flex: 1;  /* IE 10 */ 
    }  

    /* <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,
    .list-title {
        font: 400 1.125rem "Raleway", sans-serif;
    }

    .quote {
        font: small-caps 500 1.125rem "Raleway", sans-serif;
    }
                            
    .text {
        column-count: 1; 
        font: 400 1rem "Raleway", sans-serif;
    }

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

    hr.divide {
        display: none;
    }

    summary { /* default values: display: list-item */
        font: small-caps 500 1.125rem "Raleway", sans-serif;
        text-align: left;
    }

    .color {
        width: 55px;
        height: 55px;
    }

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

    /* <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 ; 
    }
}