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

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

/*  HSL color values are supported in Edge, Chrome, Firefox, Safari, Opera 10+, and in IE9+.*/
:root {
    --Beige: Beige;
    --Black:  hsl(0, 0%, 20%);
    --BrownOlive: hsl(348, 57%, 10%); /* rgb(40, 11, 17) */
    --Chocolate: Chocolate;
    --DarkBlue: DarkBlue;
    --DarkCian: DarkCyan;
    --FloralWhite: FloralWhite;
    --Gainsboro: Gainsboro;
    --Green: Green;
    --Gray: Gray;
    --IndianRed: IndianRed;
    --Ivory: Ivory;
    --Olive: Olive;
    --OrangeRed: OrangeRed;
    --Maroon: Maroon;
    --SaddleBrown:SaddleBrown;
    --SeaGreen: SeaGreen;
    --Tomato: Tomato;
    --White: White;
    --WhiteSmoke: WhiteSmoke;
    --backgroundColor: hsl(48, 38%, 95%);
}

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

body {
    text-align: center;
}

[class="container-logo-quote"] {
    display: flex;
    display: -webkit-flex;
    align-items: center;
    justify-content: flex-start;
    border-bottom: 2px groove var(--Gray);
    padding: 2rem 1rem 2rem 0;
    column-gap: 1rem;
    background-color: var(--White);
}

/* header */
.container-logo {
    width: 150px;
    height: 150px;
}

/*  Design logo 
    ===========*/
[id="design"]{
    display: flex;
    display: -webkit-flex;
    flex-flow: row wrap;
    position: relative;
    width: 116px;
    margin: 1rem;
    padding: .6rem;
    box-shadow: 5px 5px gray, 10px 10px darkgray, 15px 15px gainsboro;
}

/*  Arial is the most widely used font for both online and printed media. */
[class*="keywords"]:nth-of-type(1) {
    font: 400 1.5rem Arial, sans-serif;
    writing-mode: vertical-lr;
}

/*  The following elements are positioned so that the design looks correct on iPads and iPhones.*/
/*  Georgia is an elegant serif font. */
[class*="keywords"]:nth-of-type(2) {
    font: 500 3rem Georgia, serif;
    height: 4.125rem;
    /*height: 60%;*/
    border-bottom: 10px solid var(--Black);
    position: absolute;
    right: 0.7rem;
}

/*  Arial is the most widely used font for both online and printed media. */
[class*="keywords"]:nth-of-type(3) {
    font: 400 1.1rem Arial, sans-serif;
    letter-spacing: -0.022em;
    position: absolute;
    bottom: 0.7rem;
    right: 0.8rem;
}

/*  blockquote */
[class="largeQuote"] {
    position: relative;
    font: 400 1.3rem  "Helvetica Neue", Helvetica, Arial, sans-serif;
    letter-spacing: -0.022em;
    text-align: left;
    padding: 1rem;
    max-width: 600px;
    cursor: pointer;
}

[class="largeQuote"] .note {
    font: 400 .9rem/1.5  "Helvetica Neue", Helvetica, Arial, sans-serif;
    display: inline-block;
}

/*  The :hover pseudo-class can be used on all elements, not only on links. */
.toggleClass {
    height: 100%;
    box-shadow: 0 3px 7px var(--Gray); 
}

[class="largeQuote"]:hover .overlay-slide {
    height: 100%;
    box-shadow: 0 3px 7px var(--Gray);    
}

/*  To write the author quote */
[class="largeQuote"] .overlay-slide {
    position: absolute;
    bottom: 0;
    left:0;
    right: 0;
    z-index: 1;
    color: var(--White);
    background-color: var(--Maroon);
    width: 100%;
    height: 0;
    overflow: hidden;
    transition: height 3s ease; /*  To make the effect even more attractive. */
}

[class="largeQuote"] .overlay-slide p {
    position: absolute;
    font: 400 small-caps 1rem/1.5  "Helvetica Neue", Helvetica, Arial, sans-serif;
    letter-spacing: -0.022em;
    text-align: center;
    width: 100%; /* It is necessary, the same width and height, for it to work well. */
    height: 100%;
    padding: 30px 60px 0 60px;
}

