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

	   layout

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

:root{
    /* --shadow-color: 48deg 72% 42%; yellow shadow */
  --shadow-color: 200deg 40% 56%;
  
  --blue: hsl(208, 54%, 59%);
  --blue-link: hsl(208, 52%, 54%);
  --blue-texture: var(--blue) url("./bg/texture/blue.png");
}

body{
    background: var(--aqua-bg) bottom/12vmax url("./bg/02.png");
    background-attachment: fixed;
}

#holdme{
    margin: var(--gap) auto;

    @media (max-width: 1045px) {
        width: calc(100svw - var(--double-gap));
    }

    @media (min-width: 1045px) {
        max-width: 72svw;
    }

    > .flex{
        margin-bottom: calc(var(--gap) * 1.5);
        align-items: center;
        justify-content: flex-end;
        gap: var(--gap);

        @media (max-width: 1045px) {
            display: block;
        }
    }
}

footer{
    margin-top: var(--gap);

}

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

	   shadows

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

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

nav > :is(div, button), #choice .texture{
    box-shadow: var(--box-shadow-low);
}

#definition, #choice > div:is(:first-child, :last-child), #author > section{
    box-shadow: var(--box-shadow-medium);
}

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

                header

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

#holdme > .flex:first-child{
    @media (max-width: 1045px){

        width: 90%;
        margin: auto;
        margin-bottom: var(--gap);

        nav{
            width: 33%;
            justify-content: flex-end;
        }
    }
}

header{
    text-align: center;
}

h1{
    --inner-stroke:var(--white);
    --outer-stroke:var(--white0);
    margin: 0.25em 0;

    img{
        height: calc(1.5rem + 6.5svw);
    }
}

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

                navigation

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

nav > * {
    box-sizing: border-box;
    border: var(--border-level-1);
        border-radius: var(--border-radius-level-1);
        border-style: outset;

    a{
        text-decoration: none;
    }
}

nav :is(a, [popovertarget]){
    filter: var(--simple-text-shadow);
}

nav :is(a, [popovertarget]), table th, button.close{
    color: var(--black);
    font-weight: bold;
    text-shadow: var(--text-shadow-white);
}

header + nav{
    text-align: right;
    font-size: 1.1em;
    width: calc(var(--double-gap) + 10em + 7svw);
    display: flex;
        flex-flow: column nowrap;
        align-items: flex-end;
        gap: var(--mini-gap);

    > div{
        position: relative;
        z-index: 2;
        display: block;
        padding: 1ch;
        padding-top: 0.5ch;
    }

    a::before{
        --size: 1em;
        content: "";
        display: inline-block;
        margin-right: 1.25ch;
        margin-left: 0.25ch;
        width: var(--size);
        height: var(--size);
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
        transform: scale(1.33) translateY(0.15ch);
    }

    > div:nth-of-type(3n + 1){
        background: var(--blue-texture);
        border-color: var(--blue);

        a::before{
            background-image: url("./assets/A25.png");
        }
    }

    > div:nth-of-type(3n + 2){
        background: var(--white-texture);
        border-color: var(--white);

        a::before{
            background-image: url("./assets/A20.png");
        }
    }

    > div:nth-of-type(3n){
        background: var(--yellow-texture);
        border-color: var(--yellow);

        a::before{
            background-image: url("./assets/A26.png");
        }
    }

    @media (max-width: 1045px) {
        text-align: center;
        width: fit-content;
        flex-flow: row wrap;
            align-items: center;
            justify-content: center;
            gap: var(--gap);
        font-size: 1.1em;

        > div{
            display: inline-block;
            width: fit-content;
        }

        > div:is(:hover, :focus){
            transform: none;
        }
    }
}

header + nav > div:is(:hover, :focus){
    transform: translateX(calc(var(--double-gap) * -1));
}

header + nav > div,
header + nav > div:is(:hover, :focus){
    transition: transform 0.5s ease-in-out;
}

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

                main yayayaya content!!!!

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

