body{
    background-color: var(--aqua-bg);
    background-image: url("/bg/01.png");
       background-size: 12vmax auto;
       background-attachment: fixed;
    text-align: center;
    filter: var(--drop-shadow-low);
}

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

main > nav{
    margin: 2em auto;
}

nav{
    a{
        padding: 0.5ch 2ch 1ch 2ch;
        box-sizing: border-box;
        border: var(--border-level-1);
            border-radius: var(--border-radius-level-1);
            border-style: outset;
        text-shadow: var(--text-shadow-white);
        width: max-content;
        margin: 1em 0.5em 2em 0.5em;
        color: var(--black)!important;
        font-weight: bold;
        text-decoration: none;
        display: inline-block;
        box-shadow: var(--box-shadow-low);

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

    a:is(:hover, :focus){
        transform: translateY(calc(-0.5 * var(--gap)));
        box-shadow: var(--box-shadow-medium);
        backface-visibility: hidden;
    }

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

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

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

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

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

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

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

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

footer{
    margin: 1em auto;
}

#pic{
    width: 100%;
    float: left;
    height: var(--full-height);
    width: 33ch;
    position: sticky;
    top: var(--gap);
    filter: var(--drop-shadow-low);

	@media (orientation: portrait) {
        float: none;
        height: auto;
        position: static;
	}
}

.fancybox a{
    filter: var(--drop-shadow-medium);

    img{
        border-radius: var(--border-radius-level-1);
    }
}