/* - - - - - FONTS!!! - - - - - - - -  */
/* noto-sans-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/noto-sans-v42-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* noto-sans-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Noto Sans';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/noto-sans-v42-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* noto-sans-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/noto-sans-v42-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* noto-sans-700italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Noto Sans';
  font-style: italic;
  font-weight: 700;
  src: url('../fonts/noto-sans-v42-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  */
:root {
    font-family: "Noto Sans", sans-serif;

    /* site colors: python: BLUE, networks: GREEN, basics: RED */
    --strong-site-color: #FF2222;
    --soft-site-color:  #FFBBBB;

    --sidebar-active: var(--strong-site-color);
    --sidebar-header-border-color:var(--strong-site-color);

    --links: var(--strong-site-color);

    /* - - - - - - - - - - - - - - - -  */

    --content-max-width: 900px;

    --blockquote-note-color: #0969da;
    --blockquote-note-bgcolor: #aaddff;
    --blockquote-tip-color: #008000;
    --blockquote-tip-bgcolor: #ddffdd;
    --blockquote-important-color: #8250df;
    --blockquote-important-bgcolor: #ddddff;
    --blockquote-warning-color: #9a6700;
    --blockquote-warning-bgcolor: #ffffcc;
    --blockquote-caution-color: #b52731;
    --blockquote-caution-bgcolor: #ffdddd;
}

.adjam-light,
html:not(.js) {
    --bg: hsl(0, 0%, 100%);
    --fg: hsl(0, 0%, 0%);

    --sidebar-bg: #eaeaea;
    --sidebar-fg: hsl(0, 0%, 0%);
    --sidebar-non-existant: #aaaaaa;
    --sidebar-spacer: #f4f4f4;

    --scrollbar: #8f8f8f;

    --icons: #747474;
    --icons-hover: #000000;

    --inline-code-color: #301900;

    --theme-popup-bg: #fafafa;
    --theme-popup-border: #cccccc;
    --theme-hover: #e6e6e6;

    --quote-bg: hsl(197, 37%, 96%);
    --quote-border: hsl(197, 37%, 91%);

    --warning-border: #ff8e00;

    --table-border-color: hsl(0, 0%, 95%);
    --table-header-bg: hsl(0, 0%, 80%);
    --table-alternate-bg: hsl(0, 0%, 97%);

    --searchbar-border-color: #aaa;
    --searchbar-bg: #fafafa;
    --searchbar-fg: #000;
    --searchbar-shadow-color: #aaa;
    --searchresults-header-fg: #666;
    --searchresults-border-color: #888;
    --searchresults-li-bg: #e4f2fe;
    --search-mark-bg: #a2cff5;

    --color-scheme: light;

    /* Same as `--icons` */
    --copy-button-filter: invert(45.49%);
    /* Same as `--sidebar-active` */
    --copy-button-filter-hover: invert(14%) sepia(93%) saturate(4250%)
        hue-rotate(243deg) brightness(99%) contrast(130%);

    --footnote-highlight: #7e7eff;

    --overlay-bg: rgba(200, 200, 205, 0.4);
}

.adjam-dark {
    --bg: hsl(226, 23%, 11%);
    --fg: #bcbdd0;

    --sidebar-bg: #282d3f;
    --sidebar-fg: #c8c9db;
    --sidebar-non-existant: #505274;
    --sidebar-spacer: #2d334f;

    --scrollbar: var(--sidebar-fg);

    --icons: #737480;
    --icons-hover: #b7b9cc;

    --inline-code-color: #c5c8c6;

    --theme-popup-bg: #161923;
    --theme-popup-border: #737480;
    --theme-hover: #282e40;

    --quote-bg: hsl(226, 15%, 17%);
    --quote-border: hsl(226, 15%, 22%);

    --warning-border: #ff8e00;

    --table-border-color: hsl(226, 23%, 16%);
    --table-header-bg: hsl(226, 23%, 31%);
    --table-alternate-bg: hsl(226, 23%, 14%);

    --searchbar-border-color: #aaa;
    --searchbar-bg: #aeaec6;
    --searchbar-fg: #000;
    --searchbar-shadow-color: #aaa;
    --searchresults-header-fg: #5f5f71;
    --searchresults-border-color: #5c5c68;
    --searchresults-li-bg: #242430;
    --search-mark-bg: #a2cff5;

    --color-scheme: dark;

    /* Same as `--icons` */
    --copy-button-filter: invert(51%) sepia(10%) saturate(393%)
        hue-rotate(198deg) brightness(86%) contrast(87%);
    /* Same as `--sidebar-active` */
    --copy-button-filter-hover: invert(46%) sepia(20%) saturate(1537%)
        hue-rotate(156deg) brightness(85%) contrast(90%);

    --footnote-highlight: #4079ae;

    --overlay-bg: rgba(33, 40, 48, 0.4);
}

/* styles */

.menu-bar {
    background-color: var(--soft-site-color) !important;
}

h1 {
    margin: 60px 0px;
}

/* content adjam styles */
.content {
    padding: 0 20px 50px 20px;
}
.content main {
    font-size: 18px;
}
.content p,
.content li,
.content ol,
.content ul {
    text-align: justify;
    font-size: 18px;
    line-height: 1.6;
}

/* tables */
.table-wrapper {
    margin: 50px 0px;
}

/* sidebar section margin */
ol.section {
    margin: 10px 0px;
}

/* Blockquote tag styles */

blockquote {
    color: #111111 !important;
    margin: 50px 0px !important;
}

.blockquote-tag {
    padding: 5px 20px;
}

.blockquote-tag-note {
    background-color: var(--blockquote-note-bgcolor);
}

.blockquote-tag-tip {
    background-color: var(--blockquote-tip-bgcolor);
}

.blockquote-tag-important {
    background-color: var(--blockquote-important-bgcolor);
}

.blockquote-tag-warning {
    background-color: var(--blockquote-warning-bgcolor);
}

.blockquote-tag-caution {
    background-color: var(--blockquote-caution-bgcolor);
}

/* code... */
.code-title {
    background: var(--sidebar-bg, #2b303b);
    color: var(--sidebar-fg, #fff);
    font-weight: bold;
    font-size: 0.85em;
    padding: 0.3em;
    margin-top: 30px;
}

.code-title + pre {
    margin-top: 0;
    border-top-left-radius: 0;
}