main{
    > section:not(:last-child){
        margin-bottom: var(--double-gap);
    }

    > section:not(#author) .flex:first-child{
            align-items: center;
            justify-content: center;
        }


    /*.........................
    
        defining vivarism
    
    ..........................*/

    #definition{
        h2{
            /* text-align: center; */
            --inner-stroke:var(--white);
            --outer-stroke:var(--blue-link);
            -webkit-text-fill-color: var(--black);
        }

        .flex:first-child + p::before, .flex:first-child + p::after{
           --size: 5em;
           content: "";
           display: inline-block;
           margin-top: calc(-1 * var(--size));
           height: var(--size);
           width: var(--size);
           background-size: contain;
           background-repeat: no-repeat;
           background-position: center;
        }
        
        .flex:first-child + p::before{
            --size: 5.25em;
            background-image: url("./assets/A01.png");
        }

        .flex:first-child + p::after{
            margin-left: 1ch;
            background-image: url("./assets/J01.png");
        }

        p{
            text-align: center;
            max-width: calc(100% - 6em);
        }

        > div{
            background-image: url("./bg/05.png"), url("./bg/05.png"),  url("/bg/texture/white.png");
                background-repeat: repeat-y, repeat-y, repeat;
                background-position: 1em 1em, calc(100% - 1em) 1em, 0 0;
                background-size: 1.5em, 1.5em, auto;
        }
    }


    /*.........................
    
            choosing vivarism
    
    ..........................*/

    #choice{
        > div:first-child{
            width: 100%;
            background: var(--white-texture);
            border: var(--border-level-1) var(--white);
                border-radius: var(--border-radius-level-1);
                border-style: outset;
        }
            h2{
            --inner-stroke:var(--white);
            --outer-stroke:var(--black);
            -webkit-text-fill-color: var(--blue-link);
        }

        > div:first-child > div::before, > div:first-child > div::after{
           --size: 3.33em;
           content: "";
           display: inline-block;
           height: var(--size);
           width: calc(var(--size) * 1.2);
           background-size: contain;
           background-repeat: no-repeat;
           background-position: center;
        }

        > div:first-child > div::before{
            background-image: url("./assets/A02.png");
        }
        
        > div:first-child > div::after{
            --size: 3.66em;
            background-image: url("./assets/A05.png");
        }

        h3.texture{
            background-size: var(--three-fourth-gap);
        }

        h3.texture.blue{
            background-image: url("./bg/04.png");
        }

        h3.texture.green{
            background-image: url("./bg/06.png");
        }

        > section{
            text-align: center;
            justify-content: center;
            gap: var(--gap);

            > div > h3{
                display: inline-block;
                padding: 1ch 0 1.5ch 0;
                margin-bottom: var(--one-fourth-gap);
                font-weight: bold;
                font-family: var(--heading-font);
                color: var(--black);
                --inner-stroke: var(--white);
                --outer-stroke: var(--black);
                > *{
                    filter: var(--simple-text-shadow);
                }
            }

            > div{
                display: flex;
                flex-direction: column;
                gap: var(--three-fourth-gap);
            }

            div.texture{
                padding: var(--half-gap);

                > *{
                    padding: 0 2em;
                    padding-top: 0.5ch;
                    padding-right: 1.33em;
                    min-height: 5em;
                    display: flex;
                        align-items: center;
                        justify-content: center;
                }
            } 
        }

        > div:last-child{
            margin-top: var(--gap);
            padding: var(--three-fourth-gap);

            > div{
               --back-position: 0.5em;
               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: 1em;
                    background-image: 
                        url("./assets/B07.png"),
                        url("./assets/B08.png"),
                        url("./assets/B08.png"),
                        url("./assets/B07.png"),
                        url("/bg/texture/white.png");
            }

            .flex{
                width: 80%;
                margin: auto;
                gap: var(--gap);
                align-items: center;
                justify-content: center;

                > img{
                    height: 9em;
                }
            }
        }
    }
    

    /*.........................
    
            about me
    
    ..........................*/
    
    #author{

        display: flex;
            flex-flow: row-reverse;
            justify-content: center;

        #icon, .hugme, table{
            border: var(--border-level-2) var(--yellow);
            border-style: inset;
            border-radius: var(--border-radius-level-2);
        }

        .quote{
            font-size: 0.85em;
            display: block;
            text-align: right;
            padding-left: 7em;
            padding-right: 1em;
        }

        /*.........................
        
            big yellow box
        
        ..........................*/

        > section{
            flex: 2;
            z-index: 2;
            background: var(--yellow) bottom/1.7svw url("./bg/03.png");
            padding: calc(var(--gap) * 0.66) calc(var(--gap) * 1.5);
            padding-bottom: calc(var(--gap) * 0.66 * 2);
            height: 60ch;
            max-height: calc(var(--full-height) - var(--double-gap));
            box-sizing: border-box;
            border: var(--border-level-1) var(--yellow);
                border-radius: var(--border-radius-level-1);
                border-style: outset;
            display: flex;
                gap: var(--gap);
                justify-content: center;

            /*.........................
            
                textbox section!!!
            
            ..........................*/
            
            h2{
                --inner-stroke:var(--white);
                --outer-stroke:var(--black);
                -webkit-text-fill-color: var(--black);
                margin: 0;
                margin-bottom: 0.5em;
                display: inline-block;
            }

            > div:first-child{
                min-width: 50%;
                max-width: calc(100% - 32ch);
                display: flex;
                    flex-flow: column;
                    align-items: center;

            .hugme::-webkit-scrollbar-thumb{
                background: var(--green-texture);
                    border-color: var(--green);
            }

                .hugme{
                    flex: 2;
                    min-height: 0;
                    background: var(--white-texture);
                    box-sizing: border-box;
                    padding: var(--half-gap) var(--gap);
                    background: var(--white-texture);
                    box-shadow: var(--white-inset-shadow);
                    padding-top: 0;

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

                    h3{
                        font-family: var(--body-font);
                        text-align: center;
                        font-size: calc(var(--heading-size) / 3);
                    }

                    .float{
                        float: left;
                        shape-outside: url("./assets/O01.png");
                        shape-margin: 1em;
                        max-width: 33%;
                        margin: 0.5em 1em;
                        margin-top: 2em;
                        margin-left: 0;
                    }
                }
            }

            /*.........................
            
                icon table section!!!
            
            ..........................*/

            > div:last-child{
                width: 40ch;
                display: flex;
                    flex-flow: column;
                    align-items: center;

                h3{
                    margin: 0.25em auto 0.5em auto;
                    --inner-stroke:var(--white);
                    --outer-stroke: var(--black);
                    -webkit-text-fill-color: var(--black);
                }

                #icon{
                    --size: 18ch;
                    height: var(--size);
                    width: var(--size);
                    box-sizing: border-box;
                    margin-bottom: 1rem;
                    background: var(--white) center/contain no-repeat url("./assets/icon.png");
                    transform: translateX(calc(0.05rem + 0.23vmax));

                    + span img{
                        max-height: 1.25em;
                        max-width: calc(var(--size) / 2);
                        filter: var(--simple-text-shadow);
                        margin-bottom: 1rem;
                    }

                    + span img:is([src*="water"], [src*="persev"]){
                        max-height: 1.4em;
                    }
                }

                /*.........................
                
                    da table....zz...
                
                ..........................*/

                table{

                    width: 100%;
                    box-sizing: border-box;
                    padding: 1ch;
                    
                    background: var(--black-texture);
                    color: var(--white2);
                     --shadow-color: 0deg 0% 9%;
                    box-shadow: var(--black-inset-shadow);
                    

                    > *{
                        filter: var(--chalkboard-drop-shadow);
                    }
    
                    th{
                        text-align: right;
                        padding-right: 1ch;
                        color: var(--black2);
                    }

                    td img{
                        max-height: 1em;
                    }

                }
            }
        }
    }

    /*.........................
    
        profile navi tabi
    
    ..........................*/

    nav{
        margin-top: var(--gap);
        display: flex;
            flex-flow: column;
            align-items: flex-end;
            gap: calc(var(--mini-gap) * 1.75);
        z-index: 1;
        margin-left: -10svw;
        
        button, div{
            text-align: right;
            padding-left: var(--gap);
            padding-right: 1.5ch;
            padding-top: 0;
            line-height: 2;
            font-size: 1em;
            border-right: none;
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
            transform: translateX(calc(100% - var(--gap)));

            background: var(--blue-texture);
            border-color: var(--blue);
        }

        button:nth-of-type(4n + 1){
            background: var(--blue-texture);
            border-color: var(--blue);
        }

        button:nth-of-type(4n + 2){
            background: var(--orange-texture);
            border-color: var(--orange);
        }

        button:nth-of-type(4n + 3){
            background: var(--green-texture);
            border-color: var(--green);
        }

        button:nth-of-type(4n){
            background: var(--aqua-texture);
            border-color: var(--aqua);
        }

        button:is([popovertarget="inventory"], [popovertarget="philosophy"]){
            padding-right: 1ch;
        }
    }

    /*.........................
    
        animates the tabs
    
    ..........................*/

    nav button:is(:hover, :focus){
        transform: none;
    }

    nav button,
    nav button:is(:hover, :focus){
        transition: transform 0.5s ease-in-out;
    }
}


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

            POPOVER MODALS HELL YEAH!!!!

