/*NyteLabst Canvas CSS*/
/*https://raw.githubusercontent.com/UserStefDLT/NyteLabs/main/stylesheets/start.css

https://raw.githubusercontent.com/UserStefDLT/NyteLabs/main/stylesheets/labst.css

https://raw.githubusercontent.com/UserStefDLT/NyteLabs/main/stylesheets/canvas.css

https://raw.githubusercontent.com/UserStefDLT/NyteLabs/main/stylesheets/settings2.css

https://raw.githubusercontent.com/UserStefDLT/NyteLabs/main/stylesheets/end.css
*/


@import url('https://fonts.googleapis.com/css?family=Alegreya|Ubuntu|Satisfy&display=swap');
:root {
    --main-bg: hsla(0, 0%, 97%, 100%);
    --main-clr: hsla(210, 0%, 7%, 89%);

    --titleBG: hsla(210, 89%, 12%, 89%);
    --header-bg: hsla(210, 89%, 12%, 89%);
    
    /* my defaults. */
    --clr: var(--main-clr);
    --bg: var(--main-bg);

    /* Layout Control */
    --header-h: 40px;
    --content-h: calc(100vh - var(--header-h));

    /* Layout Control */
    --header-height: 48px;
    --main-margin: calc(5vh);
    --footer-height: 36px;
    --main-top: calc(var(--header-height) + (var(--main-margin) / 2));
    --main-offset: calc(var(--header-height) + var(--main-margin) + var(--footer-height));
    --main-height: calc(100vh - var(--main-offset));

    --main-bg: hsla(210, 0%, 5%, 100%);
    --main-clr: hsla(0, 0%, 89%, 100%);

    --w-scrollbar: 10px;
}
/* @media (prefers-color-scheme: dark) {
    :root{
        --main-bg: hsla(210, 0%, 5%, 100%);
        --main-clr: hsla(0, 0%, 89%, 100%);
    }
} */
/* :root {
    --header-h: 48px;
    --footer-h: 36px;
    --main-h: calc(100vh - var(--header-h) - var(--footer-h));
} */

/* 
 start
█▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀█
  ▄▀▀▌▐▀█▀▌ ▄█▄ ▐▀▀▀▌▐▀█▀▌ 
  ▀■▄   █  ▐▄▄▄▌▐▄■▀   █   
 ▐▄▄▀   █  ▐   ▌▐▀■▄▌  █   
█▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄█
*/

html {
    scroll-behavior: smooth;
    scroll-padding: 1rem;
}
body {
    background-color: var(--main-bg);
    color: var(--main-clr);
    font-family: 'Ubuntu', sans-serif;
    margin: 0;
}

/* ::-webkit-scrollbar { height: 0px; width: 0px; }
::-webkit-scrollbar-track { box-shadow: inset 0 0 6px rgba(200, 0, 0, 0.0); }
::-webkit-scrollbar-thumb { background-color: rgba(0, 180, 180, 0.0); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.7); } */

