@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');

:root {
    --animation-timing: .15s;
}
aside {
    background: rgba(0,0,0,.4);
    backdrop-filter: blur(10px);
    padding: .8rem 0;
    gap: .5rem;
    overflow-x: auto;
    z-index: 100;
    border-bottom: solid 1px #333;
}
aside p {
    min-width: .5rem;
}
aside span {
    padding: .2rem .8rem .3rem;
    background: transparent;
    border-radius: .6rem;
    font-size: 1rem;
    background: rgba(255,255,255,.0);


}
aside span:hover {
    background: rgba(255,255,255,.2);
    cursor: pointer;
}
aside span:active {
    background: rgba(255,255,255,.3);
    transform: scale(.95);
}
aside span.active {
    background: rgba(255,255,255,1);
    color: #000;
}


main h2 {
    margin: 1rem 0 0;
    font-size: 1.3rem;
    font-weight: normal;
    display: flex;
    align-items: center;
    gap: .4rem;
}

main p {
    color: #bbb;
    font-size: .7rem;
}
main > h2 > span {
    background: #222;
    color: #ddd;
    font-size: .8rem;
    padding: .1rem .3rem;
    border-radius: 10rem;
} 


.object {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem .7rem;
    padding-right: .85rem;
    background: #222;
    border-radius: .5rem;
    cursor: pointer;
}
.object:hover {
    transform: scale(1.04);
    background: #333;
}

.object:active {
    transform: scale(.99);
    background: #454545;
}
modal {
    backdrop-filter: blur(5px);
}
modal .content {
    border: solid 1px #555;
    border-radius: 1rem;
    background: #1b1b1b;
    /* background: rgba(255,255,255,.1); */
    /* backdrop-filter: blur(10px); */
}

modal .content .raw button  {
    color: #fff;
    font-size: .9rem;
    border: 0;
    background: rgba(255,255,255,.2);
}
modal .content .raw button:hover {
    background: rgba(255,255,255,.4);
    transform: scale(1.03);
}
modal .content .raw button:active {
    background: rgba(255,255,255,.5);
    transform: scale(.97);
}



main > h2, main > p, main > .folder {
    animation: ofs calc(var(--ofs) / 5);
}
.object {
    animation: ofs calc(var(--ofs) / 10);
}
@keyframes ofs {
    from {opacity: 0; transform: translateY(-.2rem);}
    to {opacity: 1; transform: translateY(0px);}
}