@font-face {    font-family: "tomorrow";
                src: url(./tomorrow/Tomorrow-Regular.ttf);
           }

@font-face {
    font-family: "Bruno Ace";
    src: url(./bruno-ace/BrunoAce-Regular.ttf);
}
@font-face {
    font-family: "ProggyCleanTT CE mono";
    src: url("./proggy/ProggyCleanTT CE Nerd Font Complete Mono.ttf");
}
@font-face {
    font-family: "xanh mono";
    src: url("./xanh-mono/XanhMono-Regular.ttf");
}
@font-face {
    font-family: "xanh mono italic";
    src: url("./xanh-mono/XanhMono-Italic.ttf");
}
@font-face {
    font-family: "ProggyCleanTT CE";
    src: url("./proggy/ProggyCleanTT CE Nerd Font Complete.ttf");
}
@font-face {
    font-family: "ProggyCleanTT mono";
    src: url("./proggy/ProggyCleanTT Nerd Font Complete Mono.ttf");
}
@font-face {
    font-family: "ProggyCleanTT";
    src: url("./proggy/ProggyCleanTT Nerd Font Complete.ttf");
}

@font-face {
    font-family: "3270 mono";
    src: url("./3270/3270-Medium Nerd Font Complete Mono.otf")
}

@font-face {
    font-family: "3270";
    src: url("./3270/3270-Medium Nerd Font Complete.otf")
}

@font-face {
    font-family: "gruppo" ;
    src: url("./gruppo/Gruppo-Regular.ttf");
}
@font-face {
    font-family: "Audiowide";
    src: url("./audiowide/Audiowide.ttf");
}
@font-face {
    font-family: "syne";
    src: url("./syne/Syne[wght].ttf");
}
@font-face {
    font-family: "syncopate";
    src: url("./syncopate/Syncopate-Regular.ttf");
}

/*********************************************
 * PREDEFINITIONS 
 *********************************************/

h1 { display: none; }
:root {
    --fg1:   #fafafa;/* button */
    --fg2:   #fefefe;/**/
    --fg3:   #e7e5e4;/**/
    --bg1:   #000000; /* button*/
    --bg2:   #111111;/**/
    --bg3:   #222222; /* summary, */
    --mq:    #020202;/**/
    --toc:   #f1f1f1;/**/
    --mkr:   #404040;/**/
/*    --blobg: #76a9b817;*/
    --target:  red;/**/
    --tithx: #f1f1f1; /* TITLE, h1, h2, h3,  h4, h5, h6 */    
    --block-color: var(--fg1);;/**/
    --block-background: #76a9b817;/**/

    --dark-1: #010101;
    --dark-2: #101010;
    --dark-3: #212121;
    
    --light-1: #fefefe;
    --light-2: #cfcfcf;
    --light-3: #afafaf;
    
    /* summary,  block */
    --font-1: "3270 mono";

    /* title (h1 - h6)*/
    --font-2: "gruppo";
    /* pre p, */
    --font-3:  "3270 mono";
    /* span */
    --font-4: "3270 mono";
        
    --button-color: var(--light-1);
    --button-border: 2px solid var(--dark-3);
    --button-background: var(--dark-2);
    --button-size: 12px;
    
    --fsize-body: 14px;
    --fsize-body-mono: 14px;
    --fsize-body-pre: 14px;
    --fsize-body-summary: 14px;

    --body-font-size: 14px;

    --header-title-font-size:    100px;
    --header-subtitle-font-size: 18px;

    /* title x font size */
    --t1-fs: 24px;
    --t2-fs: 22px;
    --t3-fs: 20px;
    --t4-fs: 18px;
    --t5-fs: 16px;
    
    --
}
/*
:root {
    --fg1:   #000000;
    --fg2:   #111111;
    --fg3:   #222222;
    --bg1:   #fafafa;
    --bg2:   #fefefe;
    --bg3:   #e7e5e4;
    --mq:    #202020;
    --toc:   #010101;
    --mkr:   #404040;
    --blobg: #76a9b817;
    --targ:  red;
    --tithx: #202020;    
    --block-background: #c1c1c1;
    --font-body: var(--font-body);
}
*/

/* Text shadow trailing down left corner
    text
  text
text
*/

