:root {
    /* adjust to match your fixed navbar height */
    --navbar-height: 48px;
    --mobile-text: 14px;
    --regular-text: 18px;
}

/* push page content down so it's not covered by a fixed navbar */
body {
    padding-top: calc(var(--navbar-height) + 8px);
}

/* side/heading navbars — tweak selector(s) to match your markup */
.side-navbar,
.sidebar,
.toc,
.nav-sidebar {
    margin-top: calc(var(--navbar-height) + 4px);
}

/* make h1 headings larger */
h1 {
    color: #FFFFFF;
    font-size: 48px;
    line-height: 1.1;
}
/* Body (content) links: make them yellow so they stand out from regular text */
body a {
    color: #ffff00;
}

/* Lighter on hover/focus for readability */
body a:hover,
body a:focus {
    color: #ffff99;
    text-decoration: none;
    background: transparent;
}

/* Exclude navigation, sidebars and other site chrome so those links keep their existing styling */
.navbar a,
.navbar-nav a,
.navbar-default a,
.navbar-inverse a,
.nav,
.nav a,
.nav-sidebar a,
.side-navbar a,
.sidebar a,
.toc a,
.navbar-brand,
.navbar-form a,
.navbar-text a,
.header a,
.footer a {
    color: inherit;
    text-decoration: none;
}


:root {
    --navbar-height: 32px; /* smaller overall navbar height */
}

/* keep page content spacing in sync with the shorter navbar */
body {
    padding-top: calc(var(--navbar-height) + 16px);
}

/* make the grey top navbar shorter */
.navbar,
.navbar-default {
    min-height: var(--navbar-height);
}

/* reduce vertical padding for brand and nav links so navbar is less tall */
.navbar-default .navbar-brand,
.navbar-default .navbar-nav > li > a {
    padding-top: 6px;
    padding-bottom: 6px;
    line-height: 1;
    color: var(--toc-item);
}



 /* Markdown headings: light blue box */
h2 {
color: #000000;
border: 10px solid #00aaaa;
background-color: #00aaaa; /* fill matches border */
padding: 6px 8px;
box-sizing: border-box;
margin: 30px 0 25px 0;
/* -webkit-box-shadow: 4px 4px 8px rgba(0,0,0,0.45); */
/* box-shadow: 4px 4px 8px rgba(0,0,0,0.45); */
font-size: 20px;
}

h3 {
    display: inline-block;
    vertical-align: middle;
    color: #000000;
    border: 10px solid #00aaaa;
    background-color: #00aaaa; /* fill matches border */
    padding: 6px 8px;
    box-sizing: content-box;
    margin: 25px 0 25px 0;
    /* -webkit-box-shadow: 4px 4px 8px rgba(0,0,0,0.45);
    box-shadow: 4px 4px 8px rgba(0,0,0,0.45); */
    font-size: 20px;
}

.well {
    min-height: 20px;
    color: #000000;
    padding: 19px 19px;
    margin-top: 29px;
    margin-bottom: 19px;
    background-color: var(--panel-bg);
    -webkit-box-shadow: 4px 4px 8px rgba(0,0,0,0.45);
    box-shadow: 4px 4px 8px rgba(0,0,0,0.45);
    box-sizing: border-box;
    
}

/* inner line ~5px from the edge */
.well::before {
    content: "";
    position: absolute;
    top: 5px;
    right: 5px;
    bottom: 5px;
    left: 5px;
    border: 2px solid var(--toc-item);
    pointer-events: none;
    box-sizing: border-box;
    border-radius: inherit;
}

code {
  padding: 0;
  font-size: 18px;
  color: #b25ee6; /* #c7254e; */
  background-color: transparent;
}

.site-description {
    /* centered by default */
    display: block;
    /* width: calc(100% - 30px); */
    margin: 0 auto 28px; /* centered horizontally, space below */
    padding: 12px 15px;
    border: 2px solid #ccc;
    box-sizing: content-box;
    background: transparent;
    text-align: center;
}

h3:before {
  content: "";
}
h3:after {
  content: "";
}

/* Make bold markdown text white */
strong,
b,
.markdown-body strong,
.markdown-body b,
.md-content strong,
.md-content b {
    color: #ffffff !important;
}

/* Don't override styling inside code/pre blocks */
code strong,
code b,
pre code strong,
pre code b {
    color: inherit !important;
}


/* Extra padding for code blocks */

pre {
    margin-top: 30px;
    margin-bottom: 30px;
}


/* Little description box type-beat */
h5 {
    /* centered by default */
    display: block;
    margin: 0 auto 28px; /* centered horizontally, space below */
    padding: 12px 15px;
    border: 2px solid #ccc;
    box-sizing: content-box;
    background: transparent;
    text-align: center;
}

.container { width: 90%; }   /* default was 1170px */

/* Colours */

p,h5 {
    color: #ebebeb;
}



