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

	   layout

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

:root{
    --shadow-color: 254deg 32% 59%;
    --link-size: 18.8vmax;
    --scrollbar-thumb: var(--purple-texture);
    
    @media (orientation: portrait){
        --link-size: 21vmax;
    }
}

body{
    background-color: var(--purple-bg);
    background-image: url("/bg/10.png");
        background-size: 12vmax auto;
        background-repeat: repeat;
    margin-left: 0;
}

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

        main

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

main{
    height: calc(var(--full-height) - var(--double-gap) * 1.5);
    display: flex;
    align-items: center;
    justify-content: center;
}

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

        navigation

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

nav{
    margin-top: var(--double-gap);
    display: flex;
        flex-flow: row nowrap;
        gap: calc(var(--link-size) * 0.333);
    
    @media (orientation: portrait){
        flex-flow: column;
    }

    a{
        --size: calc(var(--double-gap) * 4);
        height: var(--size);
        width: fit-content;
        padding: 1em;
        padding-top: 0.66em;
        display: flex;
            align-items: stretch;
            justify-content: center;
        border: var(--border-level-1);
               border-radius: var(--border-radius-level-1);
             border-style: outset;
        box-shadow: var(--box-shadow-medium);
        background: var(--purple-texture);
        border-color: var(--purple);
        color: var(--black)!important;
        text-decoration: none;
        font-weight: bold;
        text-align: center;

        img{
            max-height: 100%;
            filter: var(--simple-text-shadow);
        }

        > span{
            font-size: 1.22em;
            width: 15ch;
            background: var(--white-texture);
            padding: var(--half-gap) var(--gap);
            border: var(--border-level-2);
               border-style: inset;
               border-radius: var(--border-radius-level-2);
               border-color: inherit;
            box-shadow: var(--white-inset-shadow);
            margin-top: 0.5ch;
            display: flex;
                align-items: center;
                justify-content: center;
                flex-flow: column nowrap;

            > span{
                filter: var(--drop-text-shadow);
                p{
                    font-weight: normal;
                    font-size: 0.8em;
                    margin: 1ch auto;
                }
            }
        }
    }

    a:is(:hover, :focus){
        transform: scale(1.0125) translateZ(0) translateY(calc(-1 * var(--gap)));
        box-shadow: var(--box-shadow-high);
        backface-visibility: hidden;
    }

    a, a:is(:hover, :focus){
        transition: transform .3s ease-in-out, box-shadow .2s linear;
    }

    a > span::before{
        content: "";
        display: block;
        height: 2em;
        width: 15ch;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        text-align: center;
        margin: var(--one-fourth-gap) auto;
        margin-top: 0;
        filter: var(--drop-text-shadow);
    }

    a:nth-of-type(3n + 1){
        background: var(--purple-texture);
        border-color: var(--purple);

        > span{
            margin-left: var(--gap);
        }
    }

    a:nth-of-type(3n + 1) > span::before{
        background-image: url("./assets/F07_A.png");
    } 

    a:nth-of-type(3n + 2){
        background: var(--blue-texture);
        border-color: var(--blue);

        > span{
            margin-right: var(--gap);
        }
    }

    a:nth-of-type(3n + 2) > span::before{
        background-image: url("./assets/N18.png");
    } 

    a:nth-of-type(3n) > span::before{
        background-image: url("./assets/K30.png");
    } 
}

#seme, #uke{
    background-image: url("./assets/M18.png");
    background-repeat: repeat-x;
    background-position-x: center;
}

#seme{
    top: var(--half-gap);
}

#uke{
    position: relative;
    overflow: hidden;
    margin: var(--half-gap) 0;
}

footer, #seme, #uke{
    filter: var(--drop-shadow-low);
}

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