/* 🌀 Golden-ratio.css - The stylesheet for the Golden Ratio Page */

/* Page Heading */
.lesson-container.golden-ratio-page h1 {
  /* --- Size It --- */

  /* 2.5rem = 40px (16px root × 2.5) */
  font-size: 2.5rem;

  /* --- Style It --- */
  color: goldenrod; 
}

/* H2 Subheadings */
.lesson-container.golden-ratio-page h2 {
  /* --- Size It --- */

  /* 30px ÷ 16px = 1.875rem */
  font-size: 1.875rem;

  /* --- Style It --- */
  color: #FC3;
}

/* H3 Subheadings */
.lesson-container.golden-ratio-page h3 {
  /* --- Size It --- */

  /* 28px ÷ 16px = 1.75rem */
  font-size: 1.75rem;

  /* --- Space It --- */
  text-align: center;

  /* --- Style It --- */
  color: #D4AF37;
  text-decoration: underline;
}

/* H4 Subheadings */
.lesson-container.golden-ratio-page h4 {
  /* --- Size It --- */

  /* 
    Golden Ratio Size
    1.618rem x 16px = 25.888px
  */
  font-size: 1.618rem;

  /* --- Style It --- */
  color: gold;
}

/*
  💻 Tablet/Desktop Styles
  Applies above 768px (tablet portrait width, e.g., iPad).
*/
@media (width >= 769px) {
  .lesson-container.golden-ratio-page h1 {
    /* --- Size It --- */

    /* 3.5rem = 56px (16px root × 3.5) */
    font-size: 3.5rem;
  }
}