....................................................*/
    
@media (max-width: 1045px) {

    ::backdrop{
        background: var(--aqua-bg) bottom/12vmax url("./bg/02.png");
        background-attachment: fixed;
    }
    
}

[popover]{
    height: calc(var(--full-height) + 1ch);
    width: calc(55svw - 1ch);
        bottom: var(--gap);
        left: calc(-1 * 35svw - 1ch);
    box-shadow: var(--life-saving-box-shadow);
    text-align: center;
    
    @media (max-width: 1045px) {
        width: calc(100svw - var(--double-gap));
        height: var(--full-height);
        bottom: var(--half-gap);
        left: calc(var(--gap) - 2.5ch);
    }

    .flex.centered{
        justify-content: center;
    }

    button.close{
        border: var(--border-level-3);
        border-style: outset;
        border-radius: var(--border-radius-level-2);
        padding: 0.5ch 3ch 1ch 3ch;
        line-height: 1;
        font-size: 1em;
        width: 12ch;
        display: block;
        margin: 1em auto;
    }

    p{
        max-width: 53ch;
    }

    h2{
        --inner-stroke:var(--white);
        --outer-stroke:var(--black);
        -webkit-text-fill-color: var(--blue-link);
    }

    h2, h3{
        margin: 0.75em auto 1em auto;
    }

    h3, h4, h5{
        font-family: var(--body-font);
    }

    h3{
        text-align: center;
        font-size: calc(var(--heading-size) / 3);
    }

    h4{
        font-size: calc(var(--heading-size) / 3.66);
        margin: 1ch auto;
    }
}

