/* --------------------------
 * Blog core styles
 * -------------------------- */
 
body {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    background-color: var(--color-bg-main);
    margin: 0px;
    color: var(--color-text-main);
    height: 100%;
    /* text-rendering: optimizeLegibility; */

    --color-brand-main: #C036D3;
    --color-brand-accent: #7AE8A0;

    --color-horizontal-rule: #666666;

    --color-bg-main: #ffffff;
    --color-text-main: #303E4E;
    --color-text-notice: #293f58;

    --color-heading-text: #000000;
    --color-index-link: #3c3c3c;
    --color-site-title: #1e1e1e;
    --color-content: #444;
    /* --color-strong: #ffffff; */
    --color-watermark: #ff000034;
    --color-border-sidebar: #000;

    --color-sidebar-menu-item-active: #3d3d3d;
    --color-sidebar-menu-item: #000000;

    --color-blockquote-text: #888;

    --color-table-header-bg: steelblue;
    --color-table-header: white;

    --color-bg-code: #d2d2d2;
    --color-text-code: #343434;
    
    --color-bg-pre: #1D1D1A;
    --color-text-pre: #f8f8f2;

    /* --font-content-header: 'IBM Plex Sans', sans-serif; */
    --font-content-header: 'Source Sans Pro', sans-serif;
    --font-notice-bar: 'Source Sans Pro', sans-serif;
    --font-content: 'PT Serif', sans-serif;
    /* --font-index-link: 'IBM Plex Sans', sans-serif; */
    --font-index-link: 'Source Sans Pro', sans-serif;
    --font-sidebar-menu-item: 'Source Sans Pro', sans-serif;
    /* --font-header: 'IBM Plex Sans', sans-serif; */
    --font-header: 'Source Sans Pro', sans-serif;
    /* --font-title: 'IBM Plex Sans', sans-serif; */
    --font-site-title: 'Antonio', sans-serif;
    --font-index-date: 'Roboto', sans-serif;
    --font-code: 'Source Code Pro', monospace;

}
p {
    line-height: 24px;
}

img {
    max-width: 100%;
    height: auto;
}
.img-wrapper {
    /* All img tags are additionally wrapped by .img-wrapper so that we can:
       - Apply an absolute (in pixels) max-width to the wrapper, constraining the max
         size of all images to some max pixel size.
       - Apply a relative (100%)) max-width to the img, constraining the img to ALWAYS shrink
         as necessary to fit in the current window width.
    */
    max-width: 700px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-content-header);
    font-weight: 900;
    margin: 5px 0px;
    color: var(--color-heading-text);
}
h1 {
    font-size: 34px;
    line-height: 38px;
    padding-bottom: 3px;
    border-bottom: var(--color-horizontal-rule) solid 1px;
    margin-bottom: 18px;
}
h2 {
    font-size: 32px;
}
h3 {
    font-size: 29px;
}
h4 {
    font-size: 26px;
}
h5 {
    font-size: 24px;
}
h6 {
    font-size: 22px;
}

ul{
    list-style-type: disc;
}

th {
    background-color: var(--color-table-header-bg);
    color: var(--color-table-header);
}
th strong {
    color: var(--color-table-header);
}
table, th, td {
    border-collapse: collapse;
    border: 1px solid #444;
    padding: 2px 6px;
}
table {
    margin: 5px 0 0 0;
}
code {
    background: var(--color-bg-code);
    color: var(--color-text-code);
    white-space: pre-wrap;
    word-wrap: break-word;
    padding: 2px 5px;
    font-family: var(--font-code);
    font-size: 14px;
    line-height: 18px;
    border: none;
    border-radius: 4px;
}
pre {
    background-color: var(--color-bg-pre);
    box-shadow: -5px 5px 10px #888;
    border-radius: 12px;
    /* border: 1px #00FF7F solid; */
    /* border: 1px #00617e solid; */
    color: var(--color-text-pre);
    padding: 15px;
    overflow-x: auto;
}
pre code {
    background: var(--color-bg-pre);
    color: var(--color-text-pre);
    border-radius: none;
    padding: 0px;
}
a {
    color: #2980b9;
    text-decoration: none;
    cursor: pointer;
}
a:visited {
    color: #2980b9;
}
a:hover {
    color: #29adb9;
    text-decoration: underline;
}
.no-anchor-style,
.no-anchor-style:visited,
.no-anchor-style:hover,
.no-anchor-style:active {
    text-decoration: none;
    color: inherit;
}
strong {
    font-weight: 700;
}
hr {
    border-top: 1px solid var(--color-horizontal-rule);
}

