:root{
    --main-width: calc(var(--full-width) - var(--gap) * 2.22);

    --black: hsl(229, 27%, 31%);
    --navy: hsl(221, 44%, 47%);
    --aqua2: hsl(214, 76%, 45%);
    --lilac: hsl(231, 54%, 77%);

    --aqua: hsl(205, 75%, 72%);
    --aqua-texture: url("./assets/aqua.png") var(--aqua);

    --blue: hsl(211, 59%, 53%);
    --blue-texture: url("./assets/blue.png") var(--blue);

    --aqua-link: hsl(205, 71%, 63%);
    --green-link: hsl(161, 36%, 50%);
    --blue-link: hsl(211, 52%, 50%);
    --purple-link: hsl(247, 44%, 62%);
    --red-link: hsl(350, 57%, 59%);
    --orange-link: hsl(41, 83%, 49%);
    --yellow-link: hsl(88, 40%, 51%);

    --shadow-color: 209deg 36% 53%;

    --scrollbar-thumb: var(--aqua-texture);
}

body{
    background-color: var(--aqua-bg);
    background-image: url("./assets/42.gif");
    background-size: auto;
}

#hidari{
    background-image: url("./assets/r16.gif");
}

#migi{
    background-image: url("./assets/r16b.gif");
}

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

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

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

nav a, main > article{
    box-shadow: var(--box-shadow-medium);
}

header{
    --adjust: 1.22em;
    margin: auto;
    text-align: center;
    background-image: url("./assets/YES.png");
        background-repeat: no-repeat;
        background-position: center top;
        background-size: auto 100%;
    height: 22em;
    width: max-content;
    margin-bottom: calc(var(--adjust) + var(--double-gap));

    h1{
        color: var(--black);
        margin-top: calc(1em + var(--half-gap));
        margin-bottom: calc(var(--adjust) + var(--double-gap) * 2);
        height: 100%;
        display: flex;
            flex-flow: column nowrap;
            justify-content: space-between;
            align-items: center;
        transform: translateY(calc(-1 * var(--adjust)));

        span{
            --inner-stroke: var(--white)!important;
            --outer-stroke: var(--black)!important;
        }

        section{
            transform: translateY(calc(var(--adjust) + var(--adjust) * 0.33));
            /*  
            color: var(--aqua-link);

            span > span:nth-child(even){
                color: var(--blue-link);
            }
            */
        }
    
        div::before, div::after{
           --size: 1.44em;
           content: "";
           display: inline-block;
           height: var(--size);
           width: var(--size);
           background-image: url("/assets/idx/sticker/I14_A.png");
           background-size: contain;
           background-repeat: no-repeat;
           background-position: center bottom;
           margin: 0 0.25ch;
           transform: translateY(0.5ch) scaleX(-1);
        }
    
        div::after{
            transform: translateY(0.5ch);
        }
    }
}

header + p{
    font-weight: bold;
    font-size: 1.55em;
    text-align: center;
    width: 35ch;
    text-shadow: var(--text-shadow-white);
    filter: var(--drop-shadow-medium);
}

nav{
    text-align: center;

    section{
        display: flex;
            flex-flow: row wrap;
            align-items: center;
            justify-content: center;
            gap: var(--gap);
    }

    a{
        min-width: 12ch;
        display: flex;
            justify-content: center;
            align-items: center;
        padding: 1ch 2ch!important;
        padding-top: 0.25ch!important;

        span{
            font-weight: bold;
            text-shadow: var(--text-shadow-white);
            filter: 
                drop-shadow(0.01em 0.02em 0.02em rgb(0 0 0 / 0.18))
                drop-shadow(0.01em 0.02em 0.02em rgb(0 0 0 / 0.15))
                drop-shadow(0.08em 0.1em 0.02em rgb(0 0 0 / 0.15));;
        }
    }

    a.texture:not([href="./guide.php"]):is(:hover, :focus){
        background: var(--white-texture);
        border-color: var(--white);
    }

    a.texture:not([href="./guide.php"]), a.texture:not([href="./guide.php"]):is(:hover, :focus){
        transition: background 0.3s ease-in-out, border 0.3s ease-in-out;
    }

    a[href="./guide.php"].texture:is(:hover, :focus){
        transform: translateY(calc(var(--half-gap) * -1));
    }
}

