body{font-family:Arial,sans-serif;margin:0;background:#f5f7fb;color:#333}
header{background:#0b4f8a;color:#fff;padding:20px}
.container{max-width:1100px;margin:auto;padding:20px}
nav a{color:#fff;margin-right:18px;text-decoration:none}
.section{margin:20px 0}
.section h2{background:#d7ebff;padding:10px;border-left:5px solid #0b4f8a}
.member-card{display:flex;gap:20px;background:#fff;padding:16px;border-radius:8px;box-shadow:0 2px 6px rgba(0,0,0,.1);margin:18px 0}
.member-card img{width:180px;height:auto;border-radius:6px}
.pub-card{background:#fff;padding:16px;border-left:4px solid #003E7E;box-shadow:0 2px 4px #ccc}
.pub-card img{width:180px;height:auto;border-radius:6px}
details{background:#fff;padding:10px;border-radius:6px}
@media(max-width:700px){.member-card{flex-direction:column}.member-card img{width:100%}.pub-card{flex-direction:column}.pub-card img{width:100%}}
/* 
     IF the screen width is between 0px and 700px,
     ANY CSS CODE PLACED HERE WILL ACTIVATE.
     (Perfect for tablets and mobile phones!)
*/