/*
* 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; /* Safari | Chrome */
    -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 | Chrome */
    background-clip: padding-box; /* Default value: border box */
    -webkit-background-clip: padding-box; /* Safari | Chrome */
}

*::-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%;
    text-size-adjust: 100%;
    -ms-text-size-adjust: 100%; /* Edge, IE(10( */
    -webkit-text-size-adjust: 100%; /* -webkit- vendor prefix for Safari | Chrome */
    -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%;
    text-align: center;
    letter-spacing: 0.0375rem;
    color: #474838; /* rgb(71,72,56) *//* myColorDarkGreen */
    font-family: "Raleway", sans-serif;
    background: #fffff0 repeating-linear-gradient(90deg,#fff, #f1f1e6 1%); /* White | myColorOffWhite */
}

/* to stretch elements to fit the whole height of the browser window. */
html, 
body {    
    height: 100%;
}

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

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

hr.divide-colorBurlapCanvas {
    display: block;
    border: 2px inset #bba57c;
    background-color: #bba57c;
    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;
}

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

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

/* my colors
*==========================*/
.frameOffWhite {
    padding: 0.185rem;
    background-color: #f1f1e6; /* rgb(241,241,230) *//* colorOffWhite */
}

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

.myColorDarkWood {
    background-color: #4f4537; /* rgb(71,71,56) */
}

/* canvas 
*================================================*/
.magazineContainer {
    position: relative;
    bottom: 0;
    width: 100%;
    max-width: 62.75rem;
    margin-inline: auto;
    background-color: #bba57c;
    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%);
}

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

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

.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;
}

.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: #f1f1e6;
    border: 4px groove #bba57c;
    border-radius: 7px;
    text-decoration: none;
    cursor: pointer;
}

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

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

/* button-like link */
.btnLink-backCover {
    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;
}

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

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

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

/* 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 *//* real value: max-width 58.65rem + from padding-inline  2rem + 2rem */
    padding: 1.5rem 2rem 4rem 2rem;
}

#contraportada-revista,
#portada-revista {
    padding: 1.5rem 2rem 7rem 2rem;
}

#contraportada-revista {
    row-gap: 3rem;
}

/* header
=========*/
/* div container the gallery */
.hero-img-collage {
    width: 100%;
    padding: 2rem;
    border: 0.5rem solid rgba(0, 0, 0, 0.5);
    box-shadow: 0 3px 6px rgba(0,0,0,.5);
    -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5);
}

.glassEffect {
    position: relative;
    z-index: 22;
    background-color: rgba(0,0,0,0.3);
    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. */
}

/* TODO  an unordered list with a list of images*/
.column-with-images,
.row-with-images {/* flex box */
    list-style: none;
}

.column-with-images {
    row-gap: 0.6rem;
}

.row-with-images{
    column-gap: 0.6rem;
}

.list-img { /* flex item*/
    flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;  /* IE 10 */ 
}

/* An image out of the box. */
.withEffect {
    position: relative;
    z-index: 10;
     /*transform list */
    transform: translate(2rem,1rem) rotate(-15deg);
    right: 8px;
    box-shadow: 0 10px 10px rgba(0,0,0,.5);
    -webkit-box-shadow: 0 10px 10px rgba(0,0,0,.5);
}

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

hgroup { /* flex-item */
    width: 100%;
}

.hero-title {
    font: 500 6rem 'Anton', sans-serif;
    text-align: center;
    color:  #f1f1e6; /* rgb(241,241,230) colorOffWhite */
}

.hero-subtitle { 
    font: small-caps 500 2rem  "Baskervville", sans-serif;
    text-align: center;
    color:  #f1f1e6; /* rgb(241,241,230) colorOffWhite */
}

.hero-title-backCover {
    font: 400 3.8rem 'Cinzel', sans-serif;
    text-align: center;
    color:  #2c2d16; /* rgb(44,45,22) colorDarkGreen */
}

.hero-subtitle-backCover { 
    font: small-caps 500 2rem  "Baskervville", sans-serif;
    text-align: center;
    color:  #2c2d16; /* rgb(44,45,22) colorDarkGreen */
}

/* figure backCover */
.hero-backCover {
    position: relative;
}

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

/* envelope mail */
.email {
    display: inline-block;
    font-size: 1.8rem;
    position: relative;
}

.email:hover {
    outline: none;
    background-color: #bba57c;
    border: 4px groove #bba57c;
    text-decoration: none;
    border-radius: 7px;
}

/* <footer> */
footer { /* flex box */
    position: relative;
    bottom: 0;
    width: 100%;
    max-width: 62.75rem;
    border-top: 0.125rem inset rgba(97,98,71,0.5);
    background-color: rgb(51,51,51);  /*#333*/
    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: 800px) {
    .magazineIndex {
        padding: 3rem 2rem 2rem 2rem;
    }

    .hero {
        row-gap: 3rem;
    }

    /* <footer> */
    .divide-spaces {
        row-gap: 32px;
        flex-flow: column nowrap;
    }

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

/* BREAKPOINTS WITH *//* CSS3 MEDIA QUERIES 
********************************************/
@media only screen and (max-width: 720px) {
    .hero-img-collage {
        padding: 1rem;
    } 

    .hero-title-backCover {
        font: 400 3rem 'Cinzel', sans-serif;
    }

    .frameOffWhite {
        padding: .1875rem;
    }

    /* <header> */
    .hero-title {
        font-size: 5rem;
    }

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

    /* contracubierta | back cover */
    .text {
        column-count: 2;
    }

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

@media only screen and (max-width: 560px) {
    /* <header> */
    .hero-title {
        font-size: 4rem;
    }

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

    .hero-title-backCover {
        font: 400 2rem 'Cinzel', sans-serif;
    }

    /* contracubierta | back cover */
    .text {
        column-count: 1; 
        font: 400 1rem "Raleway", sans-serif;
    }

    .email {
        font-size: 1.5rem;
    }

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

@media only screen and (max-width: 420px) {
    /* div container the gallery */
    .hero-img-collage {
        border: 0.3rem solid rgba(0, 0, 0, 0.5); 
    }

    .hero-title {
        font-size: 3rem;
    }

    .hero-title-backCover {
        font-size: 1.7rem;
    }
}