/* Simple responsive CSS with round avatar on cards */
*{box-sizing:border-box}
body{font-family:Arial, sans-serif;margin:0;color:#222;background:#f7f7f7}
.container{max-width:1000px;margin:0 auto;padding:16px}
.narrow{max-width:700px;margin:0 auto;padding:16px}
.site-header{position:relative;text-align:center;color:white}
.banner{width:100%;height:180px;object-fit:cover;display:block}
.banner-text{position:absolute;left:16px;bottom:16px;font-size:7px;font-weight:bold}
h1,h2,h3{margin:8px 0}
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;margin-top:16px}
.card{background:white;border-radius:10px;padding:16px;text-decoration:none;color:inherit;display:flex;flex-direction:column;align-items:center;box-shadow:0 2px 6px rgba(0,0,0,0.08);transition:transform .12s; border: 1px solid #007BFF; /* Thin blue border */}
.card:hover{transform:translateY(-6px)}
.card-image img{width:100px;height:100px;border-radius:50%;object-fit:cover;border:4px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,0.08)}
.card-body{width:100%;text-align:center;margin-top:12px}
.card-body h3{margin:0 0 8px 0;font-size:18px}
.card-body p{margin:0;color:#555;font-size:14px}

.admin-table{width:100%;border-collapse:collapse}
.admin-table th, .admin-table td{border-bottom:1px solid #ddd;padding:8px;text-align:left}
.button{display:inline-block;background:#0066cc;color:white;padding:8px 12px;border-radius:6px;text-decoration:none}
.link-like{background:none;border:none;color:#0066cc;cursor:pointer}
input,textarea{width:100%;padding:8px;margin:6px 0;border:1px solid #ccc;border-radius:6px}
label{display:block;margin:8px 0}
.error{color:#b00020}
.success{color:green}

/* Back button styles */
.back-button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #007BFF; /* Bootstrap blue */
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    transition: background-color 0.3s ease;
    margin-bottom: 20px;
}

.back-button:hover {
    background-color: #0056b3;
}

/* responsive tweaks */
@media(max-width:600px){
  .banner{height:120px}
  .banner-text{font-size:20px}
}