.col-md-8 {
    margin-left: 30px;
    margin-right: 30px;
}


/* underline for h4 */
h4 {
    display: inline-block;
    position: relative;
    color: var(--text); /* adjust if needed */
    padding-bottom: 6px; /* space for the underline */
    text-decoration: none;
}

h4::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px; /* underline thickness */
    background: var(--code); /* underline color */
    pointer-events: none;
}

body {
    background-color: #a09971;
}



/* Apply tokens (replace hard-coded colors) */
body { background-color: var(--bg); }
p, h5 { color: var(--text); }
h1 { color: var(--heading); }
body a { color: var(--link); }
body a:hover, body a:focus { color: var(--link-hover); }

h2 {
  color: #000;
  border: 10px solid var(--accent);
  background-color: var(--accent);
}
h3 {
  color: #000;
  border: 10px solid var(--accent);
  background-color: var(--accent);
}

code { color: var(--code); }
strong, b,
.markdown-body strong, .markdown-body b,
.md-content strong, .md-content b { color: var(--heading) !important; }

h4 { color: var(--heading); }
h4::after { background: var(--accent); }


/* Change theme button */
.navbar .btn {
    color: var(--toc-item);
    background-color: var(--panel-bg);
    padding-bottom: 6px;
    padding-top: 6px;
}

.navbar .btn::first-letter{
    color: inherit !important;
}

pre {
    background-color: var(--panel-bg);
    color: var(--text);
    border: 2px solid var(--panel-bg);
}

/* stop the theme's highlihting of first letters in nav items */
.nav > li > a::first-letter,
.dropdown-menu > li > a::first-letter,
.nav > li > a::first-letter,
.navbar-default .navbar-brand::first-letter {
color: inherit !important;
}

.nav > li > a {
    color: var(--toc-item);
}

a.main.toc-children {
    color: var(--toc-item);
}

a.main.toc-children:hover,
a.main.toc-children:focus,
.nav > li > a:hover,
.nav > li > a:focus {
    color: var(--link-hover);
    text-decoration: none;
    background: transparent;
}

.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
	text-decoration: none;
	color: var(--link-hover);
	background-color: var(--panel-bg);
}

.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus,
.dropdown-menu > li > a,
 .dropdown-menu > .active > a {
	text-decoration: none;
	color: var(--toc-item);
	background-color: var(--panel-bg);
}

.navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus,
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus,
.navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus,
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus,
.dropdown-menu > .active > a:hover {
	text-decoration: none;
	color: var(--link-hover);
	background-color: var(--panel-bg);
}
.dropdown-menu > li > a{
	text-decoration: none;
	color: var(--toc-item);
	background-color: var(--panel-bg);
}

.dropdown-menu {
    background-color: var(--panel-bg);
    color: var(--toc-item);
    box-shadow: 0px 0px 0 4px var(--panel-bg);
    border: 2px solid var(--toc-item);
}

div.navbar {
    background-color: var(--panel-bg);
}

ol, ul {
    color: var(--text);
}

.site-description {
    color: var(--text);
    border: 2px solid var(--text);
}

/* Underline */

strong > em {
    content: "";
    display: inline-block;
    position: relative;
    padding-bottom: 1px; /* space for the underline */
    text-decoration: none;
    text-transform: none;
    color: var(--text);
}

strong > em::before{
    content: ""
}

strong > em::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px; /* underline thickness */
    background: var(--text); /* underline color */
}

/* Keep TOC inside its column; no overlap */
.col-md-3 .bs-sidebar,
.col-md-3 .bs-sidebar .well {
  max-width: 100%;
  width: auto;
  box-sizing: border-box;
}

@media (min-width: 992px) {
  .bs-sidebar {
    position: sticky;
    top: calc(var(--navbar-height) + 85px) !important;
    max-height: calc(100vh - var(--navbar-height, 32px) - 16px);
    overflow: auto;
    box-sizing: border-box;
  }
}


/* slightly reduce further on small screens */
@media (max-width: 992px) {
    .navbar-default .navbar-brand,
    .navbar-default .navbar-nav > li > a {
        padding-top: 4px;
        padding-bottom: 4px;
    }
    
    .col-md-8 {
        margin-right: 0px;
        margin-left: 0px;
    } 
    
    .col-md-3 { display: none !important; }

    .site-description {
        font-size: 14px;
    }

    h1 { font-size: calc(var(--mobile-text) + 4px); }
    h2 { 
        font-size: calc(var(--mobile-text) + 2px); 
        padding: 2px 4px;
    }
    h3 { 
        font-size: var(--mobile-text); 
        padding: 2px 4px;
    }
    
    p,h4,h5,accent,code,ul,li { font-size: var(--mobile-text); }
    h4:after {
        height: 2px; 
    }
    
    .hljs { font-size: calc(var(--mobile-text) - 2px);}    
}