a[href="./guide.php"].texture{
    display: block;
    width: fit-content;
    font-family: var(--heading-font);
    font-size: 1.55em;
    padding: 0.55ch 5.55ch 1ch 5.55ch!important;
    background-size: contain;
    background-image: url("./assets/43.gif");
    border-color: #62A0E2;
    margin: auto;
    margin-top: calc(var(--gap) * 1.66);
    margin-bottom: calc(var(--half-gap) * -1);
}

a[href="./guide.php"].texture, a[href="./guide.php"].texture:is(:hover, :focus){
    transition: transform 0.3s ease-in-out;
}

:root{--text-shadow-double: 
    calc(var(--stroke-width) * 1) calc(var(--stroke-width) * 0) 0
    var(--white),
    calc(var(--stroke-width) * 0.9239) calc(var(--stroke-width) * 0.3827) 0
    var(--white),
    calc(var(--stroke-width) * 0.7071) calc(var(--stroke-width) * 0.7071) 0
    var(--white),
    calc(var(--stroke-width) * 0.3827) calc(var(--stroke-width) * 0.9239) 0
    var(--white),
    calc(var(--stroke-width) * 0) calc(var(--stroke-width) * 1) 0
    var(--white),
    calc(var(--stroke-width) * -0.3827) calc(var(--stroke-width) * 0.9239) 0
    var(--white),
    calc(var(--stroke-width) * -0.7071) calc(var(--stroke-width) * 0.7071) 0
    var(--white),
    calc(var(--stroke-width) * -0.9239) calc(var(--stroke-width) * 0.3827) 0
    var(--white),
    calc(var(--stroke-width) * -1) calc(var(--stroke-width) * 0) 0
    var(--white),
    calc(var(--stroke-width) * -0.9239) calc(var(--stroke-width) * -0.3827) 0
    var(--white),
    calc(var(--stroke-width) * -0.7071) calc(var(--stroke-width) * -0.7071) 0
    var(--white),
    calc(var(--stroke-width) * -0.3827) calc(var(--stroke-width) * -0.9239) 0
    var(--white),
    calc(var(--stroke-width) * 0) calc(var(--stroke-width) * -1) 0
    var(--white),
    calc(var(--stroke-width) * 0.3827) calc(var(--stroke-width) * -0.9239) 0
    var(--white),
    calc(var(--stroke-width) * 0.7071) calc(var(--stroke-width) * -0.7071) 0
    var(--white),
    calc(var(--stroke-width) * 0.9239) calc(var(--stroke-width) * -0.3827) 0
    var(--white),

    calc(var(--stroke-width-two) * 1 * 2.5) calc(var(--stroke-width-two) * 0 * 2.5) 0
    var(--navy),
    calc(var(--stroke-width-two) * 0.9239 * 2.5) calc(var(--stroke-width-two) * 0.3827 * 2.5) 0
    var(--navy),
    calc(var(--stroke-width-two) * 0.7071 * 2.5) calc(var(--stroke-width-two) * 0.7071 * 2.5) 0
    var(--navy),
    calc(var(--stroke-width-two) * 0.3827 * 2.5) calc(var(--stroke-width-two) * 0.9239 * 2.5) 0
    var(--navy),
    calc(var(--stroke-width-two) * 0 * 2.5) calc(var(--stroke-width-two) * 1 * 2.5) 0
    var(--navy),
    calc(var(--stroke-width-two) * -0.3827 * 2.5) calc(var(--stroke-width-two) * 0.9239 * 2.5) 0
    var(--navy),
    calc(var(--stroke-width-two) * -0.7071 * 2.5) calc(var(--stroke-width-two) * 0.7071 * 2.5) 0
    var(--navy),
    calc(var(--stroke-width-two) * -0.9239 * 2.5) calc(var(--stroke-width-two) * 0.3827 * 2.5) 0
    var(--navy),
    calc(var(--stroke-width-two) * -1 * 2.5) calc(var(--stroke-width-two) * 0 * 2.5) 0
    var(--navy),
    calc(var(--stroke-width-two) * -0.9239 * 2.5) calc(var(--stroke-width-two) * -0.3827 * 2.5) 0
    var(--navy),
    calc(var(--stroke-width-two) * -0.7071 * 2.5) calc(var(--stroke-width-two) * -0.7071 * 2.5) 0
    var(--navy),
    calc(var(--stroke-width-two) * -0.3827 * 2.5) calc(var(--stroke-width-two) * -0.9239 * 2.5) 0
    var(--navy),
    calc(var(--stroke-width-two) * 0 * 2.5) calc(var(--stroke-width-two) * -1 * 2.5) 0
    var(--navy),
    calc(var(--stroke-width-two) * 0.3827 * 2.5) calc(var(--stroke-width-two) * -0.9239 * 2.5) 0
    var(--navy),
    calc(var(--stroke-width-two) * 0.7071 * 2.5) calc(var(--stroke-width-two) * -0.7071 * 2.5) 0
    var(--navy),
    calc(var(--stroke-width-two) * 0.9239 * 2.5) calc(var(--stroke-width-two) * -0.3827 * 2.5) 0
    var(--navy);
}

