/* ======== css for web main page ======== */

/* SPACE SIZE (px)
8px 16px 24px 32px 40px 48px 56px 64px 72px 80px 88px 96px 104px 112px 120px 128px */

/* FONT SIZE (px)
 12px 14px 16px 24px 32px 40px 48px 56px 64px 72px 80px 88px 96px 104px 112px 120px 128px  */

/* FONT WEIGHT 
400 500 600 700 */

/* LINE HEIGHT 
1 1.2 1.5 2   */

/* COLORS 
main color   #6461f6
shade main color  #504ec5
second color #fcf800
Gary color: #141331  #5c5c5c
*/

/* ============================================== */
/* 1350px width 小屏电脑*/
/* ============================================== */

@media (max-width: 85em) {
  .hero-container {
    max-width: 100rem;
  }
}

/* ============================================== */
/* 1200px width  横屏平板*/
/* ============================================== */

@media (max-width: 75em) {
  html {
    font-size: 56%;
  }
}

/* ============================================== */
/* 950px width  竖屏大平板 */
/* ============================================== */

@media (max-width: 59em) {
  /*  header section  */
  .header-container {
    height: 8.4rem;
    flex-direction: row;

    justify-content: space-between;
  }

  .web-logo {
    padding-top: 0;
  }

  /*  hero section  */

  .photo-horizontal {
    width: 100%;
  }

  .photo-text {
    text-indent: 0;

    margin-bottom: 3.2rem;
  }

  .shot-info {
    font-size: 1.6rem;
  }

  .recent-centent {
    grid-template-columns: 1fr 4fr;
    column-gap: 3.2rem;
  }

  .content-year {
    font-size: 4rem;
  }

  .recent-content-lists {
    column-gap: 3.2rem;
  }

  .content-title:link,
  .content-title:visited {
    margin-bottom: 1.6rem;
  }

  /* MOBILE MENU */

  .btn-mobile-nav {
    display: block;

    z-index: 9999;
  }

  /* STATE 1 : DISPLAY */

  .header {
    position: relative;
  }

  .nav-menu-icon {
    display: none;
  }

  .main-nav {
    background-color: rgba(255, 255, 255, 0.98);
    box-shadow: -2px -2px 2rem rgba(0, 0, 0, 0.15);

    display: flex;
    align-items: center;
    justify-content: center;

    position: absolute;
    top: 0;
    right: 0;

    width: 48rem;
    height: 72rem;

    transform: scale(1);

    transition: all 0.3s;

    z-index: 8888;
  }

  .mobile-nav-lists {
    flex-direction: column;
    gap: 5.6rem;
  }

  .main-nav-link:link,
  .main-nav-link:visited {
    font-size: 3.2rem;
  }

  /* .mobile-nav-lists li:last-child {
    display: none;
  } */

  /* STATE 1 : CLOSE*/
  /* definit a close class, all modifications are based on this class */

  .nav-close-state .main-nav {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;

    top: -20rem;
    right: -5em;
    transform: scale(0);
  }

  .nav-close-state .nav-menu-icon {
    display: block;
  }

  .nav-close-state .nav-close-icon {
    display: none;
  }
}

/* ============================================== */
/* 750px width 竖屏小平板 */
/* ============================================== */

@media (max-width: 47em) {
  /* hero section  */
  .photo-gallery {
    padding: 0 3.2rem;
  }

  /* CONTENT SECTION */

  .content-container {
    grid-template-columns: 1fr;
  }

  .last-update-section {
    margin-bottom: 4.8rem;
  }

  .section-title {
    margin-bottom: 2.4rem;
  }

  .content-description {
    font-size: 1.6rem;
  }

  .album-list {
    display: grid;
    grid-template-columns: 1fr 1fr;

    align-items: center;
  }

  .album-text {
    font-size: 1.6rem;
  }

  /* FOOTER */

  footer {
    padding: 6.4rem 3.2rem;
  }

  .copyright {
    font-size: 1.2rem;
  }

  /* FOR Page  album */

  .my-album-name {
    font-size: 3.2rem;
  }

  /* FOR Page about */

  .about-container {
    padding: 0 6.4rem;
  }

  .about-content {
    grid-template-columns: 1fr;

    column-gap: 3.2rem;
  }

  .about-img {
    width: 60%;
    box-shadow: 0 2px 20px rgb(0, 0, 0, 0.1);
  }
}

/* ============================================== */
/* 450px width for Mobile */
/* ============================================== */

@media (max-width: 29em) {
  /* HEADER */
  .header-container {
    padding: 0 1.6rem;
  }

  /* HERO SECTION */

  .hero-section {
    padding: 2.4rem 0 2.4rem 0;
  }

  .hero-container {
    padding: 0 1.6rem;
  }

  .photo-text {
    margin-bottom: 2.4rem;
  }
  .shot-info {
    font-size: 1.4rem;
  }

  /* CONTENT SECTION */

  .content-section {
    padding: 3.2rem 0;
  }

  .content-container {
    padding: 0 3.2rem;
  }

  .recent-content-list {
    grid-template-columns: 1fr;
  }

  .content-thumbnail-frame {
    height: 20rem;

    margin-bottom: 1rem;
  }

  .content-title:link,
  .content-title:visited {
    margin-bottom: 1rem;
  }

  .album-lists {
    gap: 3.2rem;
  }

  .album-list {
    grid-template-columns: 1fr;
    row-gap: 1.2rem;
    column-gap: 1.2rem;
  }

  /*  FOOTER */

  .footer-container {
    grid-template-columns: repeat(3, 1fr);
  }

  .footer-item:nth-child(1) {
    grid-row: span 2;
  }

  .footer-item:nth-child(2) {
    grid-column: 2 / -1;

    justify-self: end;
  }

  .footer-item:nth-child(3) {
    grid-row: 1 / 2;
    grid-column: 2 / -1;
  }

  /* FOR PAGE album */

  .my-album-section {
    padding: 3.2rem 0;
  }
  .my-album-name {
    font-size: 1.8rem;
  }

  .my-album-name-zh {
    letter-spacing: 0.5rem;
  }

  .my-album-name-en {
    letter-spacing: 0.8rem;
  }

  /* FOR CONTENT ARTICLE */

  .article-section {
    padding: 2.4rem 0;
  }

  /* FOR Page about */

  .adjust-section {
    height: 2.4rem;
  }

  .about-section {
    padding: 2.4rem 0;
    background-color: #f3f3f3;
  }
  .about-container {
    padding: 0 3.2rem;
  }
  .about-img {
    width: 100%;
    box-shadow: 0 2px 20px rgb(0, 0, 0, 0.1);
  }
}