```python
%load_ext notexbook
```

```python
%texify -v
```

<style type="text/css">
    /*
Author: Valerio Maggio < @leriomaggio >
Code: https://github.com/leriomaggio/notexbook-jupyter-theme
License: Apache License 2.0
*/

/*
Author: Valerio Maggio < @leriomaggio >
Code: https://github.com/leriomaggio/notexbook-jupyter-theme
License: Apache License 2.0

 ======================================================
                         FONTS

    FONT WEIGHT MAP:
    ----------------
    100: Ultra Light
    200: Thin
    300: Light
    400: Regular (normal)
    500: Medium
    600: Semi-bold
    700: Bold
    800: Heavy
    900: Black

    Font faces:
        - ====================================|=======================
        -              Scope                  | Font Family Name
        - ====================================| ======================
        - Markdown Display (Computer Modern)    (CMU Serif)
        - Markdown Display monospace            (CMU Typewriter Text)
        - Markdown Edit    monospace            (Hack)
        - Source Code      monospace            (Fira Code)
        - ====================================| =======================

 ======================================================  */

/* Roboto Slab */
@import url("https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100;200;300;400;500;600;700;800;900&display=swap");
/*md-display-computer-modern --> CMU Serif*/
@import url("https://fonts.cdnfonts.com/css/cmu-serif?styles=30038,30039,30037,30036");
/*md-display-monospace --> CMU Typewriter Text*/
@import url("https://fonts.cdnfonts.com/css/cmu-typewriter-text?styles=24833,24829,24830,24831,24832,24834");
/*code-monospace --> Fira Code*/
@import url("https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500&display=swap");
/*md-edit-monospace --> Hack*/
@import url("https://fonts.cdnfonts.com/css/hack?styles=20708,20707,20705,20706");
/*
Author: Valerio Maggio < @leriomaggio >
Code: https://github.com/leriomaggio/notexbook-jupyter-theme
License: Apache License 2.0

======================================================

    ---------------------------------
    Code Mirror - Code Cell Highlight
    ---------------------------------

    Define the Style for Code **and** Markdown editors (Themes)
    Theme files are all located in the "themes" folder, and the
    different styles for the Code and Markdown editors are
    distinguished by a common prefix in the file names:

        --> Code editors Themes: "themes/code_*"
        --> Markdown Editor Themes: "themes/md_*"

    Styles can be imported as separate CSS modules.

    Current stylesheet (editor.css) defines the CSS rules
    for notebook tags and classes. These rules are
    all based to colors defined in external Theme files.

    This would ease the definition of other custom CSS Editor themes
*/

/* Code Editor theme */

    /*
Author: Valerio Maggio < @leriomaggio >
Code: https://github.com/leriomaggio/notexbook-jupyter-theme
License: Apache License 2.0

 ======================================================

The color palette is inspired by Light
 Material Design theme
Repo: https://github.com/JonaDuran/Material-Light-Theme/
*/

:root {
    /* Color Palette */
    --ml-white: #ffffff;
    --ml-light-white: #FAFAFA;
    --ml-black: #24292E;
    --ml-dark-blue : #01579B11;
    --ml-dark-blue-2: #01579B22;
    --ml-blue: #1565C0;
    --ml-green: #2E7D32;
    --ml-yellow: #A8601A;
    --ml-cyan: #00838f;
    --ml-magenta: #9C00B0;
    --ml-red: #C0392B;
    --ml-grey: #9E9E9E;
    --ml-light-blue: #78909c;

    /* Editor Theme */
    --code-background-color: var(--ml-light-white);
    --gutter-background: var(--ml-light-white);
    --selection-background-color: var(--ml-dark-blue-2);
    --line-numbers: var(--ml-grey);
    --cursor: var(--ml-black);
    --bracket: var(--ml-black);
    --matching-bracket: var(--ml-blue);
    --code-text-color: var(--ml-black);
    --keywords: var(--ml-magenta);
    --types: var(--ml-magenta);
    --variables: var(--code-text-color);
    --variables2: var(--ml-green);
    --def: var(--ml-blue);
    --property: var(--ml-blue);
    --meta: var(--ml-light-blue);
    --builtin: var(--ml-blue);
    --attribute: var(--ml-blue);
    --strings: var(--ml-yellow);
    --strings2: var(--ml-grey);
    --comments: var(--ml-grey);
    --operator: var(--ml-magenta);
    --numbers: var(--ml-red);
    /* Dataframe */
    --dataframe: var(--code-text-color);
    --df-bg: var(--ml-light-white);
    --df-thead: var(--ml-blue);
    --df-thead-border: var(--ml-black);
    --df-tr-hover: var(--selection-background-color);
    --df-border: var(--ml-white);
    --df-border-right: var(--ml-grey);
    --df-th-bg: var(--ml-white);
    /*ANSI Colours*/
    --ansi-red: var(--ml-red);
    --ansi-green: var(--ml-green);
    --ansi-green-intense: var(--ml-grey);
    --ansi-cyan: var(--ml-cyan);
    --ansi-blue: var(--ml-blue);
}

/* Markdown Editor theme */

    /*
Author: Valerio Maggio < @leriomaggio >
Code: https://github.com/leriomaggio/notexbook-jupyter-theme
License: Apache License 2.0

 ======================================================

    Custom Theme for Markdown Editor
    based on Material Clear Theme.

 */

:root {
    /* Color Palette */
    --md-ml-red: #C0392B;
    --md-ml-yellow: #A8601A;
    --md-ml-black: #24292E;
    --md-ml-grey: #9E9E9E;
    --md-ml-blue: #1565C0;
    --md-ml-dark-blue: #01579B;
    --md-ml-light-blue: #78909c;

    /*  Editor Theme  */
    --editor-text: var(--md-ml-black);
    --header: var(--md-ml-dark-blue);
    --quote: var(--md-ml-grey);
    --link: var(--md-ml-blue);
    --attribute: var(--md-ml-red);
    --tag: var(--md-ml-yellow);
    --string: var(--md-ml-yellow);
    --delimiter: var(--md-ml-black);
    --monospace: var(--md-ml-light-blue);
}

/*
Author: Valerio Maggio < @leriomaggio >
Code: https://github.com/leriomaggio/notexbook-jupyter-theme
License: Apache License 2.0
*/

/*
    =================
    Code Editor Theme
    =================
*/
div.output_error pre,
div.output_result pre,
div.output_stream pre {
    color: var(--code-text-color) !important;
}

.cm-s-ipython.CodeMirror,
.cm-s-jupyter.CodeMirror {
    background: var(--code-background-color);
    color: var(--code-text-color);
}

.cm-s-ipython div.CodeMirror-selected,
.cm-s-jupyter div.CodeMirror-selected {
    cursor: pointer;
    background: var(--selection-background-color);
}

.cm-s-ipython .CodeMirror-gutters,
.cm-s-jupyter .CodeMirror-gutters {
    background: var(--gutter-background);
    border-right: 0;
}

.cm-s-ipython .CodeMirror-linenumber,
.cm-s-jupyter .CodeMirror-linenumber {
    color: var(--line-numbers);
}

.cm-s-ipython .CodeMirror-cursor,
.cm-s-jupyter .CodeMirror-cursor {
    border-left: 1px solid var(--cursor) !important;
}

.cm-s-ipython span.cm-bracket,
.cm-s-jupyter span.cm-bracket {
    /*color: #828282;*/
    color: var(--bracket);
}

span.CodeMirror-matchingbracket {
    text-decoration: underline !important;
    text-decoration-color: var(--matching-bracket) !important;
    color: var(--matching-bracket) !important;
}

.cm-s-ipython span.cm-keyword,
.cm-s-jupyter span.cm-keyword {
    color: var(--keywords);
    font-weight: 400;
}

.cm-s-ipython span.cm-variable,
.cm-s-jupyter span.cm-variable {
    color: var(--variables);
}

.cm-s-ipython span.cm-variable-2,
.cm-s-jupyter span.cm-variable-2 {
    color: var(--variables2);
}

.cm-s-ipython span.cm-def,
.cm-s-jupyter span.cm-def {
    color: var(--def);
}

.cm-s-ipython span.cm-property,
.cm-s-jupyter span.cm-property {
    color: var(--property);
}

.cm-s-ipython span.cm-meta,
.cm-s-jupyter span.cm-meta {
    color: var(--meta);
}

.cm-s-ipython span.cm-attribute,
.cm-s-jupyter span.cm-attribute {
    color: var(--attribute);
}

.cm-s-ipython span.cm-builtin,
.cm-s-jupyter span.cm-builtin {
    color: var(--builtin)
}

.cm-s-ipython span.cm-string,
.cm-s-jupyter span.cm-string {
    color: var(--strings);
}

.cm-s-ipython span.cm-string-2,
.cm-s-jupyter span.cm-string-2 {
    color: var(--strings2);
}

.cm-s-ipython span.cm-comment,
.cm-s-jupyter span.cm-comment {
    color: var(--comments);
    font-style: normal;
}

.cm-s-ipython span.cm-operator,
.cm-s-jupyter span.cm-operator {
    color: var(--operator);
    font-weight: 400;
}

.cm-s-ipython span.cm-number,
.cm-s-jupyter span.cm-number {
    color: var(--numbers);
}

.cm-s-ipython span.cm-type,
.cm-s-jupyter span.cm-type {
    color: var(--types);
}

/*
==============================
Markdown MathJax Customisation
==============================
*/

/*This customisation only applies to Math Display showing the font bigger than normal*/
.MathJax_Display {
    font-size: 2rem;
}

.MathJax_Display .mjx-char {
    font-family: var(--txbk-content-font-family) !important;
}

.MathJax_Display, .MathJax span {
    color: var(--code-text-color);
}

a .MathJax span {
    color: var(--link-color);
}

a:hover .MathJax span {
    text-decoration: underline;
    color: var(--link-color);
}

.MathJax span[style*="STIXMathJax_Normal"],
.MathJax span[style*="STIXMathJax_Normal-italic"],
.MathJax span[style*="STIXMathJax_Main"],
.MathJax span[style*="STIXMathJax_Variants"] {
    font-family: var(--txbk-content-font-family) !important;
}

/*
    Pygments CSS (replacement) for HTML export
    ===========================================

    Original Pygments CSS rewrite thanks to @rubik
    https://github.com/jupyter/nbconvert/issues/447#issuecomment-270766965
*/

.highlight .hll, div.highlight > pre {
    background-color: var(--code-background-color);
    color: var(--code-text-color);
    font-family: var(--txbk-code-font-family);
    font-size: var(--txbk-code-font-size);
    line-height: var(--txbk-code-line-height);
}

/* Comment */
.highlight .c {
    color: var(--comments);
}

/* Error */
.highlight .err {
    color: #960050;
    background-color: #1e0010;
}

/* Keyword */
.highlight .k {
    color: var(--keywords);
    font-weight: 400;
}

/* Literal */
.highlight .l {
    color: var(--numbers);
}

/* Name */
.highlight .n {
    color: var(--code-text-color);
}

/* HACK:
fix Interpreter mismatch pygments vs codemirror
mpl.rcParams <- rcParams will be highlighted as property (as in codemirror)
*/
.highlight .o + .n {
    color: var(--property);
}

/* Operator */
.highlight .o {
    color: var(--code-text-color);
    font-weight: 400;
}

/* Punctuation */
.highlight .p {
    color: var(--code-text-color);
}

/* Comment.Multiline */
.highlight .cm {
    color: var(--comments);
    font-style: normal;
}

/* Comment.Preproc */
.highlight .cp {
    color: var(--meta);
    font-style: normal;
}

.highlight .cpf {
    color: var(--meta);
    font-style: normal;
}

/* Comment.Single */
.highlight .c1 {
    color: var(--comments);
    font-style: normal;
}

/* Comment.Special */
.highlight .cs {
    color: var(--comments);
    font-style: normal;
}

/* @ Generic.Deleted */
.highlight .gd {
    color: var(--red);
}

/* Generic.Emph */
.highlight .ge {
    font-style: italic
}

/* @ Generic.Inserted */
.highlight .gi {
    color: #a6e22e
}

/* Generic.Strong */
.highlight .gs {
    font-weight: 500 !important;
}

/* @ Generic.Subheading */
.highlight .gu {
    color: #75715e
}

/* */

/* Keyword.Constant */
.highlight .kc {
    color: var(--keywords);
    font-weight: 400;
}

/* Keyword.Declaration */
.highlight .kd {
    color: var(--keywords);
    font-weight: 400;
}

/* Keyword.Namespace */
.highlight .kn {
    color: var(--keywords);
    font-weight: 400;
}

/* Keyword.Pseudo */
.highlight .kp {
    color: var(--keywords);
    font-weight: 400;
}

/* Keyword.Reserved */
.highlight .kr {
    color: var(--keywords);
    font-weight: 400;
}

/* Keyword.Type */
.highlight .kt {
    color: var(--types);
    font-weight: 400;
}

/* Literal.Date */
.highlight .ld {
    color: var(--numbers)
}

/* Literal.Number */
.highlight .m {
    color: var(--numbers);
}

/* Literal.String */
.highlight .s {
    color: var(--string);
}

/* Name.Attribute */
.highlight .na {
    color: var(--property);
}

/* Name.Builtin */
.highlight .nb {
    color: var(--builtin);
}

/* Name.Class */
.highlight .nc {
    color: var(--def);
    font-weight: normal !important;
}

/* @ Name.Constant */
.highlight .no {
    color: var(--variables2);
}

/* Name.Decorator */
.highlight .nd {
    color: var(--builtin);
}

/* @ Name.Entity */
.highlight .ni {
    color: var(--variables2);
}

/* Name.Exception */
.highlight .ne {
    color: var(--code-text-color);
    font-weight: normal !important;
}

/* Name.Function */
.highlight .nf, .highlight .fm {
    color: var(--def);
}

/* @ Name.Label */
.highlight .nl {
    color: var(--comments);
}

/* Name.Namespace */
.highlight .nn {
    color: var(--code-text-color);
    font-weight: normal !important;
}

/* @ Name.Other */
.highlight .nx {
    color: var(--code-text-color);
}

/* @ Name.Property */
.highlight .py {
    color: var(--property);
}

/* @ Name.Tag */
.highlight .nt {
    color: var(--tag);
}

/* @ Name.Variable */
.highlight .nv {
    color:  var(--variables);
}

/* Operator.Word */
.highlight .ow {
    color: var(--operator);
    font-weight: 400;
}

/* @ Text.Whitespace */
.highlight .w {
    color: var(--code-background-color);

}

/* Literal.Number.Bin */
/* Literal.Number.Float */
/* Literal.Number.Hex */
/* Literal.Number.Integer */
/* Literal.Number.Oct */
.highlight .mb,
.highlight .mf,
.highlight .mh,
.highlight .mi,
.highlight .mo {
    color: var(--numbers);
}

/* Literal.String.Backtick */
.highlight .sb {
    color: var(--strings2);
}

.highlight .sc,  /* Literal.String.Char */
.highlight .sd,  /* Literal.String.Doc */
.highlight .s2,  /* Literal.String.Double */
.highlight .sh,  /* Literal.String.Heredoc */
.highlight .si,  /* Literal.String.Interpol */
.highlight .sx,  /* Literal.String.Other */
.highlight .sr,  /* Literal.String.Regex */
.highlight .s1,  /* Literal.String.Single */
.highlight .ss  /* Literal.String.Symbol */
{
    color: var(--strings);
    font-style: normal;
}

/* Literal.String.Escape */
.highlight .se {
    color: var(--red);
}

/* Name.Builtin.Pseudo */
.highlight .bp {
    color: var(--variables2);
}

/* Name.Variable.Class */
.highlight .vc {
    color: var(--variables);
}

/* Name.Variable.Global */
.highlight .vg {
    color: var(--variables2);
}

