* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax *//* CSS user-select Property */
    outline: none;
    outline-color: transparent;
    border: none;
    border-color: transparent;
}

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

:root {
    --Beige: Beige;
    --Black:  hsl(0, 0%, 20%);
    --BrownOlive: hsl(348, 57%, 10%); /* rgb(40, 11, 17) */
    --Chocolate: Chocolate;
    --CornSilk: Cornsilk;
    --DarkBlue: DarkBlue;
    --DarkCian: DarkCyan;
    --FloralWhite: FloralWhite;
    --Gainsboro: Gainsboro;
    --Green: Green;
    --Gray: Gray;
    --IndianRed: IndianRed;
    --Ivory: Ivory;
    --LightSteelBlue: LightSteelBlue;
    --Olive: Olive;
    --OrangeRed: OrangeRed;
    --Maroon: Maroon;
    --PaleVioletRed : PaleVioletRed;
    --Pink: pink;
    --RoyalBlue: RoyalBlue;
    --SaddleBrown:SaddleBrown;
    --sand: hsl(47, 38%, 85%);
    --SeaGreen: SeaGreen;
    --Tomato: Tomato;
    --White: White;
    --WhiteSmoke: WhiteSmoke;
    --backgroundColor: hsl(48, 38%, 95%);
}


html {
    font-size: 24px;
    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. */
}

body {
    background-color: hsl(48, 38%, 85%);
    font-family: "Times New Roman", serif;
}

.contentContainer {position: relative;}

/* 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;
    justify-content: center;
    flex-flow: column nowrap; /* The "flex-direction: column;" stacks the flex items vertically (from top to bottom) */
}

.rowGap {
    row-gap: 2rem;
}

code {
    display: block;
    width: 100%;
    font-family: Consolas,"courier new", monospace;
    color: var(--White);
    background-color: var(--BrownOlive);
    padding: 8px 4px 6px 4px;
    font-size: 20px;
    border-bottom: 6px inset var(--Gainsboro);
}

.badge {
  background-color: var(--BrownOlive);
  color: white;
  padding: 4px 8px;
  text-align: center;
  border-radius: 5px;
}

/*  To create space when needed. */
.whiteSpace {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
}

/*  header | flex box
=======================*/
#headerNewsJournal {
    width: 100%;
    margin: 0 auto;
    padding: 2rem 1rem 0 1rem;
    background-color: hsl(47, 38%, 95%);
    border-block-end: 4px inset hsl(48, 38%, 85%);
}

/*  journal-name: News Journal */
#titleNewsJournal{
    font: bold 3rem "Times New Roman", serif;
    font-kerning: none; /* Specifies that font kerning (space between individual letters or characters) is not applied. */
    text-transform: uppercase;
}

/* Journal name description. */
.description {
    font-variant: small-caps;
    padding: 0 0 32px 0;
    text-align: right;
}

/*  main container news paper 
=============================*//* flex box */
.container-newsJournal {
    max-width: 960px;
    margin-inline: auto;
    background-color: hsl(47, 38%, 95%);
    border-block-end: 4px inset hsl(48, 38%, 85%);
    padding: 2rem 0;
}

/*  blocquote | with author */
#quote-author {
    font: 600 1.3rem  "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-align: left;
    padding: 1rem;
    margin: 2rem 0 0 0;
}

#quote-author p {
    font: 400 1rem/1.5  "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-align: right;
    padding: 0.5rem 0 0 0;
}

/*  article-title */
#headerArticle {
    text-align: center;
}

/*  article-subtitle */
.sub-headline {
    padding: 16px 0;
}

.secondary-header-group {
    width: 100%;
    align-self: flex-start;
}

.author-name {
    font-weight: 500;
    font-size: 22px;
}

.date {
    font-size: 20px;
    padding: 8px 0 0 0;
}

/*  Garamond is a classical font used for many printed books. It has a timeless look and good readability.*/
[class*="paragraph"] {
    font-family: "Garamond", serif;
    line-height: 1.5;
    text-indent: 20px;
    letter-spacing: -0.022em;
}

/*  <a class="external-link">  to open an external page */
.external-link:focus {
    border: 3px solid hsl(45, 29%, 25%);
    border-radius: 7px;
    text-decoration: none;
    text-decoration-thickness: 0; /* Default value auto */
    text-underline-offset: 0; /* Default value auto */
}

/*  To select elements with a specified attribute and value.*/
a[target="_blank"] {
    display: inline-block;
    color: var(--Black);
    text-indent: 0;
    transition: 0.3s;
}

.external-link {
    padding: 0 6px;
}

a[target="_blank"]:hover {
    text-decoration: none;
    text-decoration-thickness: 0;
    text-underline-offset: 0;
    color: var(--Ivory);
    background-color: hsl(45, 29%, 25%);
    box-shadow: 2px 2px var(--Gainsboro);
}

