@charset "UTF-8";
:root {
  --lang-Sass-logo:url("img/Sass-logo.svg");
  --lang-NodeJS-logo:url("img/node.js-logo.svg");
  --lang-CLI-logo:url("img/CLI-logo.svg");
  --lang-CSS-logo:url("img/ico/css.ico");
  --lang-HTML-logo:url("img/HTML-logo.svg");
  --code-font:Consolas, "Courier New", monospace;
}

html.theme-dark {
  --code-color:var(--body-background);
  --code-bg-color:var(--text);
  --code-box:0 0 1px 0 #eee;
  --color-active:#0bf;
  --color-glow:#f6d01a;
  /*#ffd34d*/
  --color-link:#ffbb00;
  --cla-color:#cdfd3b;
  --func-color:#ff55ff;
  --op-color:#fff;
  --kw-color:#4cf;
  --kw-font-weight:inherit;
  --num-color:#ffbb00;
  --str-color:#00f713;
}
html.theme-light {
  --code-color:var(--body-background);
  --code-bg-color:var(--text);
  --color-active:#f60;
  --color-glow:#0b4fe7;
  --color-link:#006699/*#a37908;*/;
  --cla-color:#8844ff;
  --func-color:#ff55ff;
  --op-color:#572a2a;
  --kw-color:#0400d8;
  --kw-font-weight:bold;
  --num-color:#eb4e14;
  --str-color:#338833;
}

body {
  background-color: var(--body-background);
  color: var(--text);
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 16px;
  line-height: 1.8em;
  margin: 0;
  padding: 0;
}

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-button {
  height: 0;
}

::-webkit-scrollbar-thumb {
  background-color: #888;
}

::-webkit-scrollbar-track-piece {
  background-color: rgba(var(--text), 0.2) rgba(var(--body-background), 0.1);
}

* {
  scrollbar-color: rgba(var(--text), 0.2) rgba(var(--body-background), 0.1);
  scrollbar-width: thin;
}

* {
  word-spacing: 100%;
  letter-spacing: 1px;
}

*:not(br):not(input):not(img):not(i.fa):not(i.fab):not(i.far):not(i.fas):empty {
  display: none;
}

html {
  scroll-behavior: auto;
}

header {
  z-index: 2;
}

a, a:hover, a:focus, a:active {
  color: var(--color-link);
  text-decoration: none;
}

main p a[href]::before,
main li a[href]::before {
  content: "";
}

main p a[href]::before,
main li a[href]::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  opacity: 0.5;
  padding-right: 0.25em;
}

/*ol,*/
ul {
  padding-left: 0;
}

main {
  /*width:800px;*/
  max-width: 98%;
  margin: 0 auto;
}

/* main {display:flex;flex-flow:row wrap;}

main > * {
	padding:10px;
	flex:1 100%;
} */
aside {
  font-size: 85%;
}

aside li {
  margin: 0.3em 0;
}

aside a, .links a {
  border-left: 0.3em solid #888;
  display: block;
  padding: 0.4em;
  text-decoration: none !important;
  vertical-align: middle;
}

aside a:not(:last-child),
.links a:not(:last-child) {
  margin: 0 0 0.5em 0;
}

aside a.active, .links a.active {
  border-color: var(--color-active);
  box-shadow: 0 0 0 1px var(--color-active);
  /*filter: invert(50%);*/
  color: var(--text);
}

aside a:hover, .links a:hover {
  border-color: var(--color-glow);
  /*background-color:#fff;*/
  box-shadow: 0 0 0 1px var(--color-glow);
  color: var(--color-glow);
}

/* @media all and (min-width:600px) {
aside {flex:1 0 0;}
} */
/* @media all and (min-width:800px) {
article {flex:3 0px;}
aside:first-of-type {order:1;}
article {order:2;}
aside:last-of-type {order:3;}
footer {order:4;}
}
body {padding:2em;} */
section:first-child {
  min-height: 100vh;
  width: 100%;
}