/* Name.Variable.Instance */
.highlight .vi {
    color: var(--code-text-color);
}

/* Literal.Number.Integer.Long */
.highlight .il {
    color: var(--numbers);
}

/*
    Dataframe Colors
    ----------------
    Adapt Dataframe table to comply with the theme
*/

table.dataframe {
    color: var(--dataframe) !important;
}

table.dataframe tbody tr th {
    background-color: var(--df-bg);
}

table.dataframe tbody tr:hover {
    background-color: var(--df-tr-hover);
}

table.dataframe td, table.dataframe th {
    border: 1px solid var(--df-border);
}

table.dataframe > th:not(:empty) {
    background-color: var(--df-th-bg);
}

table.dataframe tr:nth-child(2) th:empty,
table.dataframe tr:nth-child(2) th:empty {
    border-right: 1px dotted var(--df-border-right);
}

table.dataframe thead tr th:not(:empty) {
    color: var(--df-thead);
    border-bottom:  1px solid var(--df-thead-border);
}

/* =======================================
              ANSI colors
    (stdout / stderr color customisation)
   =======================================
*/

span.ansi-green-fg {
    color: var(--ansi-green) !important;
}

span.ansi-green-intense-fg{
    color: var(--ansi-green-intense) !important;
}

span.ansi-red-fg {
    color: var(--ansi-red) !important;
}

span.ansi-cyan-fg {
    color: var(--ansi-cyan) !important;
}

span.ansi-blue-fg {
    color: var(--ansi-blue) !important;
}

span.ansi-bold {
    font-weight: 500 !important;
}

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

/*
    ======================
    Markdown Editor Theme
    ======================
*/

div.text_cell.unrendered pre {
    color: var(--editor-text) !important;
}

span.cm-header {
    color: var(--header) !important;
    font-weight: 500;
}

span.cm-quote {
    color: var(--quote) !important;
}

span.cm-string.cm-url {
    color: var(--link) !important;
}

span.cm-string {
   color: var(--strings) !important;
}
/* Sometimes useful in Mono code Highlighting*/
span.cm-string-2 {
    color: var(--strings2) !important;
}

span.cm-link {
    color: var(--link) !important;
}

span.cm-attribute {
    color: var(--attribute) !important;
}

span.cm-tag {
    color: var(--tag) !important;
}

span.cm-delimiter {
    color: var(--delimiter) !important;
}

span.cm-comment {
    color: var(--comments) !important;
}
/*
Author: Valerio Maggio < @leriomaggio >
Code: https://github.com/leriomaggio/notexbook-jupyter-theme
License: Apache License 2.0

   ---------------------------------------
    CODE CELL OUTPUT (DISPLAY MODE)

    Pandas DataFrame - as HTML Table
        (includes also HTML tables)

   Note: This stylesheet does NOT include
   any color nor background color for tables,
   as those are assumed to be part of the
   Coding colourisation theme.

   ---------------------------------------
*/
table.dataframe {
    border-collapse: collapse;
    border: none;
    margin-left: 20px !important;
    font-size: var(--txbk-code-font-size) !important;
}

table.dataframe thead {
    padding-bottom: 10px;
}

table.dataframe thead tr {
    font-style: normal;
    padding: 5px 10px;
    border-bottom:  1px solid;
    vertical-align: middle;
    text-align: center;
    empty-cells: hide;
}

table.dataframe thead tr th,
table.dataframe thead tr:only-child th {
    vertical-align: middle;
    text-align: center;
}

table.dataframe tbody {
    padding-top:  5px;
}

table.dataframe tbody tr {
}

table.dataframe tbody tr th {
    text-align: left !important;
    font-style: italic;
    font-weight: normal;
    margin-right: 5px;
}

table.dataframe tbody tr td {
    padding-left: 1.0rem;
    padding-right: 1.0rem;
}

table.dataframe tr {
    border: none;
}

table.dataframe td,
table.dataframe th {
    padding-left: 0.25em;
    padding-right: 0.25em;
}

table.dataframe > th:not(:empty) {
    text-align: left;
    padding: 0 10px;
    font-style: italic
}

table.dataframe tr:nth-child(2) th:empty,
table.dataframe tr:nth-child(2) th:empty {
    border-left: none;
}

table.dataframe td {
    padding: 0.375em 1em;
}

table.dataframe thead {
	padding: 10px 0;
	font-weight: bold;
}

table.dataframe thead tr th:not(:empty) {
    text-align: left;
    font-style: normal;
    padding: 5px 10px;
}

/* Hacking Font-weight bold capped at 500 */
.rendered_html th {
    font-weight: 500 !important;
}
:root {
    /* Jupyter Lab Integration (Light Theme) */

    --jp-ui-font-family: var(--txbk-ui-font-family);
    --jp-ui-font-color1: var(--txbk-ui-color);
    --jp-ui-font-size1: var(--txbk-ui-font-size);

    --jp-content-font-color1: var(--txbk-content-mono-color);
    --jp-content-font-family: var(--txbk-content-font-family);
    --jp-content-line-height: var(--txbk-content-line-height);
    --jp-content-link-color: var(--link-color);
    --jp-content-font-size: var(--txbk-content-font-size);
    --jp-content-heading-font-weight: bold;
    --jp-content-heading-line-height: 1;

    --jp-layout-color3: #efefef;
    --jp-notebook-multiselected-color: var(--txbk-multiselect-bgcolor);

    --jp-code-font-size: var(--txbk-code-font-size);
    --jp-code-line-height: var(--txbk-ui-mono-line-height);
    --jp-code-padding: 5px;
    --jp-code-font-family-default: var(--txbk-code-font-family);
    --jp-code-font-family: var(--jp-code-font-family-default);
    --jp-code-presentation-font-size: var(--txbk-ui-mono-font-size);

    --jp-cell-prompt-font-family: var(--txbk-code-font-family);
    --jp-cell-prompt-width: 80px;

    --jp-cell-editor-border-color: transparent;

    --jp-layout-color0: var(--code-background-color);
    --jp-cell-prompt-not-active-font-color: #aba9a9;

    --jp-cell-editor-background: var(--code-background-color);
    --jp-cell-editor-active-background: var(--code-background-color);
    --jp-cell-editor-active-border-color: var(--txbk-cell-edit-border-color);

}

/* ================
    Jupyter Lab UI
   ================
*/

.jp-DirListing-item.jp-mod-running .jp-DirListing-itemIcon:before {
    color: var(--btn-danger);
}

.jp-DirListing-item.jp-mod-selected {
    background-color: var(--texbook-blue);
    color: white;
}

button.jp-RunningSessions-shutdownAll.jp-mod-styled {
    color: var(--btn-warning)
}

button.jp-RunningSessions-shutdownAll.jp-mod-styled {
    color: var(--btn-warning);
}

.jp-icon-warn0[fill] {
    fill: var(--texbook-turquoise);
}

#jp-MainLogo .jp-icon-warn0[fill] {
    /* Set default not to override logo colour */
    fill: var(--jp-warn-color0);
}

/* Change Colour only of Icons on the left-hand side toolbar */
.jp-SideBar.lm-TabBar.jp-mod-left .jp-icon3[fill] {
    fill: var(--texbook-yellow);
}

.jp-SideBar.lm-TabBar.jp-mod-left.lm-TabBar-tab.lm-mod-current .jp-icon3[fill] {
    fill: var(--texbook-orangex);
}

/*Kernel*/
div.f14jk5uf[title="Kernel Busy"] .jp-icon3[fill] {
    fill: var(--kernel-busy);
}

div.f14jk5uf[title="Kernel Idle"] .jp-icon3[fill] {
    fill: var(--kernel-idle);
}

div.f14jk5uf[title="Kernel Unknown"] .jp-icon3[fill],
div.f14jk5uf[title="Kernel Restarting"] .jp-icon3[fill] {
    fill: var(--kernel-disconnected);
}

/* body class*/

