* {
  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;
  outline: none;
  border: none;
}

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

body {
  font-family: Garamond, serif;
  text-align: center;
  height: 100%;
}

/*  Georgia (serif)  It is very readable at different font sizes, so it is a good candidate for mobile-responsive design.*/
#thumbnail-image-container {
  font: 400 1.2rem/1.5 Georgia, serif;
  letter-spacing: -0.022em;
  width: 100%;
  height: 100%;
  max-width: 1000px;
  margin-inline: auto;
  padding: 1rem 1rem 6rem 1rem;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: center;
  background-color: var(--White);
}

hgroup {
  margin: 4rem 0 0 0;
  width: 100%;
}
/*  Garamond (serif) is a classical font used for many printed books.*/
.title {
  font: 500 3rem Garamond,serif;
}

.description {
  font: 400 1.6rem Garamond,serif;
  padding: 0.5rem 0 0.5rem 1rem;
}

.gallery {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  padding: 4rem 0;
}

/*  object-fit: cover; the image keeps its aspect ratio and fills the given dimension.*/
/*  This is to ensure that all images have the same dimensions, with a correct appearance for each of them. */

.thumbnail-img {
  display: block;
  width: 300px;
  height: 200px;
  object-fit: cover;
  opacity: 0.6;
  transition-duration: 0.4s;
  cursor: pointer;
}

.thumbnail-img:hover {
  opacity: 1;
  box-shadow: 0 0 7px 1px hsl(16, 100%, 15%);
}

.comment {
  text-align: left;
  text-indent: 0.5rem;
  padding: 0 0 0 0.8125rem;
  margin: 2rem 0;
  border-inline-start: 0.3125rem solid var(--Gray);
}

/*  <dialog> */
/*  A modal (dialog box) that is hidden by default. (background) */
.lightbox {
  display: none;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: center;
  column-gap: 4rem;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
  background-color: var(--Tomato);
  padding: 1rem;
  margin-inline: auto;
  box-sizing: border-box;
  -webkit-box-sizing: border-box; /* -webkit- vendor prefix for Safari */
  -moz-box-sizing: border-box; /* -moz- vendor prefix for Firefox */
  overflow: auto;
  /*element cover the entire viewport.*/
  width: 100%;
  height: 100%;
}

figure.image-container {
  max-width: 500px;
}

/* Modal Content (an image) */
.modal-content {
  display: block;
  margin-inline: auto;
  width: 100%;
  max-width: 500px;
  height: auto;
  border: 4px groove var(--Maroon);
}

#caption-text {
  padding: 2rem 0 0 0;
  color: white;
  font: 400 1.2rem/1.5 Georgia, serif;
  letter-spacing: -0.022em;
}

/*  close modal */
#close-btn,
#close-btn:visited {
  position: absolute;
  top: 3rem;
  right: 3rem;
  width: 60px;
  height: 60px;
  color: white;
  background-color: transparent;
  border-radius: 50%;
  font-size: 2rem;
  font-weight: bold;
  cursor: pointer;
}

#close-btn:hover,
#close-btn:focus {
  color: hsl(9, 100%, 25%);
  border: 2px double var(--WhiteSmoke);
  outline: 2px double var(--WhiteSmoke);
  outline-offset: 5px;
}

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

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

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

.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 | tablets */
/*  Responsive layout - when the screen is less than 1024px wide, make the navigation links stack on top of each other instead of next to each other */
@media screen and (max-width: 1024px) {
  /*  <dialog> */
  /*  A modal (dialog box) that is hidden by default. (background) */
  .lightbox {
    justify-content: flex-start;
  }

  figure.image-container {
    margin: 8.5rem 0 0 0;
  }
}

/*  Mobile devices */
@media screen and (max-width: 1024px) {
  /*  footer 
      =====*/
  [class="authorship"] {
      column-gap: 1rem;
  }
    
  #signature {
    margin: 0;
  }
}

@media screen and (max-width: 480px) {
  body {
    background-color: hsl(209, 12%, 65%);
  }
}