:root{
    --main-width: 80ch;
    --main-height: 88svh;
    --slide: calc(-0.33 * var(--main-width));
    --black: hsl(15, 10%, 16%);
    --brown: hsl(15, 6%, 43%);
    --grey: hsl(97, 6%, 43%);
    --green: hsl(75, 53%, 61%);
    --green2: hsl(76, 57%, 70%);
    --pink: hsl(1, 56%, 84%);
    --red: hsl(1, 53%, 55%);
    --yellow: hsl(47, 100%, 82%);
    --yellow2: hsl(47, 100%, 69%);
    --shadow: hsla(51, 22%, 15%, 0.11);
    --shadow2: hsla(51, 74%, 9%, 0.05);
    --body-font: "Choco cooky", sans-serif;
    --heading-font: 'Magic Land', cursive;
    --ja-font: "Kawaii Tegaki", sans-serif;
}

body{
    font-size: calc(1em + 0.25vw);
    color: var(--black);
    font-family: var(--body-font);
    background-image: url("./assets/bg03.jpg");
        background-size: auto 101%;
    margin: 0;
    overflow-y: hidden;
}

.ja{
    font-family: var(--ja-font);
}

dfn{
    cursor: pointer;
    font-style: normal;
    text-decoration: 0.2ch dotted var(--black) underline;
}

body > div{
    display: flex;
        align-items: center;
        justify-content: center;
    text-shadow: 0.1ch 0.1ch var(--shadow);
    filter: drop-shadow(0.33vw 0.33vw 0.155vw var(--shadow));
    animation-delay: 0.22s!important;
}

*{
    box-sizing: border-box;
}

a{
    text-decoration: none;
    font-weight: bold;
    color: var(--red);
}

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

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

header{
    text-align: center;

    h1, h1 > span{
        border-radius: 0.05em;
    }

    h1{
        background: var(--pink);
            background-image: url("./assets/bg02.png");
            background-size: 4.44%;
            background-repeat: round;
        padding: 0.25em;
        margin: 0;
        font-family: var(--heading-font);
        font-size: calc(2.22em + 2.22vw);
        border: 0.05em solid var(--pink);
        box-shadow: 0.11ch 0.2ch 0.1ch var(--shadow);

        text-shadow: 
            0.066ch 0.066ch white,
            0.188ch 0.188ch hsla(1, 53%, 55%, 0.77);

        span{
            background: hsla(1, 56%, 84%, 0.55);
            padding: 0.25ch 1.5ch;
            border: 0.06em dashed var(--red);
        }
    }

    nav{
        margin: 1em;
        display: flex;
            justify-content: center;
        gap: 2em;

        a{
            color: var(--brown);
            text-decoration: underline dashed var(--red);
            display: block;
            min-width: 4.44em;
            padding: 0.33em 3em;
            background: var(--yellow);
            border: 0.3em solid white;
            border-radius: 0.2em;
            outline: 0.2em solid var(--yellow2);
            box-shadow: 0.22ch 0.33ch 0.1ch 0.15ch var(--shadow2);
        }

        a:is(:hover, :focus){
            color: var(--red);
            background: var(--green2);
            outline-color: var(--green);
        }

        a, a:is(:hover, :focus){
	        transition: color 0.2s ease-in-out, background 0.2s ease-in-out, outline-color 0.2s ease-in-out;
        }
    }
}

main{
    background: var(--green);
        background-image: url("./assets/bg01.gif");
        background-size: 2em;
        background-position: 9% 4.25%;
    height: var(--main-height);
    width: var(--main-width);
    margin: calc((99svh - var(--main-height)) / 2) 0;
    padding: 2.5em 2em;
    outline: 0.2em solid var(--green);
    border-radius: 0.5em;
    border: 0.2em white dashed;

    > div{
        padding: 0.25em;
        background: white;
        background-image: url("./assets/bg04.png");
            background-position: bottom right;
            background-repeat: no-repeat;
            background-size: auto 66%;
        border-radius: 0.25em;
        border: 0.3em solid var(--pink);
        outline: 0.15em solid var(--grey);
        line-height: 1.4;

        > div{
            border: 0.15em dashed var(--green);
            padding: 1em;
        }

        table{
            border-bottom: 0.1em solid var(--pink);

            img{
                vertical-align: bottom;
                box-shadow: 0.15ch 0.15ch var(--shadow);
                margin-right: 1ch;
            }

            a{
                font-size: 1.22em;

                img:hover{
                    opacity: 0.8;
                }

                img, img:hover{
                    transition: opacity 0.2s ease-in-out;
                }
            }

            td{
                padding-bottom: 1em;
            }

            td:last-child a::after{
                content: "✿";
                display: inline-block;
                margin: 0 0.5ch 0 1ch;
                color: var(--black);
                font-size: 0.8em;
            }

            tr:nth-child(even) td:last-child a::after{
                content: "❀";
            }
        }
    }
}

.hugme{
    overflow: auto;
    height: calc(var(--main-height) * 0.55 - 7.5em);
    margin-top: 1em;
    width: calc(100% - (-0.4 * var(--slide)));
    margin-left: 1.11em;
    padding-right: 0.75em;
}

#avi{
    --size: calc(var(--main-width) / 4.44);
    width: var(--size);
    height: var(--size);
    float: left;
    margin: 1ch;
    margin-right: 1em;
    border: 0.2em solid white;
    outline: 0.2em solid var(--red);
    border-radius: 0.15em;
}

footer{
    text-align: center;
    font-size: 0.9em;
    margin-top: 0.88em;
    margin-right: calc(-0.215 * var(--slide));

    a:is(:hover, :focus){
        color: white;
    }
}

#vector{
    --height: calc(var(--main-height) / 1.11);
    content: url("./assets/flower.png");
    height: var(--height);
    width: calc(var(--height) * 0.72);
    display: block;
    margin-left: var(--slide);
    align-self: flex-end;
    pointer-events: none;
    animation-delay: 0.22s!important;
}

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

	style my tooltip

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

#s-m-t-tooltip{
	/* basic */
	max-width:44ch;
	z-index: 99;
	margin:-70px 14px 7px 12px;
	/* style and design */
	padding:8px;
	background:#222; /* fallback if rgba not supported */
	background:rgba(0,0,0,0.8);
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;
	-moz-box-shadow:2px 2px 0 rgba(0,0,0,0.15),-1px -1px 0 rgba(255,255,255,0.3);
	-webkit-box-shadow:2px 2px 0 rgba(0,0,0,0.15),-1px -1px 0 rgba(255,255,255,0.3);
	box-shadow:2px 2px 0 rgba(0,0,0,0.15),-1px -1px 0 rgba(255,255,255,0.3);
	/* font */
	font-family: var(--body-font);
	font-size:0.8em;
	line-height:1em;
	color: white;
}