/* ========================================================================================= */
.container-column {
    flex: 1 1;

    display: flex;
    flex-direction: column;
    justify-content: center;
}
.container-row {
    flex: 1 1;
    
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.container-root{
    min-height: 0px;
    width: 100%;
    height: 100%;
}
.sidebar {
    justify-content: flex-start;
    /* background-color: #ffd3a6; */
    min-width: 320px;
    max-width: 320px;
    border-right: 2px solid var(--color-border-sidebar);
}
#sidebar-menu-container{
    padding: 10px 10px 10px 30px;
    height: 100%;
    /* line-height: 30px; */
}
#sidebar-menu-container h1 {
    font-size: 16px;
    line-height: 16px;
    padding: 0;
    border-bottom: none;
    margin-bottom: 5px;
}
.sidebar-menu-indent {
    margin-left: 0px;
    /* margin-left: 15px; */
}
.sidebar-menu-item {
    color: var(--color-sidebar-menu-item);
    font-family: var(--font-sidebar-menu-item);
    font-weight: 500;
}
.sidebar-menu-item a {
    color: var(--color-sidebar-menu-item);
    text-decoration: none;
}
.sidebar-menu-item.active a  {
    color: var(--color-sidebar-menu-item-active);
    background-color: var(--color-brand-accent);
    border-radius: 4px;
    padding: 0 6px;
    margin-left: -6px;
}
.mobile-actions {
    /* display Toggles to flex under @media control */
    display: none;  
    flex-direction: column;
    align-items: center;
    justify-content: center;

    height: 30px;
    float: right;
}
.mobile-actions svg {
    width: 30px;
    display: block;
}

.container-content {
    flex: 1 1;
    
    /* padding: 20px 0 20px 20px; */
    padding: 0;
    /* background-color: #a6e9ff; */
    height: 100%;
    /* align-items: start; */
    justify-content: flex-start;
}
.container-content-scrollable {
    /* display: flex; */
    font-family: var(--font-content);
    font-size: 17.6px;
    padding: 20px 50px;
    overflow-y: auto;
}
.container-content-scrollable p {
    line-height: 27px;
}
.container-content-limiter {
    max-width: 560px;
}

#header-border {
    min-height: 8px;
    /* width: 100%; */
    /* background-color: #C036D3; */
    /* background-color: #7AE8A0; */
    background-color: var(--color-brand-accent);
    /* background-color: #691e73;; */
    /* background-color: #1e5873;; */
    /* border-top: 8px solid #7AE8A0; */
    /* border-top: 8px solid #C036D3; */
    border-top: 8px solid var(--color-brand-main);
    /* border-top: 8px solid #368cd3; */
    /* position: absolute; */
    /* left: 0px; */
    /* top: 0px; */
    z-index: 2;
    /* box-sizing: content-box;  */
}
#header-title {
    flex: 0 0;
    margin-top: 12px;
}
#header-title a {
    text-decoration: none;
}
#header-icon {
    flex: 1 0;
    max-width: 59px;
    padding: 4px;
    margin-left: 10px;
    /* background-color: #ff8000; */
}
#header-title-text {
    flex: 1 1;
    font-size: 36px;
    margin-right: 7px;
    color: var(--color-site-title);
    /* background-color: #00FFFF; */

    display: flex;
    justify-content: center;
    align-items: center;
    font-family: var(--font-site-title);
    font-weight: 700;
    white-space: nowrap;
    /* text-transform: uppercase; */
}
/* ========================================================================================= */

