/* Reset & base */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: Arial, sans-serif; line-height: 1.6; display: flex; flex-direction: column; min-height: 100vh; }
a { text-decoration: none; color: inherit; }

/* Header */
header {
  background: #116466;
  color: #fff;
  padding: 1em;
  text-align: center;
}
.header-content { display: flex; align-items: center; justify-content: center; gap: 0.5em; }
.header-content img.logo { width: 40px; height: auto; }
.header-content h1 { font-size: 1.5em; margin: 0; }

/* Layout */
.container { display: flex; flex: 1; }
aside {
  width: 250px; padding-top:20px;
  background: #2c3531;
  color: #fff;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}
nav ul { list-style: none; padding: 1em; }
nav li { margin-bottom: 0.5em; }
nav a { color: #fff; }
main { flex: 1; padding: 1em; }

/* Article */
article { max-width: 800px; margin: 1em auto; }
article img { max-width: 100%; height: auto; display: block; margin-bottom: 1em; }
.meta { font-size: 0.9em; color: #555; margin-bottom: 1em; }
p {padding:5px 0 5px 20px; text-indent: 2em; margin-bottom: 1em;}
a {color:rgb(12, 137, 161);}
/* Footer */
footer {
  background: #f4f4f4;
  padding: 1em;
  text-align: center;
  border-top: 1px solid #ddd;
}
.footer-nav { list-style: none; display: flex; justify-content: center; gap: 1em; margin: 0.5em 0; padding: 0; }
.footer-nav a { color: #333; font-size: 0.9em; }
.footer-logo { display: block; margin: 0 auto 0.5em; width: 50px; height: auto; }

/* Mobile styles */
#menu-toggle { display: none; position: fixed; top: 1em; left: 1em; background: #222; color: #fff; border: none; padding: 0.5em; z-index: 1001; }
@media (max-width: 768px) {
  aside {
    position: fixed;
    top: 0; left: 0; height: 100%;
    transform: translateX(-100%);
    width: 100%;
    z-index: 1000;
  }
  .container.menu-open aside { transform: translateX(0); }
  #menu-toggle { display: block; }
  main, nav { padding-top: 3em; }
}