:root{
    --holdme-width: calc(97svw - var(--hidari-width) - var(--migi-width) - var(--gap));

    --shadow-color: 29deg 24% 58%;
	--scrollbar-thumb: var(--grey2);
	--scrollbar-track: var(--white-texture);

    --blue: hsl(227, 56%, 73%);
    --blue-link: hsl(228, 40%, 60%);
    --brown: var(--grey2);
    --yellow-link: hsl(42, 89%, 51%);
}

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

	   shadows

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

header{
    h1{filter: var(--drop-shadow-medium);}

    p{filter: var(--drop-shadow-low);}
}

#vector, footer{
    filter: var(--drop-shadow-low);
}

main {
    article{
        box-shadow: var(--box-shadow-medium);
    }
    nav a{
        box-shadow: var(--box-shadow-low);
    }
}

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

	   layout, basic styling

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

body{
    background-color: var(--white);
    background-image: url("./assets/bg01.png");
       background-size: 7vmax auto;
}

#holdme{
    --column: calc(var(--holdme-width) * 0.36);
    width: var(--holdme-width);
    margin: 0 auto;
    display: grid;
    gap: var(--gap);
    grid-template-areas: 'header header' 'vector main' 'footer footer';
    grid-template-columns: var(--column) calc(100% - var(--column));
}

#hidari, #migi{
    background-image: url("./assets/bg02.png");
}

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

	   heading!! the title!!!!!!!

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

header{
    display: flex;
        align-items: center;
        justify-content: center;
        flex-flow: column;
    margin: 0 auto;
    
    h1{
        margin: 0.25em 0;
        --inner-stroke: var(--white2);
        --outer-stroke: var(--black);

        color: var(--grey2);

        span.flower{
            color: var(--yellow-link);
        }

        span.corner{
            color: var(--blue-link);
        }
    }

    p{
        margin: 0;
        align-self: flex-end;
        transform: translateX(6.66ch);
        font-weight: bold;
        font-size: 1.15em;
        text-shadow: var(--text-shadow-white);
        animation: pop 0.3s ease-in-out alternate infinite;
    }
}

@keyframes pop{
    to{
        transform: translateX(6.66ch) scale(1.02);
    }
}

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

	   cute pic hehehehe i love him

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

#vector{
    grid-area: vector;
    align-self: top;
    position: sticky;
        top: var(--double-gap);
}

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

	   main stuff!!! posts go here...

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

main{
    margin-right: var(--gap);
    min-height: calc(var(--full-height) * 1);

    .texture.brown{
        padding: calc(var(--gap) * 1.25);
        background: hsl(350, 12%, 54%) url("./assets/bg04.png");
        background-size: calc(var(--gap) * 2.25);
        background-position: center;
    }

    article.texture{
        margin: var(--double-gap) 0;
        margin-top: var(--half-gap);

        > div{
            padding: 2em;
            padding-top: 1.5em;
            --back-position: 0.75em;
            background-color: var(--white2);
            background: var(--white-texture);
               background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat;
               background-position: 
                     var(--back-position) var(--back-position),
                     calc(100% - var(--back-position)) var(--back-position),
                     var(--back-position) calc(100% - var(--back-position)),
                     calc(100% - var(--back-position)) calc(100% - var(--back-position)),
                     0 0;
               background-size: 1.5em;
                 background-image: 
                     url("./assets/F21.png"),
                     url("./assets/F21.png"),
                     url("./assets/F21.png"),
                     url("./assets/F21.png"),
                     url("/bg/texture/white.png");
        }
    }

    article:last-child{
        margin-bottom: 0;
    }

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

    :is(h2, h3:first-child){
        margin-top: 0;
        padding-bottom: 1.5ch;
        border: 0;
        border-bottom: var(--border-level-2);
        border-style: dashed;
        border-color: var(--grey2);
    }

    :is(h2, h3:first-child)::before, :is(h2, h3:first-child)::after{
        --size: 1.5em;
        content: "";
        margin: 0 1ch;
        display: inline-block;
        height: calc(var(--size) * 0.88);
        width: var(--size);
        transform: translateY(0.25ch);
        background-image: url("./assets/O06.png");
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
    }

    article:nth-of-type(odd) :is(h2, h3:first-child)::after{
        transform: scaleX(-1) translateY(0.25ch);
    }

    article:nth-of-type(even) :is(h2, h3:first-child)::before{
        transform: scaleX(-1) translateY(0.25ch);
    }

    nav{
        width: 100%;
        margin: auto;
        display: flex;
            gap: var(--double-gap);
            justify-content: center;
            align-items: center;

        a{
            --hover-color: var(--white2);
            display: block;
            padding: 1ch 4ch;
            padding-bottom: 1.5ch;
            background: var(--blue) url("./assets/bg03.png");
                background-size: auto 100%;
                background-position: center 275%;
            border: var(--border-level-1);
                border-color: var(--blue);
                border-style: outset;
                border-radius: var(--border-radius-level-1);
            color: var(--white);
            font-weight: bold;
            text-shadow: var(--text-shadow-black);
            font-family: var(--heading-font);
            text-decoration: none;

            >*{
                filter: var(--simple-text-shadow) var(--life-saving-drop-shadow);
            }
        }

        a:is(:hover, :focus){
            transform: translate(calc(-1 * var(--half-gap)), calc(-1 * var(--half-gap)));
            box-shadow: var(--box-shadow-medium);
        }

        a, a:is(:hover, :focus){
            transition: transform .3s ease-in-out, box-shadow .2s linear;
        }
    }
}

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

	   hidari migi side decorations~

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

#hidari{
    border-right: var(--border-level-2);
    border-style: outset;
    box-shadow: var(--box-shadow-low);
}

#migi{
    border-left: var(--border-level-2);
    border-style: inset;
    box-shadow: 
        -0.5px 0.7px 1.2px hsl(var(--shadow-color) / 0.06),
        -1px 1.2px 2.2px -0.2px hsl(var(--shadow-color) / 0.23),
        -2.1px 2.5px 4.7px -0.5px hsl(var(--shadow-color) / 0.4);
}

#hidari, #migi{
    border-color: var(--blue);
}