@import url('https://fonts.googleapis.com/css?family=Alegreya|Ubuntu|Satisfy&display=swap');
: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; */
    
    /* Sample of Variants */
    /* --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); */

    /* Main Custom Variables */

    /* 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;

}

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

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

main .shelf-title {
    position: absolute;
    top: -1.5em;
    left: .5em;
    border-bottom: 1px solid #789;
    width: max-content;
    margin: 0;
}


/* 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;}


/* 
█▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀█
 ▐▀▀▀▌ ▐▄  ▌ ▐▀█▄  
 ▐■■   ▐▀█▄▌ ▐  █▌ 
 ▐▄▄▄▌ ▐  ▀▌ ▐▄█▀  
█▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄█
*/
/* End of Page */
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;
}
.hidden {
    display: none!important; 
    user-select: none;
}