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

 - Author: Caio Rodrigues Soares Silva

 - Public Domain CSS Style for org-mode. Use at will!!

 - Description: CSS for long-org mode documents exported to html with
   long table of contents.  This style creates a scrollable table of
   contents at the left side.

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


/** Variables */

:root {
    /** =================== Table of contents settings ===== */
    --toc-width:    300px;        
    --toc-bgcolor:  #D8D8D8;

    /** ====================== Body Settings =================== */   
    /** Content length */
    --main-width:    800px;
    --header-color:  #1572AE;
    --max-image-width: 600px;
    --max-text-width: 90%;  /* Max paragraph length and text in bullet lists. */
    --linkcolor: #00FC00;
    /** Body background color - Usef #fff for white. */
    --bodyBgColor: #1d1f20; /* #152128; */

    /** ====== Mobile Layout Global Settings =================== */
    /** Font size used to make tables and code blocks (pre tag) fit in mobile screen. */
    --small-font-size: 8pt;


  /** ====== Table Settings ========= **/
  --table-header-bg-color: black;
  --table-bg-color:        #0b191f;
  --table-fg-color:        #fff;
  
}

html {
    font-size: 100%;
    color: #fff;
    /* background-color: #262c33; */
    height: 100%;  
    /* background-image: linear-gradient(#10416b, black); */
    /* background: linear-gradient(black, gray, white); */
    background-image:  url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAACISURBVFhH7dQxCsAgEABB32JzH/D/XzNoEQhCQDcYiy0k4HDhGjdFRM05D6fdl1L6909Pb0h//oUPC84M7/DHgrPDO/xecGV4h/cFV4d3eH/Fpy7XTjp5uXZvB6nbQep2kLodpG4HqdtB6naQuh2kbgep20HqdpC6HaRuB6nbQep2kLodZB71AiBP+Vm4FFdaAAAAAElFTkSuQmCC');
}

body{
    background-color:  var(--bodyBgColor); /* rgba(255,255,255,1.0); */
}

#content{
    
}


#table-of-contents{        
   background-color: var(--toc-bgcolor);
   color: var(--header-color);        
}

#table-of-contents ul {
    padding-left: 0px;
    padding-top:  5px;
    padding-bottom: 10px;
    list-style-type:     none;
    list-style-position: inside;
}

#table-of-contents li {
    padding-left: 10px;
    padding-top:   4px;
    font-size:    14px;
}


#table-of-contents  a {
    /* color:          rgba(0,0,0,1); */
    /* font-weight:    700; */
    color:            #383838; /* rgb(11, 83, 149); */
    position:       relative;
    text-overflow:  ellipsis;
    border-bottom:  none;
}

#table-of-contents a:hover {
    /* text-decoration:  underline; */
    border-bottom: 2px rgba(51,102,204,1.0)  dotted;
    font-weight:  bold;
}

#table-of-contents a:active{
    font-weight: bold;
}

#table-of-contents .tag{
    display: none;
}
    
h1 {

    text-align: center;
    color:       cyan;
    font-weight: bold;
    font-size:   200%;
}

ul#tabs, h2, h3, h4, h5 {
    font-family: "Trebuchet MS",Verdana,sans-serif;
}

h2, h3, h4, h5, h6 {
    color:  #699bad;
}

h2 {
    border-bottom: 4px solid #0075a2;
}


h3 {
    border-bottom: 1px solid #0075a2;
}


/** Hyperlink General Styles */
a {
    color:              var(--linkcolor);
    cursor:             pointer;
    text-decoration:    none;
    -webkit-transition: none 86ms ease-out;
    transition:         none 86ms ease-out;
}

a:hover {
    /* text-decoration: underline; */
    border-bottom: 2px var(--linkcolor) dotted;
}



.tag {
    background-color: #0e0707;
}



/* ======== Paragraph formatting =================== */

/** Align table caption to the left. */
caption {
    text-align: left;
    font-size: 10pt;
}

/** Align picture caption to the left. */
.figure p {
    text-align: left;
    font-size: 10pt;
}


ul {
    padding-left: 5px;
    padding-top:  0px;
    padding-bottom: 0px;
    list-style-position: inside;
}


li {
    padding-left: 5px;
    padding-top:   4px;
    font-size:    14px;
}


/* ====  Mathjax Latex  === */

.MathJax_MathML {
    font-size: "140%";
}

