/* eli-schaefer.com styles */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#3a2418}
.mascot{width:180px;height:180px;display:block;image-rendering:pixelated;filter:drop-shadow(4px 4px 0 #1a0f0a)}
.hidden{display:none}
a{color:#FFD166}
a:hover{color:#FFF3DC}
.scene{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.leaf{position:absolute;top:-24px;width:15px;height:15px;animation:fall linear infinite}
@keyframes fall{0%{transform:translate(0,0) rotate(0deg)}
25%{transform:translate(30px,25vh) rotate(90deg)}
50%{transform:translate(-10px,50vh) rotate(180deg)}
75%{transform:translate(35px,75vh) rotate(270deg)}
100%{transform:translate(0,110vh) rotate(360deg)}
}
.walker{position:absolute;bottom:3%;animation:walk linear infinite}
.walker.rev{animation-name:walkback}
@keyframes walk{from{left:-80px}
to{left:105%}
}
@keyframes walkback{from{left:105%}
to{left:-80px}
}
.hop{animation:hop .9s ease-in-out infinite}
@keyframes hop{0%,100%{transform:translateY(0) scaleY(.9)}
10%{transform:translateY(0) scaleY(1.05)}
50%{transform:translateY(-34px) scaleY(1)}
}
.wobble{animation:wobble 2.4s ease-in-out infinite}
@keyframes wobble{0%,100%{transform:rotate(-4deg)}
50%{transform:rotate(4deg) translateY(-6px)}
}
.pix{image-rendering:pixelated;shape-rendering:crispEdges}
.panel{background:rgba(43,27,20,.92);border:4px solid #FFF3DC;box-shadow:6px 6px 0 #1a0f0a;padding:28px;box-sizing:border-box}
.ph{border:3px dashed #F28C38;background:rgba(242,140,56,.08);color:#FFD9A8;display:flex;align-items:center;justify-content:center;text-align:center;padding:12px;box-sizing:border-box;font-size:20px}
.btn{font-family:'Press Start 2P',monospace;font-size:13px;background:#FFD166;color:#2B1B14;border:4px solid #2B1B14;box-shadow:4px 4px 0 #1a0f0a;padding:14px 18px;cursor:pointer;min-height:48px}
.btn:active{transform:translate(4px,4px);box-shadow:0 0 0 #1a0f0a}
.btn.alt{background:#F28C38}
.navlink{font-family:'Press Start 2P',monospace;font-size:11px;color:#2B1B14;background:#FFF3DC;padding:12px 12px;text-decoration:none;border:3px solid #2B1B14;display:inline-block}
.navlink:hover{background:#FFD166;color:#2B1B14}
@media (prefers-reduced-motion: reduce){.leaf,.walker,.hop,.wobble{animation:none}
}

@media (max-width:480px){.panel{padding:18px}}