@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Source+Sans+3:wght@400;600&display=swap");

:root {
  --header-dark: #4c4f69;
  --header-border: #dce0e8;
  --text-dark: #4c4f69;
  --text-body: #5c5f77;
  --text-light: #6c6f85;
  --bg-light: #eff1f5;
  --bg-white: #ffffff;
  --accent-primary: #1e66f5;
  --accent-hover: #1a5bd6;
  --success: #40a02b;
  --warning: #fe640b;
}

@media (prefers-color-scheme: dark) {
  :root {
    --header-dark: #11111b;
    --header-border: #313244;
    --text-dark: #cdd6f4;
    --text-body: #bac2de;
    --text-light: #a6adc8;
    --bg-light: #1e1e2e;
    --bg-white: #181825;
    --accent-primary: #89b4fa;
    --accent-hover: #74c7ec;
    --success: #a6e3a1;
    --warning: #fab387;
  }
}


body {
  font-family: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  line-height: 1.7;
  background-color: var(--bg-light);
  color: var(--text-body);
}

p {
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight: 600;
  color: var(--text-dark);
}

code, pre, kbd, samp {
  font-family: "JetBrains Mono", "SF Mono", "Cascadia Code", "Roboto Mono", "Consolas", "Courier New", monospace;
}

a {
  color: var(--accent-primary);
}

a:hover,
a:focus {
  color: var(--accent-hover);
}

.navbar,
.navbar-default,
.navbar-inverse,
.navbar-expand-lg {
  background-color: var(--header-dark) !important;
  border-bottom: 3px solid var(--header-border);
}

.navbar .navbar-brand,
.navbar .navbar-nav .nav-link,
.navbar .navbar-nav .dropdown-toggle {
  color: #f7fafc !important;
}

.navbar .nav-text,
.navbar .text-default {
  color: #f7fafc !important;
}

.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .dropdown-toggle:hover {
  color: #cbd5e0 !important;
}

.template-home img[alt*="Margot package logo"] {
  border-radius: 12px;
  border: 1px solid var(--header-border);
  background: var(--bg-white);
}

.btn {
  border-radius: 999px;
}

.page-header,
.page-header h1 {
  color: var(--text-dark);
}

.table > thead > tr > th,
.table thead th {
  background-color: var(--header-dark);
  color: #ffffff;
}

.table > tbody > tr > td,
.table > tbody > tr > th {
  border-bottom: 1px solid var(--header-border);
}

@media (prefers-color-scheme: dark) {
  code,
  pre,
  kbd,
  samp {
    color: #f5c2e7;
  }

  pre {
    background-color: #181825;
    border-color: #313244;
  }

  .sourceCode .co,
  pre code .co,
  code .co,
  .comment {
    color: #cdd6f4;
  }

  .sourceCode {
    background-color: #181825;
    color: #cdd6f4;
    border: 1px solid #313244;
  }

  .sourceCode span {
    color: #cdd6f4;
  }

  .sourceCode .kw { color: #cba6f7; }
  .sourceCode .st { color: #a6e3a1; }
  .sourceCode .dv,
  .sourceCode .fl,
  .sourceCode .bn,
  .sourceCode .cn { color: #fab387; }
  .sourceCode .fu { color: #89b4fa; }
  .sourceCode .op { color: #cdd6f4; }
  .sourceCode .va { color: #cdd6f4; }
  .sourceCode .al,
  .sourceCode .er { color: #f38ba8; }
  .sourceCode .dt { color: #94e2d5; }
}

@media (prefers-color-scheme: dark) {
  .sourceCode .va,
  .sourceCode .an,
  .sourceCode .at,
  .sourceCode .ot,
  .sourceCode .fu {
    color: #cdd6f4;
  }

  .sourceCode .st {
    color: #f5e0dc;
  }
}


.navbar-brand,
.navbar-nav .nav-link {
  font-family: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.btn {
  border-radius: 999px;
}