/* ------------------------------------- 
   -         Mobile Styles             -
   -------------------------------------
*/
@media only screen and (max-width: 400px) {


    #content {
        top:          50px;
        /* margin-top:   60px; */
        font-size:    1rem;
        width:        100%;      
        background-color:  var(--bodyBgColor);
        -webkit-text-size-adjust: none;

        height:      100%;
        overflow-y:  scroll;
        
        /* float:     bottom; */
        position:  absolute;

        display:   block;

        /* padding-bottom:60px; */
    }


    #postamble {
        /* top:          60px; */
        /* margin-top:   60px; */
        font-size:    1rem;
        width:        100%;      
        background-color:  var(--bodyBgColor);
        -webkit-text-size-adjust: none;

        height:      100%;
        /* margin: 0 auto -142px; */
        
        /* float:     bottom; */
        /* position:  fixed; */
        /* float: bottom; */
      
        position:  relative;
        bottom:   0;
        /* display:  table-footer-group; */
        display: none;
    }

    
    #table-of-contents {
        top:    0px;       
        width:  var(--toc-width);        
        height: 30px;
        width:  100%;        
        overflow-y: hidden;
        margin-left: 0;
        margin-right: 0;
        padding-bottom: 20px;
        padding-left: -10px;      
        
        float: left;
        position: fixed;

        /* bottom: 0; */
       
        /* background-color: rgba(125, 125, 125, 0.29); */       

        display: block;
        z-index: 9999;

        text-align: left;

        
    }

    #table-of-contents h2 {
        display: block:
        height:  30px;
        width:   60px;
        background: #EEEEEE;
        text-decoration: none;

        -webkit-touch-callout: none;
        -webkit-user-select: none; /* Disable selection/copy in UIWebView */
        -webkit-text-size-adjust: none;

        /* border: 1px solid #000; */
        /* use-select: none; */
        appearance: button;
        z-index: 9999;
        cursor: pointer;
    }

    #table-of-contents a {
        display: block;
        /* width:   100px; */
        height:  40px;
    }


    
    img {
        max-width: 100%;
        display:   block;
        margin:    0 auto;
        height:    auto;
    }

    ul {
        padding-left: 5px;
        padding-top:   10px;
        padding-bottom: 5px;
        margin-right: 10px;
        margin-left: -5px;
        list-style-position: inside;
    }


    li {
        margin-right: 10px;
        padding-left: 5px;
        padding-top:  5px;
        font-size:    10pt;
    }



    .ellipsis {
        text-overflow: ellipsis;

        /* Required for text-overflow to do anything */
        white-space: nowrap;
        overflow: hidden;
    }

    a {
        text-overflow: ellipsis;

        /* Required for text-overflow to do anything */
        white-space: nowrap;
        white-space: pre-wrap;
        /* overflow: hidden; */
        word-wrap: break-word;

    }

   p {
       text-align:  justify;
       line-height: 1.5;
       max-width:   100%;

       margin-right: 20px;

       -moz-osx-font-smoothing: grayscale;
       -webkit-font-smoothing: antialiased !important;
       -moz-font-smoothing: antialiased !important;
       text-rendering: optimizelegibility !important;
       letter-spacing: .03em;

       font-family: 'Merriweather', Georgia, 'Times New Roman', Times, serif;
   }

        
   #permalink_section
   {
       white-space: pre-wrap; /* css-3 */    
       white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
       white-space: -pre-wrap; /* Opera 4-6 */    
       white-space: -o-pre-wrap; /* Opera 7 */    
       word-wrap: break-word; /* Internet Explorer 5.5+ */
   }

    
   /* Mobile screen table */
    table {
        border-collapse: collapse;
        border-spacing:  0;
        width:           100%;
        margin-top:      20px;
        margin-bottom:   20px;

        background-color: var(--table-bg-color);

        font-size: var(--small-font-size);
    }

    th {
        background-color: var(--table-header-bg-color);
        color:            var(--table-fg-color);
        /* padding-top: 30px; */
        font-weight: bold;

        /* text-align: justified; */
    }

    th.left {
        text-align: left;
    }

    td,th {
        padding: 0;
        /* width: 100%; */
    }

    /* Code block of mobile screen  */ 
    pre {
        font-family: "Operator Mono SSm A", "Operator Mono SSm B", 'Source Code Pro', Menlo, Consolas, Monaco, monospace;
        font-size:   var(--small-font-size);
        
        white-space: pre-wrap;
        /* word-wrap: break-word; */
        text-align: justify;

        /* qfont-size: 10pt; */

        /* background-color:#292929; */
        background-color: #e4eadb;
        color:  black;
        filter: invert(90%); 

        display: block;
  
        margin-top: 20px;
        margin-bottom: 20px;

        max-width:  100%;

        border-radius: 16px;
        /* border: 1px solid #777; */
        box-sizing:border-box;
        /* text-shadow:0px 1px 2px rgba(0,0,0,0.4) */

        overflow-x: scroll;
    }


    blockquote {
        font-family: Georgia, serif;
        font-style: italic;
        line-height: 1.45;
        color: #383838;
        /* text-align: center; */

        margin: 0.25em 0;
        padding: 0.25em 10px;

        background: #f9f9f9;
        border-left: 10px solid #ccc;


        width: 80%;

        /* padding: 0.5em 10px; */
        quotes: "\201C""\201D""\2018""\2019";
    }

    blockquote:before {
      color:           #ccc;
      content:         open-quote;
      font-size:       4em;
      line-height:     0.1em;
      margin-right:    0.25em;
      vertical-align: -0.4em;
    }

    blockquote p {
      display: inline;
    }

    
}


