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