:root {
    --shadow-color: 35deg 30% 51%;
}

body{
    background-image: url("./assets/bg01.gif");
    text-align: center;
}

main{
    margin: auto;
    width: 75svw;
    filter: var(--drop-shadow-medium);

    #pixel .fancybox{
        image-rendering: crisp-edges;

        a{
            width: max-content;
        }

        a img{
            zoom: 1.5;
        }
    }

}

h1, h2, h3{
    padding: var(--gap);
    padding-top: var(--half-gap);
    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 auto;

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

h1{
    background: var(--red-texture);
    border-color: var(--red);
}

h2{
    background: var(--orange-texture);
    border-color: var(--orange);
}

h3{
    background: var(--green-texture);
    border-color: var(--green);
}

.fancybox a{
    width: 10%;

    img{
        width: 100%;
    }
}

footer{
    margin: 1em auto;
}