* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Poppins', sans-serif; }
body { background: #f4f4f4; color: #333; line-height: 1.6; }

header { background: #222; padding: 1rem 0; }
nav { text-align: center; }
nav a { color: #fff; margin: 0 15px; text-decoration: none; }
nav a.active, nav a:hover { color: #ff9800; }

main { max-width: 600px; min-height: 73vh; margin: 2rem auto; padding: 1rem; background: #fff; border-radius: 10px; box-shadow: 0 0 10px rgba(0,0,0,0.1); }

.card { text-align: center; }
.card img { border-radius: 50%; width: 120px; height:120px ; border:10px solid #b37d7d ;}
.card h1 { margin-top: 1rem; }

form { display: flex; flex-direction: column; }
label { margin-top: 10px; font-weight: bold; }
input, textarea { padding: 10px; margin-top: 5px; border: 1px solid #ccc; border-radius: 5px; }
button { margin-top: 15px; padding: 10px; border: none; border-radius: 5px; background: #007bff; color: #fff; cursor: pointer; }
button:hover { background: #0056b3; }
footer{display: flex; justify-content: center; align-items: center; height: 10vh; background-color: #333; color: #fff; }
.error { color: red; font-size: 0.9rem; margin-top: 5px; }
.success { color: green; font-size: 1rem; margin-top: 10px; }

@media (max-width: 600px) {
  main { width: 90%; padding: 1rem; }
  nav a { display: inline-block; margin: 5px; }
}