::-webkit-scrollbar { height: 0px; width: var(--w-scrollbar); }
::-webkit-scrollbar-track { box-shadow: inset 0 0 6px #369c; }
::-webkit-scrollbar-thumb { 
    background-color: #fffa; border-radius: 5px; 
    transition: background-color 200ms ease-in-out;
    box-shadow: 
    inset 2px 2px 4px #fffd,
    inset -2px -2px 4px #1357;
}
::-webkit-scrollbar-thumb:hover { background-color: #fffa; }


header{
    width: 100%;
    display: flex;
    box-shadow: 0px 4px 4px #0009;
    /* position: fixed;
    top: 0; left: 0; */
    /* background-color: var(--main-bg); */
}
.title {
    font-size: 24px;
    font-weight: 600;
    padding-left: 12px;
    width: max-content;
    display: flex;
    align-items: center;
    justify-content: center;
}
header > .title {
    width: max-content;
    /* min-width: 189px; */
    padding-left: 12px;
    
    display: flex;
    align-items: center;
    justify-content: center;

    font-size: min(9.5vw, 29px);
    font-size: 2.5rem;
    font-weight: normal;
    color: var(--main-clr);

    transition: padding 300ms ease-in-out;
}
header > h1.title {margin: 0;}
header > .subtitle {
    color: #fffa;
    padding: 0px 8px;
    width: max-content;
    margin: 4px;
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: right;
    transform: scaleY(1);
    transition: 
    transform 200ms ease-in-out 2000s,
    box-shadow 500ms ease-in-out 2200s; 
    user-select: none;
}


a:link { color: white; text-decoration: none;}
a:hover { text-decoration: underline; }
a:visited { color: white; }

@media (max-width: 540px){ 
    header{
        position: relative;
        height: max-content;
        /* height: 40px; */
    }
    .title {
        font-size: 24px;
        padding-left: 2px;
    }
    header > .title {
        min-width: 125px;
    }
    .subtitle,
    .welcome-msg {
        position: absolute;
        top: -100%;
    }
}

/* main > *, */
main {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
main {
    position: relative;
    min-height: 10vmin;
    border-radius: 5px;
    width: 95vw;
    margin: 3vmin auto;

    flex-direction: column;
    justify-content: flex-start;
    /* overflow: scroll; */
}

.shelf {
    margin-top: 1.5em;
    padding: 1em 0;

    position: relative;
    min-height: 1rem;
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: space-evenly;
    flex-direction: row;
    flex-wrap: wrap;

    box-shadow: 
    inset 0 -1px 1px #39f,
    inset 0 1px 1px #39f;
}
.shelf:not(:first-of-type){margin-top: 2.5rem;}
main .shelf-title {
    position: absolute;
    top: -1.5em;
    left: .5em;
    border-bottom: 1px solid #789;
    width: max-content;
    margin: 0;
}


/* shelf--heading for adding time stamps. */
main .shelf--heading {
    position: absolute;
    top: -1.25em;
    left: .5em;
    width: max-content;
    margin: 0;
}
main .shelf--heading .shelf--title {
    border-bottom: 0px solid transparent;
    text-decoration: underline;
}
main .shelf--heading time {
    color: #8888;
    text-decoration: none;
    font-size: 12px;
}
main .shelf--heading time::before {content: "(";}
main .shelf--heading time::after {content: ")";}


/* @media (max-width: 375px){ 
    .shelf {
        justify-content: flex-start;
    }
} */

/* 
 color
█▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀█
 ▐▀▀▀▌       ▐            
 ▐     ▐▀▀▀▌ ▐  ▐▀▀▀▌ ▐■▀ 
 ▐▄▄▄▌ ▐▄▄▄▌ ▐▄ ▐▄▄▄▌ ▐   
█▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄█
*/
:root {
    --c030: #f93; --c030s: #420;
    --c090: #9f3; --c090s: #240;
    --c150: #3f9; --c150s: #042;
    --c210: #39f; --c210s: #024;
    --c270: #93f; --c270s: #204;
    --c330: #f39; --c330s: #402;
}



: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;}


html {height: 100%; width: 100%;}
body {min-height: 100vh; min-width: 100vw;}
header {
    position: fixed;
    top: 0;
    z-index: 8;
    /* justify-content: end; */
    box-shadow: 0 0 0 transparent;
    backdrop-filter: blur(4px) brightness(0.5);
}
header .title {padding-right: 12px; user-select: none;}
.backLink {user-select: none;}
main, .shelf {position: static; margin: 0;}
[id*="canvas"] {
    position: absolute;
    inset: 0;
    top: 0; left: 0;
    background-color: #000;
    height: 100%; width: 100%;
    height: 100vh; width: 100vw;
}
.fixed-controllers {
    position: fixed;
    bottom: 0; left: 50%;
    transform: translateX(-50%);
    width: fit-content;
    display: flex;
    padding: .5rem;
    border-radius: .5rem .5rem 0 0;
    background: #0008;
}


.options {
    position: absolute;
    top: var(--header-height);
    left: 50%;
    transform: translateX(-50%) translateY(0%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    padding: .25rem;
    z-index: 3;

    left: 97.5vw;
    transform: translateX(-100%) translateY(0%);
    height: 26px;
    margin: 4px 0;
}

.toggleCheckboxLabel {
    --clr-outline: var(--bw9);
    --bgc-before: var(--bw2);
    --bgc-after: var(--bw3);
    --ttx-after: 0rem;
}
.toggleCheckboxLabel {
    position: relative;
    color: var(--bw99);
    padding: 0 1rem;
    transition:
        color 200ms ease-in-out,
        transform 200ms ease-in-out;
    user-select: none;
    margin-right: 2.25rem;
    cursor: pointer;
}
.toggleCheckboxLabel::before,
.toggleCheckboxLabel::after {
    content: '';
    position: absolute;
    top: 50%; left: 100%;
    transform: translateX(0%) translateY(-50%);
    color: #fff;
    outline: 2px outset var(--clr-outline);
    transition:
    outline 200ms ease-in-out,
    background-color 200ms ease-in-out,
    transform 200ms ease-in-out;
    cursor: pointer;
    user-select: none;
}
.toggleCheckboxLabel::before {
    height: 1rem;
    width: 2rem;
    border-radius: 5rem;
    outline-offset: 4px;
    background-color: var(--bgc-before);
}
.toggleCheckboxLabel::after {
    height: 1rem;
    width: 1rem;
    border-radius: 50%;
    transform: translateX(var(--ttx-after)) translateY(-50%);
    background-color: var(--bgc-after);
}

/* Toggle Changes */
body > input[type="checkbox"] {display: none;}
#toggleAnimation {display: none;}
#toggleAnimation:checked ~ .options .toggleCheckboxLabel[for="toggleAnimation"] {
    color: var(--bwe);
    --clr-outline: var(--bwc);
    --bgc-before: #063;
    --bgc-after: #0c6;
    --ttx-after: 1rem;
}

/* Use this template and change the ID of the Checkbox. */
#CheckboxID-02,
#CheckboxID-01 {display: none;}
#CheckboxID-02:checked ~ .options .toggleCheckboxLabel[for="CheckboxID-02"],
#CheckboxID-01:checked ~ .options .toggleCheckboxLabel[for="CheckboxID-01"] {
    color: var(--bwe);
    --clr-outline: var(--bwc);
    --bgc-before: #063;
    --bgc-after: #0c6;
    --ttx-after: 1rem;
}


/* ─ General Toggle Effects ─ */
#toggleLights:checked ~ .options .toggleCheckboxLabel[for="toggleLights"],
#toggleIso:checked ~ .options .toggleCheckboxLabel[for="toggleIso"],
#toggleOpacity:checked ~ .options .toggleCheckboxLabel[for="toggleOpacity"] {
    color: var(--bwe);
    --clr-outline: var(--bwc);
    --bgc-before: #063;
    --bgc-after: #0c6;
    --ttx-after: 1rem;
}