body[data-jp-theme-light="true"]:not(.jp-Notebook) {
    font-family: var(--jp-ui-font-family);
    background: var(--jp-layout-color3) !important;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.jp-Notebook {
    background-color: var(--background-color) !important;
    font-weight: 300;
    color: var(--txbk-ui-color);
    font-size: var(--txbk-ui-font-size);
}

/* -------------------------------------------------
    HTML Cells output generics
    (overriding default JupyterLab theme settings)
   -------------------------------------------------
*/

.jp-RenderedHTMLCommon :not(pre) > code {
    background-color: transparent !important;
    padding: 0 0 !important;
}

.jp-RenderedHTMLCommon pre, .jp-RenderedHTMLCommon code {
    background-color: transparent !important;
}

.jp-RenderedHTMLCommon p {
    margin-bottom: 0;
}

.jp-RenderedHTMLCommon * + p {
    margin-top: 1em;
}

/* ======================================
    MARKDOWN CELLS DISPLAY MODE
    (text_cell_render in Notebook HTML)
   ======================================
*/

.jp-Notebook .jp-MarkdownCell .jp-RenderedHTMLCommon {
    font-family: var(--txbk-content-font-family) !important;
    font-size: var(--txbk-content-font-size) !important;
    color: var(--txbk-content-color) !important;
    font-kerning: auto;
    text-align: justify !important;
    display: block;
    word-break: normal !important;
    word-wrap: break-word !important;
}

.jp-Notebook .jp-MarkdownCell .jp-RenderedHTMLCommon a {
    color: var(--link-color) !important;
}

.jp-Notebook .jp-MarkdownCell .jp-RenderedHTMLCommon h1,
.jp-Notebook .jp-MarkdownCell .jp-RenderedHTMLCommon h2,
.jp-Notebook .jp-MarkdownCell .jp-RenderedHTMLCommon h3,
.jp-Notebook .jp-MarkdownCell .jp-RenderedHTMLCommon h4,
.jp-Notebook .jp-MarkdownCell .jp-RenderedHTMLCommon h5,
.jp-Notebook .jp-MarkdownCell .jp-RenderedHTMLCommon h6 {
    font-family:  var(--txbk-content-font-family) !important;
    font-style: normal !important;
}

/*  Font-sizes for Headers
    ----------------------*/
.jp-Notebook .jp-MarkdownCell .jp-RenderedHTMLCommon h1 {
    font-size: 2.2em !important;
    text-align: center !important;
    padding-top:  3rem;
    padding-bottom: 3rem;
}

.jp-Notebook .jp-MarkdownCell .jp-RenderedHTMLCommon h2 {
    font-size: 1.9em !important;
}

.jp-Notebook .jp-MarkdownCell .jp-RenderedHTMLCommon h3 {
    font-size: 1.7em !important;
}

.jp-Notebook .jp-MarkdownCell .jp-RenderedHTMLCommon h4 {
    font-size: 1.5em !important;
}

.jp-Notebook .jp-MarkdownCell .jp-RenderedHTMLCommon h5 {
    font-size: 1.3em !important;
    border-bottom: 1px solid rgb(204, 204, 204);
}

.jp-Notebook .jp-MarkdownCell .jp-RenderedHTMLCommon h6 {
    font-size: 1.1em !important;
}

.jp-Notebook .jp-MarkdownCell .jp-RenderedHTMLCommon p,
.jp-Notebook .jp-MarkdownCell .jp-RenderedHTMLCommon pre,
.jp-Notebook .jp-MarkdownCell .jp-RenderedHTMLCommon code {
    font-size: 1em !important;
}

.jp-Notebook .jp-MarkdownCell .jp-RenderedHTMLCommon pre,
.jp-Notebook .jp-MarkdownCell .jp-RenderedHTMLCommon code {
    color: var(--txbk-content-mono-color);
    font-family: var(--txbk-content-mono-font-family);
}

/* Monospace Code - no code syntax highlight*/
.jp-Notebook .jp-MarkdownCell .jp-RenderedHTMLCommon pre {
    /* hack: using code background colour here to allow for compatibility */
    background-color: var(--code-background-color) !important;
    font-family: var(--txbk-content-mono-font-family);
}

.jp-Notebook .jp-MarkdownCell .jp-RenderedHTMLCommon p {
    line-height: var(--txbk-content-line-height);
    text-align: justify !important;
}

/* Monospace inline rendered markdown */
.jp-Notebook .jp-MarkdownCell .jp-RenderedHTMLCommon p code {
    /*Re-defining variables for Mono using Code Editor's settings*/
    font-size: var(--txbk-content-mono-font-size);
    color: var(--txbk-content-mono-color);
    font-family: var(--txbk-content-mono-font-family);
}

.jp-Notebook .jp-MarkdownCell .jp-RenderedHTMLCommon p strong code {
    font-weight: bold !important;
    color: var(--txbk-content-mono-color);
}

.jp-Notebook .jp-MarkdownCell .jp-RenderedHTMLCommon p em code {
    font-style: italic !important;
    color: var(--txbk-content-mono-color);
}

.jp-Notebook .jp-MarkdownCell .jp-RenderedHTMLCommon pre code {
    padding: 1rem 1.5rem;
    display: block;
    color: var(--txbk-content-mono-color);
    font-family: var(--txbk-content-mono-font-family);
    word-wrap: break-word;
    word-break: normal;
    /* Important Override rules */
    background-color: var(--txbk-content-mono-bgcolor) !important;
    font-size: var(--txbk-content-mono-font-size) !important;
}

.jp-Notebook .jp-MarkdownCell .jp-RenderedHTMLCommon blockquote {
    --txbk-ui-color: #6f6f6f;
    margin: .2rem .2rem;
    padding: .3rem .5rem;
    border-left: .3rem solid #a7a7a7;
    background-color: var(--txbk-content-mono-bgcolor);
}

.jp-Notebook .jp-MarkdownCell .jp-RenderedHTMLCommon blockquote:not(:first-child) {
    margin: 2rem .2rem;
}

.jp-Notebook .jp-MarkdownCell .jp-RenderedHTMLCommon blockquote p {
    padding: .2rem 1.5rem;
}

.jp-Notebook .jp-MarkdownCell .jp-RenderedHTMLCommon table {
    font-size: var(--txbk-content-font-size) !important;
    border-collapse: collapse;
    border-spacing: 0;
    overflow: auto;
    break-inside: auto;
    margin-top: 25px;
    margin-bottom: 15px;
}

.jp-Notebook .jp-MarkdownCell .jp-RenderedHTMLCommon table thead {
    display: table-header-group;
    vertical-align: middle;
    border-bottom: none;
}

.jp-Notebook .jp-MarkdownCell .jp-RenderedHTMLCommon table thead tr,
.jp-Notebook .jp-MarkdownCell .jp-RenderedHTMLCommon table thead tr td,
.jp-Notebook .jp-MarkdownCell .jp-RenderedHTMLCommon table tbody tr,
.jp-Notebook .jp-MarkdownCell .jp-RenderedHTMLCommon table tbody tr th,
.jp-Notebook .jp-MarkdownCell .jp-RenderedHTMLCommon table tbody tr td {
    break-inside: avoid;
    break-after: auto;
    vertical-align: middle;
    padding: 5px 5px;
}

.jp-Notebook .jp-MarkdownCell .jp-RenderedHTMLCommon table tr th {
    border-bottom-width: 0;
}

.jp-Notebook .jp-MarkdownCell .jp-RenderedHTMLCommon ul,
.jp-Notebook .jp-MarkdownCell .jp-RenderedHTMLCommon ol {
    position: relative;
    display: block;
    margin-bottom: 0 !important;
    line-height: var(--txbk-content-line-height);
}

.jp-Notebook .jp-MarkdownCell .jp-RenderedHTMLCommon ul {
    list-style-type: disc;
}

.jp-Notebook .jp-MarkdownCell .jp-RenderedHTMLCommon ul li,
.jp-Notebook .jp-MarkdownCell .jp-RenderedHTMLCommon ol li {
    padding: .25em;
}

.jp-Notebook .jp-MarkdownCell .jp-RenderedHTMLCommon ul ul {
    list-style-type: circle !important;
}

.jp-Notebook .jp-MarkdownCell .jp-RenderedHTMLCommon ul li > ul li a code,
.jp-Notebook .jp-MarkdownCell .jp-RenderedHTMLCommon ul li > ol li a code,
.jp-Notebook .jp-MarkdownCell .jp-RenderedHTMLCommon ol li > ul li a code,
.jp-Notebook .jp-MarkdownCell .jp-RenderedHTMLCommon ol li > ol li a code {
    color: var(--link-color);
}

.jp-Notebook .jp-MarkdownCell .jp-RenderedHTMLCommon ul ul ul {
    list-style-type: square !important;
}

.jp-Notebook .jp-MarkdownCell .jp-RenderedHTMLCommon p > img:only-child,
.jp-Notebook .jp-MarkdownCell .jp-RenderedHTMLCommon img:only-child {
    display: block;
    margin: auto;
    max-width: 40%;
}

.jp-Notebook .jp-MarkdownCell .jp-RenderedHTMLCommon img {
    max-width: 40%;
}

/* Img MaxW classes */
.jp-Notebook .jp-MarkdownCell .jp-RenderedHTMLCommon img.maxw10,
.jp-Notebook .jp-MarkdownCell .jp-RenderedHTMLCommon p > img.maxw10 {
    max-width: 10% !important;
}

.jp-Notebook .jp-MarkdownCell .jp-RenderedHTMLCommon img.maxw15,
.jp-Notebook .jp-MarkdownCell .jp-RenderedHTMLCommon p > img.maxw15 {
    max-width: 15% !important;
}

.jp-Notebook .jp-MarkdownCell .jp-RenderedHTMLCommon img.maxw20,
.jp-Notebook .jp-MarkdownCell .jp-RenderedHTMLCommon p > img.maxw20 {
    max-width: 20% !important;
}

.jp-Notebook .jp-MarkdownCell .jp-RenderedHTMLCommon img.maxw25,
.jp-Notebook .jp-MarkdownCell .jp-RenderedHTMLCommon p > img.maxw25 {
    max-width: 25% !important;
}

.jp-Notebook .jp-MarkdownCell .jp-RenderedHTMLCommon img.maxw30,
.jp-Notebook .jp-MarkdownCell .jp-RenderedHTMLCommon p > img.maxw30 {
    max-width: 30% !important;
}

.jp-Notebook .jp-MarkdownCell .jp-RenderedHTMLCommon img.maxw35,
.jp-Notebook .jp-MarkdownCell .jp-RenderedHTMLCommon p > img.maxw35 {
    max-width: 35% !important;
}

.jp-Notebook .jp-MarkdownCell .jp-RenderedHTMLCommon img.maxw40,
.jp-Notebook .jp-MarkdownCell .jp-RenderedHTMLCommon p > img.maxw40 {
    max-width: 40% !important;
}

.jp-Notebook .jp-MarkdownCell .jp-RenderedHTMLCommon img.maxw45,
.jp-Notebook .jp-MarkdownCell .jp-RenderedHTMLCommon p > img.maxw45 {
    max-width: 45% !important;
}

.jp-Notebook .jp-MarkdownCell .jp-RenderedHTMLCommon img.maxw50,
.jp-Notebook .jp-MarkdownCell .jp-RenderedHTMLCommon p > img.maxw50 {
    max-width: 50% !important;
}

.jp-Notebook .jp-MarkdownCell .jp-RenderedHTMLCommon img.maxw55,
.jp-Notebook .jp-MarkdownCell .jp-RenderedHTMLCommon p > img.maxw55 {
    max-width: 55% !important;
}

.jp-Notebook .jp-MarkdownCell .jp-RenderedHTMLCommon img.maxw60,
.jp-Notebook .jp-MarkdownCell .jp-RenderedHTMLCommon p > img.maxw60 {
    max-width: 60% !important;
}

.jp-Notebook .jp-MarkdownCell .jp-RenderedHTMLCommon img.maxw65,
.jp-Notebook .jp-MarkdownCell .jp-RenderedHTMLCommon p > img.maxw65 {
    max-width: 65% !important;
}

.jp-Notebook .jp-MarkdownCell .jp-RenderedHTMLCommon img.maxw70,
.jp-Notebook .jp-MarkdownCell .jp-RenderedHTMLCommon p > img.maxw70 {
    max-width: 70% !important;
}

.jp-Notebook .jp-MarkdownCell .jp-RenderedHTMLCommon img.maxw75,
.jp-Notebook .jp-MarkdownCell .jp-RenderedHTMLCommon p > img.maxw75 {
    max-width: 75% !important;
}

.jp-Notebook .jp-MarkdownCell .jp-RenderedHTMLCommon img.maxw80,
.jp-Notebook .jp-MarkdownCell .jp-RenderedHTMLCommon p > img.maxw80 {
    max-width: 80% !important;
}

.jp-Notebook .jp-MarkdownCell .jp-RenderedHTMLCommon img.maxw85,
.jp-Notebook .jp-MarkdownCell .jp-RenderedHTMLCommon p > img.maxw85 {
    max-width: 85% !important;
}

.jp-Notebook .jp-MarkdownCell .jp-RenderedHTMLCommon img.maxw90,
.jp-Notebook .jp-MarkdownCell .jp-RenderedHTMLCommon p > img.maxw90 {
    max-width: 90% !important;
}

.jp-Notebook .jp-MarkdownCell .jp-RenderedHTMLCommon img.maxw95,
.jp-Notebook .jp-MarkdownCell .jp-RenderedHTMLCommon p > img.maxw95 {
    max-width: 95% !important;
}

.jp-Notebook .jp-MarkdownCell .jp-RenderedHTMLCommon img.maxw100,
.jp-Notebook .jp-MarkdownCell .jp-RenderedHTMLCommon p > img.maxw100 {
    max-width: 100% !important;
}

/* FIX Forcing monospace code to adhere with footnotes rules!*/
.jp-Notebook .jp-MarkdownCell .jp-RenderedHTMLCommon p [id^='fn'] > code,
.jp-Notebook .jp-MarkdownCell .jp-RenderedHTMLCommon p [class^='fn'] > code {
    font-size: 1em !important;
}

/* Code Cell Render (HTML output) */
.jp-CodeCell .jp-RenderedHTMLCommon {
    color: var(--code-text-color);
}

.jp-Notebook .jp-CodeCell .jp-RenderedHTMLCommon p {
    font-family: var(--txbk-code-font-family);
    font-size: 1.4em;
    font-weight: normal;
}

.jp-Notebook .jp-CodeCell .jp-RenderedHTMLCommon .nomono {
    font-family: var(--txbk-content-font-family);
    font-size: 1em;
    margin-top: 0;
}

.jp-Notebook .jp-Cell:not(.jp-mod-dropTarget) {
    background: transparent;
    border: none;
}

/* Code Cell Editor */

.jp-InputArea-editor {
    background-color: var(--jp-cell-editor-active-background);
}

.jp-Notebook .jp-Cell .jp-InputArea-editor,
.jp-Notebook .jp-MarkdownCell .jp-MarkdownOutput {
    /* Set default LEFT border as transparent - to avoid change in paddings when selected */
    border-left: 0.2rem dotted var(--txbk-cell-border-color);
    box-shadow: none;
    border-right: none;
    border-top: none;
    border-bottom: none;
    overflow: hidden;
}

.jp-Notebook .jp-Cell .jp-Cell-inputWrapper {
    /* Set default RIGHT border as transparent - to avoid change in paddings when selected */
    border-right: 5px solid var(--txbk-cell-border-color);
}

.jp-Notebook .jp-Cell.jp-mod-active.jp-mod-selected:not(.jp-mod-multiSelected) .jp-InputArea-editor,
.jp-Notebook.jp-mod-commandMode .jp-MarkdownCell.jp-mod-active.jp-mod-selected:not(.jp-mod-multiSelected) .jp-MarkdownOutput {
    /* Force border redefinition to override default Jupyter theme rules */
    border-left: 0.2rem dotted var(--txbk-cell-selected-border-left-color);
    box-shadow: none;
    border-right: none;
    border-top: none;
    border-bottom: none;
    overflow: hidden;
}

.jp-Notebook.jp-mod-commandMode .jp-Cell.jp-mod-active.jp-mod-selected:not(.jp-mod-multiSelected) .jp-Cell-inputWrapper {
    border-right-color: var(--txbk-cell-display-border-color);
}

.jp-Notebook.jp-mod-editMode .jp-Cell.jp-mod-active.jp-mod-selected:not(.jp-mod-multiSelected) .jp-Cell-inputWrapper {
    border-right-color: var(--txbk-cell-edit-border-color);
}

/* Cell Multiple Selection */
.jp-Notebook.jp-mod-commandMode .jp-Cell.jp-mod-selected:not(.jp-mod-active),
.jp-Notebook.jp-mod-commandMode .jp-Cell.jp-mod-multiSelected {
    border: 2px dashed var(--texbook-azure);
    background: var(--txbk-multiselect-bgcolor);
    margin-top: 10px;
}

/*
    Overlay with Shadow for Code Cell Selected !
    ============================================
*/
/* Overlay limited to CodeCells */
.jp-Notebook .jp-CodeCell.jp-mod-selected {
    border: none;
    background: transparent;
    box-shadow: 0 6px 18px #aaa;
    z-index: 10;
    top: -10px;
    padding-top: 12px;
    padding-bottom: 12px;
    margin-top: 18px;
    margin-bottom: 2px;
}

.jp-Notebook .jp-CodeCell.jp-mod-active.jp-mod-selected:before {
    position: absolute;
    display: none;
    top: -1px;
    left: -1px;
    width: 0;
    height: calc(100% + 2px);
    content: '';
    background: none;
}

.jp-Notebook .jp-Cell .jp-Collapser {
    display: none !important;
}

.jp-Notebook .jp-CodeCell .jp-InputPrompt {
    color: var(--texbook-light-grey) !important;
    font-style: normal !important;
    font-size: 1em;
    opacity: 1 !important;
    font-weight: normal;
    min-width: 9.5ex;
}

.jp-OutputPrompt {
    color: transparent !important;
    min-width: 9.5ex;  /* Aligns with Input Prompt */
}

.jp-Notebook .jp-CodeCell .jp-InputPrompt bdi,
.jp-Notebook .jp-CodeCell .jp-OutputPrompt  bdi {
    line-height: 0;
    font-size:0;
    color: transparent;
    left: -10000px;
    content: "\21E2";
}

/*.jp-Notebook .jp-CodeCell.jp-mod-active.jp-mod-selected:not(.jp-mod-multiSelected) .jp-InputPrompt:before {*/
.jp-Notebook .jp-CodeCell.jp-mod-active.jp-mod-selected:not(.jp-mod-multiSelected) .jp-InputArea:before {
    display: inline-block;
    position: absolute;
    content: "\279E";
    font-size: 1.75rem;
    top: 4px;
    width: 10px;
    left: 0;
    font-weight: bold !important;
}

.jp-Notebook.jp-mod-commandMode .jp-CodeCell.jp-mod-active.jp-mod-selected:not(.jp-mod-multiSelected) .jp-InputArea:before {
    color: var(--txbk-cell-display-border-color);
}

.jp-Notebook.jp-mod-editMode .jp-CodeCell.jp-mod-active.jp-mod-selected:not(.jp-mod-multiSelected) .jp-InputArea:before {
    color: var(--txbk-cell-edit-border-color);
}

/* =============
   Code Editors
   ============= */

.jp-Notebook .jp-Cell .CodeMirror * {
    line-height: var(--txbk-code-line-height);
}

.jp-Notebook .jp-CodeCell .CodeMirror * {
    font-family: var(--txbk-code-font-family) !important;
    font-size: var(--txbk-code-font-size) !important;
}

.jp-Notebook .jp-MarkdownCell .CodeMirror * {
    font-family: var(--txbk-md-font-family) !important;
    font-size: var(--txbk-md-font-size) !important;
}

/* Cell Output rendering (.output_area in Notebook HTML) */

.jp-OutputArea-output.jp-RenderedText pre,
.jp-OutputArea-output.jp-RenderedMarkdown p {
    padding-bottom: 15px;
    padding-top: 10px;
}

.jp-OutputArea-output.jp-RenderedMarkdown p {
    font-size: var(--txbk-content-font-size);
}

.jp-OutputArea-output.jp-RenderedMarkdown pre code {
    font-size: var(--txbk-content-mono-font-size);
    font-family: var(--txbk-content-mono-font-family);
    color: var(--txbk-content-mono-color);
}

.jp-OutputArea-output.jp-RenderedText pre {
    --txbk-content-mono-font-family: var(--txbk-code-font-family);
    font-size: var(--txbk-code-font-size);
    font-weight: normal;
    word-break: normal;
    word-wrap: break-word;
}

/* Standard Error */
.jp-RenderedText[data-mime-type='application/vnd.jupyter.stderr'] {
    background: none !important;
}
/*
Author: Valerio Maggio < @leriomaggio >
Code: https://github.com/leriomaggio/notexbook-jupyter-theme
License: Apache License 2.0
*/

/* HTML Export (Jupyter Light Theme)
   ================================ */

body.jp-Notebook .jp-CodeCell .jp-InputPrompt {
    margin-top: 7px;
    overflow: initial;
}

body.jp-Notebook .CodeMirror-linenumber {
    --txbk-ui-mono-font-size: 10px !important;
}

body.jp-Notebook .jp-RenderedHTMLCommon.jp-MarkdownOutput p > img:only-child,
body.jp-Notebook .jp-RenderedHTMLCommon.jp-MarkdownOutput img:only-child {
    max-width: 30%;
}

body.jp-Notebook .jp-CodeCell .jp-InputPrompt {
    font-size: var(--txbk-code-font-size);
    padding-top: 4px;
}

/* ==================================================
   IMPORTANT NOTE:
   ALL markdown rules cells needs adapting because of
   a different structure in exported HTML
   ===================================================
*/
body.jp-Notebook .jp-Cell-inputWrapper .jp-RenderedHTMLCommon.jp-RenderedMarkdown.jp-MarkdownOutput {
    font-family: var(--txbk-content-font-family) !important;
    font-size: var(--txbk-content-font-size) !important;
    color: var(--txbk-content-color) !important;
    font-kerning: auto;
    text-align: justify !important;
    display: block;
    word-break: normal !important;
    word-wrap: break-word !important;
}

body.jp-Notebook .jp-Cell-inputWrapper .jp-RenderedHTMLCommon.jp-RenderedMarkdown.jp-MarkdownOutput  a {
    color: var(--link-color) !important;
}

body.jp-Notebook .jp-Cell-inputWrapper .jp-RenderedHTMLCommon.jp-RenderedMarkdown.jp-MarkdownOutput  h1,
body.jp-Notebook .jp-Cell-inputWrapper .jp-RenderedHTMLCommon.jp-RenderedMarkdown.jp-MarkdownOutput  h2,
body.jp-Notebook .jp-Cell-inputWrapper .jp-RenderedHTMLCommon.jp-RenderedMarkdown.jp-MarkdownOutput  h3,
body.jp-Notebook .jp-Cell-inputWrapper .jp-RenderedHTMLCommon.jp-RenderedMarkdown.jp-MarkdownOutput  h4,
body.jp-Notebook .jp-Cell-inputWrapper .jp-RenderedHTMLCommon.jp-RenderedMarkdown.jp-MarkdownOutput  h5,
body.jp-Notebook .jp-Cell-inputWrapper .jp-RenderedHTMLCommon.jp-RenderedMarkdown.jp-MarkdownOutput  h6 {
    font-family:  var(--txbk-content-font-family) !important;
    font-style: normal !important;
}

/*  Font-sizes for Headers
    ----------------------*/
body.jp-Notebook .jp-Cell-inputWrapper .jp-RenderedHTMLCommon.jp-RenderedMarkdown.jp-MarkdownOutput  h1 {
    font-size: 2.2em !important;
    text-align: center !important;
    padding-top:  3rem;
    padding-bottom: 3rem;
}

body.jp-Notebook .jp-Cell-inputWrapper .jp-RenderedHTMLCommon.jp-RenderedMarkdown.jp-MarkdownOutput  h2 {
    font-size: 1.9em !important;
}

body.jp-Notebook .jp-Cell-inputWrapper .jp-RenderedHTMLCommon.jp-RenderedMarkdown.jp-MarkdownOutput  h3 {
    font-size: 1.7em !important;
}

body.jp-Notebook .jp-Cell-inputWrapper .jp-RenderedHTMLCommon.jp-RenderedMarkdown.jp-MarkdownOutput  h4 {
    font-size: 1.5em !important;
}

body.jp-Notebook .jp-Cell-inputWrapper .jp-RenderedHTMLCommon.jp-RenderedMarkdown.jp-MarkdownOutput  h5 {
    font-size: 1.3em !important;
    border-bottom: 1px solid rgb(204, 204, 204);
}

body.jp-Notebook .jp-Cell-inputWrapper .jp-RenderedHTMLCommon.jp-RenderedMarkdown.jp-MarkdownOutput  h6 {
    font-size: 1.1em !important;
}

body.jp-Notebook .jp-Cell-inputWrapper .jp-RenderedHTMLCommon.jp-RenderedMarkdown.jp-MarkdownOutput  p,
body.jp-Notebook .jp-Cell-inputWrapper .jp-RenderedHTMLCommon.jp-RenderedMarkdown.jp-MarkdownOutput  pre,
body.jp-Notebook .jp-Cell-inputWrapper .jp-RenderedHTMLCommon.jp-RenderedMarkdown.jp-MarkdownOutput  code {
    font-size: 1em !important;
}

body.jp-Notebook .jp-Cell-inputWrapper .jp-RenderedHTMLCommon.jp-RenderedMarkdown.jp-MarkdownOutput  pre,
body.jp-Notebook .jp-Cell-inputWrapper .jp-RenderedHTMLCommon.jp-RenderedMarkdown.jp-MarkdownOutput  code {
    color: var(--txbk-content-mono-color);
}

/* Monospace Code - no code syntax highlight*/
body.jp-Notebook .jp-Cell-inputWrapper .jp-RenderedHTMLCommon.jp-RenderedMarkdown.jp-MarkdownOutput  pre {
    /* hack: using code background colour here to allow for compatibility */
    background-color: var(--code-background-color) !important;
    font-family: var(--txbk-content-mono-font-family) !important;
}

body.jp-Notebook .jp-Cell-inputWrapper .jp-RenderedHTMLCommon.jp-RenderedMarkdown.jp-MarkdownOutput  p {
    line-height: var(--txbk-content-line-height);
    text-align: justify !important;
}

/* Monospace inline rendered markdown */
body.jp-Notebook .jp-Cell-inputWrapper .jp-RenderedHTMLCommon.jp-RenderedMarkdown.jp-MarkdownOutput  p code {

    /*Re-defining variables for Mono using Code Editor's settings*/
    --txbk-content-mono-font-family: var(--txbk-code-font-family);
    --txbk-content-mono-font-size: var(--txbk-code-font-size);

    background-color: var(--txbk-content-mono-bgcolor) !important;
    font-size: var(--txbk-content-mono-font-size) !important;
    color: var(--txbk-content-mono-color);
}

body.jp-Notebook .jp-Cell-inputWrapper .jp-RenderedHTMLCommon.jp-RenderedMarkdown.jp-MarkdownOutput  p strong code {
    font-weight: bold !important;
    color: var(--txbk-content-mono-color);
}

body.jp-Notebook .jp-Cell-inputWrapper .jp-RenderedHTMLCommon.jp-RenderedMarkdown.jp-MarkdownOutput  p em code {
    font-style: italic !important;
    color: var(--txbk-content-mono-color);
}

body.jp-Notebook .jp-CodeCell .jp-RenderedHTMLCommon p.nomono {
    font-family: var(--txbk-content-font-family);
    font-size: 1em;
}

body.jp-Notebook .jp-Cell-inputWrapper .jp-RenderedHTMLCommon.jp-RenderedMarkdown.jp-MarkdownOutput  pre code {
    padding: 1rem 1.5rem;
    display: block;
    color: var(--txbk-content-mono-color);
    background-color: var(--txbk-content-mono-bgcolor) !important;
    font-family: var(--txbk-content-mono-font-family);
    font-size: var(--txbk-content-mono-font-size) !important;
    word-wrap: break-word;
    word-break: normal;
}

body.jp-Notebook .jp-Cell-inputWrapper .jp-RenderedHTMLCommon.jp-RenderedMarkdown.jp-MarkdownOutput  blockquote {
    --txbk-ui-color: #6f6f6f !important;

    margin: 2rem .2rem !important;
    padding: .3rem .5rem !important;
    border-left: .3rem solid #a7a7a7 !important;
}

body.jp-Notebook .jp-Cell-inputWrapper .jp-RenderedHTMLCommon.jp-RenderedMarkdown.jp-MarkdownOutput  blockquote p {
    padding: .2rem 1.5rem;
}

body.jp-Notebook .jp-Cell-inputWrapper .jp-RenderedHTMLCommon.jp-RenderedMarkdown.jp-MarkdownOutput  table {
    margin-top: 25px;
}

body.jp-Notebook .jp-Cell-inputWrapper .jp-RenderedHTMLCommon.jp-RenderedMarkdown.jp-MarkdownOutput  table {
    font-size: var(--txbk-content-font-size) !important;
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    overflow: auto;
    break-inside: auto;
    text-align: left;
    margin-top: 25px;
}

body.jp-Notebook .jp-Cell-inputWrapper .jp-RenderedHTMLCommon.jp-RenderedMarkdown.jp-MarkdownOutput  table thead {
    display: table-header-group;
    vertical-align: middle !important;
    border-bottom: none !important;
}

body.jp-Notebook .jp-Cell-inputWrapper .jp-RenderedHTMLCommon.jp-RenderedMarkdown.jp-MarkdownOutput  table thead tr,
body.jp-Notebook .jp-Cell-inputWrapper .jp-RenderedHTMLCommon.jp-RenderedMarkdown.jp-MarkdownOutput  table thead tr td,
body.jp-Notebook .jp-Cell-inputWrapper .jp-RenderedHTMLCommon.jp-RenderedMarkdown.jp-MarkdownOutput  table tbody tr,
body.jp-Notebook .jp-Cell-inputWrapper .jp-RenderedHTMLCommon.jp-RenderedMarkdown.jp-MarkdownOutput  table tbody tr th,
body.jp-Notebook .jp-Cell-inputWrapper .jp-RenderedHTMLCommon.jp-RenderedMarkdown.jp-MarkdownOutput  table tbody tr td {
    break-inside: avoid;
    break-after: auto;
    text-align: left !important;
    vertical-align: middle !important;
    padding: 0 !important;
}

body.jp-Notebook .jp-Cell-inputWrapper .jp-RenderedHTMLCommon.jp-RenderedMarkdown.jp-MarkdownOutput  table tr th {
    border-bottom-width: 0;
}

body.jp-Notebook .jp-Cell-inputWrapper .jp-RenderedHTMLCommon.jp-RenderedMarkdown.jp-MarkdownOutput  ul,
body.jp-Notebook .jp-Cell-inputWrapper .jp-RenderedHTMLCommon.jp-RenderedMarkdown.jp-MarkdownOutput  ol {
    position: relative;
    display: block;
    margin-bottom: 0 !important;
    line-height: var(--txbk-content-line-height);
}

body.jp-Notebook .jp-Cell-inputWrapper .jp-RenderedHTMLCommon.jp-RenderedMarkdown.jp-MarkdownOutput  ul {
    list-style-type: disc;
}

body.jp-Notebook .jp-Cell-inputWrapper .jp-RenderedHTMLCommon.jp-RenderedMarkdown.jp-MarkdownOutput  ul li,
body.jp-Notebook .jp-Cell-inputWrapper .jp-RenderedHTMLCommon.jp-RenderedMarkdown.jp-MarkdownOutput  ol li {
    /*white-space: pre-wrap;*/
    padding: .8rem !important;
}

body.jp-Notebook .jp-Cell-inputWrapper .jp-RenderedHTMLCommon.jp-RenderedMarkdown.jp-MarkdownOutput  ul li > code,
body.jp-Notebook .jp-Cell-inputWrapper .jp-RenderedHTMLCommon.jp-RenderedMarkdown.jp-MarkdownOutput  ol li > code {
    font-size: .9em !important
}

body.jp-Notebook .jp-Cell-inputWrapper .jp-RenderedHTMLCommon.jp-RenderedMarkdown.jp-MarkdownOutput  ul li a code,
body.jp-Notebook .jp-Cell-inputWrapper .jp-RenderedHTMLCommon.jp-RenderedMarkdown.jp-MarkdownOutput  ol li a code {
    font-size: .9em !important
}

body.jp-Notebook .jp-Cell-inputWrapper .jp-RenderedHTMLCommon.jp-RenderedMarkdown.jp-MarkdownOutput  ul ul {
    list-style-type: circle !important;
}

body.jp-Notebook .jp-Cell-inputWrapper .jp-RenderedHTMLCommon.jp-RenderedMarkdown.jp-MarkdownOutput  ul ul,
body.jp-Notebook .jp-Cell-inputWrapper .jp-RenderedHTMLCommon.jp-RenderedMarkdown.jp-MarkdownOutput  ul ol,
body.jp-Notebook .jp-Cell-inputWrapper .jp-RenderedHTMLCommon.jp-RenderedMarkdown.jp-MarkdownOutput  ol ul,
body.jp-Notebook .jp-Cell-inputWrapper .jp-RenderedHTMLCommon.jp-RenderedMarkdown.jp-MarkdownOutput  ol ol {
    padding-top: .5rem !important;
}

body.jp-Notebook .jp-Cell-inputWrapper .jp-RenderedHTMLCommon.jp-RenderedMarkdown.jp-MarkdownOutput  ul li > ul li,
body.jp-Notebook .jp-Cell-inputWrapper .jp-RenderedHTMLCommon.jp-RenderedMarkdown.jp-MarkdownOutput  ul li > ol li,
body.jp-Notebook .jp-Cell-inputWrapper .jp-RenderedHTMLCommon.jp-RenderedMarkdown.jp-MarkdownOutput  ol li > ul li,
body.jp-Notebook .jp-Cell-inputWrapper .jp-RenderedHTMLCommon.jp-RenderedMarkdown.jp-MarkdownOutput  ol li > ol li {
    padding: .5rem !important;
}

body.jp-Notebook .jp-Cell-inputWrapper .jp-RenderedHTMLCommon.jp-RenderedMarkdown.jp-MarkdownOutput  ul li > ul li code,
body.jp-Notebook .jp-Cell-inputWrapper .jp-RenderedHTMLCommon.jp-RenderedMarkdown.jp-MarkdownOutput  ul li > ol li code,
body.jp-Notebook .jp-Cell-inputWrapper .jp-RenderedHTMLCommon.jp-RenderedMarkdown.jp-MarkdownOutput  ol li > ul li code,
body.jp-Notebook .jp-Cell-inputWrapper .jp-RenderedHTMLCommon.jp-RenderedMarkdown.jp-MarkdownOutput  ol li > ol li code {
    font-size: .9em !important;
}

body.jp-Notebook .jp-Cell-inputWrapper .jp-RenderedHTMLCommon.jp-RenderedMarkdown.jp-MarkdownOutput  ul li > ul li a code,
body.jp-Notebook .jp-Cell-inputWrapper .jp-RenderedHTMLCommon.jp-RenderedMarkdown.jp-MarkdownOutput  ul li > ol li a code,
body.jp-Notebook .jp-Cell-inputWrapper .jp-RenderedHTMLCommon.jp-RenderedMarkdown.jp-MarkdownOutput  ol li > ul li a code,
body.jp-Notebook .jp-Cell-inputWrapper .jp-RenderedHTMLCommon.jp-RenderedMarkdown.jp-MarkdownOutput  ol li > ol li a code {
    font-size: .9em !important;
    color: var(--link-color);
}

body.jp-Notebook .jp-Cell-inputWrapper .jp-RenderedHTMLCommon.jp-RenderedMarkdown.jp-MarkdownOutput  ul ul ul {
    list-style-type: square !important;
}

body.jp-Notebook .jp-Cell-inputWrapper .jp-RenderedHTMLCommon.jp-RenderedMarkdown.jp-MarkdownOutput  p > img:only-child,
body.jp-Notebook .jp-Cell-inputWrapper .jp-RenderedHTMLCommon.jp-RenderedMarkdown.jp-MarkdownOutput  img:only-child {
    display: block;
    margin: auto;
    max-width: 40%;
}

body.jp-Notebook .jp-Cell-inputWrapper .jp-RenderedHTMLCommon.jp-RenderedMarkdown.jp-MarkdownOutput  img {
    max-width: 40%;
}

/* Img MaxW classes */
body.jp-Notebook .jp-Cell-inputWrapper .jp-RenderedHTMLCommon.jp-RenderedMarkdown.jp-MarkdownOutput  img.maxw10,
body.jp-Notebook .jp-Cell-inputWrapper .jp-RenderedHTMLCommon.jp-RenderedMarkdown.jp-MarkdownOutput  p > img.maxw10 {
    max-width: 5% !important;
}

body.jp-Notebook .jp-Cell-inputWrapper .jp-RenderedHTMLCommon.jp-RenderedMarkdown.jp-MarkdownOutput img.maxw15,
body.jp-Notebook .jp-Cell-inputWrapper .jp-RenderedHTMLCommon.jp-RenderedMarkdown.jp-MarkdownOutput p > img.maxw15 {
    max-width: 5% !important;
}

body.jp-Notebook .jp-Cell-inputWrapper .jp-RenderedHTMLCommon.jp-RenderedMarkdown.jp-MarkdownOutput img.maxw20,
body.jp-Notebook .jp-Cell-inputWrapper .jp-RenderedHTMLCommon.jp-RenderedMarkdown.jp-MarkdownOutput p > img.maxw20 {
    max-width: 10% !important;
}

body.jp-Notebook .jp-Cell-inputWrapper .jp-RenderedHTMLCommon.jp-RenderedMarkdown.jp-MarkdownOutput img.maxw25,
body.jp-Notebook .jp-Cell-inputWrapper .jp-RenderedHTMLCommon.jp-RenderedMarkdown.jp-MarkdownOutput p > img.maxw25 {
    max-width: 15% !important;
}

body.jp-Notebook .jp-Cell-inputWrapper .jp-RenderedHTMLCommon.jp-RenderedMarkdown.jp-MarkdownOutput img.maxw30,
body.jp-Notebook .jp-Cell-inputWrapper .jp-RenderedHTMLCommon.jp-RenderedMarkdown.jp-MarkdownOutput p > img.maxw30 {
    max-width: 20% !important;
}

body.jp-Notebook .jp-Cell-inputWrapper .jp-RenderedHTMLCommon.jp-RenderedMarkdown.jp-MarkdownOutput img.maxw35,
body.jp-Notebook .jp-Cell-inputWrapper .jp-RenderedHTMLCommon.jp-RenderedMarkdown.jp-MarkdownOutput p > img.maxw35 {
    max-width: 25% !important;
}

body.jp-Notebook .jp-Cell-inputWrapper .jp-RenderedHTMLCommon.jp-RenderedMarkdown.jp-MarkdownOutput img.maxw40,
body.jp-Notebook .jp-Cell-inputWrapper .jp-RenderedHTMLCommon.jp-RenderedMarkdown.jp-MarkdownOutput p > img.maxw40 {
    max-width: 30% !important;
}

body.jp-Notebook .jp-Cell-inputWrapper .jp-RenderedHTMLCommon.jp-RenderedMarkdown.jp-MarkdownOutput img.maxw45,
body.jp-Notebook .jp-Cell-inputWrapper .jp-RenderedHTMLCommon.jp-RenderedMarkdown.jp-MarkdownOutput p > img.maxw45 {
    max-width: 35% !important;
}

body.jp-Notebook .jp-Cell-inputWrapper .jp-RenderedHTMLCommon.jp-RenderedMarkdown.jp-MarkdownOutput img.maxw50,
body.jp-Notebook .jp-Cell-inputWrapper .jp-RenderedHTMLCommon.jp-RenderedMarkdown.jp-MarkdownOutput p > img.maxw50 {
    max-width: 40% !important;
}

body.jp-Notebook .jp-Cell-inputWrapper .jp-RenderedHTMLCommon.jp-RenderedMarkdown.jp-MarkdownOutput img.maxw55,
body.jp-Notebook .jp-Cell-inputWrapper .jp-RenderedHTMLCommon.jp-RenderedMarkdown.jp-MarkdownOutput p > img.maxw55 {
    max-width: 45% !important;
}

body.jp-Notebook .jp-Cell-inputWrapper .jp-RenderedHTMLCommon.jp-RenderedMarkdown.jp-MarkdownOutput img.maxw60,
body.jp-Notebook .jp-Cell-inputWrapper .jp-RenderedHTMLCommon.jp-RenderedMarkdown.jp-MarkdownOutput p > img.maxw60 {
    max-width: 50% !important;
}

body.jp-Notebook .jp-Cell-inputWrapper .jp-RenderedHTMLCommon.jp-RenderedMarkdown.jp-MarkdownOutput img.maxw65,
body.jp-Notebook .jp-Cell-inputWrapper .jp-RenderedHTMLCommon.jp-RenderedMarkdown.jp-MarkdownOutput p > img.maxw65 {
    max-width: 55% !important;
}

body.jp-Notebook .jp-Cell-inputWrapper .jp-RenderedHTMLCommon.jp-RenderedMarkdown.jp-MarkdownOutput img.maxw70,
body.jp-Notebook .jp-Cell-inputWrapper .jp-RenderedHTMLCommon.jp-RenderedMarkdown.jp-MarkdownOutput p > img.maxw70 {
    max-width: 60% !important;
}

body.jp-Notebook .jp-Cell-inputWrapper .jp-RenderedHTMLCommon.jp-RenderedMarkdown.jp-MarkdownOutput img.maxw75,
body.jp-Notebook .jp-Cell-inputWrapper .jp-RenderedHTMLCommon.jp-RenderedMarkdown.jp-MarkdownOutput p > img.maxw75 {
    max-width: 65% !important;
}

body.jp-Notebook .jp-Cell-inputWrapper .jp-RenderedHTMLCommon.jp-RenderedMarkdown.jp-MarkdownOutput img.maxw80,
body.jp-Notebook .jp-Cell-inputWrapper .jp-RenderedHTMLCommon.jp-RenderedMarkdown.jp-MarkdownOutput p > img.maxw80 {
    max-width: 70% !important;
}

body.jp-Notebook .jp-Cell-inputWrapper .jp-RenderedHTMLCommon.jp-RenderedMarkdown.jp-MarkdownOutput img.maxw85,
body.jp-Notebook .jp-Cell-inputWrapper .jp-RenderedHTMLCommon.jp-RenderedMarkdown.jp-MarkdownOutput p > img.maxw85 {
    max-width: 75% !important;
}

body.jp-Notebook .jp-Cell-inputWrapper .jp-RenderedHTMLCommon.jp-RenderedMarkdown.jp-MarkdownOutput img.maxw90,
body.jp-Notebook .jp-Cell-inputWrapper .jp-RenderedHTMLCommon.jp-RenderedMarkdown.jp-MarkdownOutput p > img.maxw90 {
    max-width: 80% !important;
}

body.jp-Notebook .jp-Cell-inputWrapper .jp-RenderedHTMLCommon.jp-RenderedMarkdown.jp-MarkdownOutput img.maxw95,
body.jp-Notebook .jp-Cell-inputWrapper .jp-RenderedHTMLCommon.jp-RenderedMarkdown.jp-MarkdownOutput p > img.maxw95 {
    max-width: 85% !important;
}

body.jp-Notebook .jp-Cell-inputWrapper .jp-RenderedHTMLCommon.jp-RenderedMarkdown.jp-MarkdownOutput img.maxw100,
body.jp-Notebook .jp-Cell-inputWrapper .jp-RenderedHTMLCommon.jp-RenderedMarkdown.jp-MarkdownOutput p > img.maxw100 {
    max-width: 90% !important;
}

/* FIX Forcing monospace code to adhere with footnotes rules!*/
body.jp-Notebook .jp-Cell-inputWrapper .jp-RenderedHTMLCommon.jp-RenderedMarkdown.jp-MarkdownOutput  p [id^='fn'] > code,
body.jp-Notebook .jp-Cell-inputWrapper .jp-RenderedHTMLCommon.jp-RenderedMarkdown.jp-MarkdownOutput  p [class^='fn'] > code {
    font-size: 1em !important;
}

/* ======================================================
              GLOBALS (with vars integration)
   ======================================================
*/

:root {
    --template-txbk-content-font-size: 16px;
    --template-txbk-content-line-height: 1.4;
    --template-txbk-content-mono-font-family: "CMU Typewriter Text", "Fira Code", monospace;
    --template-txbk-code-font-family: "Fira Code", "Fira Code", monospace;
    --template-txbk-md-font-family: "Hack", "Hack", monospace;
    --template-txbk-code-font-size: 14px;
    --template-txbk-md-font-size: 14px;
}

/* ======================================================
                         GLOBALS
   ======================================================
*/

:root {
    /* Base colors */
    --texbook-red: #d43133;
    --texbook-pink: #D14187;
    --texbook-turquoise: #009489;
    --texbook-azure: #00afde;
    --texbook-blue: #2875d9;
    --texbook-light-grey: #828282;
    --texbook-dark-grey: rgb(56, 56, 56);
    --texbook-yellow: #f9ab00;
    --texbook-orange: #e8710a;

    /* Font formatting */
    --background-color: #ffffff;
    --txbk-ui-font-family: "Roboto Slab", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --txbk-ui-color: rgb(51, 51, 51);
    --txbk-ui-font-size: 14px;
    --txbk-ui-line-height: 1;

    --txbk-ui-header-font-family: "Roboto Slab", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --txbk-ui-header-color: rgb(56, 56, 56);

    --txbk-ui-mono-color: #828282;
    --txbk-ui-mono-font-size: 15px;
    --txbk-ui-mono-line-height: 1.4;

    /* Cells */
    --txbk-cell-selected-border-left-color: lightgrey;
    --txbk-cell-border-color: var(--background-color);
    --txbk-multiselect-bgcolor: var(--background-color);
    --txbk-cell-display-border-color: #009489;
    --txbk-cell-edit-border-color: #d43133;

    /* Content Formatting */
    --txbk-content-font-family: "CMU Serif", "Times New Roman", serif;
    --txbk-content-font-size: var(--template-txbk-content-font-size);
    --txbk-content-color: rgb(51, 51, 51);
    --txbk-content-line-height: var(--template-txbk-content-line-height);

    --txbk-content-mono-font-family: var(--template-txbk-content-mono-font-family);
    --txbk-content-mono-font-size: var(--txbk-content-font-size);
    --txbk-content-mono-color: var(--texbook-dark-grey);
    --txbk-content-mono-bgcolor: var(--code-background-color);

    --txbk-code-font-family: var(--template-txbk-code-font-family);
    --txbk-code-font-size: var(--template-txbk-code-font-size);
    --txbk-md-font-family: var(--template-txbk-md-font-family);
    --txbk-md-font-size: var(--template-txbk-md-font-size);
    --txbk-code-line-height: 1.6;
    --txbk-code-color: var(--code-text-color);
    --txbk-code-bgcolor: var(--code-background-color);

    --link-color: var(--texbook-blue);
    --del-color: var(--texbook-red);
    --drop-cap-color: var(--texbook-red);;

    --kernel-name-color: var(--texbook-azure);
    --kernel-idle: var(--texbook-turquoise);
    --kernel-busy: var(--texbook-pink);
    --kernel-disconnected: var(--texbook-red);
    --btn-warning: var(--texbook-pink);
    --btn-danger: var(--texbook-red);
    --running-notebook: var(--texbook-turquoise);
}

html {
    font-size: 10px;
}

body {

    background-color: var(--background-color) !important;
    font-weight: 300;
    font-family: var(--txbk-ui-font-family);
    color: var(--txbk-ui-color);
    overflow: inherit;
    vertical-align: middle;
    font-size: var(--txbk-ui-font-size);
}

h1, h2, h3, h4, h5, h6, label > strong {
    font-family: var(--txbk-ui-header-font-family);
    color: var(--txbk-ui-header-color);
}

h1 img, h2 img , h3 img, h4 img, h5 img, h6 img {
    display: inline !important;
}

h1 {
    font-weight: bold;
    font-style: normal;
}

h2 {
    font-weight: bold;
    font-style: italic;
}

h3 {
    font-weight: 600;
    font-style: normal;
}

h4 {
    font-weight: 500;
    font-style: normal;
}

h5, h6 {
    font-weight: 500;
    font-style: italic;
}

code, kbd, pre, samp {
    font-family: var(--txbk-code-font-family);
    color: var(--txbk-ui-mono-color);
    font-weight: 400;
    font-size: var(--txbk-ui-mono-font-size);
    line-height: var(--txbk-ui-mono-line-height);
}

table > thead > tr > td.info,
table > tbody > tr > td.info,
table > tfoot > tr > td.info,
table > thead > tr > th.info,
table > tbody > tr > th.info,
table > tfoot > tr > th.info,
table > thead > tr.info > td,
table > tbody > tr.info > td,
table > tfoot > tr.info > td,
table > thead > tr.info > th,
table > tbody > tr.info > th,
table > tfoot > tr.info > th {
    background-color: #d9edf7;
}

del {
    color: var(--del-color) !important;
}

/* ======================================================
                 Intro/Home Page Server
   ======================================================
*/

#ipython-main-app p {
    text-align: justify !important;
}

