@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Outfit:wght@100..900&display=swap');

:root {
    --osg-color-blue: rgba(0, 46, 109, 1);
    --osg-color-blue-fade: rgba(0, 46, 109, .15);
    --osg-color-blue-transparent: rgba(0, 46, 109, .05);
    --osg-color-lightblue: rgba(60, 180, 229, 1);
    --osg-color-lightblue-fade: rgba(60, 180, 229, .15);
    --osg-color-green: rgba(24, 152, 139, 1);
    --osg-color-green-fade: rgba(24, 152, 139, .15);
    --osg-color-orange: rgba(255, 77, 0, 1);
    --osg-color-orange-fade: rgba(255, 77, 0, .15);
    --osg-color-yellow: rgba(255, 200, 68, 1);
    --osg-color-yellow-fade: rgba(255, 200, 68, .15);
    --osg-color-lightgray: rgba(240, 240, 245, 1);
    --osg-color-gray: rgba(89, 95, 111, 1);
    --osg-color-black: rgba(10, 10, 18, 1);
    --osg-color-white: rgba(252, 252, 255, 1);

    --osg-fontsize-default: 12pt;
    --osg-fontsize-title: 35pt;
    --osg-fontsize-heading: 20pt;
    --osg-fontsize-topic: 14pt;
    --osg-fontsize-topic-alt: 14pt;
    --osg-fontsize-text: 12pt;
    --osg-fontsize-caption: 10pt;

    --osg-font-default: 'Open Sans';
    --osg-font-titles: 'Outfit Medium', 'Outfit', 'Open Sans';
    --osg-font-code: 'Courier', 'Courier New', 'Consolas';
}

/* resize the logo and give it consistent padding */
#logo {
    width: 100px;
    padding-right: 15px;
}

/* global defaults */
body {
    font-family: var(--osg-font-default), sans-serif;
    font-size: var(--osg-fontsize-default);
    color: var(--osg-color-black);
}

p {
    font-size: var(--osg-fontsize-default);
}

a {
    color: var(--osg-color-green);
    font-weight: 600;
}

a:hover {
    color: var(--osg-color-lightblue)
}

/* hide the theme selector until we have a dark theme ready */
a[title="Change theme"] {
    visibility: hidden !important;
}

/* primary navigation bar */
.navbar a {
    font-family: var(--osg-font-titles), sans-serif;
}

#navbar .active {
    color: var(--osg-color-blue);
    font-size: var(--osg-fontsize-topic);
}

/* page navigation - right panel */
.affix .link-body-emphasis {
    color: var(--osg-color-blue) !important;
}

/* breadcrumbs */
#breadcrumb li a {
    color: var(--osg-color-gray)
}

/* general setup by header level */
h1 {
    font-family: var(--osg-font-titles), sans-serif;
    font-size: var(--osg-fontsize-title);
    color: var(--osg-color-blue);
}

h2 {
    font-family: var(--osg-font-titles), sans-serif;
    font-size: var(--osg-fontsize-heading);
    color: var(--osg-color-blue);
}

h3 {
    font-family: var(--osg-font-titles), sans-serif;
    font-size: var(--osg-fontsize-topic);
    color: var(--osg-color-blue);
}

h4 {
    font-family: var(--osg-font-titles), sans-serif;
    font-size: var(--osg-fontsize-topic-alt);
    color: var(--osg-color-blue);
}

h5 {
    font-family: var(--osg-font-titles), sans-serif;
    font-size: var(--osg-fontsize-topic-alt);
    color: var(--osg-color-gray);
}

h6 {
    font-family: var(--osg-font-titles), sans-serif;
    font-size: var(--osg-fontsize-caption);
    color: var(--osg-color-gray);
}

.table {
    border-color: var(--osg-color-blue-fade);
}

.table th {
    font-family: var(--osg-font-default), sans-serif;
    color: var(--osg-color-black);
}

/* alert boxes */
.alert {
    font-size: var(--osg-fontsize-topic);
    font-family: var(--osg-font-default), sans-serif;
    color: var(--osg-color-blue);
}

.alert h5 {
    font-family: var(--osg-font-default), sans-serif;
    color: var(--osg-color-blue);
}

.alert p {
    font-family: var(--osg-font-default), sans-serif;
    color: var(--osg-color-blue);
}

.alert-warning {
    background-color: var(--osg-color-yellow-fade) !important;
    border-color: var(--osg-color-yellow) !important;
    color: var(--osg-color-blue);
}

.alert-danger {
    background-color: var(--osg-color-orange-fade) !important;
    border-color: var(--osg-color-orange);
    color: var(--osg-color-blue);
}

.alert-info {
    background-color: var(--osg-color-blue-fade);
    border-color: var(--osg-color-blue);
}

/* tabs and containers */

.nav-tabs .nav-link {
    color: var(--osg-color-blue) !important;
    font-weight: 700;
}

.nav-tabs .nav-link.active {
    border-color: var(--osg-color-blue-fade);
    color: var(--osg-color-blue) !important;
    border-bottom-color: var(--osg-color-white);
}

.card {
    border-color: var(--osg-color-blue-fade);
}

.card pre {
    margin-top: 1rem;
    border-radius: 10px;
}

/* code blocks */
code {
    font-family: var(--osg-font-code), monospace;
    color: var(--osg-color-orange);
    font-weight: 700;
}

/* json */
code.hljs {
    background-color: var(--osg-color-blue-transparent);
}

.hljs-attr {
    color: var(--osg-color-blue);
    font-weight: 800;
}

.hljs-string {
    color: var(--osg-color-green);
}

.hljs-literal {
    color: var(--osg-color-orange);
}