[popover].texture{
    padding: calc(var(--double-gap) * 0.66);
}

[popover].blue{
    h2{
        -webkit-text-fill-color: var(--blue-link);
    }
    .hugme::-webkit-scrollbar-thumb{
        background: var(--orange-texture);
            border-color: var(--orange);
    }
    button.close{
        background: var(--yellow-texture);
            border-color: var(--yellow);
    }
}

[popover].orange{
    h2{
        -webkit-text-fill-color: var(--orange-link);
    }
    .hugme::-webkit-scrollbar-thumb{
        background: var(--blue-texture);
            border-color: var(--blue);
    }
    button.close{
        background: var(--yellow-texture);
            border-color: var(--yellow);
    }
}

[popover].green{
    h2{
        -webkit-text-fill-color: var(--green-link);
    }
    .hugme::-webkit-scrollbar-thumb{
        background: var(--blue-texture);
            border-color: var(--blue);
    }
    button.close{
        background: var(--yellow-texture);
            border-color: var(--yellow);
    }
}

[popover].aqua{
    h2{
        -webkit-text-fill-color: var(--aqua-link);
    }
    .hugme::-webkit-scrollbar-thumb{
        background: var(--blue-texture);
            border-color: var(--blue);
    }
    button.close{
        background: var(--green-texture);
            border-color: var(--green);
    }
}

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

    specific popovers!!1

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