/*article ol:not(.breadcrumb):not(.carousel-navigation) > li::before{
	content:counters(item, ".") " ";
	counter-increment:item;
	margin-right:10px;
	font-size:16px;+
	background-color:#00a0ff;
	color:#fff;
	font-weight:300;
	padding:5px 3px;
	border-radius:3px;
	min-width:30px;
	display:block;
	float:left;
	text-align:center;
}*/
blockquote.tip::before {
  background-image: url(../img/tips/tip.png);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  zoom: 1;
}

.lvlB, .lvlI, .lvlA, .lvlE {
  position: relative;
}

.lvlB::before, .lvlI::before, .lvlA::before, .lvlE::before {
  float: right;
  position: absolute;
  right: 0;
  top: 0;
  padding: 5px;
  text-transform: uppercase;
  font-size: 70%;
  opacity: 0.5;
}

.lvlB::before {
  content: "Basic";
}

.lvlI::before {
  content: "Intermediate";
}

.lvlA::before {
  content: "Adavance";
}

.lvlE::before {
  content: "Expert";
}

blockquote {
  /*padding:20px;margin:20px auto;max-width:800px;width:50vw;*/
  /*background:-webkit-gradient(linear,left top,right top,from(rgba(218,27,96,.25)),to(rgba(255,138,0,.25)));
  background:linear-gradient(to right,rgba(218,27,96,.25),rgba(255,138,0,.25));*/
  /*border-bottom:1em solid #08f;
  border-top:1em solid #08f;*/
  /*border-bottom:1px solid #0004;
  border-radius:5em 5em 1em 1em;*/
  box-shadow: 0px 0px 0px 2px #888, 10px 10px 0px 0px #888;
  /*color:white;*/
  display: block;
  margin: 4em 2em;
  overflow: auto;
  padding: 4em 1em 1em;
  position: relative;
  /*text-shadow:1px 1px 1px black;*/
}

/*blockquote:not([class]){background: #eee;color:#222;text-shadow: 1px 1px 1px #fff;}*/
blockquote::before {
  content: "";
  color: #00dbff;
  display: block;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 5em;
  margin: 0 0.1em 0.5em;
  padding: 0 0.1em;
  text-align: center;
  text-shadow: 0 0 0 var(--text);
  vertical-align: top;
}

blockquote.hadith {
  color: #fff;
}

/*.hadith
{background-color:#060;padding:1em 1vw;color:#fff;letter-spacing:0.2vw;word-spacing:1vw;text-shadow:1px 1px 1px #000}
[data-hadith-book]{padding-bottom:2em;position:relative}*/
.hadith::after {
  content: attr(data-hadith-book) ":" attr(data-hadith-num);
  float: right;
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 5px;
  font-size: 70%;
  opacity: 0.5;
}

.info::before {
  content: "";
  color: yellowgreen;
}

.hadith::before {
  content: "ﷺ";
}

.hint::before {
  content: "";
}

/*\f0eb*/
.note::before {
  content: "";
  color: cornflowerblue;
}

.tip::before {
  content: "";
  color: #00cc66;
}

.warn::before {
  content: "";
}

.confuse::before {
  color: brown;
}

.formula::before {
  content: "•";
}

.at-prerfix::before {
  content: "@";
  opacity: 0.5;
}

/*.info{background:-webkit-gradient(linear,left top,right top,from(rgba(255,96,218,.50)),to(rgba(255,138,0,.25)))}
.hadith{background:-webkit-gradient(linear,left top,right top,from(rgba(0,128,0,1)),to(rgba(0,255,0,0.1)))}
.hint{background:-webkit-gradient(linear,left top,right top,from(rgba(27,96,218,.25)),to(rgba(255,138,0,.25)))}
.note{background:-webkit-gradient(linear,left top,right top,from(rgba(27,218,96,.25)),to(rgba(255,138,0,.25)))}
.tip{background:-webkit-gradient(linear,left top,right top,from(rgba(255,247,96,.25)),to(rgba(255,138,0,.25)))}
.warn{background:-webkit-gradient(linear,left top,right top,from(rgba(218,127,96,.25)),to(rgba(255,138,0,.25)))}
.formula{background:-webkit-gradient(linear,left top,right top,from(rgba(127,218,96,.25)),to(rgba(255,138,0,.25)));font-family:"Calibri";font-size:3em}
*/
code, samp, var {
  font-family: var(--code-font);
}