.toolbar_info,
.list-container {
    color: #828282;
}

.list_placeholder {
    font-family: "Roboto Slab", serif !important;
    font-weight: 300;
    font-style: normal;
}

a.item_link, a:hover.item_link {
    color: var(--link-color);
    font-weight: 300;
}

.item_buttons .kernel-name {
    color: var(--kernel-name-color);
    font-weight: 400;
}

.btn-warning {
    background-color: var(--btn-warning) !important;
    border-color: var(--btn-warning) !important;
}

.btn-warning:focus {
    border-color: var(--btn-warning) !important;
}

.btn-danger {
    background-color: var(--btn-danger) !important;
    border-color: var(--btn-danger) !important;
}

.btn-danger:focus {
    border-color: var(--btn-danger) !important;
}

.running-indicator,
.running_notebook_icon:before {
    color: var(--running-notebook);
}

/* ======================================================
                         Notebook
   ======================================================
*/

/* Modal Dialog */

.modal-header > h4 {
    font-style: normal !important;
    text-decoration: none !important;
    font-family: var(--txbk-ui-font-family) !important;
    margin: 0 !important;
}

.notebook_app {
    background-color: var(--background-color) !important;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-weight: normal;
}

div#notebook_name {
    font-family: var(--txbk-ui-font-family) !important;
    font-weight: normal;
    font-size: 24px;
    padding: 1px 7px 1px 1px;
}

