body {
  font-family: Arial, sans-serif;
  margin: 0;                /* remove page margin so header goes full width */
  background-color: #f7f3ff; /* very light blue */
  position: relative;

  display: flex;          /* 👈 important */
  flex-direction: column; /* 👈 important */
  min-height: 100vh;      /* 👈 makes page full screen height */
}
header {
  text-align: center;
  padding: 20px 0;           /* vertical padding */
  margin: 0 0 30px 0;                  /* remove bottom margin so spacing is controlled by sections */
  width: 100%;

  background: linear-gradient(to bottom, #7aa0d6, #f7f3ff 70%);
}

.card img {
  border-radius: 6px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.2);
  max-width: 100%;
}

.reading-page {
  max-width: 1000px;
  margin: 0 auto;
}

.page-content {
  flex: 1;                   /* keeps footer at bottom */
  padding: 20px 25px;        /* 20px top/bottom, 25px left/right */
  max-width: 1200px;          /* limits line width on large screens */
  margin: 0 auto;             /* centers the content horizontally */
  box-sizing: border-box;     /* includes padding in width */
}

header h1 {
  font-family: 'Lobster', cursive;
  margin: 0;
  font-size: 3em;
  color: #4b0082;
}

header h2 {
  margin: 5px 0 0 0;
  font-size: 1.5em;
  color: #4b0082;
}

#domain-top-left {
  position: absolute;
  top: 10px;
  left: 20px;
  font-weight: bold;
  color: #4b0082;
}

#domain-top-left a {
  text-decoration: none;
  color: #4b0082;
  font-weight: bold;
}

#domain-top-left a:hover {
  opacity: 0.8;
}
.hero {
  text-align: center;
  padding: 10px 20px 30px;
}

.hero h1 {
  font-size: 3rem;
  font-family: 'Lobster', cursive;
}

.hero p {
  font-size: 1.2rem;
  margin-top: 15px;
}

/* Make clickable cards not look like links */
.cards-container a.card {
  text-decoration: none;
  color: inherit;
}

.cards-container a.card:hover {
  text-decoration: none;
}

.cards-container { 
  display: flex; 
  flex-wrap: wrap; 
  justify-content: center; 
  gap: 30px; /* space between cards */ 
  padding: 40px 20px; 
}
.cards-container .card img { 
  max-height: 200px; /* or whatever fits your design */
  object-fit: cover; 
  display: block;
  width: 100%; }

.card {
  background: linear-gradient(to bottom, #e6e6fa, #f7f3ff); /* subtle gradient */
  border-radius: 15px;
  text-align: center;
  display: flex;
  flex-direction: column;
    justify-content: space-between;  /* spreads content from top to bottom */
  align-items: center;
  width: 275px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
  transition: transform 0.3s, box-shadow 0.3s;
}

.card h3 {
  font-family: 'Lobster', cursive;
  font-size: 2em;  /* increase title size */
  letter-spacing: 1px;
  margin: 10px 0;
  color: #4b0082;
  white-space: nowrap;
}
.card h3::after {
  content: "";
  display: block;
  width: 40px;
  height: 3px;
  background: linear-gradient(to right, #ffd700, #b8860b);
  margin: 10px auto;
  border-radius: 2px;
}

.card {
  padding: 30px;
}

.card p {
  font-size: 1.1em;
  color: #333;
  margin-bottom: 15px;
}

.card a {
  font-size: 1.1em;  /* increase button text */
  display: inline-block;
  text-decoration: none;
  margin-top: 20px;
  color: #4b0082;
  font-weight: bold;
  padding: 8px 14px;
  border-radius: 8px;
  background: linear-gradient(to bottom, #ffe680, #ffc107);
  transition: background 0.3s;
}

.card a:hover {
  background: linear-gradient(to bottom, #ffc107, #ffb300);
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.3);
}

.card-buttons {
  margin-top: 15px;  /* space above the buttons */
  display: flex;      /* keeps multiple buttons in a row */
  gap: 10px;          /* space between buttons if you have more than one */
}

.pdf-preview {
  margin: 30px auto;
  max-width: 800px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

.coloring-page-entry {
  margin-top: 30px;
  padding: 20px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  text-align: center;
}

.coloring-page-image {
  max-width: 100%;
  height: auto;
  margin: 15px 0;
  border-radius: 8px;
}

.site-footer {
  padding: 15px 0;
  text-align: center;

  background: linear-gradient(to top, #ffe680, #f7f3ff 85%);
}

.site-footer a {
  display: inline-block;     /* 👈 forces row layout */
  margin: 0 25px;
  text-decoration: none;
  color: #4b0082;
}

.site-footer a:hover {
  font-weight: bold;
}

.signature {
  font-family: 'Lobster', cursive;
  font-style: italic;
  font-size: 1.4rem;
  margin-top: 10px;
  letter-spacing: 1px;
  opacity: 0.9;
  color: #4b0082;
  text-align: right;
}