/* =========================
   BASE
   ========================= */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background: black;
  color: white;
  font-family: Georgia, "Times New Roman", serif;
}

/* =========================
   TYPOGRAPHY
   ========================= */

h1, h2, h3 {
  text-align: center;
  font-weight: bold;
  margin: 3rem 0 2rem;
}

p {
  font-size: 1rem;
  line-height: 1.6;
}

/* Centered prose (quotes, essays, homepage text) */
.prose {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

.prose p {
  margin: 2rem 0;
}

/* =========================
   POEMS
   ========================= */

.poem {
  max-width: 700px;
  margin: 4rem auto;
  padding-left: 2rem;
  border-left: 3px solid white;
}

.poem p {
  text-align: left;
  margin: 0.75rem 0;
}

/* =========================
   QUOTES
   ========================= */

.quote-grid {
  max-width: 1100px;
  margin: 4rem auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.5rem;
}

/* Individual quote box */
.quote-card {
  background: #111;
  padding: 1.5rem;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid #222;
}

/* Quote text */
.quote-text {
  text-align: center;
  line-height: 1.5;
}

/* Date */
.quote-date {
  text-align: center;
  font-size: 0.75rem;
  opacity: 0.6;
  margin-top: 1rem;
}

/* Quote of the Day highlight */
.quote-card.featured {
  border: 1px solid crimson;
}

/* =========================
   BUTTONS / NAV
   ========================= */

.button {
  display: block;
  width: 300px;
  height: 50px;
  margin: 0.5rem auto;
  background: crimson;
  color: white;
  border: 2px solid white;
  cursor: pointer;
  font-size: 1rem;
  text-align: center;
  line-height: 50px;
  text-decoration: none;
}
.button-title {

cursor: pointer;
border-width: 2px;
background-color:crimson;
color:white;
font-size: 30px;
display: inline-block;
margin: 0 auto;

}