code {
  color: var(--code-color);
}

code:empty {
  display: none !important;
}

var {
  background-color: #fff;
  color: #e905d3;
  border-radius: 3px;
  font-style: normal;
  padding-left: 0.4em;
  padding-right: 0.4em;
}

code:not([data-lang]) {
  /*background:#ca8;color:#c90;*/
  padding-left: 5px;
  padding-right: 5px;
  text-shadow: none;
}

code[data-lang]::before,
article > samp::before {
  color: #000;
  border-bottom: 1px solid #888;
  content: attr(data-lang);
  display: block;
  /*float:left;*/
  font-size: 75%;
  opacity: 0.7;
}

code[data-lang]::after,
samp::after {
  float: right;
  font-size: 85%;
  opacity: 0.2;
}

.cla, .func, .kw, .num, .op, .str {
  background-color: inherit !important;
  /*box-shadow: 0 0 1px 1px #fff;*/
  font-family: "Courier New", Courier, monospace;
  font-size: 110%;
  letter-spacing: 2px;
  padding: 0 !important;
}

.cla {
  color: var(--cla-color) !important;
  font-weight: bold;
}

.func {
  color: var(--func-color) !important;
}

.kw {
  color: var(--kw-color) !important;
  font-weight: var(--kw-font-weight);
}

.num {
  color: var(--num-color) !important;
}

.op {
  box-shadow: 0 0 0 1px #888;
  color: var(--op-color) !important;
  padding-left: 0.4em !important;
  padding-right: 0.4em !important;
}

.str {
  color: var(--str-color) !important;
}

h1.kw, h2.kw, h3.kw, h4.kw, h5.kw, h6.kw {
  display: inline;
  /*font-size:inherit;*/
  font-weight: bold;
  text-decoration: inherit;
}

code::before[data-lang] {
  content: attr(data-lang);
}

article > samp::before {
  color: #bbb;
  content: "OUTPUT";
}

article > samp.browser-chrome::before {
  color: #bbb;
  content: "Chrome OUTPUT";
}

article > samp.browser-firefox::before {
  color: #bbb;
  content: "Firefox OUTPUT";
}

code[data-filename]::before,
code[data-filename]::after,
samp[data-filename]::before,
samp[data-filename]::after {
  content: attr(data-filename);
}

code[data-filename]::before,
samp ::before {
  border-bottom: 1px solid #fff;
  width: 100%;
}

/*samp[data-lang="CLI"]::before{content:'Output'}*/
code[data-lang], article > samp {
  /*border-top:5px solid black;
  border-bottom:5px solid black;
  line-height:100%;*/
  background: url("") no-repeat scroll right top;
  background-size: 50px auto;
  border-left: 0.35em solid transparent;
  /*color:white;*/
  display: block;
  font-size: 100%;
  padding: 1em 10px;
  tab-size: 2;
  /*https://css-tricks.com/snippets/css/make-pre-text-wrap*/
  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+ */
  word-spacing: initial;
}

code[data-lang] {
  background-color: #fff;
  background-image: url("/img/" attr("data-lang") "-logo.svg");
  border-color: var(--text);
  box-shadow: 0px 0px 2px 0px var(--text);
  border-left-color: #080;
}

samp,
code {
  border-radius: 3px;
  font-size: 100%;
}

code {
  background-color: #fff;
  color: #000;
}

article > samp {
  background-color: #000;
  border-color: #005cff;
  color: #fff;
}

code[data-lang=Sass],
code[data-lang=scss] {
  background-image: var(--lang-Sass-logo);
}

code[data-lang=NodeJS] {
  background-image: var(--lang-NodeJS-logo);
}