main {
    display: flex;
    display: -webkit-flex;
    flex-flow: column nowrap;
    margin-inline: auto;
    padding: 2rem 1rem 6rem 1rem;
    justify-content: center;
    align-items: center;
    row-gap: 4rem;
    background-color: var(--White);
}

/*  header
    =====*/
hgroup {
    max-width: 550px;
}

/*  Times New Roman is one of the most recognizable fonts in the world. */
.icon-toggler-title {
    font: bold 4rem "Times New Roman", sans-serif;
}

/*  Arial is the most widely used font for both online and printed media. */
/*  Using Arial with Helvetica fallback, or Helvetiva with Arial fallback, covers both worlds, because Helvetica runs on all Mac machines (100%) but on fewer Windows machines (7.3%). */
.icon-toggler-description {
    font: 400 1.4rem/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
    padding: 2rem  0 0 0;
}

/* TODO unordered list */
/*  Remove Default Settings */
[class="item-list"]{
    font: 400 1.1rem Arial, sans-serif;
    list-style-type: none; /*  Remove Default Settings & "margin": 0 | "paddiing": 0 */
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    gap: 2rem 1rem;
}

[class="item-list"] li {
    position: relative;
    box-shadow: 0 3px 7px var(--Gray);
    transition: 0.3s;
    cursor: pointer;
}

[class="item-list"] li:hover,
[class="item-list"] li:focus {
    outline: 4px solid var(--Maroon);
}

.containerWithImage {
    position: relative;
}

.containerWithImage figcaption {
    padding: 1rem 0;
    border-top: 2px inset var(--WhiteSmoke);
}

/* The [attribute^="value"] selector is used to select elements with the specified attribute, whose value starts with the specified value. */
[class^="image"]{
    max-width: 250px;
    position: relative;
}

/*  [attribute*="value"] selector is used to select elements whose attribute value contains a specified value. */
[class*="positioned"]{
    position: absolute;
    bottom: 4rem;
    right: 1rem;
    color: var(--Black);
    background-color: transparent;
    width: 34px;
    height: 34px;
    padding: 0 0 0 1px;
    cursor: pointer;
}

[class*="empty-heart"] {
    font-size: 20px;
    font-weight: bold;
    border-radius: 50%;
}

[class*="changeColor"]  {
    color: var(--WhiteSmoke);
    font-weight: bold;
}

/*  Add with javaScript */
.filled {
  color: tomato;
  font-size: 30px;
  font-weight: bold;
}

.block-separator {
    border: 6px groove var(--Gainsboro);
}
/*  The grid-area property specifies a grid item's size and location in a grid layout, 
    =================================================================================*/

#information {grid-area: info;}
#signature {grid-area: signature;}

/*  footer 
    =====*/
[class="authorship"] {
    font: 400 1rem/1.5 Helvetica, Arial, sans-serif; /* Web Safe Fonts. */
    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: var(--White);
    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. */
}

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

/* A link */
[class="authorship"] a,
[class="authorship"] a:visited  {
    display: inline-block;
    color: var(--Black);
    background-color: var(--White);
    transition: 0.3s;
    text-indent: 0;
}

[class="authorship"] a:hover {
    background-color: var(--White);
    color: hsl(209, 12%, 40%);
    text-decoration: none;
}

[class="authorship"] a:active {
    color: var(--White);
    background-color: hsl(209, 12%, 35%);
}

/* underline for link */
.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. */
}

/*  Mobile devices */
/*  Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
@media screen and (max-width: 480px) {
    body {
        background-color: hsl(209, 12%, 65%);
    }

    [class="largeQuote"] {
        display: none;
    }

    /*  Times New Roman is one of the most recognizable fonts in the world. */
    .icon-toggler-title {
        font: bold 3rem "Times New Roman", sans-serif;
        padding: 0 0.3rem;
    }
    
    /*  footer 
        =====*/
    [class="authorship"] {
        column-gap: 1rem;
    }
    
    #signature {
        margin: 0;
    }
}