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

		basic styling

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

body{
    display: grid;
    grid-template-areas: 'nav header' 'nav main' 'nav footer';
    gap: var(--gap);
    padding: 0 var(--double-gap) 0 var(--gap);
    background-color: var(--aqua-bg);
    background-image: url("/bg/01.png");
        background-position: center;
        background-size: 12svw;
}

footer{
    margin: 0 auto var(--gap) auto;    
}

iframe{
    float: right;
    margin: 1em 0 0 1em;
}

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

		shadowssszzz

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

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

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

nav > img, footer{
    filter: var(--drop-shadow-low);
}

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

		the big title

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

h1{
    --inner-stroke: var(--white);
    --outer-stroke: var(--black);
    margin: 0.33em auto;
    text-align: center;
    display: flex;
        justify-content: center;
        align-items: center;
        gap: var(--half-gap);
    
    div{
        max-width: 10ch;
    }

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

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

		all the words go in here

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

main.texture.blue{
    /* background-image: url("/bg/08.png"); */
    background-size: var(--gap);
    padding: calc(var(--gap) * 1.25);
}

main.texture > div{
    --back-position: 0.75em;
    background-color: var(--white2);
    background: var(--white-texture);
       background-repeat: repeat-y, no-repeat, no-repeat, repeat;
       background-position: 
             0.88em 0,
             calc(100% - var(--back-position)) var(--back-position),
             calc(100% - var(--back-position)) calc(100% - var(--back-position)),
             0 0;
       background-size: 2em, 1.5em, 1.5em, auto;
         background-image: 
             url("/bg/layer/03.png"),
             url("./assets/tulip.png"),
             url("./assets/tulip.png"),
             url("/bg/texture/white.png");
    padding-left: calc(2em + 1.25em + var(--back-position));
    padding-right: calc(1.75em + var(--back-position));
}

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

		headings

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

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

ol :is(h2, h3, h4){
    margin-left: -0.33em;
}

h2{
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: normal;
    gap: 0.5ch;
}

/* hearts deco */

h2::before, h2::after{
    --size: 1em;
    content: "";
    display: inline-block;
    height: var(--size);
    width: var(--size);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transform: translateY(0.125ch);
    flex-grow: 3;
}

h2:nth-of-type(4n + 1)::before, h2:nth-of-type(4n + 1)::after{
    background-image: url("./assets/M10_A.png");
}

h2:nth-of-type(4n + 2)::before, h2:nth-of-type(4n + 2)::after{
    background-image: url("./assets/M11.png");
}

h2:nth-of-type(4n + 3)::before, h2:nth-of-type(4n + 3)::after{
    background-image: url("./assets/M08.png");
}

h2:nth-of-type(4n)::before, h2:nth-of-type(4n)::after{
    background-image: url("./assets/M10.png");
}

/* makes the question bold */

details summary > span{
    font-weight: bold;
 }

 li::marker{
    font-weight: bold;
 }
 
 /* question highlights on hover & focus */
 
 li:nth-of-type(odd) details summary:is(:hover, :focus) span{
    color: var(--blue-link);
 }
 
 li:nth-of-type(even) details summary:is(:hover, :focus) span{
    color: var(--blue-link);
 }
 
 details summary span, 
 details summary:is(:hover, :focus) span{
    transition: color .3s ease;
 }

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

		button navi YAEAH

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

nav{
    text-align: center;
    width: 21em;
    max-width: 33svw;
    align-self: flex-start;
    position: sticky;
    top: var(--gap);

    img[src*="drawhearts"]{
        max-height: calc(var(--full-height) - 5.55em - var(--double-gap));
        margin: var(--gap) auto;
    }

    > .flex{
        flex-flow: row nowrap;
        justify-content: center;
        align-items: center;
        gap: var(--half-gap);
    }

    a.texture{
        display: block;
        /* padding:0.25em 1em 0.5em 1em; */
        padding: 0.25em 0.33em;
        padding-left: 0.66em;
        padding-bottom: 0.1em;
        border: var(--border-level-3);
        border-style: outset;
        color: var(--black);
        font-weight: bold;
        text-shadow: var(--text-shadow-white);
        text-decoration: none;

        img{
            --size: 1.5em;
            height: var(--size);
            width: var(--size);
        }

        span{
            filter: var(--simple-text-shadow);
        }

        span span{
            display: inline-block;
            transform: translateY(-0.44em);
            font-size: 0;
        }
    }

    /* expand e x p a n d expand */

    a:is(:hover, :focus) span span{
        font-size: 1em;
        padding-right: 0.5em;
    }

    a:is(:hover, :focus) span span, a span span{
        transition: font-size 0.33s ease-in-out;
    }

    a:is(:hover, :focus) span span.long, a span span.long{
        transition: font-size 0.42s ease-in-out;
    }

    a:is(:hover, :focus) span span.less.long, , a span span.less.long{
        transition: font-size 0.36s ease-in-out;
    }
}