/* a vaguely smoldering mess  */
@media all {
  *,
  *:before,
  *:after {
    cursor : default;
    resize : none;
    margin : 0;
    outline : none;
    border : none;
    box-sizing : border-box;
    padding : 0;
    vertical-align : top;
    text-decoration : none;
    text-align : left;
    font : inherit;
    font-family : Tw Cen MT Bold, Tw Cen MT Condensed, monospace;
    color : #000000;
    background-color : transparent;
  }
  
  a {
    cursor : pointer;
    color : blue;
  }
  b {
    font-weight : bold!important;
    font-size : inherit;
  }
  u {
    text-decoration : underline!important;
  }
  
  credit {
    cursor : help!important;
    font-size : 0.5em!important;
  }
  credit::before {
    content: "- "!important;
    /* content: "- Credit: "; */
  }
  credit::after {
    content: " -"!important;
  }
  
  html,
    body {
    position : absolute;
    top : 0;
    right : 0;
    bottom : 0;
    left : 0;
    overflow : hidden;
    background-color : rgb( 94 , 99 , 99 );
  }
  
  #navi,
    #main {
    position : relative;
    margin : 0 auto;
    width : 80%;
    max-width : 1400px;
    min-width : 1000px;
    }
  
  #navi {
    display : flex;
    flex-flow: row;
    top : 5px;
    border : 3px solid hsla( 0 , 0% , 0% , 0.5 );
    border-top-left-radius : 10px;
    border-top-right-radius : 10px;
    height : 60px;
    font : bold 20px monospace; /* 30 */
    background-color : #4F8DB6;
  }
  #navi * {
    color : #222222;
  }
  #navi > div {
    flex : 1;
    text-align : center;
    display: flex;
    flex-flow: column;
  }
  #navi > .title {
    flex : none;
    margin : 0 auto;
    width : 250px;
    
    font-size : 47px;
    font-weight : bold;
    
    color : hsl( 0 , 60% , 26% );
  }
  
  #navi .drop_down div {
    z-index : 100;
    flex : 1;
    display : none;
    position : relative;
    top : -56px; /* 55 */
    padding-top : 57px;
  }
  #navi .drop_down div:hover {
    display : block;
  }
  #navi .drop_down > div a:first-of-type {
    border-top : 3px solid hsla( 0 , 0% , 0% , 0.5 );
  }
  #navi .drop_down > div a {
    display : inline-block;
    border-bottom : 3px solid hsla( 0 , 0% , 0% , 0.5 );
    width : 100%;
    padding : 3px 10px;
    font-size : 0.925em;
    color : #000000;
    background-color : #4f8db6;
  }
  #navi .drop_down > div a:hover { 
    cursor : pointer;
    color : aliceblue;
  }
  #navi .main { /* List Trigger */
    display : inline-block;
    padding : 15px; /* dd list top offset */
    text-align : center;
    color : aliceblue;
  }
  #navi .drop_down {
    flex : 1;
    display : block;
  }
  #navi .drop_down:not( last-of-type ),
    #navi > .title {
    border-right: 1px dotted grey;
  }
  #navi .drop_down:active div {
    display : block;
  } 
  #navi .drop_down:active div:hover {
    display : block;
  }
  #navi .drop_down:active .main {
    display : inline-block;
    padding : 15px; /* dd list top offset */
    color : aliceblue;
  }


  #main {
    top : 10px;
    border : 3px solid #3c4549;
    border-bottom : 70px solid transparent;
    overflow : auto;
    padding : 6px 6px 14px 6px;
    height : 100%;
    font-weight : normal;
    font-size : 22px;
    background-color : #717983;
  }
  
  #main header {
    display : block;
    border-bottom : 1px dashed hsla( 0 , 0% , 0% , 0.25 );
    text-align : center;
    font-size : 50px;
    font-weight : bold;
  }
  
  div.colapsection.active {
    margin : 3px 0;
    border : 1px solid black;
    padding : 2px 8px;
  }
  div.colapsection * {
    font-family : Tw Cen MT Bold, Tw Cen MT Condensed, monospace;
    font-weight : normal;
    font-size : 22px;
  }
  div.colapsection > div {
    cursor : pointer;
    font-weight : bold;
    font-size : 25px;
    color : #d6ff00;
  }
  div.colapsection code {
    cursor : text;
    display : block;
    border : none;
    padding : 6px 6px 12px 6px;
    white-space : pre-wrap;
    /* white-space : pre-line; */
    /* font-family : monospace!important; */
    background-color : hsla( 208 , 100% , 97% , .5 );
  }
  div.colapsection .sectitle {
    font-weight : bold;
  }
  div.colapsection > section {
    padding : 2px 8px;
  }
  div.colapsection > section:not( .active ) {
    display : none;
  }
  div.colapsection + div.colapsection {
    margin-top : 9px;
  }

}