/* css styles */

.center-header {
  text-align: center;
}

.cards-container {
  display: flex;
  justify-content: center; /* centers cards on page */
  flex-wrap: wrap;         /* allows multiple rows */
  gap: 1rem;               /* space between cards */
}

.card {
  flex: 1 1 30%;   /* grow, shrink, minimum width */
  min-width: 200px;          /* optional for very small screens */
  max-width: 300px;          /* optional max width for larger screens */
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 0rem;
  box-shadow: 5px 5px 10px rgba(0,0,0,0.1);
  text-align: center;
  margin-top: 1rem;
  margin-bottom: 1rem;
  font-size: 1.1em;
}

.card-title {
  text-align: center !important;
  margin-bottom: 1rem;
  font-family: 'Helvetica', sans-serif;  /* or any font you like */
  font-weight: 100;                 /* thin font */
}

.card-body {
  text-align: left !important;
  margin: 0rem;
}

.wide-card {
  flex: 1 1 200px;           /* grows wider but still wraps on small screens */
  min-width: 200px;          /* optional for very small screens */
  max-width: 400px;          /* optional max width for larger screens */
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 1rem;
  box-shadow: 5px 5px 10px rgba(0,0,0,0.1);
  text-align: left;
  margin-top: 1rem;
  margin-bottom: 1rem;
  font-size: 1.1em;
}






/* .card { */
/*   flex: 1 1 30%;            /\* grow/shrink with minimum width 30% *\/ */
/*   max-width: 400px;         /\* optional maximum width *\/ */
/*   min-width: 200px;         /\* prevents cards from shrinking too much on phones *\/ */
/*   padding: 10px; */
/*   box-sizing: border-box;   /\* include padding in width *\/ */
/* } */

/* .card-body { */
/*   padding: 1rem; */
/* } */

/* .card-title { */
/*   text-align: center;       /\* center title *\/ */
/*   margin-bottom: 0.5rem; */
/*   font-weight: 100;         /\* thin font *\/ */
/* } */
/* </style> */