* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
    outline-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 */
}
/*  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) */
    --Coral: Coral;
    --Chocolate: Chocolate;
    --DarkBlue: DarkBlue;
    --DarkCian: DarkCyan;
    --FloralWhite: FloralWhite;
    --Gainsboro: Gainsboro;
    --GoldenRod: GoldenRod;
    --Green: Green;
    --Gray: Gray;
    --IndianRed: IndianRed;
    --Olive: Olive;
    --OrangeRed: OrangeRed;
    --Maroon: Maroon;
    --MediumSeaGreen: MediumSeaGreen;
    --SaddleBrown:SaddleBrown;
    --SeaGreen: SeaGreen;
    --Tomato: tomato;
    --White: White;
    --WhiteSmoke: WhiteSmoke;
}

html {
    height: 100%;
}

body {
    height: 100%;
    color: var(--WhiteSmoke);
    background-color: var(--Black);
    text-align: center;
}

/* main */
#containerCharCounter {
    margin: 0 auto;
    display: flex;
    display: -webkit-flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: center;
    max-width: 600px;
    background-color: var(--Black);
    padding: 1rem 1rem 4.75rem 1rem;
}

/*  header */
.titleContainer {
    margin: 0 auto;
}

#titlePage {
    font: bold 4rem "Times New Roman", sans-serif;
    padding: 3.75rem 0;
}

.descriptionForUsers {
    font: small-caps 1.5rem/1.5 Helvetia, Arial, sans-serif;
    text-transform: capitalize;
    padding: 0.5rem 0;
}

/*  form */
#counter-letters {
    margin: 3.75rem 0 0 0;
    font: 400 1.125rem/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
    letter-spacing: -.022em;
    text-align: left;
}

#textareaLabel {
    display: block;
    margin: 0 0 0 1.5rem;
}

/*  textarea */
#text-input:focus {
    outline: 0.5rem solid hsl(43, 75%, 80%);
}

#text-input {
    width: 100%;
    padding: 1rem;
    border: 1rem groove var(--GoldenRod);
    font: 400 1.125rem/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-indent: 1rem;
    letter-spacing: -.022em;
}

/*  aside */
#counter-space {
    display: flex;
    display: -webkit-flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: center;
    margin: 2rem 0 0 0;
    padding: 0 1rem;
}

#char-count {
    display: inline-block;
    padding: 0 0.5rem;
}

/*  input type text */
#enter-number {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    background-color: var(--White);
    color: var(--Black);
    margin: 0 .5rem;
    font-size: large;
    text-align: center;
    appearance: none;
    -webkit-appearance:none;
    cursor: none;
}

#enter-number:disabled {
    background-color: white;
}

/*  reset the form */
[type="reset"],
 [type="reset"]:visited {
    width: 3.5rem;
    height: 3.5rem;
    margin: 0.5rem;
    font-size: 1.1rem;
    background-color: hsl(43, 74%, 30%);
    color: var(--White);
    border-radius: 50%;
    cursor: pointer;
    padding: 0 0 0.2rem 0;
}

[type="reset"]:hover {
    background-color: var(--WhiteSmoke);
    color: hsl(43, 74%, 30%);
    border: 0.5rem double var(--IndianRed);
}

.block-separator {
    border: 6px groove var(--White)
}

/*  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(--White);
    background-color: var(--Black);
    text-align: right;
}

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

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

/*  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(--White);
    background-color: var(--Black);
    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: var(--Black);
}

/* 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: var(--Gainsboro);
    }

    /*  aside */
    #counter-space {
        justify-content: center;
        gap: 1rem;
    }

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