div#site {
	overflow: inherit;
    top: 112px;
    position: absolute;
}

#header {
    display: block;
    position: fixed !important;
    top: 0;
    width: 100%;
    max-width: 100%;
    height: fit-content;
    background-color: var(--background-color);
}

#notebook-container {
    /* Remove shadow so that it looks like a page of a PDF doc */
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    padding: 0;
}

div#notebook {
    border-top: none;
    font-size: 1rem;
    padding: 0 !important;
    padding-top: 30px !important;
    font-family: var(--txbk-content-font-family) !important;
}

.kernel_idle_icon:before {
    color: var(--kernel-idle);
}

.kernel_busy_icon:before {
    color: var(--kernel-busy);
}

.kernel_disconnected_icon:before {
    color: var(--kernel-disconnected);
}

#notification_area {
    font-family: var(--txbk-ui-font-family);
}

#notification_kernel {
    color: #fff;
    background-color: var(--kernel-idle);
    border-color: var(--kernel-idle);
}

#notification_kernel.warning {
    color: #fff;
    background-color: var(--kernel-disconnected);
    border-color: var(--kernel-disconnected);
}

#notification_trusted {
    border-color: var(--kernel-disconnected);
}

#notification_trusted[disabled="disabled"] {
    border-color: var(--kernel-idle);
}

#notification_notebook {
    border-color: var(--kernel-idle);
}

/* -----------------------------------
    CELLS
   -----------------------------------
*/

div.cell {
    right: 2px;
    border:  none;
    margin-top: 5px;
}

div.cell.selected {
    /* Reset all - ready for customisation */
    border-radius: 0;
    background: none;
}

div.cell .inner_cell {
    border-right: 5px solid var(--txbk-cell-border-color);
    border-left:  0.2rem dotted var(--txbk-cell-border-color);
}

div.cell.selected:not(.jupyter-soft-selected) .inner_cell {
    border-left-color:  var(--txbk-cell-selected-border-left-color);
}

.command_mode div.cell.selected:not(.jupyter-soft-selected) .inner_cell {
    border-right-color: var(--txbk-cell-display-border-color);
}

.edit_mode div.cell.selected:not(.jupyter-soft-selected) .inner_cell {
    border-right-color: var(--txbk-cell-edit-border-color);
}

/* Multiple Selection */
.command_mode div.cell.jupyter-soft-selected {
    border: 2px dashed var(--texbook-azure);
    background: var(--txbk-multiselect-bgcolor);
    margin-top: 10px;
}

/*
Overlay with Shadow for Code Cell Selected !
*/
div.code_cell.selected,
.command_mode div.code_cell.jupyter-soft-selected {
    box-shadow: 0 6px 18px #aaa;
    z-index: 10;
    top: -10px;
}

div.code_cell.selected {
    border: none;
    background: transparent;
}

div.prompt {
    font-family: var(--txbk-code-font-family) !important;
    font-style: normal;
    font-size: 1rem;
    text-align: right;
    line-height: 1rem;
    min-width: 9ex;
}

div.cell.selected:before,
div.cell.jupyter-soft-selected:before {
    /* Important Needed to Override */
    width: 0 !important;
    background: none !important;
}

div.cell div.input:before {
    display: inline-block;
    position: relative;
    content: "\279E";
    font-size: 1.8rem;
    top: 11px;
    width: 10px;
    left: 3px;
    font-weight: bold;
}

div.cell:not(.selected) div.input:before {
    color: var(--background-color);
}

div.cell.selected:not(.jupyter-soft-selected) div.input:before {
    color: var(--txbk-cell-display-border-color);
}

.edit_mode div.cell.selected div.input:before,
.edit_mode div.cell.selected.unrendered div.input:before {
    color: var(--txbk-cell-edit-border-color);
}

.code_cell div.input_prompt:after,
.code_cell div.output_prompt:after {
    display: inline-block;
    content: '';
    font-size:  0.75rem;
    font-style: normal !important;
}

.edit_mode div.cell.selected:before{
    width: 0;
    background: none;
}