samp[data-lang=CLI],
samp:not([data-lang]),
code[data-lang=CLI],
code[data-lang=DOS],
code[data-lang=MS-DOS] {
  background-image: var(--lang-CLI-logo);
  /*filter:invert(1);-webkit-filter:invert(1);color:black;*/
}

code[data-lang=css],
samp[data-lang=css] {
  background-image: var(--lang-CSS-logo);
}

samp[data-code-error] {
  background-color: #000;
  border-color: #f00;
  color: #fcc;
  filter: none;
}

code,
code * {
  font-weight: normal;
  word-spacing: 0px;
}

code.code-error,
samp.code-error {
  border-color: red;
}

code.code-warn,
samp.code-warn {
  border-color: #dd0;
}

p > samp::before {
  border: none;
  content: none;
}

p > samp {
  display: inline-block;
}

p.code-explain {
  margin-bottom: 3em;
}

p.code-explain::before {
  content: "Explaination";
  display: block;
  font-size: 85%;
  opacity: 0.5;
}

.practice-problem::before {
  content: "Practice Problem";
  display: block;
  font-size: 85%;
  opacity: 0.5;
}

*[data-credit]::after,
*[data-courtesy]::after {
  opacity: 0.5;
}

ol li img, ul li img {
  display: block;
}

/* ol.key-points::before{clear:both;content:"Key Points";display:block;margin-left:-2em;border-bottom:1px solid #888;font-size:150%;font-weight:bold} */
/* ol.key-points{padding-left:revert} */
footer {
  padding: 2em 1em 0 1em;
}

footer li a {
  background-color: transparent;
  border: 0.1em solid var(--text);
  color: var(--text);
  display: block;
  font-size: 1.2em;
  letter-spacing: 1px;
  margin: 1em;
  padding: 1em;
  text-decoration: none !important;
}

footer li a.active,
footer li a:hover {
  background: var(--background-color);
  border-color: var(--color-glow);
  color: var(--color-glow);
}

.site-title {
  color: var(--text);
  font-weight: bold;
  font-size: 150%;
  letter-spacing: 3px;
  text-transform: uppercase;
}

#topics {
  font-weight: bold;
}

.nav-topic {
  border-color: var(--text) !important;
  color: var(--text) !important;
}

.btn {
  box-shadow: none !important;
  color: var(--text) !important;
}

article {
  /*box-shadow:0 -1px 3px orange, 0 1px 3px orange;*/
  display: block;
  /*margin:2% 1%;padding:2% 1%;*/
}
article > code {
  margin: 1em 0;
}
article h1 {
  font-size: 2em;
  text-align: center;
}
article h2 {
  border-bottom: 1px solid #888;
  font-size: 1.5em;
  margin: 0 0 0.5em 0;
  padding-top: 38px;
  padding-bottom: 0.3em;
  position: sticky;
  top: 0;
  background-color: var(--body-background);
  z-index: 1;
}
article h3 {
  font-size: 1.2em;
  margin: 2em 0 0.5em 0;
}
article ol {
  margin-top: 1em;
  margin-bottom: 1em;
}
article p {
  margin: 1em auto;
}
article p.intro {
  margin: 2em 1em;
  padding: 2em 2em;
  border-left: 1em double var(--text);
  border-right: 1em double var(--text);
}
article > h1 > code, article h2 > code, article h3 > code, article h4 > code, article h5 > code, article h6 > code, article li > code, article p > code, article > blockquote > code {
  padding: 0 1vw;
  color: var(--body-background);
  background-color: var(--text);
}
article > h1 > samp, article h2 > samp, article h3 > samp, article h4 > samp, article h5 > samp, article h6 > samp, article li > samp, article p > samp, article > blockquote > samp {
  padding: 0 1vw;
  color: var(--body-background);
  background-color: var(--text);
}
article > samp {
  margin: 1em 0;
}
article ul {
  margin-top: 1em;
  margin-bottom: 1em;
  padding-left: 0;
  /*list-style-position: inside*/
  list-style: disclosure-closed;
  padding-left: 3em;
}

/*# sourceMappingURL=index.css.map */