:root{--waterline: .6;--island-width: 640px;--ink: #f5f2e8}*{box-sizing:border-box}html,body{margin:0;padding:0;background:#8cf2ff;color:var(--ink);font-family:Courier New,Times,serif}body{position:relative}#water{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;display:block;z-index:2}#hero{position:relative;height:95vh;overflow:hidden}#title{position:absolute;top:8vh;left:0;right:0;margin:0;text-align:center;font-family:Arial,Arial Black,sans-serif;font-size:clamp(60px,12vw,80px);letter-spacing:2px;color:#f72d09;text-shadow:1px 1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,-1px -1px 0 #000,10px 10px 0 #048234,2px 2px 0 #000;transform:rotate(-10deg);z-index:5;-webkit-user-select:none;user-select:none}#egg{position:absolute;z-index:5;transform-origin:50% 90%;animation:egg-rock 5.2s ease-in-out infinite}@keyframes egg-rock{0%,to{transform:rotate(-4deg)}50%{transform:rotate(8deg)}}#island-wrap{position:absolute;left:50%;top:calc(var(--waterline) * 100%);transform:translate(-50%,-83%);width:var(--island-width);z-index:1}#island{display:block;width:100%;height:auto;-webkit-user-select:none;user-select:none}#fish-layer{position:absolute;top:0;right:0;bottom:0;left:0;z-index:3;pointer-events:none;overflow:hidden}.fish{position:absolute;top:0;left:0;will-change:transform;-webkit-user-select:none;user-select:none}.fish-img{display:block;width:100%;image-rendering:pixelated}.fish:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:#0818466b;-webkit-mask:var(--sprite) center / 100% 100% no-repeat;mask:var(--sprite) center / 100% 100% no-repeat;pointer-events:none}#scroll-hint{position:absolute;bottom:3vh;left:0;right:0;z-index:4;text-align:center;font-family:Courier New,monospace;font-weight:700;color:var(--ink);text-shadow:1px 1px 0 #000;z-index:5;animation:bob 1.2s ease-in-out infinite}@keyframes bob{50%{transform:translateY(6px)}}#sections{position:relative;z-index:4;padding-top:0}.section{width:min(1000px,80%);margin:0 auto 70px;padding:10px clamp(10px,4vw,40px) 20px;background:url(../assets/fill.png) repeat;background-size:200px 80px;border:20px solid transparent;border-image:url(../assets/outline.png) 48 repeat;opacity:.9}.section h2{font-family:Courier New,Courier,monospace;font-size:clamp(24px,5vw,26px);color:#a8f3a3;letter-spacing:2px;margin:0 0 5px;padding-bottom:0}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:5px}.tile{display:block;text-decoration:none;color:var(--ink);background:#041422b8;border:3px solid #000;padding:8px}.tile:hover{outline:3px dashed #ffe100}.tile-pic{aspect-ratio:1;width:100%;background:#123;border:2px solid #000;overflow:hidden;display:flex;align-items:center;justify-content:center}.tile-pic img{width:100%;height:100%;object-fit:cover;display:block}.tile-cap{margin-top:6px;font-family:Courier New,monospace;font-size:14px;text-align:center}