.external-link:hover {
    border-radius: 7px;
}

a[target="_blank"]:active {
    color: var(--White);
    background-color: var(--Maroon);
    border: none;
}

/*  All links have an underline */
/*  Only change the color */
.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;
}

/*  blockquote | lorem ipsum */
#quote-lorem-ipsum {
    border-inline-start: 10px solid var(--LightSteelBlue);
    border-inline-end: 10px solid transparent;
    font: italic 300 22px/1.5 "Lucida Console", "Courier", monospace;
    max-width: 100%;
    padding: 0 1rem;
}

/*  web safe font 
==================*/
/*  TO DO list: style */
.cssFonts {
    list-style-position: inside;
    line-height: 1.5;
    letter-spacing: -0.022em;
}

.about-safeFont {
    position: relative;
    list-style: none;
    text-indent: 0;
    cursor: pointer;
}

.about-safeFont li:not([class^="example"]) {
    min-height: 170px; /* I choose the tallest block.*/
    position: relative;
    border-inline-start: 8px solid var(--BrownOlive);
    padding: 0.5rem 0.5rem 0.5rem 1rem;
    background-color: var(--White);
    border-end-end-radius: 60px;
    box-shadow: 2px 3px var(--Gray), 3px 4px var(--Gainsboro);
    margin: 1rem 0;
    /*  property duration function delay */
    transition: border-end-end-radius 2s linear 0.5s; /*  To make the effect even more attractive. */
}

/* a flex box */
[class^="example"] {
    justify-content: flex-end;
    height: 0;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;
    overflow: hidden;
    text-align: center;
    letter-spacing: -0.022em;
    border-end-end-radius: 60px;
    box-shadow: 2px 3px var(--Gray), 3px 4px var(--Gainsboro);
    background-color: var(--BrownOlive);
    background-image: linear-gradient(var(--WhiteSmoke) 65%, var(--BrownOlive) 61%);
    color: var(--White);
    transition: height 2s linear 0.5s, border-end-end-radius 2s linear 0.5s, padding 2s linear 0.5s; /*  To make the effect even more attractive. */
}

/* safe fonts */
.example-arial {
    font: 400 24px/1.5 Arial, Helvetica, sans-serif;
}

.example-verdana {
    font: 400 24px/1.5 Verdana, Geneva, sans-serif;
}

.example-tahoma {
    font: 400 24px/1.5 Tahoma, "Trebuchet MS", sans-serif;
}

.example-trebuchet {
    font: 400 24px/1.5 "Trebuchet MS", Tahoma, sans-serif;
}

.example-times {
    font: 400 24px/1.5 "Times New Roman", Times, serif;
}

.example-georgia {
    font: 400 24px/1.5 Georgia, serif;
}

.example-garamond {
    font: 400 24px/1.5 Garamond,serif;
}

.example-courier {
    font: 400 24px/1.5 "Courier New", monospace;
}

.example-brushScript {
    font: 400 40px "Brush Script MT", cursive;
}

/* positioned item */
.positioned-item-right {
    position: absolute;
    top: 0;
    right: 2rem;
    font-size: 80px;
    color: var(--BrownOlive);
}

.positioned-item-left {
    position: absolute;
    top: 0;
    left: 1rem;
    font-size: 80px;
    color: var(--BrownOlive);
}

/*  moving */
.about-safeFont:hover li {
    border-end-end-radius: 0;
}

.about-safeFont:hover [class^="example"] {
    height: 100%;
    border-end-end-radius: 0;
    padding: 0 0 .5rem 0;
}

/*  Cards about google fonts */
.container-cards {
    font-family: "Garamond", serif;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    gap: 1rem;
    flex: 1; /* align-items with default value: normal | Behaves like 'stretch' for flexbox.*/
}

/*  header section */
#google-fonts {
    font: 600 26px "Garamond", serif;
    text-align: left;
}

#google-fonts-description {
    font: 24px/1.5 "Garamond", serif;
    letter-spacing: -0.022em;
    text-align: left;
}

.card {
    width: 100%;
    padding: 0 0 0.5rem 0;
    border-inline-start: 3px solid hsl(209, 12%, 65%);
    background-color: var(--WhiteSmoke);
    box-shadow: 0 2px 5px var(--Gray);
}

/*  google fonts */
[class$="regular"]{
    display: table-cell;
    vertical-align: middle;
    height: 85px;
    padding: 0 0.5rem 0 0.5rem;
}

.lato-regular {
    font: 700 40px "Lato", sans-serif;
}

.monoton-regular {
  font: 400 40px "Monoton", sans-serif;
}

.roboto-regular {
    font: 700 40px "Roboto", sans-seriF;
}

/*  paragraphs within cards */
.about-font {
    text-indent: 0;
    font-size: 20px;
    padding: 1rem 0.5rem 0 0.5rem;
}