/* ------------------------------------- 
   -         Tablet Styles             -
   -------------------------------------
*/
@media only screen and (min-width: 401px) and (max-width: 960px) {


    #content {
        top:          50px;
        margin-top:   60px;
        font-size:    1rem;
        width:        100%;      
        background-color:  var(--bodyBgColor);
        -webkit-text-size-adjust: none;

        height:      100%;
        overflow-y:  scroll;
        
        /* float:     bottom; */
        position:  absolute;
        display:   block;

        /* padding-bottom:60px; */
    }


    #postamble {
        /* top:          60px; */
        /* margin-top:   60px; */
        font-size:    1rem;
        width:        100%;      
        background-color:  var(--bodyBgColor);
        -webkit-text-size-adjust: none;

        height:      100%;
        /* margin: 0 auto -142px; */
        
        /* float:     bottom; */
        /* position:  fixed; */
        /* float: bottom; */
      
        position:  relative;
        bottom:   0;
        /* display:  table-footer-group; */
        display: none;
    }

    
    #table-of-contents {
        top:    0px;       
        width:  var(--toc-width);        
        height: 50px;
        width:  100%;        
        overflow-y: hidden;

        float: left;
        position: fixed;

        bottom: 0;
       
        /* background-color: rgba(125, 125, 125, 0.29); */       

        display: block;
        z-index: 9999;

        text-align: left;        
    }


    #table-of-contents h2 {
        display: block:
        height:  50px;
        width:   60px;
        background: #EEEEEE;
        text-decoration: none;

        -webkit-touch-callout: none;
        -webkit-user-select: none; /* Disable selection/copy in UIWebView */
        -webkit-text-size-adjust: none;

        /* border: 1px solid #000; */
        /* use-select: none; */
        appearance: button;
        z-index: 9999;
        cursor: pointer;
    }

    #table-of-contents a {
        display: block;
        /* width:   100px; */
        height:  40px;
    }

  
    img {
        max-width: 100%;
        height:    auto;
    }

    .ellipsis {
        text-overflow: ellipsis;

        /* Required for text-overflow to do anything */
        white-space: nowrap;
        overflow: hidden;
    }

    a {
        text-overflow: ellipsis;

        /* Required for text-overflow to do anything */
        white-space: nowrap;
        white-space: pre-wrap;
        /* overflow: hidden; */
        word-wrap: break-word;

    }

   p {
       text-align:  justify;
       line-height: 1.5;
       max-width:   100%;

       -moz-osx-font-smoothing: grayscale;
       -webkit-font-smoothing: antialiased !important;
       -moz-font-smoothing: antialiased !important;
       text-rendering: optimizelegibility !important;
       letter-spacing: .03em;

       font-family: 'Merriweather', Georgia, 'Times New Roman', Times, serif;
   }

    
    
   #permalink_section
   {
       white-space: pre-wrap; /* css-3 */    
       white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
       white-space: -pre-wrap; /* Opera 4-6 */    
       white-space: -o-pre-wrap; /* Opera 7 */    
       word-wrap: break-word; /* Internet Explorer 5.5+ */
   }
   
   /* Tablet screen table */ 
    table {
        border-collapse: collapse;
        border-spacing:  0;
        width:           100%;
        margin-top:      20px;
        margin-bottom:   20px;

        background-color: var(--table-bg-color);

        font-size: var(--small-font-size);
    }

    th {
        background-color: var(--table-header-bg-color);
        color:            var(--table-fg-color);
        /* padding-top: 30px; */
        font-weight: bold;
        /* text-align: justified; */
    }

    th.left {
        text-align: left;
    }

    td,th {
        padding: 0;
        /* width: 100%; */
    }

    /* Code block for tablet-size screens */
    pre {
        font-family: "Operator Mono SSm A", "Operator Mono SSm B", 'Source Code Pro', Menlo, Consolas, Monaco, monospace;
        font-size:   var(--small-font-size);
        
        white-space: pre-wrap;
        /* word-wrap: break-word; */
        text-align: justify;

        /* qfont-size: 10pt; */

        /* background-color:#292929; */
        background-color: #e4eadb;
        color: black; 
        filter: invert(90%); 

        display: block;
  
        margin-top: 20px;
        margin-bottom: 20px;

        max-width:  100%;

        border-radius: 16px;
        /* border: 1px solid #777; */
        box-sizing:border-box;
        /* text-shadow:0px 1px 2px rgba(0,0,0,0.4) */

        overflow-x: scroll;
    }


    blockquote {
        font-family: Georgia, serif;
        font-style: italic;
        line-height: 1.45;
        color: #383838;
        /* text-align: center; */

        margin: 0.25em 0;
        padding: 0.25em 10px;

        background: #f9f9f9;
        border-left: 10px solid #ccc;


        width: 80%;

        /* padding: 0.5em 10px; */
        quotes: "\201C""\201D""\2018""\2019";
    }

    blockquote:before {
      color:           #ccc;
      content:         open-quote;
      font-size:       4em;
      line-height:     0.1em;
      margin-right:    0.25em;
      vertical-align: -0.4em;
    }

    blockquote p {
      display: inline;
    }


}


