* { box-sizing:border-box; margin:0; padding:0; }
html, body { height:100%; }               
body {
  display:flex;
  flex-direction:column;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: #f4f4f4;
  color: #333;
}

header {
  background:#66545e;
  color:#fff;
  display: flex;
  flex-direction: column;
}

.header-title {
    padding: 1.5rem;
    text-align: center;
    background:#a10000; 
}

.header-title h1 { 
    margin:0; 
    font-size:1.8rem; 
    text-transform: uppercase; 
    letter-spacing: 1px; 
}

.header-nav {
  background:#1d0609; 
  padding:.8rem;
  display:flex;
  justify-content:center;
  gap:1.5rem;
  width: 100%; 
}

.header-nav a { color:#fff; text-decoration:none; font-weight:600; }

.container { display:flex; flex:1; min-height:0; }

.sidebar {
  background:#f4f4f4;
  width:260px;
  padding:1.5rem;
  border-right: 1px solid #ddd;
  overflow-y: auto;
}

.sidebar h3 { color: #66545e; margin: 1.5rem 0 0.5rem 0; border-bottom: 2px solid #ccc; padding-bottom: 5px; }

.sidebar button {
  width: 100%;
  padding: 10px;
  margin-bottom: 5px;
  background-color: #460b2f;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  text-align: left;
  font-size: 0.9rem;
}

.sidebar-ex3 { margin-top: 25px; }

.side-item {
    background: #d3d3d3;
    border: 1px solid #ddd;
    padding: 10px;
    margin-bottom: 12px;
    border-radius: 4px;
}

.side-item p { font-size: 12px; font-weight: bold; margin-bottom: 5px; color: #66545e; }

.side-item button {
    background-color: #460b2f;
    padding: 6px;
    font-size: 11px;
    text-align: center;
}

.side-item input { font-size: 11px; margin-bottom: 5px; padding: 3px; border: 1px solid #ccc; }

.side-item ul { font-size: 11px; padding-left: 15px; margin-top: 5px; }

#img-7 { display: block; margin-bottom: 5px; border-radius: 2px; }

.dark-mode-active {
    background-color: #222 !important;
    color: #fff !important;
}

main { flex:1; padding: 3rem; }

footer { background:#333; color:#aaa; text-align:center; padding: 1rem; margin-top: auto; }