:root {
  --bs-primary: #003366; /* Dark Blue */
  --bs-secondary: #e6e6e6; /* Light Grey */
  --bs-success: #4CAF50; /* Medium Green */
  --bs-info: #17a2b8; /* Teal */
  --bs-warning: #ffc107; /* Amber */
  --bs-danger: #dc3545; /* Red */
  --bs-light: #f8f9fa; /* Light */
  --bs-dark: #343a40; /* Dark Grey */
  --bs-body-bg: #ffffff; /* White */
  --bs-body-color: #212529; /* Black */

  /* Custom colors for academic portfolio */
  --bs-academic-heading: #003366; /* Dark Blue for Headings */
  --bs-academic-subheading: #4CAF50; /* Medium Green for Subheadings */
  --bs-academic-background: #f8f9fa; /* Light Background */
  --bs-academic-text: #212529; /* Black Text */
  --bs-academic-border: #e6e6e6; /* Light Grey Borders */
  --bs-academic-highlight: #ffc107; /* Amber Highlights */
}

/*
#navbar-example2 {
  position: fixed;
  top: 80px;
  right: 20px;
  width: 200px;
}
.scrollspy-example {
  position: relative;
  overflow: auto;
  height: 600px;
}
*/
body {
  background-color: var(--bs-academic-background);
  color: var(--bs-academic-text);
  padding-top: 80px;
  height: 100%;
}

.wrapper {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 384px);
  /*display: flex;
  justify-content: center;
  align-items: center;
  */
}

.profile-image {
  margin: 0 auto 1rem auto;
  display: block;
}
.profile-header {
  text-align: center;
  margin-bottom: 2rem;
}
.profile-header h1 {
  margin-top: 1rem;
}
.content-section {
  background: #f8f9fa;
  padding: 2rem;
  border-radius: 0.5rem;
}
.jumbotron {
  background: #e9ecef;
  padding: 2rem;
  border-radius: 0.5rem;
}

.content {
  flex: 1;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--bs-academic-heading);
}

.subheading {
  color: var(--bs-academic-subheading);
}

.highlight {
  color: var(--bs-academic-highlight);
}

.lead {
  font-size: 1.25rem;
  font-weight: 300;
  color: var(--bs-dark);
}

/* Button styles */
.btn-primary {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}

.btn-secondary {
  background-color: var(--bs-secondary);
  border-color: var(--bs-secondary);
}

.btn-success {
  background-color: var(--bs-success);
  border-color: var(--bs-success);
}

.btn-info {
  background-color: var(--bs-info);
  border-color: var(--bs-info);
}

.btn-warning {
  background-color: var(--bs-warning);
  border-color: var(--bs-warning);
}

.btn-danger {
  background-color: var(--bs-danger);
  border-color: var(--bs-danger);
}

.btn-light {
  background-color: var(--bs-light);
  border-color: var(--bs-light);
}

.btn-dark {
  background-color: var(--bs-dark);
  border-color: var(--bs-dark);
}

.btn {
  color: var(--bs-body-color);
}

.btn-primary:hover {
  background-color: #00264d; /* Darker shade of Dark Blue */
  border-color: #00264d;
}

.btn-secondary:hover {
  background-color: #cccccc; /* Darker shade of Light Grey */
  border-color: #cccccc;
}

.btn-success:hover {
  background-color: #45a049; /* Darker shade of Medium Green */
  border-color: #45a049;
}

.btn-info:hover {
  background-color: #138496; /* Darker shade of Teal */
  border-color: #138496;
}

.btn-warning:hover {
  background-color: #e0a800; /* Darker shade of Amber */
  border-color: #e0a800;
}

.btn-danger:hover {
  background-color: #c82333; /* Darker shade of Red */
  border-color: #c82333;
}

.btn-light:hover {
  background-color: #e2e6ea; /* Darker shade of Light */
  border-color: #dae0e5;
}

.btn-dark:hover {
  background-color: #23272b; /* Darker shade of Dark Grey */
  border-color: #1d2124;
}

.container {
  padding: 20px;
  /*border: 1px solid var(--bs-academic-border);
  border-radius: 5px;
  background-color: var(--bs-light);*/
}

/* Custom background utility classes */
.bg-primary {
  background-color: var(--bs-primary) !important;
}

.bg-secondary {
  background-color: var(--bs-secondary) !important;
}

.bg-success {
  background-color: var(--bs-success) !important;
}

.bg-info {
  background-color: var(--bs-info) !important;
}

.bg-warning {
  background-color: var(--bs-warning) !important;
}

.bg-danger {
  background-color: var(--bs-danger) !important;
}

.bg-light {
  background-color: var(--bs-light) !important;
}

.bg-dark {
  background-color: var(--bs-dark) !important;
}

.text-primary {
  color: var(--bs-primary) !important;
}

.text-secondary {
  color: var(--bs-secondary) !important;
}

.text-success {
  color: var(--bs-success) !important;
}

.text-info {
  color: var(--bs-info) !important;
}

.text-warning {
  color: var(--bs-warning) !important;
}

.text-danger {
  color: var(--bs-danger) !important;
}

.text-light {
  color: var(--bs-light) !important;
}

.text-dark {
  color: var(--bs-dark) !important;
}

nav#TableOfContents ul li a {
  color: var(--bs-primary) !important;
}
/*DIAGRAM*/
.node {
  fill: white;
  stroke: green;
  stroke-width: 1px;
}
.link {
  fill: none;
  stroke: black;
  stroke-width: 1.5px;
}
text {
  font: 12px sans-serif;
  font-weight: 400;
}
.container {
  width: 100%;
  margin-top: 20px;
}
.diagram-container {
  margin-top: 40px;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background-color: #f9f9f9;
}