:root {
  /* colors */
  --cl-border: #E7E7E7;
  --cl-foreground: rgba(0, 0, 0, 0.87);
  --cl-background: #fefefe;
  --cl-header-background: #f5f5f5;
  --cl-grey: rgba(107,114,128,0.87);
  --cl-note: #F2FFDD;
  --cl-link: rgba(0, 0, 0, 0.87);

  /* -- Code Block Colors -- */
  --cl-code-parasol-background:   #F8F8F2;
  --cl-code-parasol-foreground:   #004260;
  --cl-code-parasol-builtin:      #80A5E9;
  --cl-code-parasol-doc:          #9F9F9F;
  --cl-code-parasol-functions:    #7540CA;
  --cl-code-parasol-keyword:      #F73D8A;
  --cl-code-parasol-string:       #00B664;
  --cl-code-parasol-type:         #F73D8A;
  --cl-code-parasol-variables:    #008ED4;
  
  /* --- Theme Variables */
  --cl-code-background:           var(--cl-code-parasol-background);
  --cl-code-foreground:           var(--cl-code-parasol-foreground);
  --cl-code-builtin:              var(--cl-code-parasol-builtin);
  --cl-code-doc:                  var(--cl-code-parasol-doc);
  --cl-code-function-name:        var(--cl-code-parasol-functions);
  --cl-code-keyword:              var(--cl-code-parasol-keyword);
  --cl-code-string:               var(--cl-code-parasol-string);
  --cl-code-type:                 var(--cl-code-parasol-type);
  --cl-code-variable-name:        var(--cl-code-parasol-variables);
}

a { color: var(--cl-link); }
a:visited { color: var(--cl-link); }

.grey {
  color: var(--cl-grey);
}

.container {
  font-family: Verdana, Geneva, sans-serif;
  color: var(--cl-foreground);  background: var(--cl-background);
  display: flex; flex-flow: row wrap; flex-direction: row; 
  max-width: 1024px; margin: 10px auto 10px;
}

.header, .main, .sidebar, .footer {
  border: solid 1px var(--cl-border);
  padding: 1em;
}
.header, .footer { flex: 1 100%; background: var(--cl-header-background); }
.main { flex: 3 60%; min-width: 300px; text-align: justify;}
.sidebar { flex: 1 20%; min-width: 100px;}

.header nav {display: flex; flex-flow: row wrap; justify-content: space-between; align-items: center; }

.header nav ul { 
  margin: 0; 
  padding: 0; 
}
.header nav ul li { display: inline; padding: 10px }

.footer { display: flex; justify-content: center; align-items: center; }

/* -- Code Blocks -- */
.org-builtin          { color: var(--cl-code-builtin); }
.org-doc              { color: var(--cl-code-doc); }
.org-function-name    { color: var(--cl-code-function-name); }
.org-keyword          { color: var(--cl-code-keyword); }
.org-string           { color: var(--cl-code-string); }
.org-type             { color: var(--cl-code-type); }
.org-variable-name    { color: var(--cl-code-variable-name); }
.org-comment, .org-comment-delimiter { color: var(--cl-code-comment); }
.org-src-container    { color: var(--cl-code-foreground);
                        background: var(--cl-code-background);
                        border: 1px solid var(--cl-border-src);
                        padding: 0px 15px;
                        max-width: 100%;
                        overflow-y: scroll;
                        border-radius: 5px; }