* {
  box-sizing: border-box;
}

header {
  padding: 1rem;
  background-color: #eee;
  color: white;
  text-align: center;
}

.main-container {
  display: flex;
  flex: 1;
}

.tab-buttons {
  background-color: #f0f0f0;
  width: 220px;
  border-right: 1px solid #ccc;
  display: flex;
  flex-direction: column;
  padding: 1rem 0;
}

.tab-button {
  background: none;
  border: none;
  padding: 1rem;
  text-align: left;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.2s;
  border-left: 4px solid transparent;
}

.tab-button:hover {
  background-color: #e6e6e6;
}

.tab-button.active {
  background-color: #fff;
  border-left: 4px solid #555;
  font-weight: bold;
}

.tab-content {
  flex: 1;
  padding: 2rem;
  display: none;
  overflow-y: auto;
}

.tab-content.active {
  display: block;
  background-color: #fff;
  border-left: 1px solid #ccc;
}

footer {
  text-align: center;
  padding: 1rem;
  background-color: #eee;
  font-size: 0.9rem;
  color: #555;
}

@media (max-width: 768px) {
  .main-container {
flex-direction: column;
  }
  .tab-buttons {
flex-direction: row;
overflow-x: auto;
width: 100%;
border-right: none;
border-bottom: 1px solid #ccc;
  }
  .tab-button {
flex: 1;
border-left: none;
border-bottom: 4px solid transparent;
text-align: center;
  }
  .tab-button.active {
border-left: none;
border-bottom: 4px solid #555;
  }
  .tab-content {
border-left: none;
  }
}
blockquote { text-align: right; font-size: 12pt; font-feature-settings: "ss04"; position: fixed; bottom: 15px; right: 15px; margin: 0px; text-shadow: 0px 1px 1px white; color: #024; }
blockquote .author { font-style: italic; }
footer_line { text-align: center; font-size: 12pt; font-feature-settings: "ss04"; position: fixed; bottom: 1px; right: 45%; margin: 10px; text-shadow: 1px 1px 1px navy; color: #e3e3e3; }
footer_line .footer_line { font-style: bold; }
.grid {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      justify-content: center;
    }
    .pages-card {
      background: white;
      border-radius: 10px;
      box-shadow: 0 0 10px rgba(0,0,0,0.1);
      overflow: hidden;
      width: 250px;
      text-align: center;
      transition: transform 0.2s ease;
    }
    .pages-card:hover {
      transform: scale(1.03);
    }
    .thumbnail {
      width: 100%;
    }
    .title {
      padding: 10px;
      font-size: 0.95rem;
    }