Aside.css

/*▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰
/* Aside - ITS theme
/* mod 19-05-21 -  vainille
/* <s class="aside-hide"></s>
/* <s class="aside-show"></s>
/* <s class="aside-in"></s>
mod 22-07-21 --> neumo style
/*▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰

/*-Comments/Asides-*/
/*Hide Aside and hover to reveal it*/

.aside-hide {
    /*background-color:var(--background-primary-alt);
    border-radius:5px;*/
    background-color: var(--background-primary);
    border-radius: 5rem;
    box-shadow: inset 3px 3px 6px var(--main-darken), inset -3px -3px 6px var(--main-lighten);
    clear: right;
    color: transparent;
    color: transparent;
    float: right;
    font-style: normal;
    font-weight: unset;
    height: 1.5em;
    margin-right: -1.8em;
    margin: .5em;
    overflow: hidden;
    position: relative;
    text-align: center;
    text-decoration: unset;
    width: 1.5em;
}

.aside-hide:before {
    border-radius: 5px;
    color: var(--text-accent); /*none*/
    content: "🗫 |";/*"🗨 */
    display: inline-block;
    font-size: 1em;
    font-style: normal;
    margin-top: -.2em;
    /* padding-left:.3em;
   padding-top:.1em;*/
    text-shadow: 0 0 0 var(--interactive-accent);
}

.aside-hide:hover {
    background-color: var(--background-primary);
    border-radius: 1rem;
    /*border-right:2px solid var(--interactive-accent);*/
    box-shadow: inset 6px 6px 12px var(--main-darken), inset -6px -6px 12px var(--main-lighten);
    color: unset;
    font-size: calc(var(--font-normal) - 1px);
    font-style: normal;
    height: unset;
    max-width: 40%;
    padding-top: .5em;
    padding: 1em;
    text-overflow: unset;
    white-space: normal;
    width: fit-content;
    z-index: 3;
}

/*Show Aside*/

.aside-show {
    background-color: var(--background-primary);
    border-radius: 1rem;
    /*   box-shadow:.2em .2em .2em var(--interactive-accent);*/
    box-shadow: inset 6px 6px 12px var(--main-darken), inset -6px -6px 12px var(--main-lighten);
    clear: right;
    float: right;
    font-style: normal;
    font-weight: unset;
    margin-bottom: .2em;
    margin-right: -25.3em;
    padding: 1em;
    position: relative;
    text-align: justify;
    text-decoration: unset;
    width: 400px;
}
/*Aside Inside the Note*/

.aside-in {
    background-color: var(--background-primary);
    border-color: var(--background-primary-alt);
    border-radius: 1rem;
    border-radius: 5px;
    /*   box-shadow:.2em .2em .2em var(--interactive-accent);*/
    box-shadow: inset 6px 6px 12px var(--main-darken), inset -6px -6px 12px var(--main-lighten);
    clear: right;
    float: right;
    font-size: var(--font-small)!important;
    font-style: normal;
    font-weight: unset;
    left: 1em;
    margin-bottom: .2em;
    max-width: 18em;
    padding: 1em;
    position: relative;
    text-align: justify;
    text-decoration: none!important;
    width: auto;
    z-index: 3;
}

.aside-in .internal-embed.is-loaded:not(.image-embed),
.aside-in .markdown-embed {
    width: 100%;
}

/*Shrink Scrollbar*/


.aside>::-webkit-scrollbar {
    width: 5px;
}