/* ==========================
    Cell Input and Rendering
   ==========================
*/

div.input_area {
    border-radius: 0;
    border: none;
    padding: 2px 5px 0 5px;
}

div.input_prompt {
    color: #aba9a9;
    font-style: normal;
    font-size: 1.4rem;
    padding-top: 14px;
}

/* FIX:
   Fixing Empty cell output in HTML export
*/
div.output_prompt {
    color: transparent !important;
}

div.input_prompt bdi,
div.output_prompt bdi {
    line-height: 0;
    font-size:0;
    color: transparent;
    left: -10000px;
    content: "\21E2";

}

div.output_wrapper {
    margin-top: 8px;
}

div.output_area div.output_text pre,
div.output_area div.output_markdown p {
    padding-bottom: 15px;
    padding-top: 10px;
}

div.output_area div.output_markdown p {
    font-size: var(--txbk-content-font-size);
}

div.output_area div.output_markdown pre code {
    font-size: var(--txbk-content-mono-font-size);
    font-family: var(--txbk-content-mono-font-family);
    color: var(--txbk-content-mono-color);
}

div.output_area div.output_text pre {
    --txbk-content-mono-font-family: var(--txbk-code-font-family);

    font-weight: normal;
    word-break: normal;
    word-wrap: break-word;
}

/* Output Standard Error  */
div.output_stderr {
    background-color: #FFFFFF;
}

div.out_prompt_overlay:hover {
    box-shadow: none;
    background: none;
}

/* Output HTML after cell code - e.g. Pandas DataFrame */
div.output_html {
    color: var(--code-text-color);
}

div.output_html a, div.output_html a:hover {
    color: var(--link-color);
}

div.output_html {
    font-size: 1.4em;
    font-weight: normal;
    font-family: var(--txbk-code-font-family);
}

div.output_html .nomono {
    font-family: var(--txbk-content-font-family);
    margin-top: 0;
    font-size: 1em;
}

div.output_html > iframe, div.output_area {
    margin-left: 2rem;
}

div.output_subarea {
    margin-left: 0;
}

div.output_svg div {
    max-width: 98%;
    margin-left: 0 !important;
}

/* ----------------------------
    Override default CSS rules
   ---------------------------- */
.rendered_html code {
    background-color: transparent !important;
}

.rendered_html h1:first-child,
.rendered_html h2:first-child,
.rendered_html h3:first-child,
.rendered_html h4:first-child,
.rendered_html h5:first-child,
.rendered_html h6:first-child {
    margin-top: 0.25em;
}

.rendered_html h1 {
    margin-top: 0.48em;
}

.rendered_html h2 {
    margin-top: 0.57em;
}

.rendered_html h3 {
    margin-top: 0.85em;
}

.rendered_html h4 {
    margin-top: 1.3em;
}

.rendered_html h5 {
    margin-top: 1.2em;
}

.rendered_html h6 {
    margin-top: 1.1em;
}

/* ===============
    CELLS Render
   =============== */

/*  -------------------------
    (1) CODE CELLS
    Display + Edit modes
    -------------------------
*/
div.code_cell pre, div.CodeMirror, div.CodeMirror-linenumber {
    font-family: var(--txbk-code-font-family);
    font-size: var(--txbk-code-font-size);
    line-height: var(--txbk-code-line-height);
}

div.CodeMirror-linenumber {
    --txbk-ui-mono-font-size: 12px !important;
}

/* -- MARKDOWN CELLS (Edit) -- */

/* md cell */
div.text_cell.unrendered pre {
    /* general font rule */
    font-family: var(--txbk-md-font-family);
    font-size: var(--txbk-md-font-size);
    line-height: var(--txbk-code-line-height);
}

/* md cell headers (edit) */
.cm-header-1, .cm-header-2, .cm-header-3,
.cm-header-4, .cm-header-5, .cm-header-6 {
    /* general font rule */
    font-family: var(--txbk-md-font-family);
}

/* ------------------------------------------------------------------
    (2) MARKDOWN CELLS (DISPLAY MODE)

    Notes: Font-families to use here:
    computer-modern --> general text (Computer Modern Typeface, CMU)
    md-display-monospace --> Monospace output (CMU Typewriter)
   ------------------------------------------------------------------
 */

div.text_cell_render {
    font-family: var(--txbk-content-font-family);
    font-size: var(--txbk-content-font-size);
    color: var(--txbk-content-color);
    font-kerning: auto;
    text-align: justify;
    display: block;
    word-break: normal;
    word-wrap: break-word;
}

div.text_cell_render a, div.text_cell_render a:hover {
    color: var(--link-color);
}

div.text_cell_render h1, div.text_cell_render h2,
div.text_cell_render h3, div.text_cell_render h4,
div.text_cell_render h5, div.text_cell_render h6 {
    font-family:  var(--txbk-content-font-family);
    font-style: normal;
}

/* Font-sizes for headers */
div.text_cell_render h1 {
    font-size: 2.2em;
    text-align: center;
    padding-top:  3rem;
    padding-bottom: 3rem;
}

div.text_cell_render h2 {
    font-size: 1.9em;
}

div.text_cell_render h3 {
    font-size: 1.7em;
}

div.text_cell_render h4 {
    font-size: 1.5em;
}

div.text_cell_render h5 {
    font-size: 1.3em;
    border-bottom: 1px solid rgb(204, 204, 204);
}

div.text_cell_render h6 {
    font-size: 1.1em;
}

div.text_cell_render p,
div.text_cell_render pre,
div.text_cell_render code {
    font-size: 1em !important;
}

div.text_cell_render pre,
div.text_cell_render code {
    color: var(--txbk-content-mono-color);
}

/* Monospace Code - no code syntax highlight*/
div.text_cell_render pre {
    /* hack: using code background colour here to allow for compatibility */
    background-color: var(--code-background-color);
    font-family: var(--txbk-content-mono-font-family);
}

div.text_cell_render p {
    line-height: var(--txbk-content-line-height);
    text-align: justify !important;
}

div.text_cell_render code {
    font-family: var(--txbk-content-mono-font-family);
}

/* Monospace inline rendered markdown */
div.text_cell_render p code {
    /*Re-defining variables for Mono using Code Editor's settings*/
    /*--txbk-content-mono-font-family: var(--txbk-code-font-family);*/
    /*--txbk-content-mono-font-size: var(--txbk-code-font-size);*/
    font-size: var(--txbk-content-mono-font-size) !important;
    color: var(--txbk-content-mono-color);
    font-family: var(--txbk-content-mono-font-family);
}

div.text_cell_render p strong code {
    font-weight: bold !important;
    color: var(--txbk-content-mono-color);
}

div.text_cell_render p em code {
    font-style: italic !important;
    color: var(--txbk-content-mono-color);
}

div.text_cell_render pre code {
    padding: 1rem 1.5rem;
    display: block !important;
    color: var(--txbk-content-mono-color);
    background-color: var(--txbk-content-mono-bgcolor) !important;
    font-family: var(--txbk-content-mono-font-family);
    font-size: var(--txbk-content-mono-font-size) !important;
    word-wrap: break-word;
    word-break: normal;
}

div.text_cell_render blockquote {
    --txbk-ui-color: #6f6f6f;
    margin: .2rem .2rem;
    padding: .3rem .5rem;
    border-left: .3rem solid #a7a7a7;
    background-color: var(--txbk-content-mono-bgcolor);
}

div.text_cell_render blockquote:not(:first-child) {
    margin: 2rem .2rem;
}

div.text_cell_render blockquote p {
    padding: .2rem 1.5rem;
}

div.text_cell_render table {
    font-size: var(--txbk-content-font-size) !important;
    border-collapse: collapse;
    border-spacing: 0;
    overflow: auto;
    break-inside: auto;
    margin-top: 25px;
    margin-bottom: 15px;
}

div.text_cell_render table thead {
    display: table-header-group;
    vertical-align: middle;
    border-bottom: none;
}

div.text_cell_render table thead tr,
div.text_cell_render table thead tr th,
div.text_cell_render table thead tr td,
div.text_cell_render table tbody tr,
div.text_cell_render table tbody tr th,
div.text_cell_render table tbody tr td {
    break-inside: avoid;
    break-after: auto;
    vertical-align: middle;
    padding: 5px 5px;
}

div.text_cell_render table tr th {
    border-bottom-width: 0;
}

div.text_cell_render ul, div.text_cell_render ol {
    position: relative;
    display: block;
    margin-bottom: 0 !important;
    line-height: var(--txbk-content-line-height);
}

div.text_cell_render ul {
    list-style-type: disc;
}

div.text_cell_render ul li, div.text_cell_render ol li {
    padding: .25em;
}

div.text_cell_render ul ul {
    list-style-type: circle !important;
}

div.text_cell_render ul li > ul li a code,
div.text_cell_render ul li > ol li a code,
div.text_cell_render ol li > ul li a code,
div.text_cell_render ol li > ol li a code {
    color: var(--link-color);
}

div.text_cell_render ul ul ul {
    list-style-type: square !important;
}

div.text_cell_render p > img:only-child {
    display: block;
    margin: auto;
    max-width: 70% !important;
}

div.text_cell_render img {
    max-width: 70%;
}

/*
    ===================================
    New CSS Classes and Styles
    ===================================

    --------------
    1. Footnotes
    --------------
*/
[id^='fn'], [class^='fn'] {
    font-size: small !important;
    font-weight: normal !important;
    font-style: normal !important;
    border-top: 1px solid var(--txbk-ui-mono-color);
    padding-top: .8rem;
    display: block;
}

p > [id^='fn']:not(:first-child),
p > [class^='fn']:not(:first-child) {
    border-top: 0 !important;
}

[id^='fn'] i, [class^='fn'] i,
[id^='fn'] b, [class^='fn'] b,
[id^='fn'] strong, [class^='fn'] strong,
p > strong > strong {
    background-color: var(--txbk-content-mono-bgcolor);
    font-style: normal !important;
    font-weight: bold !important;
}

/* FIX Forcing monospace code to adhere with footnotes rules!*/
div.text_cell_render p [id^='fn'] > code,
div.text_cell_render p [class^='fn'] > code {
    font-size: 1em !important;
}

/* CSS Anchors link as superscript (like footnotes) */
a[href^="#fn"], a[href*="fn"] {
    font-size: 60%;
    vertical-align: top;
}
/* Surround Footnotes by Square brackets */
a[href^="#fn"]:before, a[href*="fn"]:before {
    content: "[";
}

a[href^="#fn"]:after, a[href*="fn"]:after {
    content: "]";
}

/* --------------
    2. Drop cap
   --------------
*/
.drop {
    color: var(--drop-cap-color);
    font-size: 75px;
    line-height: 60px;
    padding-top: 4px;
    margin-top: 0.2rem;
}

/* -----------------------------
    3. noTeXbook Text colours
   -----------------------------
*/
.texbook-red {
    color: var(--texbook-red);
}

.texbook-pink {
    color: var(--texbook-pink);
}

.texbook-turquoise {
    color: var(--texbook-turquoise);
}

.texbook-azure {
    color: var(--texbook-azure);
}

.texbook-blue {
    color: var(--texbook-blue);
}

.texbook-light-grey {
    color: var(--texbook-light-grey);
}

.texbook-dark-grey {
    color: var(--texbook-dark-grey);
}

.texbook-orange {
    color: var(--texbook-orange);
}

.texbook-yellow {
    color: var(--texbook-yellow);
}

/* ---------------------------------------------------------
    4. IMG MaxWidthXX

    CSS classes to control the max-width property of images
    when the default 70% is not enough.
    This is when images need to be enlarged or shrunk.
   ---------------------------------------------------------
*/

div.text_cell_render img.maxw10,
div.text_cell_render p > img.maxw10 {
    max-width: 10% !important;
}

div.text_cell_render img.maxw15,
div.text_cell_render p > img.maxw15 {
    max-width: 15% !important;
}

div.text_cell_render img.maxw20,
div.text_cell_render p > img.maxw20 {
    max-width: 20% !important;
}

div.text_cell_render img.maxw25,
div.text_cell_render p > img.maxw25 {
    max-width: 25% !important;
}

div.text_cell_render img.maxw30,
div.text_cell_render p > img.maxw30 {
    max-width: 30% !important;
}

div.text_cell_render img.maxw35,
div.text_cell_render p > img.maxw35 {
    max-width: 35% !important;
}

div.text_cell_render img.maxw40,
div.text_cell_render p > img.maxw40 {
    max-width: 40% !important;
}

div.text_cell_render img.maxw45,
div.text_cell_render p > img.maxw45 {
    max-width: 45% !important;
}

div.text_cell_render img.maxw50,
div.text_cell_render p > img.maxw50 {
    max-width: 50% !important;
}

div.text_cell_render img.maxw55,
div.text_cell_render p > img.maxw55 {
    max-width: 55% !important;
}

div.text_cell_render img.maxw60,
div.text_cell_render p > img.maxw60 {
    max-width: 60% !important;
}

div.text_cell_render img.maxw65,
div.text_cell_render p > img.maxw65 {
    max-width: 65% !important;
}

div.text_cell_render img.maxw70,
div.text_cell_render p > img.maxw70 {
    max-width: 70% !important;
}

div.text_cell_render img.maxw75,
div.text_cell_render p > img.maxw75 {
    max-width: 75% !important;
}

div.text_cell_render img.maxw80,
div.text_cell_render p > img.maxw80 {
    max-width: 80% !important;
}

div.text_cell_render img.maxw85,
div.text_cell_render p > img.maxw85 {
    max-width: 85% !important;
}

div.text_cell_render img.maxw90,
div.text_cell_render p > img.maxw90 {
    max-width: 90% !important;
}

div.text_cell_render img.maxw95,
div.text_cell_render p > img.maxw95 {
    max-width: 95% !important;
}

div.text_cell_render img.maxw100,
div.text_cell_render p > img.maxw100 {
    max-width: 100% !important;
}

/*  ------------
     4. Badges
    ------------
*/
.badges img, .badges p img {
    margin: 0 !important;  /* Override margins */
    display: inline !important;
    padding-right: 7px;
}

.badges p {
    display: inline !important;
}

.badges {
    display: block;
    text-align: center;
}

/*  ----------------
     5. Inline Math
    ----------------
*/
.inline-math {
    display: inline-block;
}

/*  --------------------
     6. Inline Mono Font
    --------------------
*/
.codemono code, .codemono pre, .codemono pre code {
    font-family: var(--txbk-code-font-family) !important;
}

.mdmono code, .mdmono pre, .mdmono pre code {
    font-family: var(--txbk-md-font-family) !important;
}
</style>

<div class="nomono">
   The notebook is using
    <a href="https://github.com/leriomaggio/notexbook-jupyter-theme" title="noTeXbook Theme">
        <b>no$\TeX$book</b></a> Jupyter Theme (release <code>2.0.1</code>).

    <br />
    <b>Theme Settings</b>:
    <ul style="margin-top: 0.2em">
        <li>Notebook: Computer Modern font; 16px; Line spread 1.4.</li>
        <li>Code Editor: <span class="codemono">
            <code>Fira Code</code> font; <code>14px</code>; Material Theme.
        </span></li>
        <li>Markdown Editor:<span class="mdmono">
            <code>Hack</code> font; <code>14px</code>; Material Theme.
        </span></li>
    </ul>

</div>

> *First things first:* **Thank you so much** for getting here (whatever is your `referral URL`)

Valerio 🤗

#

This notebook introduces the $\text{no}\TeX\text{book}$ Jupyter Notebooks theme.

In the next two sections, we will start with a _quick overview_ <del>spoiler</del> of the theme's main typesetting features, then we will dive into all of its very _nuts and bolts_, including _Editor Colour Themes_, _ad-hoc formattings_, monospace fonts, and much more.