main{
    margin: var(--double-gap) auto;

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

    @media (min-width: 1000px){
        width: 88ch;
    }

    article:not(:last-child){
        margin-bottom: calc(var(--gap) * 1.5);
    }

    article.texture > div{
        --back-position: 0.75em;
        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: 1.33em;       
    }

    article.texture.blue > div{
        background-image: 
            url("./assets/L07.png"),
            url("./assets/O10.png"),
            url("./assets/O10.png"),
            url("./assets/L07.png"),
            url("/bg/texture/white.png"); 
    }

    article.texture.aqua > div{
        background-image: 
            url("./assets/D08.png"),
            url("./assets/H11.png"),
            url("./assets/H11.png"),
            url("./assets/D08.png"),
            url("/bg/texture/white.png"); 
    }

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

    h2{
        text-shadow: var(--text-shadow-double);
        line-height: 1.33;
    }

    h2:not(.nosticker)::before, h2:not(.nosticker)::after{
        --size: 0.77em;
        content: "";
        display: inline-block;
        margin: 0 0.88ch;
        height: var(--size);
        width: var(--size);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }

    article.texture.blue h2::before, article.texture.blue h2::after{
        background-image: url("./assets/T11.png");
    }

    article.texture.aqua h2::before, article.texture.aqua h2::after{
        background-image: url("./assets/G10.png");
        /* width: calc(var(--size) * 2); */
    }

    h2::after{
        transform: scaleX(-1);
    }

    li{
        margin-bottom: 1em;

        p{
            text-align: left;
        }
    }

    p{
        text-align:center;
    }

    article div a[href="./guide.php"].texture{
        margin: 1em auto;
        width: fit-content;
        display: block;

        span{
            font-weight: bold;
            text-shadow: var(--text-shadow-white);
            filter: 
                drop-shadow(0.01em 0.02em 0.02em rgb(0 0 0 / 0.18))
                drop-shadow(0.01em 0.02em 0.02em rgb(0 0 0 / 0.15))
                drop-shadow(0.08em 0.1em 0.02em rgb(0 0 0 / 0.15));;
        }
    }

    article div a[href="./guide.php"].texture:is(:hover, :focus){
        transform: scale(1.1);
    }
}

footer{
    margin-bottom: calc(var(--gap) * -1);

    section{
        padding: var(--half-gap)!important;
        margin: var(--gap) auto;
    }

    div{
        padding: 0 1.5em 1em 1.5em!important;
        line-height: 1;
    }

    section:first-child{ 
        width: fit-content;

        > div{
            padding-bottom: 0!important;
        }
    }

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

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