/* ------------------------------------- 
   -         Desktop Styles            -
   -------------------------------------
*/
@media only screen and (min-width: 961px) {

   
    body {

        position:  absolute;
        margin-top:     50px;
        /* float: right; */
        left:  300px;

        border-radius:  20px;

        font:           16px/1.385 arial,helvetica,clean,sans-serif;
        text-rendering: optimizeLegibility;

        width:            var(--main-width);
        margin-left:     30px;
        /* margin-right:    200px; */
        padding-left:    20px;
        padding-right:   50px;
        /* overflow-x:       scroll; */
      
        /* z-index:          9999; */
    }

  
    #table-of-contents {
        top:    0px;
        left:   0px;
        width:  var(--toc-width);        
        height: 100%;
        overflow-y: scroll;

        
        float: left;
        position: fixed;

        bottom: 0;
       
        /* background-color: rgba(125, 125, 125, 0.29); */       

        display: block;
        z-index: 9999;

        /** Initially hide navigation bar*/
        display: block;

        text-align: left;

        font-family: "Segoe UI", Segoe, Calibri, "Nimbus Sans L", "Ubuntu", Tahoma, Arial, Helvetica, Verdana, sans-serif;
    }

    #text-table-of-contents {
        display: block;
    }

    img{
        max-width:  100%;
        max-height: 500px;
    }


   p {
       text-align:  justify;
       line-height: 1.5;
       width:       var(--max-text-width);

       -moz-osx-font-smoothing: grayscale;
       -webkit-font-smoothing: antialiased !important;
       -moz-font-smoothing: antialiased !important;
       text-rendering: optimizelegibility !important;
       letter-spacing: .03em;

       font-family: 'Merriweather', Georgia, 'Times New Roman', Times, serif;
   }


    /* ======== Table ================================== */

   /* Desktop screen table */
   table {
       font-size: 10pt;
       border-collapse: collapse;
       border-spacing:  0;
       width:           100%;
       margin-top:      20px;
       margin-bottom:   20px;

       background-color: var(--table-bg-color);
    }

    th {
        background-color: var(--table-header-bg-color);
        color:            var(--table-fg-color);
        /* padding-top: 30px; */
        font-weight: bold;

        /* text-align: justified; */
    }

    th.left {
        text-align: left;
    }

    td,th {
        padding: 0;
        /* width: 100%; */
    }

   
    /* Code block of desktop screen */
    pre {
        font-family: "Operator Mono SSm A", "Operator Mono SSm B", 'Source Code Pro', Menlo, Consolas, Monaco, monospace;
        /* font-family: monospace,monospace; */
        font-size: 8pt;

        /* background-color:#292929; */
        background-color:  #e4eadb;
        color: black;
        filter: invert(90%);

        /* background: #333;    */

        display: block;

        /* color:#fff; */
        /* color:#555; */

        padding:2em 28px;
        margin-top: 20px;
        margin-bottom: 20px;

        width:  100%;
        /* float:right; */
        /* clear:right; */

        border-radius: 16px;
        /* border: 1px solid #777; */
        box-sizing:border-box;
        /* text-shadow:0px 1px 2px rgba(0,0,0,0.4) */

        max-height: 500px;
        
        /* white-space: pre-wrap; */
        overflow-x: auto;
        
    }

    pre.src{
        overflow-x: auto;
        overflow-y: auto;
    }


   blockquote {
       font-family: Georgia, serif;
       font-style: italic;
       line-height: 1.45;
       color: #383838;
       /* text-align: center; */

       /* margin: 0.25em 0; */

       background: #f9f9f9;
       border-left: 10px solid #ccc;

       /* margin: 1.5em 10px; */
       padding: 0.25em 40px;
       width: 80%;

       /* padding: 0.5em 10px; */
       quotes: "\201C""\201D""\2018""\2019";
   }

   blockquote:before {
     color:           #ccc;
     content:         open-quote;
     font-size:       4em;
     line-height:     0.1em;
     margin-right:    0.25em;
     vertical-align: -0.4em;
   }

   blockquote p {
     display: inline;
   }




} /*----- End of desktop specific design ---*/