/* ─ Toggle Effects ─ */

/* Toggle-Opcacity */
#toggleOpacity:checked ~ main #display {opacity:.5;}
#toggleOpacity:checked ~ main * {--alp: .5;}

/* Toggle-Animation */
/* #toggleAnimation:checked ~ main .grid {
    animation: spin 3600ms ease-in-out infinite both;
    animation-name: spin;
    animation-duration: 3600ms;
    animation-timing-function: linear;
    animation-delay: 0ms;
    animation-iteration-count: infinite;
    animation-fill-mode: both;
    
    animation-delay: calc(30ms * var(--hue));
    animation-play-state: running;
} */

#toggleAnimation:not(:checked) ~ main *,
#toggleAnimation:not(:checked) ~ main *::before,
#toggleAnimation:not(:checked) ~ main *::after {
    animation-play-state: paused;
}

/* 
█▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀█
 ▐▀▀▀▌ ▐▄  ▌ ▐▀█▄  
 ▐■■   ▐▀█▄▌ ▐  █▌ 
 ▐▄▄▄▌ ▐  ▀▌ ▐▄█▀  
█▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄█
*/
/* End of Page */
.btmspace{
    height: 89px;
    width: 100%;
    user-select: none;
}
footer {
    min-height: 54px;
    min-height: 36px;
    /* width: 89vw; */
    box-sizing: border-box;
    padding: .5rem;
    color: hsla(210, 5%, 29%, 89%);
    user-select: none;
}
footer .my-name{
    position: fixed;
    bottom: .5rem;
    left: 1rem;
    user-select: none;
    color: hsla(210, 5%, 29%, 89%);
    bottom: 0px; left: 0px;
    padding: 9px;
}

.name-end{
    position: fixed;
    bottom: 0px;
    right: 0px;
    color: hsla(210, 89%, 29%, 5%);
    font-size: 29px;
    font-family: 'Satisfy', cursive;
    user-select: none;
    transform-origin: 50% 100%;
    transform: translateY(0px) scale(.89);
    transition: 
    transform 500ms ease-out,
    color 500ms ease-out;
}
.name-end:hover{
    color: hsla(210, 89%, 29%, 50%);
    transform: translateY(-5px) scale(1);
    transition: 
    transform 500ms ease-out 2000ms,
    color 1000ms ease-out 2000ms;
}

.name-end-2{
    position: fixed;
    bottom: 5px; right: 12px;
    color: hsla(210, 89%, 29%, 5%);
    text-shadow: 0rem 0rem 0rem hsla(210, 29%, 89%, 0);
    font-size: 29px;
    font-family: 'Satisfy', cursive;
    user-select: none;
    filter: brightness(2);
    transition: 
        color 800ms ease-out,
        text-shadow 800ms ease-out;
}
.name-end-2:hover{
    color: hsla(210, 89%, 29%, .5);
    text-shadow: -0.125rem -0.125rem 0rem #fff9;
    text-shadow: -0.125rem -0.125rem 0rem hsla(210, 29%, 89%, 1);
    transition: 
        color 800ms ease-out 2000ms,
        text-shadow 800ms ease-out 2000ms;
}

.hidden{
    display: none!important; 
    user-select: none;
}