body {
  font-family: Arial;
  background: #f4f6f9;
  text-align: center;
}

h1 {
  background: linear-gradient(45deg, #4CAF50, #2196F3);
  color: white;
  padding: 15px 30px;
  border-radius: 12px;
  width: fit-content;
  margin: 20px auto;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  
}


#container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  padding: 20px;
}


.card {
  background: white;
  padding: 20px;
  border-radius: 15px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  transition: 0.3s;

  height: 250px;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.card button {
  margin-top: auto;
  cursor: pointer;
}


.card img {
  width: 80px;
  height: 80px;
  border-radius: 50%;

  display: block;
  margin: 0 auto; 
}
.card:hover {
  transform: translateY(-10px);
}

.card img {
  width: 80px;
  border-radius: 50%;
}

.nav-links a{
  color: blue;
  transition: 0.3s;
}

.card :hover{
  color: blue;
}


button {
  padding: 8px 15px;
  margin-top: 10px;
  cursor: pointer;