.designer{
    text-indent: 0;
    font-size: 20px;
    border-bottom: 4px groove var(--Gainsboro);
    padding: 0 0.5rem 0 0.5rem;
}

/*  Go up  | flex box
========================*/
aside[class^="button"] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 1rem;
    background-color: hsl(47, 38%, 95%);
}

/*  To link to another section on the same page. | A link styled as a button. */
#go-up,
#go-up:visited {
    align-self: flex-end;
    display: block;
    width: 60px;
    height: 60px;
    text-align: center;
    border-radius: 50%;
    border: 8px double darkslategray;
    outline: 5px double darkslategray;
    outline-offset: 8px;
    color: var(--White);
    text-decoration: none;
    background-color: darkgoldenrod;
    background-clip: padding-box;
    padding: .4rem 0 0 0;
    margin: 2rem 1.6rem 2rem 2rem;
    transition: 0.3s;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

#go-up:hover {
    border: 8px double darkkhaki;
    outline: 5px double darkkhaki;
    outline-offset: 8px;
    color: var(--Black);
    text-decoration: none;
    background-color: khaki;
    background-clip: padding-box;
    box-shadow: 0 3px 7px var(--Gray);
}

/*  footer 
===========*/
/*  The grid-area property specifies a grid item's size and location in a grid layout, 
    =================================================================================*/
#information {grid-area: info;}
#signature {grid-area: signature;}

[class="authorship"] {
    font: 400 16px/1.5 Helvetica, Arial, sans-serif; /* Web Safe Fonts. */
    width: 100%;
    /*max-width: 960px;*/
    margin-inline: auto;
    display: grid;
    column-gap: 1.7rem;
    grid-template-areas:'info   signature';
    grid-template-columns:  1fr auto;
    grid-template-rows: auto;
    padding: 2rem 1rem;
    color: var(--Black);
    background-color: hsl(47,38%,95%);
    border-block-start: 6px groove hsl(47, 38%, 95%);
    text-align: right;
}

#signature {
    max-width: 100px;
    align-self: center;
    margin: 0 0.7rem 0 0;
}

.signatureImage {
    box-shadow: 0 3px 5px var(--Gray);
    pointer-events: none; /*    The element does not react to pointer events. */
}

.responsive {
   display: block;
   width: 100%;
   height: auto;
   margin-inline: auto;
   background-color: var(--White);
   object-fit: cover;
   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. */
}

.boxShadow {
   /*box-shadow: 0 2px 5px hsl(0, 3%, 45%);*/
   box-shadow: 2px 2px 5px hsl(0, 3%, 45%);
}

/*  Change background color */
@media only screen and (min-width: 961px) {
    #headerNewsJournal,
    .container-newsJournal,
    aside[class^="button"],
    [class="authorship"]{
        background-color: hsl(47, 38%, 85%);
    } 

    #headerNewsJournal {
        border-block-end: 4px inset hsl(48, 38%, 95%);
    }
}

/*  Changes */
@media only screen and (max-width: 960px) {
    .container-newsJournal {
        padding: 2rem 1rem;
    }
}

/* A common breakpoint used for media queries: iPads, Tablets */
@media (min-width: 481px) and (max-width: 768px) {
    .container-newsJournal {
        padding: 2rem 0.5rem;
    }

    #titleNewsJournal {
        font: bold 2rem "Times New Roman", serif;
    }

    .description {
        text-align: right;
    }

    /*  styling article */
    [class*="paragraph"] {
        text-indent: 0;
    }

    #quote-lorem-ipsum {
        border-inline-end: 0;
    }

    /*  web sage fonts 
    ==================*/
    .fontSizeSmallSceen {
        font-size: 60px;
        left: 0.2rem;
    }

    .medium-screen {
        bottom: 2.2rem;
        right: 2rem;
        top: initial;
        color: var(--PaleVioletRed);
    }      
}

/* A common breakpoint used for media queries: mobile devices. */
@media (min-width: 320px) and (max-width: 480px) {
    body {
        background-color: hsl(209, 12%, 65%);
    }

    #article-safe-fonts,
    .container-newsJournal{
        padding: 2rem .5rem;
    }

    #titleNewsJournal {
        font: bold 2rem "Times New Roman", serif;
    }

    /*  styling article */
    .description {
        text-align: left;
    }

    [class*="paragraph"] {
        text-indent: 0;
    }

    /* blockquote */
    #quote-lorem-ipsum {
        border-inline-end: none;
        padding: 0 0 0 0.5rem;
    }

    /*  web safe fonts 
    ===================*/
    .fontSizeSmallSceen {
        font-size: 50px;
        left: 0.2rem;
    }

    .small-screen {
        bottom: 2rem;
        right: 2rem;
        top: initial;
        color: var(--RoyalBlue);
    }   


    /*  footer 
        =====*/
    [class="authorship"] {
        column-gap: 1rem;
    }
    
    #signature {
        margin: 0;
    }
}