:root {
/* [bw] Black and White */

    /* --bwt: transparent; */
    --bwt: #0000;
    --bw0: #000;
    --bw1: #111;
    --bw2: #222;
    --bw3: #333;
    --bw4: #444;
    --bw5: #555;
    --bw6: #666;
    --bw7: #777;
    --bw8: #888;
    --bw9: #999;
    --bwa: #aaa;
    --bwb: #bbb;
    --bwc: #ccc;
    --bwd: #ddd;
    --bwe: #eee;
    --bwf: #fff;
    
    --bw1c: #111c;
    --bwf9: #fff9;
    --bw9: #999;
    --bw99: #9999;
    --clr-t: transparent;


    /* Color Scheme: */
    --hue-1: 30;
    --hue-2: 90;
    --hue-3: 150;
    --hue-4: 210;
    --hue-5: 270;
    --hue-6: 330;

    --clr-1: #f93; --clr-1-mid: #963; --clr-1-dark: #630; --bgs-1: #9633;
    --clr-2: #9f3; --clr-2-mid: #693; --clr-2-dark: #360; --bgs-2: #6933;
    --clr-3: #3f9; --clr-3-mid: #396; --clr-3-dark: #063; --bgs-3: #3963;
    --clr-4: #39f; --clr-4-mid: #369; --clr-4-dark: #036; --bgs-4: #3693;
    --clr-5: #93f; --clr-5-mid: #639; --clr-5-dark: #306; --bgs-5: #6393;
    --clr-6: #f39; --clr-6-mid: #936; --clr-6-dark: #603; --bgs-6: #9363;
    --bgi-lg-1: linear-gradient(135deg, #f93, #630);
    --bgi-lg-2: linear-gradient(135deg, #9f3, #360);
    --bgi-lg-3: linear-gradient(135deg, #3f9, #063);
    --bgi-lg-4: linear-gradient(135deg, #39f, #036);
    --bgi-lg-5: linear-gradient(135deg, #93f, #306);
    --bgi-lg-6: linear-gradient(135deg, #f39, #603);

    --bgs-1-lowest: #9631;
    --bgs-2-lowest: #6931;
    --bgs-3-lowest: #3961;
    --bgs-4-lowest: #3691;
    --bgs-5-lowest: #6391;
    --bgs-6-lowest: #9361;
    
    --clr-6-high: #f6c; --clr-6-high: hsl(320, 100%, 70%);
    --clr-6: #f39;      --clr-6: hsl(330, 100%, 60%);
    --clr-6-high: #c06; --clr-6-high: hsl(330, 100%, 40%);
    --clr-6-mid: #936;  --clr-6-mid: hsl(330, 50%, 40%); 
    --clr-6-dark: #603; --clr-6-dark: hsl(330, 100%, 20%);
    --clr-6-dark: #513; --clr-6-dark: hsl(330, 67%, 20%);
    --bgs-6-shw: #9363; --bgs-6-shw: hsla(330, 50%, 40%, 0.2);

}

header > .backLink ~ .title { padding-left: 0; }
a.backLink {
    margin-right: 0rem;
    transition: 
    margin 200ms ease-in-out,
    color 200ms ease-in-out;
}
a.backLink:focus,
a.backLink:hover { text-decoration: none; color: #fff; margin-right: .75rem; }
.backBtn {
    height: 3rem; width: 3rem;
    /* background-color: #39f; */
    position: relative;
    top: 0; left: 0;

    display: flex;
    align-items: center;
    justify-content: flex-end;

    border-radius: .25rem;
    font-size: 12px;

    cursor: pointer;
    color: #fff0;
    box-shadow: 0rem 0rem 0rem 0rem #0000;
    transition: 
    padding 200ms ease-in-out,
    color 200ms ease-in-out,
    box-shadow 300ms ease-in-out,
    transform 300ms ease-in-out;
    z-index: 15;
}
a.backLink:focus .backBtn,
.backBtn:hover {
    color: #fff;
    padding-right: .5rem;
    box-shadow: 0rem 0rem .5rem .125rem #fff8;
}
.backBtn::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    height: 1rem; width: 1rem;
    box-shadow: -.125rem -.125rem 0rem 0rem #fff8;
    transform: translateX(0%) translateY(-50%) rotate(-45deg);
    transition: 
    box-shadow 300ms ease-in-out,
    transform 300ms ease-in-out;
}
a.backLink:focus .backBtn::before,
.backBtn:hover::before {
    box-shadow: -.125rem -.125rem 0rem 0rem #ffff;
    transform: translateX(-1.4rem) translateY(-50%) rotate(-45deg) scale(.6);
}



/* Keyboard Key Design */
.kbd,
kbd {
    background: linear-gradient(180deg,#f4f4f4,#d5d5d5);
    background: linear-gradient(180deg,#eee,#ddd);
    background-color: #f4f4f4;
    border: 1px solid #d5d5d5;
    border: 0px solid #d5d5d5;
    border-bottom: 2px solid #aaa;
    border-radius: 6px;
    border-radius: 4px;
    /* box-shadow: 0 1px 2px 1px #d5d5d5; */
    font-family: consolas,"Liberation Mono",courier,monospace;
    font-size: .9rem;
    font-weight: 700;
    line-height: 1;
    margin: 3px;
    margin: .25rem;
    /* margin: .375rem; */
    padding: 4px 6px;
    white-space: nowrap;
    color: #111;
    min-height: 1rem;
    user-select: none;
}
.kbd-disable {
    background: linear-gradient(180deg,#bbb,#999);
    background: linear-gradient(180deg,#999,#777);
    color: #444;
    background: linear-gradient(180deg,#777,#555);
    color: #333;
    border: 1px solid transparent;
    border: 0px solid transparent;
    border-bottom: 2px solid transparent;
    border-bottom: 2px solid #444;
}



/* Iteration */
*:nth-of-type(1) {--i: 1;}
*:nth-of-type(2) {--i: 2;}
*:nth-of-type(3) {--i: 3;}
*:nth-of-type(4) {--i: 4;}
*:nth-of-type(5) {--i: 5;}
*:nth-of-type(6) {--i: 6;}
*:nth-of-type(7) {--i: 7;}
*:nth-of-type(8) {--i: 8;}
*:nth-of-type(9) {--i: 9;}
*:nth-of-type(10) {--i: 10;}
*:nth-of-type(11) {--i: 11;}
*:nth-of-type(12) {--i: 12;}
*:nth-of-type(13) {--i: 13;}
*:nth-of-type(14) {--i: 14;}
*:nth-of-type(15) {--i: 15;}
*:nth-of-type(16) {--i: 16;}
*:nth-of-type(17) {--i: 17;}
*:nth-of-type(18) {--i: 18;}
*:nth-of-type(19) {--i: 19;}
*:nth-of-type(20) {--i: 20;}
*:nth-of-type(21) {--i: 21;}
*:nth-of-type(22) {--i: 22;}
*:nth-of-type(23) {--i: 23;}
*:nth-of-type(24) {--i: 24;}
*:nth-of-type(25) {--i: 25;}
*:nth-of-type(26) {--i: 26;}
*:nth-of-type(27) {--i: 27;}
*:nth-of-type(28) {--i: 28;}
*:nth-of-type(29) {--i: 29;}
*:nth-of-type(30) {--i: 30;}
*:nth-of-type(31) {--i: 31;}
*:nth-of-type(32) {--i: 32;}
*:nth-of-type(33) {--i: 33;}
*:nth-of-type(34) {--i: 34;}
*:nth-of-type(35) {--i: 35;}
*:nth-of-type(36) {--i: 36;}
*:nth-of-type(37) {--i: 37;}
*:nth-of-type(38) {--i: 38;}
*:nth-of-type(39) {--i: 39;}
*:nth-of-type(40) {--i: 40;}
*:nth-of-type(41) {--i: 41;}
*:nth-of-type(42) {--i: 42;}
*:nth-of-type(43) {--i: 43;}
*:nth-of-type(44) {--i: 44;}
*:nth-of-type(45) {--i: 45;}
*:nth-of-type(46) {--i: 46;}
*:nth-of-type(47) {--i: 47;}
*:nth-of-type(48) {--i: 48;}
*:nth-of-type(49) {--i: 49;}
*:nth-of-type(50) {--i: 50;}
*:nth-of-type(51) {--i: 51;}
*:nth-of-type(52) {--i: 52;}
*:nth-of-type(53) {--i: 53;}
*:nth-of-type(54) {--i: 54;}
*:nth-of-type(55) {--i: 55;}
*:nth-of-type(56) {--i: 56;}
*:nth-of-type(57) {--i: 57;}
*:nth-of-type(58) {--i: 58;}
*:nth-of-type(59) {--i: 59;}
*:nth-of-type(60) {--i: 60;}
*:nth-of-type(61) {--i: 61;}
*:nth-of-type(62) {--i: 62;}
*:nth-of-type(63) {--i: 63;}
*:nth-of-type(64) {--i: 64;}
*:nth-of-type(65) {--i: 65;}
*:nth-of-type(66) {--i: 66;}
*:nth-of-type(67) {--i: 67;}
*:nth-of-type(68) {--i: 68;}
*:nth-of-type(69) {--i: 69;}
*:nth-of-type(70) {--i: 70;}
*:nth-of-type(71) {--i: 71;}
*:nth-of-type(72) {--i: 72;}
*:nth-of-type(73) {--i: 73;}
*:nth-of-type(74) {--i: 74;}
*:nth-of-type(75) {--i: 75;}
*:nth-of-type(76) {--i: 76;}
*:nth-of-type(77) {--i: 77;}
*:nth-of-type(78) {--i: 78;}
*:nth-of-type(79) {--i: 79;}
*:nth-of-type(80) {--i: 80;}
*:nth-of-type(81) {--i: 81;}
*:nth-of-type(82) {--i: 82;}
*:nth-of-type(83) {--i: 83;}
*:nth-of-type(84) {--i: 84;}
*:nth-of-type(85) {--i: 85;}
*:nth-of-type(86) {--i: 86;}
*:nth-of-type(87) {--i: 87;}
*:nth-of-type(88) {--i: 88;}
*:nth-of-type(89) {--i: 89;}
*:nth-of-type(90) {--i: 90;}
*:nth-of-type(91) {--i: 91;}
*:nth-of-type(92) {--i: 92;}
*:nth-of-type(93) {--i: 93;}
*:nth-of-type(94) {--i: 94;}
*:nth-of-type(95) {--i: 95;}
*:nth-of-type(96) {--i: 96;}
*:nth-of-type(97) {--i: 97;}
*:nth-of-type(98) {--i: 98;}
*:nth-of-type(99) {--i: 99;}
*:nth-of-type(100) {--i: 100;}