#text-shadow-lux {
    color: var(--bg1);
    background-color: var(--fg2);;
    letter-spacing: .15em;
    text-shadow: 1px -1px 0 #767676,
                 -1px 2px 1px #737272   , -2px 4px 1px #767474,
                 -3px 6px 1px #787777   , -4px 8px 1px #7b7a7a,
                 -5px 10px 1px #7f7d7d  , -6px 12px 1px #828181,
                 -7px 14px 1px #868585  , -8px 16  1px #8b8a89,
                 -9px 18px 1px #8f8e8d  , -10px 20px 1px #949392,
                 -11px 22px 1px #999897 , -12px 24px 1px #9e9c9c,
                 -13px 26px 1px #a3a1a1 , -14px 28px 1px #a8a6a6,
                 -15px 30px 1px #adabab , -16px 32px 1px #b2b1b0,
                 -17px 34px 1px #b7b6b5 , -18px 36px 1px #bcbbba,
                 -19px 38px 1px #c1bfbf , -20px 40px 1px #c6c4c4,
                 -21px 42px 1px #cbc9c8 , -22px 44px 1px #cfcdcd,
                 -23px 46px 1px #d4d2d1 , -24px 48px 1px #d8d6d5,
                 -25px 50px 1px #dbdad9 , -26px 52px 1px #dfdddc,
                 -27px 54px 1px #e2e0df , -28px 56px 1px #e4e3e2;
}

/* Add a ghosting effect to text */
#text_shadow_ghost {
    color: transparent;
    text-shadow: -4px 4px  hsla(0, 0%, 70%, .4),
                 -3px 3px  hsla(0, 0%, 60%, .2),
                 -2px 2px  hsla(0, 0%, 70%, .2),
                 -1px 1px  hsla(0, 0%, 70%, .2),
                 0px 0px  hsla(0, 0%, 50%, .5),
                 1px -1px hsla(0, 0%, 30%, .6),
                 2px -2px hsla(0, 0%, 30%, .7),
                 3px -3px hsla(0, 0%, 32%, .8),
                 4px -4px hsla(0, 0%, 30%, .9),
                 5px -5px hsla(0, 0%, 30%, 1.0);
}

/* ******************************************
   DEFAULT CONFIG
   ****************************************** */
#text-table-of-contents {
    position: relative;
    display: inline-flex;
    top: 50px;
    left: 550px;
}
#table-of-contents { display: none;
                     height: 0px;}
#table-of-contents h2, #table-of-contents h1{
    display: none;
}

details {  color: var(--bg3);}
::marker { color: var(--mkr);}

summary {
    font-size: calc(var(--fsize-body-summary) - 1px);
    font-family: var(--font-1);
}

summary strong font {
    color:       var(--bg3);
    font-family: var(--font-1);
    font-size:   var(--fsize-body-summary);
}

h2, h3, h4, h5, h6 {
    color:       var(--tithx);
    font-family: var(--font-2) !important;
    font-weight: thin;
}

button {
    background: var(--button-background);
    color:      var(--button-color);
    border-radius: 3px;
    font-size:  var(--button-size);
    border:     var(--button-border);
    
}
.red { color: red;}
:target {
    position: floating;
    top: 10px;
    color: var(--target);
    display: block;
}
.col3 {
    column-rule-style: none;
    align-content: baseline;
    column-count: 3;
}
.col2 {
    column-rule-style: none;
    align-content: baseline;
    column-count: 2;
}
.col4 {
    column-rule-style: none;
    align-content: baseline;
    column-count: 4;
}
.col5 {
    align-content: flex-start;    
    align-content: baseline;
    column-count: 5;
}

pre {    color: var(--fg-1) !important;}
pre p {
    background: none;
    padding: 0px;
    margin: 0px;
    color: var(--fg-1);

    font-family: var(--font-3);
    font-size:   var(--fsize-body-pre);
}

.block {
    font-family:       var(--font-1);
    padding: 15px;
    text-align: justify;
    overflow: visible;
    margin: 0px;
    font-weight: 200;
    color:             var(--block-color);
    background:        var(--block-background);
    font-size: 11px;
    border: 3px double var(--block-background);
    border-radius: 5px;
    width: max-content;
}

p {
    padding-top: 0px;
    padding-bottom: 0px;
    overflow: visible;
}