/* ======= Code block style ======================= */


code {
    /* background-color: #dbdfe0; */
    /* border: 1px solid #DEDEDE; */
    /* color: #444444; */
    font-family: monospace;
    font-size:  10pt;
    margin: 0px 1px;
    padding: 0px 2px;
    overflow-x: scroll;
}

/* ======== Code block Syntax Highlight ======================= */



pre span.org-builtin                     {color:#006FE0;font-weight:bold;}
pre span.org-string                      {color:#008000;}
pre span.org-keyword                     {color:#0000FF;}
pre span.org-variable-name               {color:#BA36A5;}
pre span.org-function-name               {color:#006699;}
pre span.org-type                        {color:#6434A3;}
pre span.org-preprocessor                {color:#808080;font-weight:bold;}
pre span.org-constant                    {color:#D0372D;}
pre span.org-comment-delimiter           {color:#8D8D84;}
pre span.org-comment                     {color:darkgreen;font-style:italic}
pre span.org-outshine-level-1            {color:#8D8D84;font-style:italic}
pre span.org-outshine-level-2            {color:#8D8D84;font-style:italic}
pre span.org-outshine-level-3            {color:#8D8D84;font-style:italic}
pre span.org-outshine-level-4            {color:#8D8D84;font-style:italic}
pre span.org-outshine-level-5            {color:#8D8D84;font-style:italic}
pre span.org-outshine-level-6            {color:#8D8D84;font-style:italic}
pre span.org-outshine-level-7            {color:#8D8D84;font-style:italic}
pre span.org-outshine-level-8            {color:#8D8D84;font-style:italic}
pre span.org-outshine-level-9            {color:#8D8D84;font-style:italic}
pre span.org-rainbow-delimiters-depth-1  {color:#707183;}
pre span.org-rainbow-delimiters-depth-2  {color:#7388d6;}
pre span.org-rainbow-delimiters-depth-3  {color:#909183;}
pre span.org-rainbow-delimiters-depth-4  {color:#709870;}
pre span.org-rainbow-delimiters-depth-5  {color:#907373;}
pre span.org-rainbow-delimiters-depth-6  {color:#6276ba;}
pre span.org-rainbow-delimiters-depth-7  {color:#858580;}
pre span.org-rainbow-delimiters-depth-8  {color:#80a880;}
pre span.org-rainbow-delimiters-depth-9  {color:#887070;}
pre span.org-sh-quoted-exec              {color:#FF1493;}

/* pre { */
/*     filter: invert(80%); */
/* } */