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

	   layout

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

body{
    background: var(--background);
    background-attachment: fixed;
}

h1, h2, h3, h4, h5, h6{
	--heading-size: calc(1.5rem + 1.5svw);
}

h2{
    font-size: calc(var(--heading-size) / 1.15);
    margin-bottom: 0;
}

h3{
    font-size: calc(var(--heading-size) / 1.45);
}

#holdme{
    margin: var(--gap) auto;
    display: grid;
        grid-template-areas: 'header main' 'footer footer';
        grid-template-columns: 30svw 1fr;
        gap: var(--gap) calc(var(--double-gap) * 1);
    overflow: visible;

    @media (max-width: 1200px) {
        display: block;
        width: calc(80ch - var(--double-gap));
    }
}

#holdme{
    @media (min-width: 700px) {
        max-width: 90svw;
    }
}


header{
    grid-area: header;
}

nav{
    grid-area: nav;
}

main{
    grid-area: main;
}

footer{
    grid-area: footer;
    color: var(--footer-color);
    margin-top: calc(var(--half-gap) * 1.5);

    @media (max-width: 1200px) {
        margin-top: var(--gap);
    }

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

    a:is(:hover, :focus){
        color: var(--footer-link-color-hover);
    }
}

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

    shadows

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

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

main{
    box-shadow: var(--box-shadow-high);
}

header > section{
    box-shadow: var(--box-shadow-medium);
}

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

	   header/sidebar wehehehe

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

header{
    --padding: 1rem;
    --size: calc(var(--double-gap) * 2);
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;

    @media (min-width: 600px) and (max-width: 1200px) {
        width: 70svw;
    }

    section{
        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.075);
            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{
            --inner-stroke: var(--h1-inner-stroke);
            --outer-stroke: var(--h1-outer-stroke);
            -webkit-text-fill-color: var(--black);
            margin: 0;
            text-align: right;
            filter: var(--simple-text-shadow);
            color: var(--black);
        }

        #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);
        }
 
    /*..........................
    
        currently table
    
    ..........................*/

        > 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;

            > div:first-child{
                margin-left: calc(var(--size) + var(--padding) * 2);
            }

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

        td#music{
            /* padding-left: 1ch; */
        }

        :is(table, span) p{
            margin: 0;
            display: contents;
        }

        table{

            tr{
                display: flex;
                gap: 1ch;
                width: 100%;
            }
            th{
                text-align: left;
                vertical-align: top;
                font-size: 0.95em;
                display: block!important;
                min-width: 9ch;
                width: max-content!important;
            }

            tr:first-child th{
                min-width: 12ch;
            }
        }
    }

    @media (min-width: 1200px) {
        position: sticky;
        top: var(--gap);
        align-self: flex-start;
    }
}


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

        pagination navi

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

nav{
    display: flex;
        gap: var(--mini-gap);
        align-items: center;
        justify-items: stretch;
        justify-content: center;
    margin: var(--gap) auto;

    a{
        font-size: 1.3em;
        font-weight: bold;
        text-align: center;
        text-decoration: none;
    }

    > div{
        flex: 2;
        display: flex;
            align-items: center;
            justify-content: center;
        font-size: 1.2em;
        line-height: 1;

        a{
            display: flex;
                align-items: center;
                justify-content: center;
            padding: 0.5ch 1ch;
            padding-top: 0.25ch;
            width: min-content;
            border: var(--border-level-3);
                border-radius: var(--border-radius-level-2);
                border-style: outset;
            box-shadow: var(--box-shadow-low);
            text-shadow: var(--text-shadow-white);
        }
    }

    > div:nth-child(1) a{
        background: var(--arrow-1-bg);
        border-color: var(--arrow-1-border);
        color: var(--arrow-1-color);
    }

    a:nth-child(2){
        margin-left: 0.5ch;
        height: 3.1em;
        padding: 0 2rem;
        min-width: max-content;
        color: var(--home-color);
        filter: var(--drop-shadow-low);
        transition: color 0.2s ease-in-out;

        :is(:hover, :focus){
            color: var(--home-color-hover);
            transition: color 0.2s ease-in-out;
        }
    }

    > div:nth-child(3) a{
        background: var(--arrow-2-bg);
        border-color: var(--arrow-2-border);
        color: var(--arrow-2-color);
    }
}

nav a:nth-child(2) > span,
nav a:nth-child(2) span:is(:hover, :focus){
	transition: color 0.2s ease-in-out;
}

nav > div:is(:hover, :focus){
    animation: 0.8s ease-in-out infinite alternate;
}

nav > div:nth-child(1):is(:hover, :focus){
    animation-name: slide1;
}

nav > div:nth-child(3):is(:hover, :focus){
    animation-name: slide2;
}

@keyframes slide1{
    to{transform: translateX(-1em)}
}

@keyframes slide2{
    to{transform: translateX(1em)}
}

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

	                main

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

main{
    padding: calc(var(--gap) * 1.25);
    border: var(--border-level-1);
        border-radius: var(--border-radius-level-1);
        border-style: outset;
    background: var(--main-bg);
    border-color: var(--main-border);

    > div{
        background: var(--diary-bg);
        box-sizing: border-box;
        padding: var(--gap);
        border: var(--border-level-2);
           border-style: inset;
           border-radius: var(--border-radius-level-2);
        border-color: var(--main-border);
        box-shadow: 
            0.5px 0.7px 1.2px hsl(var(--diary-shadow) / 0.06) inset,
            1px 1.2px 2.2px -0.2px hsl(var(--diary-shadow) / 0.23) inset,
            2.1px 2.5px 4.7px -0.5px hsl(var(--diary-shadow) / 0.4) inset,
            6px 7px 9px -0.2px hsl(var(--diary-shadow) / 0.4) inset;
    }

    > div > div{
        background: var(--white) url("https://i.ibb.co/sHdbn53/white.png");
        padding: var(--half-gap) var(--gap);
        border: var(--border-level-3);
            border-radius: var(--border-radius-level-2);
            border-color: var(--diary-border);
            border-style: inset;
        box-shadow: var(--white-inset-shadow);
    }

    > div > div > *{
        filter: var(--drop-text-shadow);
    }

    #title{
        margin: 1em 0 1.5em 0;
        display: flex;
            justify-content: center;
            align-items: center;
        
        h2{
            margin-top: 0;
            text-align: center;
        }
    }

    #title-img{
        content: var(--title-img);
        height: 1.5em;
        max-width: 15ch;
        margin-right: 2ch;
    }
}

main :is(h2, h3).double-stroke, main :is(h2, h3) .double-stroke{
    --inner-stroke: var(--white);
    --outer-stroke: var(--h2-color);
    color: var(--black);
}

main{

    h3{
        margin-top: -1em;
        line-height: 1.4;
    }

    h3::before{
        --size: 2em;
        content: "";
        display: inline-block;
        height: var(--size);
        width: var(--size);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        margin-right: 1ch;
        transform: translateY(0.5ch);
        background-image: url("./assets/M11.png");
    }

    p{
        text-indent: 1.5em;
    }

    [style*="float: right;"]{
        margin-left: 1em;
    }

    [style*="float: left;"]{
        margin-right: 1em;
    }

    a[data-fancybox] img{
        border: var(--border-level-3);
        border-radius: var(--border-radius-level-2);
        border-style: outset;
        border-color: var(--img-border);
    }
}

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

		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";
	}
}