@font-face {
    font-family: "RockSalt";
    src: url("RockSalt.ttf") format("truetype");
}
@font-face {
    font-family: "PermanentMarker";
    src: url("PermanentMarker.ttf") format("truetype");
}
@font-face {
    font-family: "UnicornsAreAwesome";
    src: url("UnicornsAreAwesome.ttf") format("truetype");
}

body { background-image: url("bgs/bg.jpg"); background-size: cover; }
body { padding: 10px; margin:0 0; font-family:PermanentMarker, sans; font-size:12pt; }
body { min-height:100vh; }

body { box-sizing: border-box; padding:0; }

h1 {
    font-size: 40pt;
    text-align: center;
    margin-bottom:0;
}

form {
    display:inline;
}

/* ---------------------------------------------------------------------------- */

.menu {
    display:flex;

    flex-row: row wrap;
    justify-content:center;
    align-items:baseline;

    font-size: 12pt;
    margin-bottom: 1ex;
}

.menu > a,
.menu > a:link, .menu > a:visited, .menu > a:hover, .menu > a:active {
    color:#333;
    text-shadow: 12px 15px 9px #333, -9px -10px 23px #333;
    padding: .5ex 1em;

    transition-property:text-shadow, color, font-size;
    transition-duration:200ms;
}

.menu > a:hover, .menu > a.current {
    text-shadow: 12px 15px 9px #000, -9px -10px 23px #000;
    color:black;
    font-size: 14pt;
}
.menu > a.current {
    font-size: 20pt;
}

/* ---------------------------------------------------------------------------- */

.content {
    margin:0 auto;
    width:max(20em, 90vw);
    background-color:#fffc;
    padding:1ex 1em;
    box-shadow: 12px 15px 9px #444, -9px -10px 23px #444;
}
.content :not(h1,h2,h3,h4,h5) {
    font-family:UnicornsAreAwesome, sans;
    font-size:20pt;
}
.content.error * {
    font-family:mono; 
    font-size:16pt;
}

.content.paypal {
    text-align:center;
}
.content.paypal strong {
    font-size: 180%;
}
.content.paypal button {
    font-family:PermanentMarker; 
    font-size:16pt;
}

.content a, .content a:link, .content a:visited, .content a:active {
    color:#333;
    text-decoration:underline dotted;
}
.content a:hover {
    color:#000;
    text-decoration:underline solid;
}

/* ---------------------------------------------------------------------------- */

.shop {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content: space-around;
    padding:0px 30px;
}

.item {
    padding:1ex;
    margin:20px 0;
    position:relative;
    display:block;
}
.item, .item:link, .item:visited, .item:hover, .item:active {
    color:black;
}
.item h2 {
    margin:0;
    text-align:center;
    font-size:20pt;
}

.item .pics {
    position:relative;
    transition-property: top, left;
    transition-duration: 100ms;
    left: 0;
    top: 0;
}

.item .pics img {
    transition-property: box-shadow, transform, filter;
    transition-duration: 200ms;

    min-width:100px;
    max-width:200px;

    min-height:100px;
    max-height:200px;

    border: 3px ridge #553c2a;
    box-shadow: 12px 15px 9px black, -9px -10px 23px black;
    margin:20px auto;
    display:block;
}
.item .pics img[src$=".png"] {
    border: none;
    box-shadow:none;
    filter: drop-shadow(12px 15px 9px black) drop-shadow(-9px -10px 23px black);
}
.item.active .pics img {
    transform:scale( 2);
    box-shadow: 24px 30px 18px black, -18px -20px 46px black;
}
.item.active .pics img[src$=".png"] {
    box-shadow:none;
    filter: drop-shadow(24px 30px 18px black) drop-shadow(-18px -20px 46px black);
}

.item .text, .item .price, .item h2 {
    text-align:center;
}
.item p {
    margin-bottom:.25ex;
}

.item .price.sold {
    text-decoration:line-through;
}
.item .price button {
    font-family: PermanentMarker, sans;
    font-size: 9pt;
}

@keyframes zappel_x {
    0%   {left: 0px;}
    20%   {left: 1.2px;}
    30%   {left: -.5px;}
    60%   {left: .75px;}
    70%   {left: -1.3px;}
    90%   {left: 1.5px;}
}
@keyframes zappel_y {
    0%   {top: -1px;}
    20%   {top: 1.5px;}
    30%   {top: 0px;}
    50%   {top: 1.2px;}
    60%   {top: -.5px;}
    90%   {top: .75px;}
}