h1.page-title {
    --recursive-wght: 900;
    font-size: 5.6rem;

    display: flex;
    flex-direction: column;
    line-height: 1;
    width: min-content;

    transform: skew(-5deg, -5deg);

    & .rikis {
        width: max-content;
        background-color: var(--text-color);
        color: var(--background-color);
        padding: 0.1em;

        --shadow-color: var(--accent-pink);
        box-shadow:
            0.5px 0.5px 0 var(--shadow-color),
            1px 1px 0 var(--shadow-color),
            1.5px 1.5px 0 var(--shadow-color),
            2px 2px 0 var(--shadow-color),
            2.5px 2.5px 0 var(--shadow-color),
            3px 3px 0 var(--shadow-color),
            3.5px 3.5px 0 var(--shadow-color),
            4px 4px 0 var(--shadow-color);

        /*
            import math

            print("box-shadow:")
            x = 0
            max_x = 16
            while x < max_x:
                print(f"{x}px {x}px {math.pow(x / max_x, 2) * 16}px rgba(from var(--shadow-color) r g b / {math.pow(1 - x / max_x, 3)}),")
                x += 0.5
        */
        /* prettier-ignore */
        box-shadow:
            0px 0px 0.0px rgba(from var(--shadow-color) r g b / 1.0),
            0.5px 0.5px 0.015625px rgba(from var(--shadow-color) r g b / 0.909149169921875),
            1.0px 1.0px 0.0625px rgba(from var(--shadow-color) r g b / 0.823974609375),
            1.5px 1.5px 0.140625px rgba(from var(--shadow-color) r g b / 0.744293212890625),
            2.0px 2.0px 0.25px rgba(from var(--shadow-color) r g b / 0.669921875),
            2.5px 2.5px 0.390625px rgba(from var(--shadow-color) r g b / 0.600677490234375),
            3.0px 3.0px 0.5625px rgba(from var(--shadow-color) r g b / 0.536376953125),
            3.5px 3.5px 0.765625px rgba(from var(--shadow-color) r g b / 0.476837158203125),
            4.0px 4.0px 1.0px rgba(from var(--shadow-color) r g b / 0.421875),
            4.5px 4.5px 1.265625px rgba(from var(--shadow-color) r g b / 0.371307373046875),
            5.0px 5.0px 1.5625px rgba(from var(--shadow-color) r g b / 0.324951171875),
            5.5px 5.5px 1.890625px rgba(from var(--shadow-color) r g b / 0.282623291015625),
            6.0px 6.0px 2.25px rgba(from var(--shadow-color) r g b / 0.244140625),
            6.5px 6.5px 2.640625px rgba(from var(--shadow-color) r g b / 0.209320068359375),
            7.0px 7.0px 3.0625px rgba(from var(--shadow-color) r g b / 0.177978515625),
            7.5px 7.5px 3.515625px rgba(from var(--shadow-color) r g b / 0.149932861328125),
            8.0px 8.0px 4.0px rgba(from var(--shadow-color) r g b / 0.125),
            8.5px 8.5px 4.515625px rgba(from var(--shadow-color) r g b / 0.102996826171875),
            9.0px 9.0px 5.0625px rgba(from var(--shadow-color) r g b / 0.083740234375),
            9.5px 9.5px 5.640625px rgba(from var(--shadow-color) r g b / 0.067047119140625),
            10.0px 10.0px 6.25px rgba(from var(--shadow-color) r g b / 0.052734375),
            10.5px 10.5px 6.890625px rgba(from var(--shadow-color) r g b / 0.040618896484375),
            11.0px 11.0px 7.5625px rgba(from var(--shadow-color) r g b / 0.030517578125),
            11.5px 11.5px 8.265625px rgba(from var(--shadow-color) r g b / 0.022247314453125),
            12.0px 12.0px 9.0px rgba(from var(--shadow-color) r g b / 0.015625),
            12.5px 12.5px 9.765625px rgba(from var(--shadow-color) r g b / 0.010467529296875),
            13.0px 13.0px 10.5625px rgba(from var(--shadow-color) r g b / 0.006591796875),
            13.5px 13.5px 11.390625px rgba(from var(--shadow-color) r g b / 0.003814697265625),
            14.0px 14.0px 12.25px rgba(from var(--shadow-color) r g b / 0.001953125),
            14.5px 14.5px 13.140625px rgba(from var(--shadow-color) r g b / 0.000823974609375),
            15.0px 15.0px 14.0625px rgba(from var(--shadow-color) r g b / 0.000244140625),
            15.5px 15.5px 15.015625px rgba(from var(--shadow-color) r g b / 3.0517578125e-05)
            ;
    }

    & .adjectives {
        --recursive-wght: 800;
        font-size: 2rem;
        vertical-align: 50%;
    }

    & .house {
        width: max-content;
        font-size: 4rem;
        padding-left: 1em;
        padding-top: 0.1em;
    }
}

@media (hover: none) {
    h1.page-title a {
        text-decoration: none;
    }
}

@media (max-width: 450px) {
    body {
        --top-min-spacing: 40px;
    }

    nav#nav-logo {
        display: block;

        & .logo {
            position: absolute;
            left: 0;
            top: 0;
            width: 75vw;
            height: 75vw;
            transform: translate(-25%, -20%);
            pointer-events: none;
            opacity: 15%;
        }
    }
}

#index\:treehouse {
    & > details > summary {
        padding-left: 1rem;

        & > th-bp {
            display: none;
        }
    }
}

main.tree > ul {
    /* Optical text offset to make the icons look less misaligned.
       This is adjusted per each hobby corner to fit the icons.
       
       Although the icons may be aligned in terms of bounds, optically they do not look
       very good next to the text, having awkward blank space to the right.
       
       This aims to improve the readability of that a bit without being too noticable. */
    --section-text-offset: 0em;
    --section-icon-align: -30%;

    & > li {
        & > details > summary {
            text-decoration: 4px underline var(--section-color);
            text-underline-offset: 4px;

            & > th-bc .hobby-icon {
                width: auto;
                height: 48px;

                margin-right: calc(0.2em + var(--section-text-offset));

                vertical-align: var(--section-icon-align);
            }
        }
    }
}

#index\:about {
    --section-color: var(--accent-pink);
}

#index\:programming {
    --section-color: var(--accent-red);
    --section-text-offset: -0.1em;
}

#index\:design {
    --section-color: var(--accent-yellow);
}

#index\:music {
    --section-color: var(--accent-green);
    --section-text-offset: -0.05em;
}

#index\:games {
    --section-color: var(--accent-blue);
    --section-text-offset: 0.05em;
}

#index\:philosophy {
    --section-color: var(--accent-purple);
}