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

	basic styling

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

:root{
   --green-bg: #F0F6D2;
   --shadow-color: 74deg 28% 58%;
   --scrollbar-thumb: var(--green-texture);
}

body{
    background-color: var(--green-bg);
        background-image: url("./assets/gg.png"), url("./assets/bg.jpg");
        background-size: 50vmax auto, 15vmax auto;
        background-position: 110vw bottom, center top;
    display: grid;
        grid-template-areas: 'nav header' 'nav main' 'nav comments' 'nav footer';
        grid-template-columns: min-content 90ch;
        grid-template-rows: min-content 1fr max-content 3em;
        align-items: center;
        justify-content: left;
        gap: var(--gap);
    margin: var(--gap);

    @media (orientation:portrait) {
        grid-template-areas: 'header' 'nav' 'main' 'comments' 'footer';
        grid-template-rows: 1fr;
        grid-template-columns: 100vw;
        align-items: center;
        justify-content: center;
        margin: var(--half-gap);

        nav{
            margin: auto;
            position: static;
        }
    }
}

header h1, main, aside{
    margin: 0 var(--double-gap) 0.25em var(--double-gap);
}

header{
    --outer-stroke: var(--black);
    --inner-stroke: var(--white2);
    margin: auto;
    text-align: center;
}

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

nav{
    min-width: 33ch;
    width: fit-content;
    align-self: flex-start;
    top: var(--gap);
    position: sticky;

    .hugme{
        max-height: calc(var(--full-height) - var(--double-gap));
    }

    h2:first-child{
        margin-top: 0;
        margin-bottom: 0.5em;
        font-size: calc(var(--heading-size) / 1.88);
    }

    .texture{
        padding: var(--half-gap)!important;
    }

    ul, menu{
        padding-left: 0;
    }

    menu:not(.cute), ul{
        line-height: 1.33;
    }

    menu:not(.cute){
        list-style: none;

        li{
            display: grid;
            grid-auto-flow: column;
            gap: 1ch;
            margin-bottom: 1em;
        }

        li::before{
            --size: 2.25em;
            content: "";
            display: inline-block;
            height: var(--size);
            width: var(--size);
            background-image: url("./assets/C10.png");
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
        }

        li:nth-of-type(1)::before{
            background-image: url("./assets/O06.png");
        }

        li:nth-of-type(2)::before{
            background-image: url("./assets/M10.png");
        }
    }

    menu{

        a{
            color: var(--red-link);
        }

        a:is(:hover, :focus){
            color: var(--black)!important;
        }

        li:nth-of-type(6n + 2) a{
            color: var(--orange-link);
        }

        li:nth-of-type(6n + 3) a{
            color: var(--green-link);
        }

        li:nth-of-type(6n + 4) a{
            color: var(--aqua-link);
        }

        li:nth-of-type(6n + 5) a{
            color: var(--blue-link);
        }

        li:nth-of-type(6n) a{
            color: var(--purple-link);
        }
    }
}

main.red.texture{
    background: url("/bg/06.png") var(--red);
    background-size: var(--gap);
    margin-bottom: 0;

    > div{
        /* min-height: 200vh; */
    }

    ul{
        line-height: inherit;
    }
}

aside.texture.green{
    grid-area: comments;
    background: url(/bg/02.png) var(--green);
    background-size: var(--gap);

    #HCB_comment_box h3{
        display: block!important;
        margin-top: 0em;
        margin-bottom: 1em;
        font-size: calc(var(--heading-size) / 1.75);
    }

    #HCB_comment_box h3::before, #HCB_comment_box h3::after{
        --size: 1.5em;
        content: "";
        display: inline-block;
        height: var(--size);
        width: var(--size);
        margin: 0 0.66ch;
        transform: translateY(0.5ch);
        background-image: url("./assets/O06.png");
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
    }
}

footer{
    margin: 0 auto;
    width: fit-content;
    font-weight: bold;
    backdrop-filter: blur(0.125ch);
    text-shadow: var(--text-shadow-white);

    a{
        color: var(--black);
        --hover-color: var(--red-link);
    }
}

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

	shadows

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

header{
    filter: var(--life-saving-drop-shadow) var(--life-saving-drop-shadow);
}

footer > *{
    filter: var(--life-saving-drop-shadow-medium);
}

main, nav > .texture{
    box-shadow: var(--life-saving-box-shadow);
}