## $\text{no}\TeX\text{book}$ shall be _thy name_

<span class="drop">W</span>hen I had to come up with a name for the theme, I aimed almost immediately at finding a single word that would convey the idea of integration of the Jupyter notebooks with $\LaTeX$ I had in mind. Indeed, **no$\TeX$book** seemed quite an obvious choice: this name is a unique [portmanteau](https://www.merriam-webster.com/dictionary/portmanteau)[1](#fn1) that blends together the words **noTe**<del>X</del>**book**, and <del>no</del>**TeXbook**, that is the original name of [Donald E. Knuth](https://en.wikipedia.org/wiki/Donald_Knuth)'s [book](http://www.ctex.org/documents/shredder/src/texbook.pdf) on $\TeX$.

That was the omen! _One!... Two!... Five!_ [2](#fn2 "Monthy Python and the Holy Grail")

> The $\text{no}\TeX\text{book}$ theme wishes to pay a tribute of gratitude to two of the technologies I do use and love the most as a researcher and a data scientist.

<span id="fn1"> **[1]**: `port·man·teau | \ pȯrt-ˈman-(ˌ)tō`</span>
<span id="fn2"> **[2]**: [The Holy Hand Granade](https://www.youtube.com/watch?v=xOrgLj9lOwk) -
    Monthy Python and the Holy Grail</span>

## $\text{no}\TeX\text{book}$ Theme in a Nutshell

- Notebook typesetting based on **Computer Modern** fonts;
    - **Code** editor uses <span class="codemono">`Fira Code`</span> font, with ligatures support;
    - **Markdown** editor uses <span class="mdmono">`Hack`</span> font (_slightly better for text
    writing, ed._);
- Colour themes with syntax highlighting for Code and Markdown editors
    - _easy_ to personalise and extend (via CSS variables)
- Highly customisable settings via IPython Magic arguments (`%texify?` to see all available options)
- **Complete** support for Jupyterlab **and** Jupyter Notebooks (version `2.0x`);
    - (**Extra**) Support for Google Colab Notebooks via [Stylus](https://en.wikipedia.org/wiki/Stylus_(browser_extension)) (Firefox & Chrome) browser extension;
- Special Output formatting for `stderr` and `pandas.DataFrame`;
- Extra `CSS` classes for additional LaTeX-ish formatting use cases (e.g. _footnotes_, _dropcap_).

**Moreover**, the theme also includes a few tweaks to the general Notebook/Jupyterlab UI: the colours of all the icons and Kernel status indicators uses the theme's main palette, and a special emphasising effects is applied on _active_ cell in either _command_ or _edit_ modes, as well as on multiple cells selections.

## Project Links

- 📦 **PyPi package**: [pypi.org/project/notexbook-theme/](https://pypi.org/project/notexbook-theme/)
- 🐍🎨 **Official GitHub Repo**: [github.com/leriomaggio/notexbook-jupyter-theme/](https://github.com/leriomaggio/notexbook-jupyter-theme/)
- 🚀 **Documentation and GitHub Page**: [leriomaggio.github.io/notexbook-jupyter-theme/](https://leriomaggio.github.io/notexbook-jupyter-theme/)

---

# The $\text{no}\TeX\text{book}$ Theme

<a name="toc"></a>
## Table of Contents

- [Colour Palette](#colours)
- [Fonts and Typeface](#fonts)
- [Markdown](#Markdown)
    - [Code Highlithing](#mdcode)
    - [Math](#Math)
    - [Extras](#Extras)
        - [Footnotes](#Footnotes)
        - [Drop Cap](#dropcap)
        - [Image Widths](#imgwidth)
        - [Badges](#badges)
        - [Inline Math](#inlinemath)
        - [Inline Mono](#inlinemono)

- [Code](#code)
    - [Code Editor](#material)
    - [Dataframe](#dataframe)
    - [Errors](#errors)

- [Extensions](#Extensions)
    - [JupyterLab](#jupyterlab)
    - [`custom.css` Jupyter theme](#customcss)
    - [Google Colaboratory](#colab)

- [Credits](#Credits)

---

<a name="colours"></a>
## Colour Palette

```python
import numpy as np
import cv2
import matplotlib as mpl
import matplotlib.pyplot as plt

# Matplotlib Configuration Params
%matplotlib inline
%config InlineBackend.figure_format = 'retina'

mpl.rcParams['figure.figsize'] = (18,1)
```

```python
# Color Palette
colours = {"red": "#d43133",
           "magenta" : "#D14187",
           "torquoise" : "#009489",
           "azure": "#00afde",
           "blue": "#2875d9",
           "light-grey": "#828282",
           "dark-grey": "#383838",
           "yellow": "#f9ab00",
           "orange": "#e8710a",
          }
```

```python
def hex2rgb(h: str):
    """helper to convert hex colours into RGB tuple"""
    h = h.lstrip('#')
    return tuple(int(h[i:i+2], 16) for i in (0, 2, 4))

# Create a black image
image = np.full((1024,1024,3), 255, np.uint8)

def show_palette(colours):
    n_cols = len(colours)
    fig = plt.figure()
    for i, (colour, hexcode) in enumerate(sorted(colours.items(), key=lambda e: hex2rgb(e[1]))):
        axis = fig.add_subplot(1,n_cols,i+1)
        rgb = hex2rgb(hexcode)
        cv2.circle(image, (512, 512), 512, (rgb[0], rgb[1], rgb[2]), -1)
        plt.title(colour, y=-0.5)
        plt.axis('off')
        plt.imshow(image);

show_palette(colours)
```

The theme main colour palette is based on these main `7` colours.

These colours can also be used in special formattings for **text colouring** using _ad-hoc_ `CSS` classes (all following the same naming rule): `.texbook-<COLOUR NAME>`

$\rightarrow$ <b class="texbook-turquoise"> Turquoise</b>;
<b class="texbook-azure">Azure</b>; <b class="texbook-blue">Blue</b>;
<b class="texbook-dark-grey">Dark Grey</b>; <b class="texbook-light-grey">Light Grey</b>;
<b class="texbook-pink">Magenta</b>; <b class="texbook-red">Red</b>;
<b class="texbook-orange">Orange</b>; <b class="texbook-yellow">Yellow</b> $\leftarrow$

[$\uparrow$ top](#toc)

---

<a name="fonts"></a>
## Fonts and Typeface

All the fonts used in the $\text{no}\TeX\text{book}$ theme typeface design are **open source**, freely available on public **font repositories** (e.g., [Google Fonts](https://fonts.google.com/),
[CDN Fonts](https://fonts.cdnfonts.com), [FontSquirrel](https://www.fontsquirrel.com/)), and released under the [OFL](https://opensource.org/licenses/OFL-1.1)
(**O**pen **F**ont **L**icense), and alike.
Original reference and download links are provided below.

**$\text{no}\TeX\text{book}$ typeface**

The main goal of the $\text{no}\TeX\text{book}$ theme is to allow Jupyter notebooks to render like a
$\LaTeX$-generated article. Therefore, the (**Markdown**) text rendering adopts the good ol'
[*Computer Modern*](https://en.wikipedia.org/wiki/Computer_Modern) font family for both
serif and `monospace` text (i.e. `CMUSerif` and `CMUTypewriter` fonts, respectively).

In **edit** mode, the [`Hack`](https://github.com/source-foundry/Hack) font is used for Markdown editor, whereas [`Fira Code`](https://github.com/tonsky/FiraCode) font is used
for code editor. The former looks slightly better for text writing (_imho_), being also based on the [`Bitstream Vera`](https://www.gnome.org/fonts/) and the
[`DejaVu`](https://dejavu-fonts.github.io/) fonts. `Fira Code` on the other hand has been
specifically designed for source code, combining a clean and elegant style with [**ligratures**](https://github.com/tonsky/FiraCode#whats-in-the-box) support[3](#ligfn).

<span id="ligfn" class="fn">**[3]**: Support for ligatures in the Markdown editor would be quite pointless, as the cell will be ultimately rendered in Computer Modern font.</span>

**Notebook UI**

The font used for everything else in the Notebook UI and look-and-feel (e.g. `header`, `navbar`,
`jupyter-server` home page (notebook list) uses the [`Roboto Slab`](https://fonts.google.com/specimen/Roboto+Slab) font.

**Font References and Links**

|Font                  | Format           | Reference        | License  | Download |
|:---------------------|:-----------------|:----------------:|:--------:|:--------:|
| `Computer Modern`    | OpenType (`otf`) |[tug.org](https://tug.org/FontCatalogue/computermodern/)| [SIL OFL](https://www.fontsquirrel.com/license/computer-modern "Computer Modern Family Font License")|[Link](https://www.checkmyworking.com/cm-web-fonts/Computer%20Modern.zip "Computer Modern Family Font Download")|
| `Hack`               | TrueType (`ttf`) |[Github](https://github.com/source-foundry/Hack)|[MIT](https://github.com/source-foundry/Hack/blob/master/LICENSE.md)|[Link](https://github.com/source-foundry/Hack/releases "Hack Font Releases")|
| `Fira Code`            | OpenType (`otf`) |[Github](https://github.com/tonsky/FiraCode)|[SIL OFT](https://github.com/tonsky/FiraCode/blob/master/LICENSE "Fira Code Font License")|[Link](https://github.com/tonsky/FiraCode/releases/ "Fira Code Font Releases")|
| `Roboto Slab`        | OpenType (`otf`) |[Google Fonts](https://fonts.google.com/specimen/Roboto+Slab)|[Apache License, v2.0](https://fonts.google.com/specimen/Roboto+Slab#license "Roboto Slab Font License")|[Link](https://fonts.google.com/download?family=Roboto%20Slab "Roboto Slab Font Download")|

[$\uparrow$ top](#toc)

---

## Markdown

(Miscellaneous of text formatting and emphasis - adapted from [Markdown Cheatsheet](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet)) - License: [CC-BY](https://creativecommons.org/licenses/by/3.0/)

Emphasis, aka italics, with *asterisks* or _underscores_.

Strong emphasis, aka bold, with **asterisks** or __underscores__.

Combined emphasis with **asterisks and _underscores_**, also for **`bold`** *`italic`* `mono`

```
Mono blocks are supported too.
```

Strikethrough uses two tildes, colored in <b class="texbook-red">red</b>: ~~Scratch this.~~

**Headers**

# Part   (`h1`)
## Chapter (`h2`)
### Section (`h3`)
#### Subsection (`h4`)
##### Subsubsection (`h5`)
###### Paragraph (`h6`)

**Lists**

- First item
- Second item
  - Third item
    - Another level

1. First ordered list item
2. Another item with `mono`
  * Unordered sub-list.
1. Actual numbers don't matter, just that it's a number
  1. Ordered sub-list
4. And another item.

**Tables**

| Tables        | Are           | Cool  |
| ------------- |:-------------:| -----:|
| col 3 is      | right-aligned | \$1600 |
| col 2 is      | centered      |   \$12 |
| zebra stripes | are neat      |    \$1 |

**Blockquotes and `Monospace Paragraphs`**

> Blockquotes are very handy in email to emulate reply text.
> This line is part of the same quote.

```
This paragraph will be using monospace font.
```

[$\uparrow$ top](#toc)

<a name="mdcode"></a>
### Code Highlighting

Special mention goes to code syntax highlighting support in Markdown cells: they will still be using the default `CMUTypewriter` monospace font,
but they will also share the **same** colour scheme used for **code** cells (more on this in the [Code Editor](#material) Section).

For example:

```Javascript
// Javascript Highlighting
var x = 3.14;    // A number with decimals
var y = 3;       // A number without decimals
```

```Python
# Python highlighting
import antigravity
from __future__ import barry_as_FLUFL  # PEP401
```

```shell
echo "Shell syntaxt highlighting"
```

[$\uparrow$ top](#toc)

### Math

Math and $LaTeX$ text style integration is supported (via `MathJax`) both in **inline** and **block** modes.

**Inline math**:  $ X^2 + 1 = 1 $ works fine.

**Math block**:

$$
X^2 + 1 = 1
$$

Some more Math examples taken from [Latex/Advanced Mathematics](https://en.wikibooks.org/wiki/LaTeX/Advanced_Mathematics):

$$
\begin{equation}
 f(x)=(x+a)(x+b)
\end{equation}
$$
$$
\begin{equation}
  L' = {L}{\sqrt{1-\frac{v^2}{c^2}}}
\end{equation}
$$

**Maxwell's equations:**
$$
\begin{equation}
 \left.\begin{aligned}
        B'&=-\partial \times E,\\
        E'&=\partial \times B - 4\pi j,
       \end{aligned}
 \right\}
 \qquad \text{Maxwell's equations}
\end{equation}
$$

**Factorials and Binomials:**
$$
\frac{n!}{k!(n-k)!} = \binom{n}{k}
$$

_fraction within a fraction_
$$
\frac{\frac{1}{x}+\frac{1}{y}}{y-z}
$$

**Limits**:
$$
\begin{equation}
  \lim_{a\to \infty} \tfrac{1}{a}
\end{equation}
$$

**Math formulas with comments**:

$$
[
 y = a + f(\underbrace{b x}_{
                    \ge 0 \text{ by assumption}})
   = a + f(\underbrace{b x}_{
          \ge 0 \text{ by assumption}})
]
$$

**`gather`**: Consecutive equations without alignment
$$
\begin{gather*}
a_0=\frac{1}{\pi}\int\limits_{-\pi}^{\pi}f(x)\,\mathrm{d}x\\[6pt]
\begin{split}
a_n=\frac{1}{\pi}\int\limits_{-\pi}^{\pi}f(x)\cos nx\,\mathrm{d}x=\\
=\frac{1}{\pi}\int\limits_{-\pi}^{\pi}x^2\cos nx\,\mathrm{d}x
\end{split}\\[6pt]
\begin{split}
b_n=\frac{1}{\pi}\int\limits_{-\pi}^{\pi}f(x)\sin nx\,\mathrm{d}x=\\
=\frac{1}{\pi}\int\limits_{-\pi}^{\pi}x^2\sin nx\,\mathrm{d}x
\end{split}\\[6pt]
\end{gather*}
$$

**`alignat`**: Allows control of the horizontal space between equations.
$$
\begin{alignat}{2}
 \sigma_1 &= x + y  &\quad \sigma_2 &= \frac{x}{y} \\
 \sigma_1' &= \frac{\partial x + y}{\partial x} & \sigma_2'
    &= \frac{\partial \frac{x}{y}}{\partial x}
\end{alignat}
$$

[$\uparrow$ top](#toc)

### Extras

In addition to standard Markdown integration, the $\text{no}\TeX\text{book}$ theme provides extra `CSS` classes to allow for additional $\LaTeX$-ish formatting, and extra typesetting for notebooks:

1. [Footnotes](#Footnotes)
2. [Drop Cap](#dropcap)
3. [Image Width](#imgwidth)
4. [Badges](#badges)
5. [Inline Math](#inlinemath)
6. [Inline Mono](#inlinemono)

#### 1. Footnotes

Any HTML link targeting a bookmark or an anchor including `fn` (as in _footnote_) in their name will be automatically interpreted as links to a footnote. For example:

```markdown
    [1](#fnlink)
```

The above link will be automatically rendered as superscript and within square-brackets[1](#fnlink)

To actually generate the footnote text, every `HTML` tag mapped to an `id` starting with `fn` (or alternatively using the `fn` class) will be automatically formatted as footnote text. Footnote symbol should be emphasised in bold:

```html
<span id="fnlink"><b>[1]:</b> This is an example of a footnote</span>
```

<span id="fnlink"><b>[1]:</b> This is an example of a footnote</span>

<a name="dropcap"></a>
### <span class="drop">2</span> Drop Cap

A special class to display a [**drop cap**](https://en.wiktionary.org/wiki/drop_cap) could not be missing in the $\text{no}\TeX\text{book}$ theme.

It is just required to use the `drop` `CSS` class:

```html
    <span class="drop">O</span>nce upone a time...
```

<span class="drop">O</span>nce upone a time...

### 3. Image Width
<a name="imgwidth"></a>

As default, the `max-width` of images (and SVG) is automatically capped at the `70%` to allow for a
proper rendering of large images, whilst avoiding any potential overflow.

Nonetheless, there may be cases in which it would be required to control the `max-width` parameter in order to enlarge or
shrink an image. Special `CSS` classes are available controlling the `max-width` attribute of displaying images.

**All this classes** share the same name prefix (i.e. **`.maxw`**) followed by the corresponding ma-width expressed as percentage value.
The list of available CSS Classes is:

```python
>>> [f"maxw{i}" for i in range(5, 101, 5)]
['maxw10', 'maxw15', 'maxw20', 'maxw25', 'maxw30', 'maxw35', 'maxw40', 'maxw45', 'maxw50',
 'maxw55', 'maxw60', 'maxw65', 'maxw70', 'maxw75', 'maxw80', 'maxw85', 'maxw90', 'maxw95',
 'maxw100']
```

**Examples**:

```html
<!-- max-width: 10% -->

```

```html
<!-- max-width: 35% -->

```

### 4. Badges
<a name="badges"></a>

The theme also defines special classes to include [badges](https://shields.io/).

This may turn out to be particularly useful in notebooks to include links to external services like [Google Colab](https://colab.research.google.com), [MyBinder](https://mybinder.org), or [NBViewer](https://nbviewer.jupyter.org),

In order to do so, the theme provides the `CSS` class **`.badges`** that can be used in a Markdown cell:

```html
<div class="badges"> ... </div>
```

Here is an example:

<div class="badges">

[]()

[]()

[]()
</div>

<a name="inlinemath"></a>
### 5. Inline Math

The `inline-math` `CSS` class forces to display `inline` Math blocks. This may be particularly useful in cases we do want to use the $\LaTeX$ Math-block environment to write equation, but we do not want to have it displayed in a separate paragraph:

$$
\sum_{i=1}^{N} x_i^2
$$

To do so, let's just wrap the equation with a `span` HTML tag with class **`.inline-math`**:

```html
<span class="inline-math">... </span>
```

This equation will be displayed **inline**:
<span class="inline-math">
$$
\sum_{i=1}^{N} x_i^2
$$
</span>

<a name="inlinemono"></a>
### 6. Inline Mono

The default `monospace` font used in Markdown Cell rendering is `CMUTypewriter`, that is the monospace font of the **Computer Modern Family**.
However, the $\text{no}\TeX\text{book}$ theme also utilises two additional monospace fonts (for Code and Markdown editors), and sometimes it may also be required to use any of these fonts in rendered text.

To do so, the theme provides two special `CSS` classes, namely **`.codemono`** and **`.mdmono`** that will serve exactly this purpose.

The example below demonstrates how to _force_ the rendering of the following inline mono using code editor font

```html
<span class="codemono">`Code Monospace Font` with Ligatures **support** `--> >= !=`</span>
```

<span class="codemono">`Code Monospace Font` with Ligatures **support** `--> >= !=`</span>

[$\uparrow$ top](#toc)

---

<a name="code"></a>
## Code Sample

Here is how Python code looks like in $\text{no}\TeX\text{book}$ theme.

The following code excerpt has been taken from the **PyTorch** code base
([source](https://github.com/pytorch/pytorch/blob/master/torch/utils/data/dataset.py#L4))

```python
class Dataset(object):
    r"""An abstract class representing a :class:`Dataset`.
    All datasets that represent a map from keys to data samples should subclass
    it. All subclasses should overwrite :meth:`__getitem__`, supporting fetching a
    data sample for a given key. Subclasses could also optionally overwrite
    :meth:`__len__`, which is expected to return the size of the dataset by many
    :class:`~torch.utils.data.Sampler` implementations and the default options
    of :class:`~torch.utils.data.DataLoader`.
    .. note::
      :class:`~torch.utils.data.DataLoader` by default constructs a index
      sampler that yields integral indices.  To make it work with a map-style
      dataset with non-integral indices/keys, a custom sampler must be provided.
    """

    def __getitem__(self, index):
        raise NotImplementedError

    def __add__(self, other):
        return ConcatDataset([self, other])

    # No `def __len__(self)` default?
    # See NOTE [ Lack of Default `__len__` in Python Abstract Base Classes ]
    # in pytorch/torch/utils/data/sampler.py
```

[$\uparrow$ top](#toc)

### Code Editor

The CSS style for code and markdown editor integrated in $\text{no}\TeX\text{book}$ adopts a strategy that aims at _flexibility_ and *extensibility*.

The main style file for code editors is `editors.css`. This file _imports_ each theme for both code and
markdown editors. The themes for the two editors are defined in two different files, to allow for
maxmimum flexibility in the choice of the colours schemes to adopt.

In each theme file, the base **colour** palette is defined, along with the mapping of each of these
colours to specific (editor) variables.
These variables are then used to define the CSS style rules.

In this way, it is very easy to change or try multiple themes, or even defining custom new ones.

The default colour scheme used for code and markdown editor is based on the
**Material Design Light** [Theme](https://github.com/JonaDuran/Material-Light-Theme/).
In addition, other editor themes are bundled with the $\text{no}\TeX\text{book}$ Jupyter theme, e.g. `GitHub Light` for code, `Typora` theme for markdown.

The base colour palettes for each of those themes are showed below.

<a name="material"></a>
### **(Code & Markdown)** Material Design Light Theme (`material`)

The **default** colour palette used for both Code and Markdown editors is inspired by the
Material Design [Light Theme](https://github.com/JonaDuran/Material-Light-Theme/).

The colour palette is declined on `12` colours, reported below:

```python
material_code_colours = {
    "light-white": "#FAFAFA",
    "black": "#212121",
    "dark-blue" : "#01579B11",
    "dark-blue-2": "#01579B22",
    "blue": "#1565C0",
    "green": "#2E7D32",
    "yellow": "#A8601A",
    "cyan": "#00838f",
    "magenta": "#9C00B0",
    "red": "#C0392B",
    "grey": "#9E9E9E",
    "light-blue": "#78909c"
}

show_palette(material_code_colours)
```

The **Markdown** editor uses only a subset of those colours. In particular:

```python
material_md_colours = {
    "black": "#212121",
    "dark-blue" : "#01579B11",
    "blue": "#1565C0",
    "yellow": "#A8601A",
    "red": "#C0392B",
    "grey": "#9E9E9E",
    "light-blue": "#78909c"
}

show_palette(material_md_colours)
```

### **(Code only)** GitHub Theme (`github`)

This theme builds on the **new** code editor theme available on **GitHub**.

```python
github_code_colours = {
    "white": "#fafafa",
    "red": "#d65b67",
    "orange": "#df7b41",
    "yellow": "#f5e17b",
    "blue": "#0259be",
    "dark-blue": "#053060",
    "black": "#24292e",
    "azure": "#c0d8f4",
    "grey": "#868c94",
    "light-grey": "#b3b4b6",
    "purple": "#724abd",
}

show_palette(github_code_colours)
```

### **(Code only)** GitHub Light Theme (`github-light`)

The **GitHub Light** theme is an _alternative_ theme inspired by the (previous) GitHub light theme.

**Reference**: [Github Syntax Highlighting](https://github.com/primer/github-syntax-light)

```python
github_code_colours = {
    "dark-grey": "#505050",
    "grey": "#b8b8b8",
    "light-grey": "#6a737d",
    "lighter-grey": "#e2e2e2",
    "antrax": "#24292e",
    "red": "#d73a49",
    "orange": "#e36209",
    "dark-orange": "#f14c00",
    "purple": "#6f42c1",
    "light-yellow": "#fff9eb",
    "yellow": "#ffea7f",
    "blue": "#005cc5",
    "dark-blue": "#032f62",
    "green": "#22863a"
}

show_palette(github_code_colours)
```

### **(Code only)** Crisp Light Theme (`crisp`)

The colour palette of the **Crisp Light** editor theme is inspired by the
Crisp light theme included in the **Rainglow** collection of VSCode Themes

**Reference**: https://github.com/rainglow/vscode/

```python
crisp_code_colours = {
    "lilac": "#c6a7c6",
    "black": "#221a22",
    "grey": "#b8b8b8",
    "yellow": "#fc9a0f",
    "dark-orange": "#fc6a0f",
    "purple": "#765478",
    "dark-purple": "#4f3c4f",
    "light-purple": "#99769b",
    "red": "#cf433e"
}

show_palette(crisp_code_colours)
```

### **(Markdown only)** Typora Theme (`typora`)

This theme is inspired by the default (markdown) source code visualiser
available built-in in [Typora](https://typora.io/)[\*](#fn_md)

<span id="fn_md" class="fn"><i>*</i>: Typora is definitely my default editor for Markdown!
    Highly recommended $\rightarrow$ [typora.io](http://typora.io)</span>

```python
typora_md_colours = {
    "pink": "#d14187",
    "dark-grey": "#383838",
    "darker-grey": "#333333",
    "taupe": "#a99f9f",
    "light-orange": "#be7716",
    "light-red": "#a34343",
    "grey-blue": "#48599b",
    "dark-bg": "#252a2f",
    "dirty-white": "#8d8e8f"
}

show_palette(typora_md_colours)
```

[$\uparrow$ top](#toc)

<a name="dataframe"></a>
### Dataframe

The look and feel of `dataframes` (tables) is slightly changed.

I've chosen a post-it note color for the table background so that dataframe output standsout, especially when scrolling through a long notebook.

```python
from sklearn.datasets import load_iris
import pandas as pd

iris = load_iris()
iris_df = pd.DataFrame(data= np.c_[iris['data'], iris['target']],
                       columns= iris['feature_names'] + ['target'])
iris_df.head()
```

<div>
<style scoped>
    .dataframe tbody tr th:only-of-type {
        vertical-align: middle;
    }

    .dataframe tbody tr th {
        vertical-align: top;
    }

    .dataframe thead th {
        text-align: right;
    }
</style>
<table border="1" class="dataframe">
  <thead>
    <tr style="text-align: right;">
      <th></th>
      <th>sepal length (cm)</th>
      <th>sepal width (cm)</th>
      <th>petal length (cm)</th>
      <th>petal width (cm)</th>
      <th>target</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>0</th>
      <td>5.1</td>
      <td>3.5</td>
      <td>1.4</td>
      <td>0.2</td>
      <td>0.0</td>
    </tr>
    <tr>
      <th>1</th>
      <td>4.9</td>
      <td>3.0</td>
      <td>1.4</td>
      <td>0.2</td>
      <td>0.0</td>
    </tr>
    <tr>
      <th>2</th>
      <td>4.7</td>
      <td>3.2</td>
      <td>1.3</td>
      <td>0.2</td>
      <td>0.0</td>
    </tr>
    <tr>
      <th>3</th>
      <td>4.6</td>
      <td>3.1</td>
      <td>1.5</td>
      <td>0.2</td>
      <td>0.0</td>
    </tr>
    <tr>
      <th>4</th>
      <td>5.0</td>
      <td>3.6</td>
      <td>1.4</td>
      <td>0.2</td>
      <td>0.0</td>
    </tr>
  </tbody>
</table>
</div>

<a name="errors"></a>
### Errors and Exceptions

```python
from wherever import non_existing_module
```

```python
from scipy import linalg
linalg.det(np.ones((3, 4)))
```

[$\uparrow$ top](#toc)

---

## Extensions

<a name="jupyterlab"></a>
### JupyterLab (and HTML export)

**Jupyter Lab** is **fully** supported!

Moreover: the latest versions of [`jupyter-nbconvert`](https://nbconvert.readthedocs.io/en/latest/) apply the `lab` template as [**default HTML**](https://nbconvert.readthedocs.io/en/latest/customizing.html?highlight=template#where-are-nbconvert-templates-installed) template for export. This generates a DOM structure which is compliant with Jupyter Lab.

Here is an example of this notebook exported with `lab` template $\Rightarrow$ [Jupyter Lab Light](./jupyter_lab_export.html)

<a name="customcss"></a>
### `custom.css` Jupyter theme

The $\text{no}\TeX\text{book}$ theme is **also** available as a **full-fledged** _custom_ Jupyter notebook theme (HTML/CSS).
This is useful in case one would prefer to enable the theme as **the** global custom default Jupyter theme.

The `noTeXbook` theme package is available for [download](https://github.com/leriomaggio/notexbook-jupyter-theme/releases),
along with its corresponding [documentation](https://github.com/leriomaggio/notexbook-jupyter-theme/blob/custom-css/README.md).

The documentation also contains details on the original CSS design, and instructions on how to define
your own CSS Editor Colour theme.

<a name="colab"></a>
### Google Colaboratory

The HTML of a Colaboratory notebook is nothing similar to the standard Jupyter notebook/lab HTML structure (so the `custom-css` cannot work). In addition, every single Colaboratory notebook cell generates a new `HTML iframe`, so making the `texify` IPython magic pretty much useless too.

Therefore, the *only* solution I could resort to was using the [Stylus](https://en.wikipedia.org/wiki/Stylus_(browser_extension)) browser extension.
Unfortunately this is not as customisable and portable as the IPython magic, but hey?! Better than nothing 🤓

All the instructions on how to install $\text{no}\TeX\text{book}$ for Google Colaboratory Notebooks are available [$\Rightarrow$ here](https://github.com/leriomaggio/notexbook-jupyter-theme/blob/texbook-colab/README.md#colab)) on the branch specifically dedicated to the `Colab` version of the theme.

Once you are done, try to open the sample notebook in Colab, and enjoy 🙌

[](https://colab.research.google.com/github/leriomaggio/notexbook-jupyter-theme/blob/master/docs/noTeXbook_Theme_Sample.ipynb)

[$\uparrow$ top](#toc)

---

## Credits

* The [`spinzero`](https://github.com/neilpanchal/spinzero-jupyter-theme) jupyter theme has been inspirational in the design of the early version of this theme;
* The idea of overlay of selected cells has been inspired from [this](https://gist.github.com/formigone/dbabdd4ae38ded54b6f028713ac78c8a) custom theme.
* Inspiration on the choice of Monospace fonts for code and markdown has come from this [article](https://fontsarena.com/blog/best-programming-fonts/)
* Original versions of colour themes for code and markdown editors:
	- [Material Design Light](https://github.com/JonaDuran/Material-Light-Theme/)
	- [GitHub Light](https://github.com/primer/github-syntax-light)
	- [Crisp Rainglow Collection](https://github.com/rainglow/vscode/)

### Useful Links

(Some links I found useful along the way):

- [Computer Modern on the Web](https://www.checkmyworking.com/cm-web-fonts/)
- [`setuptools`: Specify Dependencies](https://python-packaging.readthedocs.io/en/latest/dependencies.html)
- [How to Add Custom `setup.py` commands](https://jichu4n.com/posts/how-to-add-custom-build-steps-and-commands-to-setuppy/)
- [`pyproject.toml`](https://martin-thoma.com/pyproject-toml/)
- [What the heck is `pyproject.toml`](https://snarky.ca/what-the-heck-is-pyproject-toml/)
- [Jupyter Server Extension](https://jupyter-notebook.readthedocs.io/en/stable/examples/Notebook/Distributing%20Jupyter%20Extensions%20as%20Python%20Packages.html) (Particularly useful in earlier version of this project in which fonts where handled as local resources)

### Acknowledgments

Special thanks to [cdesio](https://github.com/cdesio), [ninadicara](https://github.com/ninadicara), and [alanderex](https://github.com/alanderex) for testing earlier versions of the theme!

[$\uparrow$ top](#toc)