.root-container {
    height: 100vh;
    width: 100vw;
    display: flex;
    /* background-color: pink; */
}
blockquote {
    color: var(--color-blockquote-text);
    border-left: 8px solid var(--color-brand-main);
    padding: 0px 12px;
    margin: 0 0 0 10px;
}
.main-container {
    width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    
    /* -webkit-overflow-scrolling: touch; */
    /* padding: 5px 30px 5px 20px; */
    padding: 0px;
}
.content-area {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    align-content: flex-start;
}
.content-container {
    width: 100%;
    /* position: relative; */
    /* overflow-x: hidden; */
    /* overflow-y: auto; */
    /* margin-right: 30px; */
    padding: 10px 0px 10px var(--width-content-margin);
    color: var(--color-content);
    font-family: var(--font-content-text);
    /* This causes x-overflowing pre elements to behave when using #{heading} in url
    to navigate to a subheading */
    min-width: 0;
    /* background-color: palegreen; */
}
main ul {
    line-height: 24px;
    padding-left: 25px;
}
main li img {
    /* Force bulleted images to have their bullet at the top, rather than the bottom */
    vertical-align: top;
}


@supports (-webkit-touch-callout: none) {
    /* This selector detects iOS devices only */ 
    .main-container {
        /* iOS handles the overflow scrolling badly in this situation, so disable it*/
        overflow-x: visible;
        overflow-y: visible;
    }
}

.watermark-container{
    /* Fills the app window and floats above everything else.
     * Contains .watermark-left (placeholder) and .watermark-right.
     */
    display: flex;
    justify-content: center;
    align-items: stretch;
    flex-direction: row;

    position: absolute;
    top: 0;
    left: 0;

    height: 100vh;
    width: 100vw;
    z-index: 2;
    pointer-events: none;
}
.watermark-left{
    /* Placeholder to take up same width as .sidebar */

    /* as flex-child*/
    flex-shrink: 0;
    flex-grow: 0;

    width: var(--width-sidebar);

    /* background-color: #00ff0030; */
}
.watermark-right{
    /* Floats over the document .content-container.
     * Watermark text is centered inside this div.
     */

    /* as flex-parent */
    display: flex;
    justify-content: center;
    align-items: center;

    /* as flex-child*/
    flex-shrink: 1;
    flex-grow: 1;

    /* background-color: #00ffff30; */
}
.watermark-text{
    color: var(--color-watermark);
    font-size: 150px;
    font-weight: 900;
    transform: rotate(-45deg);
    pointer-events: none;
}

/* --------------------------
   notices
   -------------------------- */
.notices{
    margin: 30px 10px 30px 0px;
    padding: 10px;
    border-top-style: solid;
    border-top-width: 30px;
    color: var(--color-text-notice);
}
.notices.info {
    background-color: #e5f0ff;
    border-color: #648CE4; 
}
.notices.note {
    background-color: #FCEED8;
    border-color: #E6AC58; 
}
.notices.tip {
    background-color: #E7FBE2;
    border-color: #75BF5C; 
}
.notices.warning {
    background-color: #FBE6E5;
    border-color: #D86A65; 
}
.notices.disclaimer {
    background-color: #eef69d;
    border-color: #bfbf00; 
}
.notices .label{
    color:#FFF;
    font-weight: 800;
    margin-bottom: 15px;
    margin-top: -35px;
    font-family: var(--font-notice-bar);
    text-shadow: 1px 1px #0008;
}
.notices .label i{
    margin-right: 10px;
}

/* --------------------------
 * Index page
 * -------------------------- */
.index-link-container a {
    text-decoration: none;
    color: inherit;
}
.index-link {
    /* background-color: #ffe0c1; */
    /* border-radius: 6px; */
    /* margin-bottom: 2px; */
    padding: 0px 6px;
    font-weight: 900;
    font-family: var(--font-index-link);
    color: var(--color-index-link);
    font-size: 20px;
}
.date {
    color: #aaa;
    font-size: 12px;
    margin-left: 5px;
    font-weight: 300;
    font-family: var(--font-index-date);
    white-space: nowrap;
}

