body {
  font-family: 'Inter', sans-serif;
  background-color: #fdf6f0; 
  margin: 0; 
  padding: 2rem; 
  color: #2c3e50;
}

a {
  color: #0366d6;
  text-decoration: none;
}

.site-header { 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  gap: 1rem; 
  margin-bottom: 2rem; 
}

.site-title { 
  font-size: 2.5rem; 
  margin: 0; 
}

.site-logo { 
  width: 200px; 
  height: 200px; 
}  

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

.card { 
  background-color: #ffffff; 
  border-radius: 12px; 
  padding: 1rem; 
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); 
  transition: transform 0.2s ease, box-shadow 0.2s ease; 
  text-align: center; 
}

.card:hover { 
  transform: scale(1.03); 
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); 
  cursor: pointer; 
}

.card a { 
  text-decoration: none; 
  color: inherit; 
}