:root {
  /* Zurich Brand Colors */
  --zurich-blue: #003399;
  --zurich-light-blue: #E6F0FF; /* Very light blue for subtle backgrounds */
  --text-main: #333333;
  --text-muted: #666666;
  --bg-body: #F4F7FA; /* Slight off-white/blue tint for the page background */
  --bg-content: #FFFFFF; /* Pure white for reading areas */
  --border: #E0E0E0;
  
  --maxw: 1200px; /* Slightly tighter for better readability */
  --radius: 8px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-body);
  color: var(--text-main);
  /* Modern Sans-Serif Stack (Zurich style) */
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, 
               "Helvetica Neue", Arial, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Layout */
.container {
  max-width: var(--maxw);
  margin: 2rem auto;
  padding: 0 1rem;
}

/* Main content area card */
main {
  background: var(--bg-content);
  padding: 3rem;
  border-radius: var(--radius);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); /* Soft, modern shadow */
  border: 1px solid var(--border);
}

/* Typography */
h1, h2, h3 { 
  line-height: 1.25; 
  color: var(--zurich-blue); /* Headings in Zurich Blue */
  margin-top: 2rem;
  font-weight: 700;
}

h1 { margin-top: 1em; font-size: 2.2rem; }

p {
  margin-bottom: 1.5rem;
  color: var(--text-main);
  text-align: justify; /* This forces the text to align on both sides */
}

/* Code styling */
code { 
  background:var(--zurich-light-blue);  /* #f8f9fa*/
  color: var(--zurich-blue);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  padding: .2em .4em; 
  border-radius: 4px;
  font-size: 0.9em;
}

pre { 
  background: var(--zurich-light-blue);; 
  padding: 1rem; 
  border-radius: var(--radius);
  overflow: auto; 
  border: 1px solid var(--border);
}

/* Links */
a { 
  color: var(--zurich-blue); 
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}

a:hover { 
  border-bottom-color: var(--zurich-blue);
}

/* Module List */
ul.module-list { 
  list-style: none; 
  padding: 0; 
  margin: 1.5rem 0;
}

ul.module-list li { 
  border-bottom: 1px solid var(--border);
}

ul.module-list li:last-child { border-bottom: none; }

ul.module-list li a {
  display: block;
  padding: 1rem 0;
  color: var(--text-main);
  font-weight: 500;
}

ul.module-list li a:hover {
  color: var(--zurich-blue);
  padding-left: 0.5rem; /* Subtle movement on hover */
  transition: all 0.2s ease;
}

/* Footer */
footer { 
  margin-top: 2rem;
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-muted); 
}

/* Horizontal Rule */
hr { 
  border: 0; 
  height: 1px; 
  background: var(--border); 
  margin: 3rem 0; 
}