header {
    font-family: var(--font-header);
    font-weight: 200;
}
header strong {
    font-weight: 700;
    color: #666;
}


/* --------------------------
 * Pygments syntax highlighting, for fenced Code Blocks (monokai)
 * -------------------------- */
pre { line-height: 125%; }
td.linenos pre { color: #000000; background-color: #f0f0f0; padding-left: 5px; padding-right: 5px; }
span.linenos { color: #000000; background-color: #f0f0f0; padding-left: 5px; padding-right: 5px; }
td.linenos pre.special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
span.linenos.special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
.highlight .hll { background-color: #49483e }
/* .highlight { background: #272822; color: #f8f8f2 } */
.highlight .c { color: #75715e } /* Comment */
/* EPM: Removed this "error" style, because pygments is
*      adding the class err to fenced code blocks with no
*      language explicitly stated. Removing this keeps us
*      from having to explicitly use ```text to start all
*      non-code codeblocks
*/
/* .highlight .err { color: #960050; background-color: #1e0010 }  */
.highlight .k { color: #66d9ef } /* Keyword */
.highlight .l { color: #ae81ff } /* Literal */
.highlight .n { color: #f8f8f2 } /* Name */
.highlight .o { color: #f92672 } /* Operator */
.highlight .p { color: #f8f8f2 } /* Punctuation */
.highlight .ch { color: #75715e } /* Comment.Hashbang */
.highlight .cm { color: #75715e } /* Comment.Multiline */
.highlight .cp { color: #75715e } /* Comment.Preproc */
.highlight .cpf { color: #75715e } /* Comment.PreprocFile */
.highlight .c1 { color: #75715e } /* Comment.Single */
.highlight .cs { color: #75715e } /* Comment.Special */
.highlight .gd { color: #f92672 } /* Generic.Deleted */
.highlight .ge { font-style: italic } /* Generic.Emph */
.highlight .gi { color: #a6e22e } /* Generic.Inserted */
.highlight .go { color: #66d9ef } /* Generic.Output */
.highlight .gp { color: #f92672; font-weight: bold } /* Generic.Prompt */
.highlight .gs { font-weight: bold } /* Generic.Strong */
.highlight .gh { color: #A6E32D } /* Generic.Heading */
.highlight .gu { color: #A6E32D } /* Generic.Subheading */
.highlight .kc { color: #66d9ef } /* Keyword.Constant */
.highlight .kd { color: #66d9ef } /* Keyword.Declaration */
.highlight .kn { color: #f92672 } /* Keyword.Namespace */
.highlight .kp { color: #66d9ef } /* Keyword.Pseudo */
.highlight .kr { color: #66d9ef } /* Keyword.Reserved */
.highlight .kt { color: #66d9ef } /* Keyword.Type */
.highlight .ld { color: #e6db74 } /* Literal.Date */
.highlight .m { color: #ae81ff } /* Literal.Number */
.highlight .s { color: #e6db74 } /* Literal.String */
.highlight .na { color: #a6e22e } /* Name.Attribute */
.highlight .nb { color: #f8f8f2 } /* Name.Builtin */
.highlight .nc { color: #a6e22e } /* Name.Class */
.highlight .no { color: #66d9ef } /* Name.Constant */
.highlight .nd { color: #a6e22e } /* Name.Decorator */
.highlight .ni { color: #f8f8f2 } /* Name.Entity */
.highlight .ne { color: #a6e22e } /* Name.Exception */
.highlight .nf { color: #a6e22e } /* Name.Function */
.highlight .nl { color: #f8f8f2 } /* Name.Label */
.highlight .nn { color: #f8f8f2 } /* Name.Namespace */
.highlight .nx { color: #a6e22e } /* Name.Other */
.highlight .py { color: #f8f8f2 } /* Name.Property */
/* EPM: This gets used for json keys, so switch to the
*      more standard blue.
*/
.highlight .nt { color: #66d9ef } /* Name.Tag */
/* .highlight .nt { color: #f92672 } Name.Tag */
.highlight .nv { color: #f8f8f2 } /* Name.Variable */
.highlight .ow { color: #f92672 } /* Operator.Word */
.highlight .w { color: #f8f8f2 } /* Text.Whitespace */
.highlight .mb { color: #ae81ff } /* Literal.Number.Bin */
.highlight .mf { color: #ae81ff } /* Literal.Number.Float */
.highlight .mh { color: #ae81ff } /* Literal.Number.Hex */
.highlight .mi { color: #ae81ff } /* Literal.Number.Integer */
.highlight .mo { color: #ae81ff } /* Literal.Number.Oct */
.highlight .sa { color: #e6db74 } /* Literal.String.Affix */
.highlight .sb { color: #e6db74 } /* Literal.String.Backtick */
.highlight .sc { color: #e6db74 } /* Literal.String.Char */
.highlight .dl { color: #e6db74 } /* Literal.String.Delimiter */
.highlight .sd { color: #e6db74 } /* Literal.String.Doc */
.highlight .s2 { color: #e6db74 } /* Literal.String.Double */
.highlight .se { color: #ae81ff } /* Literal.String.Escape */
.highlight .sh { color: #e6db74 } /* Literal.String.Heredoc */
.highlight .si { color: #e6db74 } /* Literal.String.Interpol */
.highlight .sx { color: #e6db74 } /* Literal.String.Other */
.highlight .sr { color: #e6db74 } /* Literal.String.Regex */
.highlight .s1 { color: #e6db74 } /* Literal.String.Single */
.highlight .ss { color: #e6db74 } /* Literal.String.Symbol */
.highlight .bp { color: #f8f8f2 } /* Name.Builtin.Pseudo */
.highlight .fm { color: #a6e22e } /* Name.Function.Magic */
.highlight .vc { color: #f8f8f2 } /* Name.Variable.Class */
.highlight .vg { color: #f8f8f2 } /* Name.Variable.Global */
.highlight .vi { color: #f8f8f2 } /* Name.Variable.Instance */
.highlight .vm { color: #f8f8f2 } /* Name.Variable.Magic */
.highlight .il { color: #ae81ff } /* Literal.Number.Integer.Long */

/*------------------------------
 * Responsive
 *------------------------------
 /* tablet */
 @media (max-width: 768px) {
    .sidebar {
        flex-direction: row;
        justify-content: space-between;

		position: fixed;
		top: 0;
		bottom: auto;
		left: auto;
		width: 100%;
        max-width: none;
        min-width: none;
		min-height: 90px;
		border-right: none;
		background-color: white;
		z-index: 10;

		overflow-y: auto;
		overflow-x: hidden;
    }
    #sidebar-menu-container{
        display: none;
        position: fixed;
        width: 100%;
        top: 90px;
    }
    .container-content-scrollable{
        margin-top: 90px;
    }
    #header-border {
        width: 100%;
        position: absolute;
        left: 0px;
		top: 74px;
		/* border-top: black 1px solid; */
        border-top: none;
		min-height: 8px;
		background-color: var(--color-brand-main);
		border-bottom: 8px solid var(--color-brand-accent);

        width: 100%;
	}
    #header-title{
        justify-content: left;
        align-items: center;
        padding-left: 0;
        padding-bottom: 5px;
        margin-top: 0;
    }
    #header-title-content{
        margin-bottom: 8px;
    }
    #header-icon{
        min-width: 58px;
        margin-right: 10px;
    }
    #header-title-text {
        font-size: 32px;
        margin-bottom: 15px;
        /* min-width: 300px; */
        /* align-items: flex-start; */
        /* justify-content: left; */
    }
    .container-content-scrollable {
        padding: 20px 40px;
    }
    .mobile-actions {
		display: flex;
		margin-top: 25px;
        margin-right: 20px;
	}
    #menu-close {
        display: none;
    }
    h1 {
        font-size: 29px;
        line-height: 33px;
    }
    h2 {
        font-size: 27px;
    }
    h3 {
        font-size: 24px;
    }
    h4 {
        font-size: 21px;
    }
    h5 {
        font-size: 19px;
    }
    h6 {
        font-size: 17px;
    }
 }