.header {
  background: #DFD0B8;
  height: 100px;
  margin: 0;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

#home {
  position: absolute;
  left: 20px;                   /* distance from left edge */
  top: 50%;                     /* center vertically */
  transform: translateY(-50%);  /* adjust for exact vertical centering */
  background: transparent;      /* no background overlap */
  color: #222831;
  margin: 0;
  padding: 0;
}



body {
  font-family: 'Merriweather', serif;
}
h1, h2 {
  font-family: 'Playfair Display', serif;
}

h1 span.amp {
  font-family: 'Merriweather', serif;
  font-style: italic;
}

body{
background: #393E46}

footer{
background: #DFD0B8;
position: fixed;
bottom: 0;
width: 100%;
margin: 0px;
left: 0px;
text-align: center
}


.card_container{
  display: flex;
  flex-direction: column;
  gap: 1rem; /* spacing between divs */
  max-width: 600px;
  margin: 2rem auto;
  padding: 0 1rem;
}

.card {
  background-color: #948979;
  border: 1px solid #222831;
  border-radius: 8px;
  padding: 1rem 1.5rem;
  transition: background 0.3s, transform 0.2s;
  cursor: pointer;
}

/* Title + paragraph formatting */
.card h2 {
  margin: 0 0 0.5rem;
  font-size: 1.25rem;
}

.card p {
  margin: 0;
  color: #555;
}

/* Hover effect */
.card:hover {
  background-color: #DFD0B8;
  transform: translateY(-2px);
}

.large {
  background-color: #DFD0B8; /* lighter color */
  border: 1px solid #222831;
  border-radius: 12px;
  padding: 2rem 2.5rem;
  margin: 1.5rem 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  white-space: normal;
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: auto;
  text-align: center;
}

/* Lift slightly on hover */


/* Typography */
.large h1, 
.large h2, 
.large h3 {
  margin-top: 0;
  color: #222831;
}

.large p {
  color: #333;
  line-height: 1.6;
  margin-bottom: 0;
}

/* Hover effect */


a {
  color: inherit;
  text-decoration: none; /* removes underline too, optional */
}


.large_container{
  display: flex;
  flex-direction: column;
  gap: 1rem; /* spacing between divs */
  max-width: 600px;
  margin: 2rem auto;
  padding: 0 1rem;
}