:root {
  --blue-bg-soft: #eef5ff;
  --blue-panel: #dae9ff;
  --blue-accent: #2f6fed;
  --blue-accent-hover: #1e5ddd;
  --blue-accent-deep: #0e3fa8;
  --blue-border: #c0d6f7;

  --text-dark: #1f1f1f;
  --text-medium: #4a4a4a;
}

/* Page */
body {
  padding: 20px;
  background-color: var(--blue-bg-soft);
  font-family: 'Segoe UI', Tahoma, Verdana, sans-serif;
  color: var(--text-medium);
  line-height: 1.65;
  margin: auto;
  max-width: 1200px;
}

/* Main banner */
#main_banner {
  background-color: var(--blue-panel);
  margin: 0;
  padding: 18px;
  text-align: center;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.12);
  font-size: 2em;
  font-weight: bold;
  color: var(--blue-accent-deep);
}

/* Breadcrumb panel */
#breadcrumb_hierarchy_panel {
  padding: 12px;
  background-color: #ffffff;
  font-size: 0.9em;
  margin-bottom: 20px;
  border-radius: 12px;
  border: 1px solid var(--blue-border);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

#breadcrumb_hierarchy_panel a {
  color: var(--blue-accent);
  text-decoration: none;
}

#breadcrumb_hierarchy_panel a:hover {
  color: var(--blue-accent-hover);
  text-decoration: underline;
}

#breadcrumb {
  padding-bottom: 8px;
  border-bottom: 1px solid var(--blue-border);
  font-weight: bold;
}

#breadcrumb a {
  display: inline-block;
  padding: 6px 12px;
  background-color: var(--blue-panel);
  border-radius: 6px;
  color: var(--blue-accent-deep);
  text-decoration: none;
  margin: 4px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
  transition: 0.2s;
}

#breadcrumb a:hover {
  background-color: var(--blue-accent);
  color: #ffffff;
}

/* Hierarchy panel */
#hierarchy_panel {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 10px;
}

#hierarchy_panel a {
  padding: 6px 12px;
  background-color: var(--blue-panel);
  border-radius: 6px;
  color: var(--blue-accent-deep);
  font-weight: bold;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
  text-decoration: none;
  transition: 0.2s;
}

#hierarchy_panel a:hover {
  background-color: var(--blue-accent);
  color: #ffffff;
}

#breadcrumb::before {
  content: "Path: ";
  padding-right:42px;
  font-weight: bold;
}

#hierarchy_panel::before {
  padding-top:5px;
  content: "Subpages: ";
  font-weight: bold;
}

/* Navigation menu */
nav {
  padding: 15px;
  background-color: var(--blue-bg-soft);
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  border-bottom: 3px solid var(--blue-border);
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  margin-bottom: 20px;
}

nav a {
  color: var(--blue-accent);
  text-decoration: none;
  font-weight: bold;
  font-size: 110%;
}

nav a:hover {
  color: var(--blue-accent-hover);
  text-decoration: underline;
}

/* Main content */
main {
  padding: 20px;
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.12);
  min-height: 300px;
}

/* Footer */
footer {
  padding: 15px;
  background-color: var(--blue-panel);
  text-align: center;
  border-top: 3px solid var(--blue-border);
  margin-top: 20px;
  font-size: 0.9em;
  color: var(--blue-accent-deep);
}

/* Figures */
figure {
  border: 2px solid var(--blue-border);
  padding: 10px;
  max-width: 600px;
}

img { max-width: 100%; }

/* Tables */
table, th, td {
  border: 1px solid var(--blue-border);
}
th {
  background: var(--blue-panel);
  color: var(--blue-accent-deep);
}
th, td {
  padding: 6px;
}

/* Tags */
#tags li {
  background-color: var(--blue-accent);
  color: white;
  padding: 6px 12px;
  border-radius: 16px;
  font-size: 14px;
}

/* Code blocks */
pre {
  background: #eee;
  color: black;
  border: 2px solid #1f3b77;
  padding: 5px;
  font-size: 110%;
}

/* Toggle button */
#toggleButton {
  background-color: var(--blue-accent);
  color: white;
  padding: 10px 20px;
  font-size: 18px;
  border-radius: 6px;
}

#toggleButton:hover {
  background-color: var(--blue-accent-hover);
  transform: scale(1.04);
}

/* Links */
section a {
  color: var(--blue-accent);
}
section a:hover {
  color: var(--blue-accent-hover);
}

/* Ref links */
a.ref {
  color: var(--blue-accent-deep);
  background-color: var(--blue-bg-soft);
  border: 1px solid var(--blue-border);
  padding: 3px 7px;
  border-radius: 4px;
}

/* Blockquote */
blockquote {
  background: var(--blue-bg-soft);
  border: 2px solid var(--blue-panel);
  padding: 12px;
  border-radius: 8px;
}