:is(#kin, #crush) h3 + section{
    display: flex;
        gap: var(--mini-gap);
        flex-flow: row wrap;
        align-items: center;
        justify-content: center;
    
    img{
        --size: 12ch;
        height: var(--size);
        width: var(--size);
        box-sizing: border-box;
        border: 0.25ch outset var(--green);
            border-radius: var(--border-radius-level-3);
    }

    > div{
        display: flex;
        flex-flow: column nowrap;
        align-items: center;
        justify-content: center;

        span{
            display: block;
            max-width: 12ch;
            font-size: 0.8em;
        }
    }
}

#kin h2{
    margin-bottom: 0;
}

#quiz{

    h2{
        margin-bottom: 1em;
    }

    h4{
        font-size: 1.05em;
    }

    a{
        text-decoration: none;
    }
}

#fave{
    text-align: left;
}

#fave{

    h2{
        margin-bottom: 1em;
    }

    section > .flex{

        gap: var(--gap);

        > div:first-child{
            font-weight: bold;
            font-size: 1.1em;
            min-width: max-content;
        }
    }
}

#inventory{
    img{
        max-width: 90%;
        margin: 1em auto;
        box-sizing: border-box;
        border: 0.25ch outset var(--orange);
            border-radius: var(--border-radius-level-3);
    }
}

#philosophy{

    text-align: left;

    p{
        margin-bottom: 2em;
    }

    img[id]{
        max-width: 33%;
        shape-margin: 0.5em;
    }

    img[id]:nth-of-type(odd){
        float: right;
    }

    img[id]:nth-of-type(even){
        float: left;
    }

    #h03{
        max-width: 29%;
        shape-outside: url("./assets/H03.png");

        + p{
            margin-bottom: 2.5em;
        }
    }

    #e02{
        max-width: 22%;
        shape-outside: url("./assets/E02.png");
        shape-margin: 1em;
        margin-right: 1em;
        margin-top: 1em;
    }

    #d02{
        shape-outside: url("./assets/D02.png");
        shape-margin: 0;
    }

    #b02{
        shape-outside: url("./assets/B02.png");
        margin-right: 1em;
        max-width: 36%;
        margin-top: 1.5em;

        + p{
            text-align-last: right;
        }
    }

    #s01{
        max-width: 25%;
        margin-left: 0.5em;
        margin-top: 2em;
        shape-outside: url("./assets/S01.png");
    }

    > div > ul:last-of-type li{
        margin-bottom: 1em;
    }
}

#gpoy-gallery{
        display: flex;
        margin-top: var(--half-gap);
        gap: calc(var(--mini-gap) * 2);
        flex-flow: row wrap;
        align-items: center;
        justify-content: center;
    
    img{
        --size: calc(16ch - var(--mini-gap));
        height: var(--size);
        width: var(--size);
        box-sizing: border-box;
        object-fit: cover;
        border: 0.25ch outset var(--orange);
            border-radius: var(--border-radius-level-3);
            border-color: inherit;
    }

    a:nth-of-type(7n + 1){
        border-color: var(--red);
    }

    a:nth-of-type(7n + 2){
        border-color: var(--orange);
    }

    a:nth-of-type(7n + 3){
        border-color: var(--yellow);
    }

    a:nth-of-type(7n + 4){
        border-color: var(--green);
    }

    a:nth-of-type(7n + 5){
        border-color: var(--aqua);
    }

    a:nth-of-type(7n + 6){
        border-color: var(--blue);
    }

    a:nth-of-type(7n + 7){
        border-color: var(--purple);
    }

    a:is(:hover, :focus) img{
        transform: scale(1.1);
    }

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