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

	   layout

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

:root{
    --shadow-color: 33deg 11% 58%;
    --scrollbar-thumb: var(--brown);
    --brown: hsl(27, 7%, 33%);
}

body{
    background-color: hsl(32, 32%, 92%);
    background-image: url("./bg/0392.gif");
       background-size: auto;
}

a{
    color: var(--brown);
}

header{
    margin: auto;
    text-align: center;
}

.vector{
    position: fixed;
    display: block;
    width: calc((100svw - 66ch) * 0.33);
    bottom: var(--mini-gap);
}

.vector.left{
    left: var(--half-gap);
}

.vector.right{
    width: calc((100svw - 66ch) * 0.25);
    right: var(--gap);
}

/* older entries link */

a.texture.black.centered{
    border-color: var(--brown);
    background-color: var(--brown);
    background-image: url("./bg/0392.png");
    background-size: 1em auto;
    display: block;
    width: fit-content;
    margin: var(--gap) auto;

    span{
        color: var(--black3)!important;
        filter: var(--lifesaving-drop-shadow);
        padding: 0 12ch!important;
    }
}

a.texture.black.centered:is(:hover, :focus){
    transform: translateY(calc(-0.66 * var(--half-gap)));
}

a.texture.black.centered,
a.texture.black.centered:is(:hover, :focus){
    transition: transform 0.3s ease-in-out;
}

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

	   shadowssssssss

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

.blog-post{
    box-shadow: var(--box-shadow-medium);
}

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

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

		cute bullets

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

li{
	margin-bottom: 0.5em;
}

ul, menu{
	list-style: none;
	margin-block-start: 0.5em;

	li::before{
		display: inline-block;
		margin-left: -1em;
		transform: translateX(-0.75ch);
	}

	li{
		margin-left: 2ch;
	}

	li:nth-of-type(10n+1)::before{
		content: "\02538";

		ul li:first-of-type::before{
			content: "\2606";
		}
	}

	li:nth-of-type(10n+2)::before{
		content: "\02520";
	}

	li:nth-of-type(10n+3)::before{
		content: "\02524";
	}

	li:nth-of-type(10n+4)::before{
		content: "\2606";
	}

	li:nth-of-type(10n+5)::before{
		content: "\02528";
	}

	li:nth-of-type(10n+6)::before{
		content: "\02542";
	}

	li:nth-of-type(10n+7)::before{
		content: "\2502";
	}

	li:nth-of-type(10n+8)::before{
		content: "\252F";
	}

	li:nth-of-type(10n+9)::before{
		content: "\2510";
	}

	li:nth-of-type(10n)::before{
		content: "\251B";
	}
}

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

	   header/sidebar wehehehe

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

.blog-post{
    --padding: 1rem;
    --size: calc(var(--double-gap) * 2.22);
    width: 66ch;
    margin: var(--gap) auto var(--double-gap) auto;
    box-sizing: border-box;

    @media (min-width: 600px) and (max-width: 1200px) {
        width: 70svw;
    }
    border-radius: var(--border-radius-level-1);

    > div{
        padding: var(--padding);
    }

    /*..........................
    
        date + icon
    
    ..........................*/

    > div:first-child{
        box-sizing: border-box;
        height: calc(var(--size) * 1.33);
        display: flex;
            flex-flow: row-reverse nowrap;
            justify-content: space-between;
            align-items: flex-end;
            gap: calc(var(--padding) / 2);
        border: var(--border-level-1);
            border-radius: var(--border-radius-level-1);
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
            border-style: outset;
            border-bottom: 0;
        position: relative;

        box-shadow: 
            0 0.5px 0.6px hsl(var(--text-shadow-color) / 0.39),
            0 5.8px 10.3px -3.3px hsl(var(--text-shadow-color) / 0.25);
        
        background: var(--header-bg);
        border-color: var(--header-border);
    }

    h1{
        font-size: calc(var(--heading-size) * 0.81);
        margin: 0;
        margin-bottom: var(--mini-gap);
        text-align: right;
        filter: var(--simple-text-shadow);
        color: var(--header-color);
        text-shadow: var(--text-shadow-double);
    }

    #icon{
        background-image: var(--icon);
            background-color: var(--icon-border);
            background-size: cover;
        width: calc(var(--size) * 1);
        height: calc(var(--size) * 1);
        transform: translateY(calc(var(--size) * 0.48));
        margin-left: calc(var(--padding) * 0.25);
        border: var(--border-level-3);
            border-radius: var(--border-radius-level-1);
            border-style: outset;
            border-color: var(--icon-border);
        box-shadow: 
            2.8px 2.8px 2.2px rgba(0, 0, 0, 0.07),
            6.7px 6.7px 3px rgba(0, 0, 0, 0.05);
    }

    h2{
        font-size: calc(var(--heading-size) * 0.55);
        text-align: right;
        margin: 0;
        margin-left: calc(var(--size) + var(--gap));
        padding-right: 0.25ch;
        max-width: calc(100% - var(--size) + var(--gap));
    }

    > div:last-child{
        font-size: 0.9em;
        background: var(--white-texture);
        border: var(--border-level-1);
            border-style: outset;
            border-color: var(--white);
        border-bottom-left-radius: var(--border-radius-level-1);
        border-bottom-right-radius: var(--border-radius-level-1);
        border-top: none;

        > *{
            filter: var(--drop-text-shadow);
        }
        
        a:last-child{
            display: block;
            margin: 1em auto;
            line-height: 2;
        }

        a:last-child:is(:hover, :focus){
            background: var(--black-texture);
            border-color: var(--black);
            color: var(--black2);
        }

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

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;
    text-align: center;
    padding: 0 0 0.25em 0 !important;
}