:root{
    --full-height: calc(98vh - var(--double-gap) * 2);
    --margin: calc(2.15 * var(--double-gap));
}

body{
    background-color: var(--aqua-bg);
    background-image: url("/bg/01.png");
        background-position: center;
        background-size: 12svw;
}

ol, ul, menu{
	line-height: 1.4;
}

/*.........................

        textured buttons

..........................*/

nav button, a.texture{
    text-decoration: none;
    font-weight: bold;
    color: var(--black);
    text-shadow: var(--text-shadow-white);
    line-height: 1.6;
    font-size: 1em;
    border: var(--border-level-2);
    border-radius: var(--border-radius-level-2);
    border-style: outset;
    display: block;

    span{
        filter: var(--simple-text-shadow);
    }
}

/*.........................

   headings

..........................*/

h1{
    --inner-stroke: var(--white);
    --outer-stroke: var(--black);
    margin-top: -1.44em;
    z-index: 9;
    position: absolute;
    filter: var(--life-saving-drop-shadow)!important;
}

h2, h3, h4{
    text-align: center;
}

h3{
    margin: 0.75em auto 0.5em auto;
}

/*.........................

    container

..........................*/

#holdme{
    padding-top: var(--half-gap);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    filter: var(--life-saving-drop-shadow)!important;
}

/*.........................

    main content box

..........................*/

main.texture.blue{
    background-image: url("/bg/08.png");
    background-size: var(--gap);
    padding: calc(var(--gap) * 1.25);
}

main{
    height: var(--full-height);
    width: 77ch;
    margin-top: var(--gap);
    order: 2;
    z-index: 2;

    > div{
        height: 100%;
    }

    footer{
        margin: 1em auto;
        border-top: 0.1svw dashed var(--grey);
        padding-top: 1em;
    }

    .hugme{
        padding-top: 1.5em;

        a.texture{
            text-align: center;
            padding: 0 0 0.25em 0!important;
        }

        a.texture:is(:focus, :hover){
            background: var(--green-texture);
            border-color: var(--green);
        }

        a.texture, a.texture:is(:focus, :hover){
            transition: background .2s ease-in-out, border-color .2s ease-in-out;
        }
    }

    h2.chara{
        margin: 0.25em auto;
        margin-top: -0.33em!important;
        text-align: right;

        img[src*="washi"]{
            max-height: 0.8em;
            max-width: 50%;
        }

        img[src*="I03"]{
            max-height: 1.22em;
            display: inline-block;
            margin-bottom: -0.5ch;
        }
    }

    h2:first-of-type{
        margin-top: 0;
    }

    h2 img{
        max-height: 1em;
    }

    table{
        border-collapse: collapse;
        line-height: 2;
    }
    
    table img{
        height: 1em;
        width: 1em;
        object-fit: contain;
    }
    
    th{
        padding-right: 2ch;
        text-align: left;
    }
    
    table:first-of-type td{
        text-align: right;
    }
    
    th, td{
        padding-top: 0.5ch;
        padding-bottom: 0.3ch;
        border-bottom: 0.1svw solid var(--orange);
    }
}

/*.........................

    yayyy navi tabi

..........................*/

nav{
    margin-top: var(--double-gap);
    display: flex;
        flex-flow: column;
        align-items: flex-end;
        gap: calc(var(--mini-gap) * 1.75);
    z-index: 1;
    order: 1;
    
    button, div{
        text-align: right;
        border-right: none;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        transform: translateX(calc(100% - var(--gap)));
        
        padding: 0.5em;
        padding-top: 0.15em;
        padding-left: var(--gap);
    }

    button:nth-of-type(5n + 1){
        background: var(--red-texture);
        border-color: var(--red);
    }

    button:nth-of-type(5n + 2){
        background: var(--yellow-texture);
        border-color: var(--yellow);
    }

    button:nth-of-type(5n + 3){
        background: var(--green-texture);
        border-color: var(--green);
    }

    button:nth-of-type(5n + 4){
        background: var(--aqua-texture);
        border-color: var(--aqua);
    }

    button:nth-of-type(5n){
        background: var(--purple-texture);
        border-color: var(--purple);
    }

    button:is([popovertarget="inventory"], [popovertarget="philosophy"]){
        padding-right: 1ch;
    }
}

/*.........................

    animates the tabs

..........................*/

nav button:is(:hover, :focus){
    transform: none;
}

nav button,
nav button:is(:hover, :focus){
    transition: transform 0.5s ease-in-out;
}

/*.........................

    cute goki pic!!!

..........................*/

#vector{
    order: 3;
    min-width: 20vw;
    width: 33%;
    max-width: 36vw;
    height: calc(var(--full-height) + var(--double-gap));
    align-self: flex-end;
    pointer-events: none;
    background-image: url("./assets/it.webp");
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    margin-left: calc(-1 * var(--margin));
    z-index: 9;
}

/*.........................

    ok yes the quadrant charts

..........................*/

.chart{
    /* border-color: var(--orange)!important; */
}

#chartholder{
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    gap: var(--half-gap);

    > section h3{
        width: fit-content;
        font-size: 1.22em;
        margin-top: 0;
    }
}