span {
    font-family: var(--font-4);
    font-size:   var(--fsize-body);
}
html {
    overflow:         visible;
    background-color: var(--bg1);
    color:            var(--fg1); /*#F1F1F1;*/
    text-rendering: optimizeLegibility;
    padding:        50px;
    word-spacing:   3;
    /* -webkit-text-stroke: thick; */
}

.main {
    float:    right;

/*    left:     -120px;*/
    position: relative;
    display:  block;
    overflow: visible;
    height:   fit-content;
}


.header {
    width:         1000px;/*calc(100% - 60px);*/
    z-index:       20;
    left:          auto;
    right:         auto;
    height:        100px;
    /*    filter: blur(3px);*/
    display:       block;
    background:    none;
    align-content: baseline;
    position:      relative;
    padding:       0px;
}

th {
    width: 100px;
}

body {
    font-family:  var(--font-4);
    font-size:    var(--body-font-size);
    word-spacing: 2.2;
    white-space:  preline;    
}
.main_content {
    margin:         -5em;
    overflow:       visible;
    tab-size:       4;
    
                      
/*    text-direction: justify;*/
    /* background-color: #040404 ; */
    color:          var(--fg1); /*#F1F1F1;*/
    padding-left:   0px;
}



a {
    -webkit-text-stroke: thin; 
    text-decoration:     none;
    color:               var(--fg2);
}

/* ******************************************
   FOR WIDESCREEN DEVICES
   ****************************************** */
@media screen and (min-width: 1500px) {
    
    #text-table-of-contents {
        position: relative;
        top: 40px;
        display: none;
        right: 420px ;
    }

    :target {
        position: floating;
        top: 10px;
        left: calc(50% + 600px);
    }
    .main_content {
        margin:         10px;
        position: relative;
    }

    .header {
        width:         100%;
    }
    .main {
        float:    right;
/*        max-width:    60em;*/
/*        left:     -120px;*/
        position: relative;

    }
}
.sidebar {
    z-index:   91;
    max-width: 200px;
    /*    top: 0px;
    left:      0px;*/
    overflow:  visible;
    height:    900px;
    float:     left;
    display:   table-column;
    /*    border-left: 3px solid #313236;*/
}

#subtitle_occu {
    font-family: var(--font-2);
    font-size:   18px;
    font-weight: 400;
    position:    absolute;
    top: -20px;
    left: 0px;
}

.right {
    position:    relative;
    float: right;   
}
.left {
    position:    relative;
    float: right;   
}
#microsection {
    font-family: var(--font-2);
    font-size:   12px;
    width: 40px;

    position: relative;
    font-weight: 800;
}

#title_expanded {
    display:     inline-block;
    bottom:      4px;
    z-index:     100;
    font-family: var(--font-2);
    font-size:   20px;
    font-weigt:  600;
    position:    relative;
    color:       var(--light-1);

}

#controls {
    position: absolute;
    top: -20px;
}
#table-of-contents * {
    color: var(--toc);
    
}

#sidebar-top  {  font-weight: bold;  }

#sidebar-bottom  {    }

#sidebar-marquee  {
    color:       var(--mq);
    font-weight: bold;
    background:  var(--fg1);
}


#title_occu a {
    text-decoration: none;
    color:           inherit;
}


#title_occu  {
    z-index:     100px;
    font-size:   130px;
    display:     inline-block;
    position:    relative;
    font-family: "gruppo";
    /* text-shadow: 0px -10px 30px blue; */
}

h1 {font-size: 2.0em;   }
h2 {font-size: 1.8em;   }
h3 {font-size: 1.7m;    }
h3 {font-size: 1.5em;   }
h4 {font-size: 1.125em; }
h5 {font-size: 1em;     }
h6 {font-size: 1em;     }

.spoiler       {
    color:            var(--mkr);
    background-color: var(--mkr);
}

.spoiler:hover {
    color: var(--bg3);
    background-color: white;
}

.quote {
    quotes: "\"" "\""; }
.cite  {
    quotes: "[ref" "]";
}
.hl {
    quotes: "[" "]";
    background-color: yellow;
    color:            var(--bg3);
    font-weight:      bold;
}

pre {    
    background:  none;
    border:      none;
    padding:     inherit;
    margin:      inherit;
    color:       inherit;
    font-family: inherit;
    font-size:   inherit;
    overflow:    visible;
}

/* DARK MODE */