/* styles.css */

body {

  font-family: sans-serif;

  background-color: #f8f9fa;

  color: #333;

  padding: 2rem;

  margin: 0;

}


h2 {

  font-size: 1.5rem;

  margin-bottom: 1rem;

  color: #2d3748;

}


.card {

  background-color: #fff;

  border: 1px solid #e2e8f0;

  border-radius: 8px;

  padding: 1.5rem;

  margin-bottom: 2rem;

  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);

  max-width: 400px;

}


.card img {

  width: 80px;

  height: 80px;

  object-fit: cover;

  border-radius: 50%;

  margin-bottom: 1rem;

}


.card h3 {

  font-size: 1.25rem;

  margin: 0.5rem 0;

}


.card p {

  margin: 0.25rem 0;

}


input[type='text'] {

  padding: 0.5rem;

  border: 1px solid #cbd5e0;

  border-radius: 4px;

  margin-right: 0.5rem;

  width: 70%;

}


button {

  padding: 0.5rem 1rem;

  background-color: #4299e1;

  color: white;

  border: none;

  border-radius: 4px;

  cursor: pointer;

}


button:hover {

  background-color: #3182ce;

}


.loading, .error {

  margin-top: 0.5rem;

  font-style: italic;

}