* {
   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 {
   --AliceBlue: AliceBlue;
   --Beige: Beige;
   --Black:  hsl(0, 0%, 20%);
   --Coral: Coral;
   --Chocolate: Chocolate;
   --DarkBlue: DarkBlue;
   --DarkCian: DarkCyan;
   --Gainsboro: Gainsboro;
   --GoldenRod: GoldenRod;
   --Green: Green;
   --Gray: Gray;
   --IndianRed: IndianRed;
   --Olive: Olive;
   --Maroon: Maroon;
   --MediumSeaGreen: MediumSeaGreen;
   --SaddleBrown:SaddleBrown;
   --SeaGreen: SeaGreen;
   --White: White;
   --WhiteSmoke: WhiteSmoke;
}

html {
   height: 100%;
}

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

header {
   margin: 0 auto;
}

h1 {
   font: bold 4rem "Times New Roman", sans-serif;
   color: var(--WhiteSmoke);
   padding: 100px 0;
   width: 100%;
}

/* main */
[class="story-telling"] {
   margin: 0 auto;
   padding: 0 1rem 6rem 1rem;
   max-width: 600px;
   display: flex;
   align-items: center;
   justify-content: flex-start;
   flex-flow: column nowrap;
   row-gap: 2rem;
}

[class="btn-container"]{
   width: 100%;
   padding: 1rem;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-flow: row wrap;
   gap: 40px;
   border: 12px groove var(--AliceBlue);
}

/*    The [attribute$="value"] selector is used to select elements whose attribute value ends with a specified value.*/

[id$="btn"] {
   font: 400 1rem "Helvetica Neue", Helvetica, Arial, sans-serif;
   width: 140px;
   padding: 10px 2px;
   color: var(--Black);
   background-image: linear-gradient(var(--AliceBlue), var(--WhiteSmoke));
   background-clip: padding-box;
   border: 10px double aliceblue;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
   cursor: pointer;
}

[id$="btn"]:nth-child(1):hover {
   border:10px double hsl(16, 100%, 35%);
   background-color: var(--Coral);
   background-image: linear-gradient(var(--Coral), hsl(16, 100%, 80%));
   background-clip: padding-box;
}

[id$="btn"]:nth-child(2):hover {
   border:10px double hsl(43, 74%, 30%);
   background-color: var(--GoldenRod);
   background-image: linear-gradient(var(--GoldenRod), hsl(43, 75%, 80%));
   background-clip: padding-box;
}

[id$="btn"]:nth-child(3):hover {
   border:10px double hsl(150, 14%, 50%);
   background-color: hsl(150, 14%, 80%);
   background-image: linear-gradient(hsl(150, 14%, 50%), hsl(150, 14%, 80%));
   background-clip: padding-box;
}

/* text area*/
[class="story-container"]{
   width: 100%;
   font: 400 1.125rem/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
   letter-spacing: -0.022em;
   text-indent: 1rem;
   padding: 2rem;
   border: 12px groove hsl(146, 13%, 55%);
   background-color: aliceblue;
   cursor: none;
   resize: none;
   overflow: auto;
}

/*  footer 
    =====*/
[class="authorship"] {
   width: 100%;
   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;
   border-top: 6px groove var(--White);
   margin: 5rem 0 0 0;
}

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

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

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

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

[class="authorship"] a.line: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 */
@media screen and (max-width: 500px) {
   h1 {
      padding: 50px;
   }

   [class="btn-container"]{
      flex-flow: column nowrap;
      gap: 6px;
   }

   [id$="btn"] {
      width: 100%;

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