/*

//javascript-2020.github.io/css/website.css

04-06-24

*/


/*
  //page:
*/

/*
  //vars:-
*/
        :root {
              --blue                      : rgba(0,191,255,1);
              
              --bg-opacity                : 1;
              
              --content-highlight         : rgba(0,191,255,1);
              
              --heading-border            : rgba(238,232,170,var(--bg-opacity));
              --heading-background        : rgba(239,247,250,var(--bg-opacity));
              
              --section-background        : rgba(255,255,234,var(--bg-opacity));
              --section-border            : lightgray;
              
              --section-title-color       : blue;
              
              --code-background           : rgba(237,237,237,var(--bg-opacity));
              --code-border               : rgba(0,191,255,1);
              
              --ftr-background            : rgba(0,103,165,1);
        }
        
/*
  //html:-
*/
        html {
              height                      : 100%;
        }
        
        body {
              font-family                 : arial;
              line-height                 : 24px;
              height                      : calc(100% - 16px);
              display                     : flex;
              flex-direction              : column;
        }
        
/*
  //hdr:-
*/
        .hdr {
              font-family                 : arial;
              position                    : relative;
              margin-top                  : 0;
              margin-bottom               : 20px;
              background                  : white;
              padding-bottom              : 10px;
              border-bottom               : 3px solid var(--blue);
        }
        
        .hdr-icon {
              position                    : relative;
              display                     : inline-block;
              text-align                  : center;
              background                  : whitesmoke;
              border-radius               : 5px;
              border                      : 1px solid lightgray;
              padding                     : 5px 3px 0px;
              cursor                      : pointer;
              margin-right                : 10px;
              min-width                   : 50px;
              z-index                     : 1;
        }
        
        .hdr-icon-img {
        }
        
        .hdr-icon-label {
              margin                      : 2px 0 0;
        }
        
        .hdr-title {
              text-align                  : center;
              position                    : absolute;
              left                        : 0;
              right                       : 0;
              top                         : -10px;
              margin                      : 0 auto;
              height                      : 80px;
        }
        
        .hdr-date {
              float                       : right;
        }
        
/*
  //background:-
*/
        #background {
              position                    : fixed;
              z-index                     : -1;
        }
        
/*
  //content:-
*/
        #content {
              position                    : fixed;
              z-index                     : 1;
              border                      : 1px solid var(--blue);
              border-radius               : 5px;
              background                  : white;
              display                     : none;
              overflow                    : auto;
        }
        
        #content-title {
              text-align                  : center;
              background                  : var(--blue);
              color                       : white;
        }
        
        #content-card {
              padding                     : 10px 0;
        }
        
        .content-heading {
              border                      : 2px solid transparent ;
              border-left                 : 5px solid var(--heading-border);
              background                  : var(--heading-background);
              padding                     : 2px 0 2px 5px;
              font-weight                 : bold;
              margin-left                 : 5px;
              margin-right                : 5px;
              margin-bottom               : 7px;
              cursor                      : pointer;
        }
        
        .content-sub {
              color                       : blue;
              font-weight                 : bold;
              margin-left                 : 10px;
              margin-right                : 10px;
              margin-bottom               : 3px;
              cursor                      : pointer;
              border                      : 2px solid transparent ;
        }
        
        .content-sub > div {
              border-bottom               : 1px solid lightgray;
        }
        
        .target {
              border                      : 3px solid transparent;
        }
        
/*
  //center:-
*/
        #scroll {
              overflow                    : auto;
              flex                        : 1;
        }
        
        #center {
              margin                      : auto;
              max-width                   : 1000px;
        }
        
/*
  //ftr:-
*/
        #ftr {
              background                  : var(--ftr-background);
              margin-top                  : 20px;
        }
        
/*
  //heading:-
*/
        .heading {
              border-left                 : 5px solid var(--heading-border);
              background                  : var(--heading-background);
              padding                     : 20px 20px;
              margin                      : 0 0 10px;
        }
        
        .margin {
              margin-top                  : 40px;
        }
        
/*
  //section:-
*/
        section {
              background                  : var(--section-background);
              padding                     : 10px;
              border                      : 1px solid var(--section-border);
        }
        
        .section-margin {
              height                      : 40px;
        }
        
/*
  //sub:-
*/
        .sub-title {
              font-weight                 : bold;
              font-size                   : 18px;
              color                       : blue;
              margin                      : 0;
        }
        
        .sub-section {
              margin                      : 10px 0 20px 40px;
        }
        
/*
  //hr:-
*/
        .hr {
              border-top                  : 1px solid var(--blue);
        }
        
/*
  //anchors:-
*/
        a {
              color                       : blue;
        }
        
        a:visited {
              color                       : blue;
        }
        
/*
  //kdb:-
*/
        kbd {
            	margin                      : 0px 0.1em;
            	padding                     : 0.1em 0.6em;
            	border-radius               : 3px;
            	border                      : 1px solid rgb(204, 204, 204);
            	color                       : rgb(51, 51, 51);
            	line-height                 : 1.4;
            	font-family                 : Arial,Helvetica,sans-serif;
            	font-size                   : 16px;
            	display                     : inline-block;
            	box-shadow                  : 0px 1px 0px rgba(0,0,0,0.2), inset 0px 0px 0px 2px #ffffff;
            	background-color            : rgb(247, 247, 247);
            	text-shadow                 : 0 1px 0 #fff;
        }
        
/*
  //code:-
*/
        code {
              background                  : var(--code-background);
              white-space                 : pre;
              font-weight                 : bold;
              font-size                   : 16px;
              position                    : relative;
        }
        
        .code-inline {
              background                  : var(--code-background);
              white-space                 : nowrap;
              font-weight                 : bold;
              font-size                   : 16px;
              position                    : relative;
              padding                     : 3px 7px;
              margin                      : 5px 10px;
        }
        
        .code {
              display                     : block;
              margin                      : 20px 0;
              padding                     : 0 20px;
              border                      : 1px solid var(--code-border);
              overflow                    : auto;
        }
        
        .code-copy {
              position                    : absolute;
              top                         : 5px;
              right                       : 5px;
              width                       : 20px;
              height                      : 20px;
              cursor                      : pointer;
        }
        
/*
  //mono:-
*/
        mono {
              font-family                 : mono;
              font-size                   : 16px;
        }
        
        
/*
  //page:-
*/