docs/stylesheets/extra.css
/* Custom colors for mkdoc-material */
/* https://squidfunk.github.io/mkdocs-material/setup/changing-the-colors/#custom-colors */
/* https://github.com/squidfunk/mkdocs-material/blob/master/src/assets/stylesheets/main/_colors.scss */

:root > * {

    /* Dune Palette */
    --dune-black: #2D2D2D;
    --dune-blue-500: #1E1870;
    --dune-blue-400: #56569B;
    --dune-blue-300: #8E8ECE;
    --dune-blue-200: #E1E1F9;
    --dune-orange-500: #F4603E;
    --dune-orange-400: #F49282;
    --dune-orange-300: #FFBDB6;
    --dune-orange-200: #FFECEB;

        /* Grey */
        --grey-100: #FFF;
        --grey-200: #F2F2F2;
        --grey-300: #E6E6E6;
        --grey-400: #BFBFBF;
        --grey-500: #808080;
        --grey-600: #404040;
        --grey-700: #2D2D2D;
        --grey-800: #1A1A1A;
        --grey-900: #000000;

        /* Accents */
        
        --success-green: #006400;
        --light-green: #5DD170;
        --danger-red: #d93025;
        --bright-red: #F43E3E;
        --forest-green: #2F7855;
        --soft-green: #DEF3D6;
        --tangerine-orange: #FF881B;
        --soft-orange: #FAE6DC;
        --sky-blue: #31C7ED;
        --soft-blue: #DCF4FA;
        --link-blue: #0645AD;

    /* Default color shades */
    --md-default-fg-color:               hsla(0, 0%, 0%, 0.87);
    --md-default-fg-color--light:        hsla(0, 0%, 0%, 0.54);
    --md-default-fg-color--lighter:      hsla(0, 0%, 0%, 0.32);
    --md-default-fg-color--lightest:     hsla(0, 0%, 0%, 0.07);
    --md-default-bg-color:               hsla(0, 0%, 100%, 1);
    --md-default-bg-color--light:        hsla(0, 0%, 100%, 0.7);
    --md-default-bg-color--lighter:      hsla(0, 0%, 100%, 0.3);
    --md-default-bg-color--lightest:     hsla(0, 0%, 100%, 0.12);

    /* Primary color shades */
    --md-primary-fg-color:               var(--dune-orange-300);
    --md-primary-fg-color--light:        var(--dune-orange-200);
    --md-primary-fg-color--dark:         var(--dune-orange-400);
    --md-primary-bg-color:               var(--dune-blue-500);
    --md-primary-bg-color--light:        var(--dune-blue-400);

    /* Accent color shades */
    --md-accent-fg-color:                var(--dune-orange-500);
    --md-accent-fg-color--transparent:   hsla(#{hex2hsl($clr-indigo-a200)}, 0.1);
    --md-accent-bg-color:                hsla(0, 0%, 100%, 1);
    --md-accent-bg-color--light:         hsla(0, 0%, 100%, 0.7);

    /* Code color shades */
    --md-code-fg-color:                  hsla(200, 18%, 26%, 1);
    --md-code-bg-color:                  hsla(0, 0%, 96%, 1);

    /* Code highlighting color shades */
    --md-code-hl-color:                  hsla(#{hex2hsl($clr-yellow-a200)}, 0.5);
    --md-code-hl-number-color:           hsla(0, 67%, 50%, 1);
    --md-code-hl-special-color:          hsla(340, 83%, 47%, 1);
    --md-code-hl-function-color:         hsla(291, 45%, 50%, 1);
    --md-code-hl-constant-color:         hsla(250, 63%, 60%, 1);
    --md-code-hl-keyword-color:          hsla(219, 54%, 51%, 1);
    --md-code-hl-string-color:           hsla(150, 63%, 30%, 1);
    --md-code-hl-name-color:             var(--md-code-fg-color);
    --md-code-hl-operator-color:         var(--md-default-fg-color--light);
    --md-code-hl-punctuation-color:      var(--md-default-fg-color--light);
    --md-code-hl-comment-color:          var(--md-default-fg-color--light);
    --md-code-hl-generic-color:          var(--md-default-fg-color--light);
    --md-code-hl-variable-color:         var(--md-default-fg-color--light);

    /* Typeset color shades */
    --md-typeset-color:                  var(--md-default-fg-color);
  
    /* Typeset `a` color shades */
    --md-typeset-a-color:                var(--dune-blue-500);
  
    /* Typeset `mark` color shades */
    --md-typeset-mark-color:             hsla(#{hex2hsl($clr-yellow-a200)}, 0.5);
  
    /* Typeset `del` and `ins` color shades */
    --md-typeset-del-color:              hsla(6, 90%, 60%, 0.15);
    --md-typeset-ins-color:              hsla(150, 90%, 44%, 0.15);
  
    /* Typeset `kbd` color shades */
    --md-typeset-kbd-color:              hsla(0, 0%, 98%, 1);
    --md-typeset-kbd-accent-color:       hsla(0, 100%, 100%, 1);
    --md-typeset-kbd-border-color:       hsla(0, 0%, 72%, 1);
  
    /* Typeset `table` color shades */
    --md-typeset-table-color:            hsla(0, 0%, 0%, 0.12);
  
    /* Admonition color shades */
    --md-admonition-fg-color:            var(--md-default-fg-color);
    --md-admonition-bg-color:            var(--md-default-bg-color);
  
    /* Footer color shades */
    --md-footer-fg-color:                var(--dune-blue-500);
    --md-footer-fg-color--light:         var(--dune-blue-400);
    --md-footer-fg-color--lighter:       var(--dune-blue-300);
    --md-footer-bg-color:                var(--dune-orange-200);
    --md-footer-bg-color--dark:          var(--dune-orange-200);
  
    /* Shadow depth 1 */
    --md-shadow-z1:
      0 #{px2rem(4px)} #{px2rem(10px)} hsla(0, 0%, 0%, 0.05),
      0 0              #{px2rem(1px)}  hsla(0, 0%, 0%, 0.1);
  
    /* Shadow depth 2 */
    --md-shadow-z2:
      0 #{px2rem(4px)} #{px2rem(10px)} hsla(0, 0%, 0%, 0.1),
      0 0              #{px2rem(1px)}  hsla(0, 0%, 0%, 0.25);
  
    /* Shadow depth 3 */
    --md-shadow-z3:
      0 #{px2rem(4px)} #{px2rem(10px)} hsla(0, 0%, 0%, 0.2),
      0 0              #{px2rem(1px)}  hsla(0, 0%, 0%, 0.35);
}

@font-face {
  font-family: "IBM Plex Serif";
  src: "https://fonts.googleapis.com/css?family=IBM+Plex+Serif";
}

h1, h2, h3, h4, h5, h6{
    font-family: "IBM Plex Serif";
}

/* Custom CSS selectors */

/* change the color of links with <p> components to link-blue */
.md-typeset a {
    color: var(--link-blue);
}

.md-header__title{
    font-weight: 600;
}

.md-tabs__link{
    font-weight: 500;
}

.md-header--shadow{
    box-shadow: none;
}

.md-tabs__link--active {
    text-decoration: underline;
    text-decoration-color: var(--md-accent-fg-color);
    text-decoration-thickness: 0.125rem;
    text-underline-offset: 0.125rem;
}

.md-typeset h1 {
    color: var(--dune-blue-500);
    font-size: 2rem;
    font-weight: 700;
}

.md-typeset h2 {
    color: var(--dune-blue-500);
    font-size: 1.5rem;
    font-weight: 700;
}

.md-typeset h3 {
    color: var(--dune-blue-500);
    font-size: 1.25rem;
    font-weight: 700;
}

.md-typeset h4 {
    font-size: 1rem;
    font-weight: 700;
}

/*Dark blue bckgrnd w/radius */
.fk-btn-1 {
    background-color: var(--dune-blue-500);
    border-color: var(--dune-blue-500);
    color: var(--grey-100);
    padding: 4px 14px;
    border-radius: 5px;
    white-space: nowrap;
}

/*Light blue bckgrnd w/o radius */
.fk-btn-2 {
    background-color: var(--dune-blue-200);
    border-color: var(--dune-blue-200);
    color: var(--dune-blue-500);
    padding: 4px 16px;
    white-space: nowrap;
}

/*Light blue bckgrnd w/radius */
.fk-btn-3 {
    background-color: var(--dune-blue-200);
    border-color: var(--dune-blue-200);
    color: var(--dune-blue-500);
    padding: 4px 16px;
    border-radius: 5px;
    white-space: nowrap;
}

/* Dark blue bckgrnd, w/o radius */
.fk-btn-4 {
    background-color: var(--dune-blue-500);
    border-color: var(--dune-blue-500);
    color: var(--grey-100);
    padding: 4px 16px;
    white-space: nowrap;
}

/* Button inside Query Window */
.fk-btn-5 {
    background-color: var(--grey-800);
    border-color: var(--grey-800);
    color: var(--grey-100);
    padding: 4px 16px;
    white-space: nowrap;
}


/* Admonitions */

    /* notes */
    .md-typeset :is(.admonition,details):is(.note) {
        border-color: var(--sky-blue);
    }
    .md-typeset :is(.note)>:is(.admonition-title,summary):before {
    background-color: var(--sky-blue);
    }
    .md-typeset :is(.note)>:is(.admonition-title,summary) {
        background-color: rgba(49, 199, 237, .1); /* 10% opacity */
    }

    /* custom notes */
    .md-typeset :is(.admonition,details) {
        border-color: var(--sky-blue);
    }
    .md-typeset :is(.admonition-title,summary):before {
    background-color: var(--sky-blue);
    }
    .md-typeset :is(.admonition-title,summary)  {
        background-color: rgba(49, 199, 237, .1); /* 10% opacity */
    }

    /* warning */
    .md-typeset :is(.admonition,details):is(.warning,.caution,.attention) {
        border-color: var(--bright-red);
    }
    .md-typeset :is(.warning,.caution,.attention)>:is(.admonition-title,summary):before {
    background-color: var(--bright-red);
    }
    .md-typeset :is(.warning,.caution,.attention)>:is(.admonition-title,summary) {
        background-color: rgba(244, 62, 62, .1); /* 10% opacity */
    }
    
    /* example */
    .md-typeset :is(.admonition,details):is(.example) {
        border-color: var(--tangerine-orange);
    }
    .md-typeset :is(.example)>:is(.admonition-title,summary):before {
        background-color: var(--tangerine-orange);
    }
    .md-typeset :is(.example)>:is(.admonition-title,summary) {
        background-color: rgba(255, 136, 27, .1);
    }

/* Horizontally Centers Images */
.hoz-cent {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Vertically Centering; for inline text/images */

.vrt-cent {
    vertical-align: middle !important;
}

.md-typeset .grid.cards>:-webkit-any(ul,ol)>li, .md-typeset .grid>.card {
    border: 0.05rem solid var(--dune-orange-300);
    border-radius: 0.1rem;
    display: block;
    margin: 0;
    padding: 0.8rem;
    -webkit-transition: border .25s,box-shadow .25s;
    transition: border .25s,box-shadow .25s;
    background-color: var(--dune-orange-200);
}

.md-typeset__table {
    width: 100%;
  }
  
.md-typeset__table table:not([class]) {
display: table
}

.md-typeset th, .md-typeset td {
    width: 20%;
    word-wrap: break-word;
}