:root {
--fg-a0: #20221f;
--fg-a10: #434b39;
--fg-a20: #708d4a;
--fg-a30: #bdb56d;
--fg-a40: #dfdea2;
--fg-a50: #f0e6bb;

--bg-a0: #121212;
--bg-a10: #282828;
--bg-a20: #3f3f3f;
--bg-a30: #575757;
--bg-a40: #717171;
--bg-a50: #8b8b8b;

--tone-a0: #1d181d;
--tone-a10: #322d32;
--tone-a20: #484448;
--tone-a30: #605b5f;
--tone-a40: #787578;
--tone-a50: #928f91;
}

@keyframes subtle-float {
    from {
        margin-left: calc(var(--indent-depth) * 0.8rem + var(--static-left-margin));
        transform-origin: 25% 50%;
        transform: rotate(calc(var(--subtle-rot-mag) + var(--rot-offset)));
    };
    50% {
        margin-left: calc(var(--indent-depth) * 0.8rem + var(--static-left-margin) + var(--subtle-shift-mag));
        transform-origin: 25% 50%;
        transform: rotate(calc(-var(--subtle-rot-mag) + var(--rot-offset)));
    };
    to {
        margin-left: calc(var(--indent-depth) * 0.8rem + var(--static-left-margin));
        transform-origin: 25% 50%;
        transform: rotate(calc(var(--subtle-rot-mag) + var(--rot-offset)));
    };
}

html {
    margin: 0;
    width: 100vw;
    min-height: 100vh;
    background-color: #200025;
}

body {
    width: 100vw;
    min-height: 100vh;
    margin: 0;
    background:
        linear-gradient(
            35deg,
            rgba(56,13,61,0.5) 0%,
            rgba(74,19,62,0.5) 10%,
            rgba(32,0,37,0.5) 40%,
            rgba(106,7,69,0.2) 40%,
            rgba(153,35,107,0.2) 44%,
            rgba(187,73,135,0.2) 44%,
            rgba(231,113,167,0.2) 48%,
            rgba(227,214,217,0.2) 48%,
            rgba(255,255,255,0.2) 51%,
            rgba(186,87,54,0.2) 51%,
            rgba(230,117,56,0.2) 54%,
            rgba(164,46,55,0.2) 54%,
            rgba(222,68,57,0.2) 58%,
            rgba(32,0,37,0.2) 58%,
            rgba(92,29,31,0.5) 90%,
            rgba(108,13,50,0.5) 100%
        )
        no-repeat
        fixed
    ;
    backdrop-filter: brightness(.9);
    font-family: "Jersey 10", serif;
    font: 18px "Jersey 10";
    color: var(--fg-a30);
    overflow: hidden;
}

.boxen {
    width: calc(100% - 450px);
    margin: 100px 150px 100px 350px;
    position: absolute;
    justify-content: center;
    outline: 4px var(--fg-a30);
    background-color: var(--fg-a30);
    overflow: auto;
    display: block;
    border-radius: 8px;
}

.content {
    outline: dashed 2px green;
    margin: 0 auto;
    text-align: center;
    overflow: auto;
}

.pagebar {
    top: 5vh;
    width: 250px;
    height: 90vh;
    position: fixed;
    outline: 2px var(--fg-a30);
    background-image: url(img/leaf-cover.png);
    background-size: cover;
    background-attachment: fixed;
    border-radius: 8px;
    overflow: hidden;
    z-index: 0;
    transform: translateZ(0px);
}

.pagebar-category {
    position: relative;
    font: 32px "Jersey 10";
    --indent-depth: 1;
    --static-left-margin: 1rem;
    --subtle-shift-mag: 0.3rem;
    --rot-offset: 0deg;
    --subtle-rot-mag: 1deg;
    margin-left: calc(var(--indent-depth) * 0.8rem + 1rem);
    transform-origin: 25% 50%;
    transform: rotate(var(--subtle-rot-mag));
    animation: subtle-float 8s ease-in-out calc(var(--i) * 100ms) infinite;
    text-shadow: 2px 3px 3px black;
}

.pagebar-page {
    position: relative;
    font: 22px "Jersey 10";
    --indent-depth: 2;
    --static-left-margin: 1rem;
    --subtle-shift-mag: 0.3rem;
    --rot-offset: 0deg;
    --subtle-rot-mag: 1deg;
    margin-left: calc(var(--indent-depth) * 0.8rem + 1rem);
    transform-origin: 25% 50%;
    transform: rotate(var(--subtle-rot-mag));
    animation: subtle-float 8s ease-in-out calc(var(--i) * 100ms) infinite;
    text-shadow: 2px 3px 3px black;
}

.tree-shadow {
    position: absolute;
    --indent-depth: 0;
    --static-left-margin: -3.2rem;
    --subtle-shift-mag: -0.6rem;
    --rot-offset: 0deg;
    --subtle-rot-mag: 1deg;
    height: calc(100% + 0.4rem);
    object-fit: contain;
    margin-left: -3.2rem;
    margin-top: -0.2rem;
    z-index: 5;
    transform-origin: 25% 50%;
    transform: rotate(calc(var(--subtle-rot-mag) + var(--rot-offset)));
    animation: subtle-float 12s ease-in-out 800ms infinite;
    mix-blend-mode: hard-light;
}