:root{ --banana:#ffd23f; --banana-dark:#e8a800; --leaf-dark:#1f7a3f; --leaf-mid:#2fa356; --leaf-light:#57c778; --ink:#1c3a2e; --paper:#fffaf0; --term-green:#57ff8f; --accent:#ff6b6b; --accent2:#6556f2; --pixel:'Press Start 2P', monospace; --body-font:'Nunito', system-ui, sans-serif; } *{ box-sizing:border-box; image-rendering:pixelated; } html,body{ height:100%; } body{ margin:0; font-family:var(--body-font); color:var(--ink); background:#000; overflow:hidden; } /* ---------- desktop ---------- */ .desktop{ position:fixed; inset:0; overflow:hidden; background: linear-gradient(180deg, #ffe37a 0%, #ffd23f 46%, var(--leaf-mid) 47%, var(--leaf-dark) 100%); } .desktop[hidden]{ display:none; } .menubar{ height:36px; background:var(--ink); color:var(--paper); display:flex; align-items:center; justify-content:space-between; padding:0 14px; font-family:var(--pixel); font-size:.75rem; letter-spacing:.02em; border-bottom:4px solid var(--banana-dark); } .icons{ position:absolute; top:56px; left:16px; display:flex; flex-direction:column; gap:20px; } .icon{ background:none; border:2px solid transparent; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:6px; width:92px; padding:8px 4px; border-radius:4px; font-family:var(--pixel); font-size:.62rem; letter-spacing:.01em; color:var(--ink); text-shadow:1px 1px 0 var(--paper); } .icon:hover, .icon:focus-visible{ background:rgba(255,255,255,.35); border-color:var(--ink); outline:none; } .icon-glyph{ font-size:2rem; height:42px; display:flex; align-items:center; justify-content:center; } .icon-label{ text-align:center; line-height:1.4; } /* ---------- pixel app-icon sprites ---------- */ .icon-banana{ display:inline-block; width:45px; height:39px; position:relative; flex-shrink:0; } .icon-banana::before{ content:''; position:absolute; top:0; left:0; width:3px; height:3px; box-shadow: 3px 0px 0 #1c3a2e, 6px 0px 0 #1c3a2e, 9px 0px 0 #1c3a2e, 12px 0px 0 #1c3a2e, 15px 0px 0 #1c3a2e, 0px 3px 0 #1c3a2e, 3px 3px 0 #6b4226, 6px 3px 0 #6b4226, 9px 3px 0 #ffd23f, 12px 3px 0 #ffd23f, 15px 3px 0 #ffd23f, 18px 3px 0 #1c3a2e, 3px 6px 0 #1c3a2e, 6px 6px 0 #ffd23f, 9px 6px 0 #ffd23f, 12px 6px 0 #ffd23f, 15px 6px 0 #ffd23f, 18px 6px 0 #ffd23f, 21px 6px 0 #1c3a2e, 3px 9px 0 #1c3a2e, 6px 9px 0 #ffd23f, 9px 9px 0 #ffd23f, 12px 9px 0 #ffd23f, 15px 9px 0 #ffd23f, 18px 9px 0 #ffd23f, 21px 9px 0 #1c3a2e, 6px 12px 0 #1c3a2e, 9px 12px 0 #ffd23f, 12px 12px 0 #ffd23f, 15px 12px 0 #ffd23f, 18px 12px 0 #ffd23f, 21px 12px 0 #ffd23f, 24px 12px 0 #1c3a2e, 9px 15px 0 #1c3a2e, 12px 15px 0 #ffd23f, 15px 15px 0 #ffd23f, 18px 15px 0 #ffd23f, 21px 15px 0 #ffd23f, 24px 15px 0 #ffd23f, 27px 15px 0 #1c3a2e, 12px 18px 0 #1c3a2e, 15px 18px 0 #ffd23f, 18px 18px 0 #ffd23f, 21px 18px 0 #ffd23f, 24px 18px 0 #ffd23f, 27px 18px 0 #ffd23f, 30px 18px 0 #1c3a2e, 15px 21px 0 #1c3a2e, 18px 21px 0 #ffd23f, 21px 21px 0 #ffd23f, 24px 21px 0 #ffd23f, 27px 21px 0 #ffd23f, 30px 21px 0 #ffd23f, 33px 21px 0 #1c3a2e, 15px 24px 0 #1c3a2e, 18px 24px 0 #ffd23f, 21px 24px 0 #ffd23f, 24px 24px 0 #ffd23f, 27px 24px 0 #ffd23f, 30px 24px 0 #ffd23f, 33px 24px 0 #1c3a2e, 18px 27px 0 #1c3a2e, 21px 27px 0 #ffd23f, 24px 27px 0 #ffd23f, 27px 27px 0 #ffd23f, 30px 27px 0 #ffd23f, 33px 27px 0 #ffd23f, 36px 27px 0 #1c3a2e, 21px 30px 0 #1c3a2e, 24px 30px 0 #ffd23f, 27px 30px 0 #ffd23f, 30px 30px 0 #ffd23f, 33px 30px 0 #ffd23f, 36px 30px 0 #ffd23f, 39px 30px 0 #1c3a2e, 21px 33px 0 #1c3a2e, 24px 33px 0 #ffd23f, 27px 33px 0 #ffd23f, 30px 33px 0 #ffd23f, 33px 33px 0 #ffd23f, 36px 33px 0 #ffd23f, 39px 33px 0 #1c3a2e, 24px 36px 0 #1c3a2e, 27px 36px 0 #1c3a2e, 30px 36px 0 #1c3a2e, 33px 36px 0 #1c3a2e, 36px 36px 0 #1c3a2e; } /* icon-banana: 45px x 39px */ .icon-facts{ display:inline-block; width:36px; height:30px; position:relative; flex-shrink:0; } .icon-facts::before{ content:''; position:absolute; top:0; left:0; width:3px; height:3px; box-shadow: 6px 0px 0 #1c3a2e, 9px 0px 0 #1c3a2e, 12px 0px 0 #1c3a2e, 15px 0px 0 #1c3a2e, 18px 0px 0 #1c3a2e, 21px 0px 0 #1c3a2e, 24px 0px 0 #1c3a2e, 3px 3px 0 #1c3a2e, 6px 3px 0 #3d6ea3, 9px 3px 0 #3d6ea3, 12px 3px 0 #3d6ea3, 15px 3px 0 #3d6ea3, 18px 3px 0 #3d6ea3, 21px 3px 0 #3d6ea3, 24px 3px 0 #3d6ea3, 27px 3px 0 #1c3a2e, 3px 6px 0 #1c3a2e, 6px 6px 0 #3d6ea3, 9px 6px 0 #3d6ea3, 12px 6px 0 #3d6ea3, 15px 6px 0 #3d6ea3, 18px 6px 0 #3d6ea3, 21px 6px 0 #3d6ea3, 24px 6px 0 #3d6ea3, 27px 6px 0 #1c3a2e, 3px 9px 0 #1c3a2e, 6px 9px 0 #3d6ea3, 9px 9px 0 #3d6ea3, 12px 9px 0 #3d6ea3, 15px 9px 0 #3d6ea3, 18px 9px 0 #3d6ea3, 21px 9px 0 #3d6ea3, 24px 9px 0 #3d6ea3, 27px 9px 0 #1c3a2e, 30px 9px 0 #1c3a2e, 0px 12px 0 #1c3a2e, 3px 12px 0 #4c6b52, 6px 12px 0 #4c6b52, 9px 12px 0 #4c6b52, 12px 12px 0 #4c6b52, 15px 12px 0 #4c6b52, 18px 12px 0 #4c6b52, 21px 12px 0 #4c6b52, 24px 12px 0 #4c6b52, 27px 12px 0 #4c6b52, 30px 12px 0 #4c6b52, 33px 12px 0 #1c3a2e, 0px 15px 0 #1c3a2e, 3px 15px 0 #4c6b52, 6px 15px 0 #4c6b52, 9px 15px 0 #4c6b52, 12px 15px 0 #4c6b52, 15px 15px 0 #4c6b52, 18px 15px 0 #4c6b52, 21px 15px 0 #4c6b52, 24px 15px 0 #4c6b52, 27px 15px 0 #4c6b52, 30px 15px 0 #4c6b52, 33px 15px 0 #1c3a2e, 0px 18px 0 #e26a6a, 3px 18px 0 #e26a6a, 6px 18px 0 #e26a6a, 9px 18px 0 #e26a6a, 12px 18px 0 #e26a6a, 15px 18px 0 #e26a6a, 18px 18px 0 #e26a6a, 21px 18px 0 #e26a6a, 24px 18px 0 #e26a6a, 27px 18px 0 #e26a6a, 30px 18px 0 #e26a6a, 33px 18px 0 #e26a6a, 0px 21px 0 #e26a6a, 3px 21px 0 #e26a6a, 6px 21px 0 #e26a6a, 9px 21px 0 #e26a6a, 12px 21px 0 #e26a6a, 15px 21px 0 #e26a6a, 18px 21px 0 #e26a6a, 21px 21px 0 #e26a6a, 24px 21px 0 #e26a6a, 27px 21px 0 #e26a6a, 30px 21px 0 #e26a6a, 33px 21px 0 #e26a6a, 0px 24px 0 #e26a6a, 3px 24px 0 #e26a6a, 6px 24px 0 #e26a6a, 9px 24px 0 #e26a6a, 12px 24px 0 #e26a6a, 15px 24px 0 #e26a6a, 18px 24px 0 #e26a6a, 21px 24px 0 #e26a6a, 24px 24px 0 #e26a6a, 27px 24px 0 #e26a6a, 30px 24px 0 #e26a6a, 33px 24px 0 #e26a6a, 0px 27px 0 #e26a6a, 3px 27px 0 #e26a6a, 6px 27px 0 #e26a6a, 9px 27px 0 #e26a6a, 12px 27px 0 #e26a6a, 15px 27px 0 #e26a6a, 18px 27px 0 #e26a6a, 21px 27px 0 #e26a6a, 24px 27px 0 #e26a6a, 27px 27px 0 #e26a6a, 30px 27px 0 #e26a6a, 33px 27px 0 #e26a6a; } /* icon-facts: 36px x 30px */ .icon-vpn{ display:inline-block; width:33px; height:36px; position:relative; flex-shrink:0; } .icon-vpn::before{ content:''; position:absolute; top:0; left:0; width:3px; height:3px; box-shadow: 3px 0px 0 #1c3a2e, 6px 0px 0 #1c3a2e, 9px 0px 0 #1c3a2e, 12px 0px 0 #1c3a2e, 15px 0px 0 #1c3a2e, 18px 0px 0 #1c3a2e, 21px 0px 0 #1c3a2e, 24px 0px 0 #1c3a2e, 27px 0px 0 #1c3a2e, 3px 3px 0 #1c3a2e, 6px 3px 0 #ff6b6b, 9px 3px 0 #ff6b6b, 12px 3px 0 #ff6b6b, 15px 3px 0 #ff6b6b, 18px 3px 0 #ff6b6b, 21px 3px 0 #ff6b6b, 24px 3px 0 #ff6b6b, 27px 3px 0 #1c3a2e, 3px 6px 0 #1c3a2e, 6px 6px 0 #ff6b6b, 9px 6px 0 #ff6b6b, 12px 6px 0 #ff6b6b, 15px 6px 0 #ff6b6b, 18px 6px 0 #ff6b6b, 21px 6px 0 #ff6b6b, 24px 6px 0 #ff6b6b, 27px 6px 0 #1c3a2e, 3px 9px 0 #1c3a2e, 6px 9px 0 #ff6b6b, 9px 9px 0 #ff6b6b, 12px 9px 0 #ff6b6b, 15px 9px 0 #ff6b6b, 18px 9px 0 #ff6b6b, 21px 9px 0 #ff6b6b, 24px 9px 0 #ff6b6b, 27px 9px 0 #1c3a2e, 6px 12px 0 #1c3a2e, 9px 12px 0 #ff6b6b, 12px 12px 0 #ff6b6b, 15px 12px 0 #ff6b6b, 18px 12px 0 #ff6b6b, 21px 12px 0 #ff6b6b, 24px 12px 0 #1c3a2e, 6px 15px 0 #1c3a2e, 9px 15px 0 #ff6b6b, 12px 15px 0 #ff6b6b, 15px 15px 0 #ff6b6b, 18px 15px 0 #ff6b6b, 21px 15px 0 #ff6b6b, 24px 15px 0 #1c3a2e, 9px 18px 0 #1c3a2e, 12px 18px 0 #ff6b6b, 15px 18px 0 #ff6b6b, 18px 18px 0 #ff6b6b, 21px 18px 0 #1c3a2e, 9px 21px 0 #1c3a2e, 12px 21px 0 #ff6b6b, 15px 21px 0 #ff6b6b, 18px 21px 0 #ff6b6b, 21px 21px 0 #1c3a2e, 12px 24px 0 #1c3a2e, 15px 24px 0 #ff6b6b, 18px 24px 0 #1c3a2e, 12px 27px 0 #1c3a2e, 15px 27px 0 #ff6b6b, 18px 27px 0 #1c3a2e, 15px 30px 0 #1c3a2e, 15px 33px 0 #1c3a2e; } /* icon-vpn: 33px x 36px */ .icon-readme{ display:inline-block; width:30px; height:36px; position:relative; flex-shrink:0; } .icon-readme::before{ content:''; position:absolute; top:0; left:0; width:3px; height:3px; box-shadow: 0px 0px 0 #1c3a2e, 3px 0px 0 #1c3a2e, 6px 0px 0 #1c3a2e, 9px 0px 0 #1c3a2e, 12px 0px 0 #1c3a2e, 15px 0px 0 #1c3a2e, 18px 0px 0 #1c3a2e, 21px 0px 0 #1c3a2e, 24px 0px 0 #1c3a2e, 0px 3px 0 #1c3a2e, 3px 3px 0 #fffaf0, 6px 3px 0 #fffaf0, 9px 3px 0 #fffaf0, 12px 3px 0 #fffaf0, 15px 3px 0 #fffaf0, 18px 3px 0 #fffaf0, 21px 3px 0 #fffaf0, 24px 3px 0 #fffaf0, 27px 3px 0 #1c3a2e, 0px 6px 0 #1c3a2e, 3px 6px 0 #fffaf0, 6px 6px 0 #fffaf0, 9px 6px 0 #fffaf0, 12px 6px 0 #fffaf0, 15px 6px 0 #fffaf0, 18px 6px 0 #fffaf0, 21px 6px 0 #fffaf0, 24px 6px 0 #fffaf0, 27px 6px 0 #1c3a2e, 0px 9px 0 #1c3a2e, 3px 9px 0 #fffaf0, 6px 9px 0 #1c3a2e, 9px 9px 0 #1c3a2e, 12px 9px 0 #1c3a2e, 15px 9px 0 #1c3a2e, 18px 9px 0 #1c3a2e, 21px 9px 0 #1c3a2e, 24px 9px 0 #fffaf0, 27px 9px 0 #1c3a2e, 0px 12px 0 #1c3a2e, 3px 12px 0 #fffaf0, 6px 12px 0 #fffaf0, 9px 12px 0 #fffaf0, 12px 12px 0 #fffaf0, 15px 12px 0 #fffaf0, 18px 12px 0 #fffaf0, 21px 12px 0 #fffaf0, 24px 12px 0 #fffaf0, 27px 12px 0 #1c3a2e, 0px 15px 0 #1c3a2e, 3px 15px 0 #fffaf0, 6px 15px 0 #1c3a2e, 9px 15px 0 #1c3a2e, 12px 15px 0 #1c3a2e, 15px 15px 0 #1c3a2e, 18px 15px 0 #1c3a2e, 21px 15px 0 #1c3a2e, 24px 15px 0 #fffaf0, 27px 15px 0 #1c3a2e, 0px 18px 0 #1c3a2e, 3px 18px 0 #fffaf0, 6px 18px 0 #fffaf0, 9px 18px 0 #fffaf0, 12px 18px 0 #fffaf0, 15px 18px 0 #fffaf0, 18px 18px 0 #fffaf0, 21px 18px 0 #fffaf0, 24px 18px 0 #fffaf0, 27px 18px 0 #1c3a2e, 0px 21px 0 #1c3a2e, 3px 21px 0 #fffaf0, 6px 21px 0 #1c3a2e, 9px 21px 0 #1c3a2e, 12px 21px 0 #1c3a2e, 15px 21px 0 #1c3a2e, 18px 21px 0 #1c3a2e, 21px 21px 0 #1c3a2e, 24px 21px 0 #fffaf0, 27px 21px 0 #1c3a2e, 0px 24px 0 #1c3a2e, 3px 24px 0 #fffaf0, 6px 24px 0 #fffaf0, 9px 24px 0 #fffaf0, 12px 24px 0 #fffaf0, 15px 24px 0 #fffaf0, 18px 24px 0 #fffaf0, 21px 24px 0 #fffaf0, 24px 24px 0 #fffaf0, 27px 24px 0 #1c3a2e, 0px 27px 0 #1c3a2e, 3px 27px 0 #fffaf0, 6px 27px 0 #fffaf0, 9px 27px 0 #fffaf0, 12px 27px 0 #fffaf0, 15px 27px 0 #fffaf0, 18px 27px 0 #fffaf0, 21px 27px 0 #fffaf0, 24px 27px 0 #fffaf0, 27px 27px 0 #1c3a2e, 0px 30px 0 #1c3a2e, 3px 30px 0 #fffaf0, 6px 30px 0 #fffaf0, 9px 30px 0 #fffaf0, 12px 30px 0 #fffaf0, 15px 30px 0 #fffaf0, 18px 30px 0 #fffaf0, 21px 30px 0 #fffaf0, 24px 30px 0 #fffaf0, 27px 30px 0 #1c3a2e, 0px 33px 0 #1c3a2e, 3px 33px 0 #1c3a2e, 6px 33px 0 #1c3a2e, 9px 33px 0 #1c3a2e, 12px 33px 0 #1c3a2e, 15px 33px 0 #1c3a2e, 18px 33px 0 #1c3a2e, 21px 33px 0 #1c3a2e, 24px 33px 0 #1c3a2e, 27px 33px 0 #1c3a2e; } /* icon-readme: 30px x 36px */ .icon-slots{ display:inline-block; width:42px; height:48px; position:relative; flex-shrink:0; } .icon-slots::before{ content:''; position:absolute; top:0; left:0; width:3px; height:3px; box-shadow: 0px 0px 0 #1c3a2e, 3px 0px 0 #c9c9c9, 6px 0px 0 #c9c9c9, 9px 0px 0 #c9c9c9, 12px 0px 0 #c9c9c9, 15px 0px 0 #c9c9c9, 18px 0px 0 #c9c9c9, 21px 0px 0 #c9c9c9, 24px 0px 0 #c9c9c9, 27px 0px 0 #c9c9c9, 30px 0px 0 #c9c9c9, 33px 0px 0 #1c3a2e, 0px 3px 0 #1c3a2e, 3px 3px 0 #c9c9c9, 6px 3px 0 #c9c9c9, 9px 3px 0 #c9c9c9, 12px 3px 0 #c9c9c9, 15px 3px 0 #c9c9c9, 18px 3px 0 #c9c9c9, 21px 3px 0 #c9c9c9, 24px 3px 0 #c9c9c9, 27px 3px 0 #c9c9c9, 30px 3px 0 #c9c9c9, 33px 3px 0 #ffd23f, 36px 3px 0 #1c3a2e, 0px 6px 0 #1c3a2e, 3px 6px 0 #c94a36, 6px 6px 0 #c94a36, 9px 6px 0 #c94a36, 12px 6px 0 #c94a36, 15px 6px 0 #c94a36, 18px 6px 0 #c94a36, 21px 6px 0 #c94a36, 24px 6px 0 #c94a36, 27px 6px 0 #c94a36, 30px 6px 0 #c94a36, 33px 6px 0 #ffd23f, 36px 6px 0 #1c3a2e, 0px 9px 0 #1c3a2e, 3px 9px 0 #e2604a, 6px 9px 0 #e2604a, 9px 9px 0 #e2604a, 12px 9px 0 #e2604a, 15px 9px 0 #e2604a, 18px 9px 0 #e2604a, 21px 9px 0 #e2604a, 24px 9px 0 #e2604a, 27px 9px 0 #e2604a, 30px 9px 0 #e2604a, 33px 9px 0 #8a5a34, 36px 9px 0 #1c3a2e, 0px 12px 0 #1c3a2e, 3px 12px 0 #e2604a, 6px 12px 0 #e2604a, 9px 12px 0 #fffaf0, 12px 12px 0 #fffaf0, 15px 12px 0 #fffaf0, 18px 12px 0 #fffaf0, 21px 12px 0 #fffaf0, 24px 12px 0 #fffaf0, 27px 12px 0 #e2604a, 30px 12px 0 #e2604a, 33px 12px 0 #8a5a34, 36px 12px 0 #1c3a2e, 0px 15px 0 #1c3a2e, 3px 15px 0 #e2604a, 6px 15px 0 #e2604a, 9px 15px 0 #fffaf0, 12px 15px 0 #6b4226, 15px 15px 0 #fffaf0, 18px 15px 0 #ffd23f, 21px 15px 0 #ffd23f, 24px 15px 0 #fffaf0, 27px 15px 0 #e2604a, 30px 15px 0 #e2604a, 33px 15px 0 #8a5a34, 36px 15px 0 #1c3a2e, 0px 18px 0 #1c3a2e, 3px 18px 0 #e2604a, 6px 18px 0 #e2604a, 9px 18px 0 #fffaf0, 12px 18px 0 #fffaf0, 15px 18px 0 #ffd23f, 18px 18px 0 #fffaf0, 21px 18px 0 #fffaf0, 24px 18px 0 #fffaf0, 27px 18px 0 #e2604a, 30px 18px 0 #e2604a, 33px 18px 0 #8a5a34, 36px 18px 0 #1c3a2e, 0px 21px 0 #1c3a2e, 3px 21px 0 #e2604a, 6px 21px 0 #e2604a, 9px 21px 0 #fffaf0, 12px 21px 0 #ffd23f, 15px 21px 0 #fffaf0, 18px 21px 0 #fffaf0, 21px 21px 0 #fffaf0, 24px 21px 0 #fffaf0, 27px 21px 0 #e2604a, 30px 21px 0 #e2604a, 33px 21px 0 #8a5a34, 36px 21px 0 #1c3a2e, 0px 24px 0 #1c3a2e, 3px 24px 0 #e2604a, 6px 24px 0 #e2604a, 9px 24px 0 #fffaf0, 12px 24px 0 #fffaf0, 15px 24px 0 #fffaf0, 18px 24px 0 #fffaf0, 21px 24px 0 #fffaf0, 24px 24px 0 #fffaf0, 27px 24px 0 #e2604a, 30px 24px 0 #e2604a, 33px 24px 0 #1c3a2e, 0px 27px 0 #1c3a2e, 3px 27px 0 #e2604a, 6px 27px 0 #e2604a, 9px 27px 0 #e2604a, 12px 27px 0 #e2604a, 15px 27px 0 #e2604a, 18px 27px 0 #e2604a, 21px 27px 0 #e2604a, 24px 27px 0 #e2604a, 27px 27px 0 #e2604a, 30px 27px 0 #e2604a, 33px 27px 0 #1c3a2e, 0px 30px 0 #1c3a2e, 3px 30px 0 #e2604a, 6px 30px 0 #e2604a, 9px 30px 0 #e2604a, 12px 30px 0 #e2604a, 15px 30px 0 #e2604a, 18px 30px 0 #e2604a, 21px 30px 0 #e2604a, 24px 30px 0 #e2604a, 27px 30px 0 #e2604a, 30px 30px 0 #e2604a, 33px 30px 0 #1c3a2e, 0px 33px 0 #1c3a2e, 3px 33px 0 #e2604a, 6px 33px 0 #e2604a, 9px 33px 0 #e2604a, 12px 33px 0 #e2604a, 15px 33px 0 #e2604a, 18px 33px 0 #e2604a, 21px 33px 0 #e2604a, 24px 33px 0 #e2604a, 27px 33px 0 #e2604a, 30px 33px 0 #e2604a, 33px 33px 0 #1c3a2e, 0px 36px 0 #1c3a2e, 3px 36px 0 #e2604a, 6px 36px 0 #e2604a, 9px 36px 0 #e2604a, 12px 36px 0 #e2604a, 15px 36px 0 #e2604a, 18px 36px 0 #e2604a, 21px 36px 0 #e2604a, 24px 36px 0 #e2604a, 27px 36px 0 #e2604a, 30px 36px 0 #e2604a, 33px 36px 0 #1c3a2e, 0px 39px 0 #1c3a2e, 3px 39px 0 #e2604a, 6px 39px 0 #e2604a, 9px 39px 0 #e2604a, 12px 39px 0 #e2604a, 15px 39px 0 #e2604a, 18px 39px 0 #e2604a, 21px 39px 0 #e2604a, 24px 39px 0 #e2604a, 27px 39px 0 #e2604a, 30px 39px 0 #e2604a, 33px 39px 0 #1c3a2e, 0px 42px 0 #1c3a2e, 3px 42px 0 #c94a36, 6px 42px 0 #c94a36, 9px 42px 0 #c94a36, 12px 42px 0 #c94a36, 15px 42px 0 #c94a36, 18px 42px 0 #c94a36, 21px 42px 0 #c94a36, 24px 42px 0 #c94a36, 27px 42px 0 #c94a36, 30px 42px 0 #c94a36, 33px 42px 0 #1c3a2e, 0px 45px 0 #1c3a2e, 3px 45px 0 #c94a36, 6px 45px 0 #c94a36, 9px 45px 0 #c94a36, 12px 45px 0 #c94a36, 15px 45px 0 #c94a36, 18px 45px 0 #c94a36, 21px 45px 0 #c94a36, 24px 45px 0 #c94a36, 27px 45px 0 #c94a36, 30px 45px 0 #c94a36, 33px 45px 0 #1c3a2e; } /* icon-slots: 42px x 48px */ .icon-coconut{ display:inline-block; width:39px; height:39px; position:relative; flex-shrink:0; } .icon-coconut::before{ content:''; position:absolute; top:0; left:0; width:3px; height:3px; box-shadow: 9px 0px 0 #1c3a2e, 12px 0px 0 #1c3a2e, 15px 0px 0 #1c3a2e, 18px 0px 0 #5c3a22, 21px 0px 0 #1c3a2e, 24px 0px 0 #1c3a2e, 27px 0px 0 #1c3a2e, 6px 3px 0 #1c3a2e, 9px 3px 0 #5c3a22, 12px 3px 0 #5c3a22, 15px 3px 0 #5c3a22, 18px 3px 0 #5c3a22, 21px 3px 0 #5c3a22, 24px 3px 0 #5c3a22, 27px 3px 0 #5c3a22, 30px 3px 0 #1c3a2e, 3px 6px 0 #1c3a2e, 6px 6px 0 #5c3a22, 9px 6px 0 #5c3a22, 12px 6px 0 #5c3a22, 15px 6px 0 #8a5a34, 18px 6px 0 #8a5a34, 21px 6px 0 #8a5a34, 24px 6px 0 #5c3a22, 27px 6px 0 #5c3a22, 30px 6px 0 #5c3a22, 33px 6px 0 #1c3a2e, 0px 9px 0 #1c3a2e, 3px 9px 0 #5c3a22, 6px 9px 0 #5c3a22, 9px 9px 0 #8a5a34, 12px 9px 0 #8a5a34, 15px 9px 0 #8a5a34, 18px 9px 0 #8a5a34, 21px 9px 0 #8a5a34, 24px 9px 0 #8a5a34, 27px 9px 0 #8a5a34, 30px 9px 0 #5c3a22, 33px 9px 0 #5c3a22, 36px 9px 0 #1c3a2e, 0px 12px 0 #1c3a2e, 3px 12px 0 #5c3a22, 6px 12px 0 #5c3a22, 9px 12px 0 #8a5a34, 12px 12px 0 #8a5a34, 15px 12px 0 #a9714a, 18px 12px 0 #a9714a, 21px 12px 0 #a9714a, 24px 12px 0 #8a5a34, 27px 12px 0 #8a5a34, 30px 12px 0 #5c3a22, 33px 12px 0 #5c3a22, 36px 12px 0 #1c3a2e, 0px 15px 0 #1c3a2e, 3px 15px 0 #5c3a22, 6px 15px 0 #8a5a34, 9px 15px 0 #8a5a34, 12px 15px 0 #a9714a, 15px 15px 0 #a9714a, 18px 15px 0 #a9714a, 21px 15px 0 #a9714a, 24px 15px 0 #a9714a, 27px 15px 0 #8a5a34, 30px 15px 0 #8a5a34, 33px 15px 0 #5c3a22, 36px 15px 0 #1c3a2e, 0px 18px 0 #5c3a22, 3px 18px 0 #5c3a22, 6px 18px 0 #8a5a34, 9px 18px 0 #8a5a34, 12px 18px 0 #a9714a, 15px 18px 0 #a9714a, 18px 18px 0 #a9714a, 21px 18px 0 #a9714a, 24px 18px 0 #a9714a, 27px 18px 0 #8a5a34, 30px 18px 0 #8a5a34, 33px 18px 0 #5c3a22, 36px 18px 0 #5c3a22, 0px 21px 0 #1c3a2e, 3px 21px 0 #5c3a22, 6px 21px 0 #8a5a34, 9px 21px 0 #8a5a34, 12px 21px 0 #a9714a, 15px 21px 0 #1c3a2e, 18px 21px 0 #a9714a, 21px 21px 0 #1c3a2e, 24px 21px 0 #a9714a, 27px 21px 0 #8a5a34, 30px 21px 0 #8a5a34, 33px 21px 0 #5c3a22, 36px 21px 0 #1c3a2e, 0px 24px 0 #1c3a2e, 3px 24px 0 #5c3a22, 6px 24px 0 #5c3a22, 9px 24px 0 #8a5a34, 12px 24px 0 #8a5a34, 15px 24px 0 #a9714a, 18px 24px 0 #a9714a, 21px 24px 0 #a9714a, 24px 24px 0 #8a5a34, 27px 24px 0 #8a5a34, 30px 24px 0 #5c3a22, 33px 24px 0 #5c3a22, 36px 24px 0 #1c3a2e, 0px 27px 0 #1c3a2e, 3px 27px 0 #5c3a22, 6px 27px 0 #5c3a22, 9px 27px 0 #8a5a34, 12px 27px 0 #8a5a34, 15px 27px 0 #8a5a34, 18px 27px 0 #1c3a2e, 21px 27px 0 #8a5a34, 24px 27px 0 #8a5a34, 27px 27px 0 #8a5a34, 30px 27px 0 #5c3a22, 33px 27px 0 #5c3a22, 36px 27px 0 #1c3a2e, 3px 30px 0 #1c3a2e, 6px 30px 0 #5c3a22, 9px 30px 0 #5c3a22, 12px 30px 0 #5c3a22, 15px 30px 0 #8a5a34, 18px 30px 0 #8a5a34, 21px 30px 0 #8a5a34, 24px 30px 0 #5c3a22, 27px 30px 0 #5c3a22, 30px 30px 0 #5c3a22, 33px 30px 0 #1c3a2e, 6px 33px 0 #1c3a2e, 9px 33px 0 #5c3a22, 12px 33px 0 #5c3a22, 15px 33px 0 #5c3a22, 18px 33px 0 #5c3a22, 21px 33px 0 #5c3a22, 24px 33px 0 #5c3a22, 27px 33px 0 #5c3a22, 30px 33px 0 #1c3a2e, 9px 36px 0 #1c3a2e, 12px 36px 0 #1c3a2e, 15px 36px 0 #1c3a2e, 18px 36px 0 #5c3a22, 21px 36px 0 #1c3a2e, 24px 36px 0 #1c3a2e, 27px 36px 0 #1c3a2e; } /* icon-coconut: 39px x 39px */ .icon-slot-monkey{ display:inline-block; width:45px; height:45px; position:relative; flex-shrink:0; } .icon-slot-monkey::before{ content:''; position:absolute; top:0; left:0; width:3px; height:3px; box-shadow: 12px 0px 0 #1c3a2e, 15px 0px 0 #1c3a2e, 18px 0px 0 #1c3a2e, 21px 0px 0 #8a5a34, 24px 0px 0 #1c3a2e, 27px 0px 0 #1c3a2e, 30px 0px 0 #1c3a2e, 9px 3px 0 #1c3a2e, 12px 3px 0 #8a5a34, 15px 3px 0 #8a5a34, 18px 3px 0 #8a5a34, 21px 3px 0 #8a5a34, 24px 3px 0 #8a5a34, 27px 3px 0 #8a5a34, 30px 3px 0 #8a5a34, 33px 3px 0 #1c3a2e, 6px 6px 0 #1c3a2e, 9px 6px 0 #8a5a34, 12px 6px 0 #8a5a34, 15px 6px 0 #8a5a34, 18px 6px 0 #c98c4e, 21px 6px 0 #c98c4e, 24px 6px 0 #c98c4e, 27px 6px 0 #8a5a34, 30px 6px 0 #8a5a34, 33px 6px 0 #8a5a34, 36px 6px 0 #1c3a2e, 3px 9px 0 #1c3a2e, 6px 9px 0 #8a5a34, 9px 9px 0 #8a5a34, 12px 9px 0 #c98c4e, 15px 9px 0 #c98c4e, 18px 9px 0 #c98c4e, 21px 9px 0 #c98c4e, 24px 9px 0 #c98c4e, 27px 9px 0 #c98c4e, 30px 9px 0 #c98c4e, 33px 9px 0 #8a5a34, 36px 9px 0 #8a5a34, 39px 9px 0 #1c3a2e, 0px 12px 0 #1c3a2e, 3px 12px 0 #8a5a34, 6px 12px 0 #8a5a34, 9px 12px 0 #c98c4e, 12px 12px 0 #c98c4e, 15px 12px 0 #c98c4e, 18px 12px 0 #c98c4e, 21px 12px 0 #c98c4e, 24px 12px 0 #c98c4e, 27px 12px 0 #c98c4e, 30px 12px 0 #c98c4e, 33px 12px 0 #c98c4e, 36px 12px 0 #8a5a34, 39px 12px 0 #8a5a34, 42px 12px 0 #1c3a2e, 0px 15px 0 #1c3a2e, 3px 15px 0 #8a5a34, 6px 15px 0 #8a5a34, 9px 15px 0 #c98c4e, 12px 15px 0 #c98c4e, 15px 15px 0 #e8b57a, 18px 15px 0 #e8b57a, 21px 15px 0 #e8b57a, 24px 15px 0 #e8b57a, 27px 15px 0 #e8b57a, 30px 15px 0 #c98c4e, 33px 15px 0 #c98c4e, 36px 15px 0 #8a5a34, 39px 15px 0 #8a5a34, 42px 15px 0 #1c3a2e, 0px 18px 0 #1c3a2e, 3px 18px 0 #8a5a34, 6px 18px 0 #c98c4e, 9px 18px 0 #c98c4e, 12px 18px 0 #c98c4e, 15px 18px 0 #e8b57a, 18px 18px 0 #e8b57a, 21px 18px 0 #e8b57a, 24px 18px 0 #e8b57a, 27px 18px 0 #e8b57a, 30px 18px 0 #c98c4e, 33px 18px 0 #c98c4e, 36px 18px 0 #c98c4e, 39px 18px 0 #8a5a34, 42px 18px 0 #1c3a2e, 0px 21px 0 #8a5a34, 3px 21px 0 #8a5a34, 6px 21px 0 #c98c4e, 9px 21px 0 #c98c4e, 12px 21px 0 #c98c4e, 15px 21px 0 #1c3a2e, 18px 21px 0 #e8b57a, 21px 21px 0 #e8b57a, 24px 21px 0 #e8b57a, 27px 21px 0 #1c3a2e, 30px 21px 0 #c98c4e, 33px 21px 0 #c98c4e, 36px 21px 0 #c98c4e, 39px 21px 0 #8a5a34, 42px 21px 0 #8a5a34, 0px 24px 0 #1c3a2e, 3px 24px 0 #8a5a34, 6px 24px 0 #c98c4e, 9px 24px 0 #c98c4e, 12px 24px 0 #c98c4e, 15px 24px 0 #f3d9ae, 18px 24px 0 #f3d9ae, 21px 24px 0 #f3d9ae, 24px 24px 0 #f3d9ae, 27px 24px 0 #f3d9ae, 30px 24px 0 #c98c4e, 33px 24px 0 #c98c4e, 36px 24px 0 #c98c4e, 39px 24px 0 #8a5a34, 42px 24px 0 #1c3a2e, 0px 27px 0 #1c3a2e, 3px 27px 0 #8a5a34, 6px 27px 0 #8a5a34, 9px 27px 0 #c98c4e, 12px 27px 0 #f3d9ae, 15px 27px 0 #f3d9ae, 18px 27px 0 #f3d9ae, 21px 27px 0 #f3d9ae, 24px 27px 0 #f3d9ae, 27px 27px 0 #f3d9ae, 30px 27px 0 #f3d9ae, 33px 27px 0 #c98c4e, 36px 27px 0 #8a5a34, 39px 27px 0 #8a5a34, 42px 27px 0 #1c3a2e, 0px 30px 0 #1c3a2e, 3px 30px 0 #8a5a34, 6px 30px 0 #8a5a34, 9px 30px 0 #c98c4e, 12px 30px 0 #f3d9ae, 15px 30px 0 #f3d9ae, 18px 30px 0 #f3d9ae, 21px 30px 0 #f3d9ae, 24px 30px 0 #f3d9ae, 27px 30px 0 #f3d9ae, 30px 30px 0 #f3d9ae, 33px 30px 0 #c98c4e, 36px 30px 0 #8a5a34, 39px 30px 0 #8a5a34, 42px 30px 0 #1c3a2e, 3px 33px 0 #1c3a2e, 6px 33px 0 #8a5a34, 9px 33px 0 #8a5a34, 12px 33px 0 #f3d9ae, 15px 33px 0 #f3d9ae, 18px 33px 0 #1c3a2e, 21px 33px 0 #1c3a2e, 24px 33px 0 #1c3a2e, 27px 33px 0 #f3d9ae, 30px 33px 0 #f3d9ae, 33px 33px 0 #8a5a34, 36px 33px 0 #8a5a34, 39px 33px 0 #1c3a2e, 6px 36px 0 #1c3a2e, 9px 36px 0 #8a5a34, 12px 36px 0 #8a5a34, 15px 36px 0 #f3d9ae, 18px 36px 0 #f3d9ae, 21px 36px 0 #f3d9ae, 24px 36px 0 #f3d9ae, 27px 36px 0 #f3d9ae, 30px 36px 0 #8a5a34, 33px 36px 0 #8a5a34, 36px 36px 0 #1c3a2e, 9px 39px 0 #1c3a2e, 12px 39px 0 #8a5a34, 15px 39px 0 #8a5a34, 18px 39px 0 #8a5a34, 21px 39px 0 #8a5a34, 24px 39px 0 #8a5a34, 27px 39px 0 #8a5a34, 30px 39px 0 #8a5a34, 33px 39px 0 #1c3a2e, 12px 42px 0 #1c3a2e, 15px 42px 0 #1c3a2e, 18px 42px 0 #1c3a2e, 21px 42px 0 #8a5a34, 24px 42px 0 #1c3a2e, 27px 42px 0 #1c3a2e, 30px 42px 0 #1c3a2e; } /* icon-slot-monkey: 45px x 45px */ .icon-leaf{ display:inline-block; width:39px; height:39px; position:relative; flex-shrink:0; } .icon-leaf::before{ content:''; position:absolute; top:0; left:0; width:3px; height:3px; box-shadow: 12px 3px 0 #1c3a2e, 15px 3px 0 #1c3a2e, 18px 3px 0 #1c3a2e, 21px 3px 0 #1c3a2e, 24px 3px 0 #1c3a2e, 9px 6px 0 #1c3a2e, 12px 6px 0 #57c778, 15px 6px 0 #57c778, 18px 6px 0 #2fa356, 21px 6px 0 #2fa356, 24px 6px 0 #2fa356, 27px 6px 0 #1c3a2e, 6px 9px 0 #1c3a2e, 9px 9px 0 #1f7a3f, 12px 9px 0 #57c778, 15px 9px 0 #57c778, 18px 9px 0 #57c778, 21px 9px 0 #2fa356, 24px 9px 0 #2fa356, 27px 9px 0 #2fa356, 30px 9px 0 #1c3a2e, 3px 12px 0 #1c3a2e, 6px 12px 0 #57c778, 9px 12px 0 #57c778, 12px 12px 0 #1f7a3f, 15px 12px 0 #57c778, 18px 12px 0 #57c778, 21px 12px 0 #57c778, 24px 12px 0 #2fa356, 27px 12px 0 #2fa356, 30px 12px 0 #2fa356, 33px 12px 0 #1c3a2e, 0px 15px 0 #1c3a2e, 3px 15px 0 #2fa356, 6px 15px 0 #57c778, 9px 15px 0 #57c778, 12px 15px 0 #57c778, 15px 15px 0 #1f7a3f, 18px 15px 0 #57c778, 21px 15px 0 #57c778, 24px 15px 0 #2fa356, 27px 15px 0 #2fa356, 30px 15px 0 #2fa356, 33px 15px 0 #2fa356, 36px 15px 0 #1c3a2e, 0px 18px 0 #1c3a2e, 3px 18px 0 #2fa356, 6px 18px 0 #2fa356, 9px 18px 0 #57c778, 12px 18px 0 #57c778, 15px 18px 0 #57c778, 18px 18px 0 #1f7a3f, 21px 18px 0 #2fa356, 24px 18px 0 #2fa356, 27px 18px 0 #2fa356, 30px 18px 0 #2fa356, 33px 18px 0 #2fa356, 36px 18px 0 #1c3a2e, 0px 21px 0 #1c3a2e, 3px 21px 0 #2fa356, 6px 21px 0 #2fa356, 9px 21px 0 #2fa356, 12px 21px 0 #57c778, 15px 21px 0 #57c778, 18px 21px 0 #2fa356, 21px 21px 0 #1f7a3f, 24px 21px 0 #1f7a3f, 27px 21px 0 #1f7a3f, 30px 21px 0 #1f7a3f, 33px 21px 0 #2fa356, 36px 21px 0 #1c3a2e, 3px 24px 0 #1c3a2e, 6px 24px 0 #2fa356, 9px 24px 0 #2fa356, 12px 24px 0 #2fa356, 15px 24px 0 #2fa356, 18px 24px 0 #2fa356, 21px 24px 0 #1f7a3f, 24px 24px 0 #1f7a3f, 27px 24px 0 #1f7a3f, 30px 24px 0 #1f7a3f, 33px 24px 0 #1c3a2e, 6px 27px 0 #1c3a2e, 9px 27px 0 #2fa356, 12px 27px 0 #2fa356, 15px 27px 0 #2fa356, 18px 27px 0 #1f7a3f, 21px 27px 0 #1f7a3f, 24px 27px 0 #1f7a3f, 27px 27px 0 #1f7a3f, 30px 27px 0 #1c3a2e, 9px 30px 0 #1c3a2e, 12px 30px 0 #2fa356, 15px 30px 0 #2fa356, 18px 30px 0 #2fa356, 21px 30px 0 #1f7a3f, 24px 30px 0 #1f7a3f, 27px 30px 0 #1c3a2e, 12px 33px 0 #1c3a2e, 15px 33px 0 #1c3a2e, 18px 33px 0 #1c3a2e, 21px 33px 0 #1c3a2e, 24px 33px 0 #1c3a2e; } /* icon-leaf: 39px x 39px */ /* ---------- jungle scene (ambient background) ---------- */ .jungle-scene{ position:absolute; inset:0; pointer-events:none; overflow:hidden; } .parallax-layer{ position:absolute; inset:0; pointer-events:none; transition:transform .15s ease-out; will-change:transform; } /* treeline along the sky/ground seam of the desktop gradient (~38%) */ .jungle-horizon{ position:absolute; left:0; right:0; top:46%; height:36px; transform:translateY(-50%); background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22220%22%20height%3D%2236%22%20viewBox%3D%220%200%20220%2036%22%20shape-rendering%3D%22crispEdges%22%3E%3Crect%20x%3D%2256%22%20y%3D%228%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%2357c778%22/%3E%3Crect%20x%3D%2260%22%20y%3D%228%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%2357c778%22/%3E%3Crect%20x%3D%2264%22%20y%3D%228%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%2357c778%22/%3E%3Crect%20x%3D%2268%22%20y%3D%228%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%2357c778%22/%3E%3Crect%20x%3D%2272%22%20y%3D%228%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%2357c778%22/%3E%3Crect%20x%3D%22148%22%20y%3D%228%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%2357c778%22/%3E%3Crect%20x%3D%22152%22%20y%3D%228%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%2357c778%22/%3E%3Crect%20x%3D%22156%22%20y%3D%228%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%2357c778%22/%3E%3Crect%20x%3D%22160%22%20y%3D%228%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%2357c778%22/%3E%3Crect%20x%3D%22164%22%20y%3D%228%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%2357c778%22/%3E%3Crect%20x%3D%2212%22%20y%3D%2212%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%2357c778%22/%3E%3Crect%20x%3D%2216%22%20y%3D%2212%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%2357c778%22/%3E%3Crect%20x%3D%2220%22%20y%3D%2212%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%2357c778%22/%3E%3Crect%20x%3D%2224%22%20y%3D%2212%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%2357c778%22/%3E%3Crect%20x%3D%2228%22%20y%3D%2212%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%2357c778%22/%3E%3Crect%20x%3D%2248%22%20y%3D%2212%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%2357c778%22/%3E%3Crect%20x%3D%2252%22%20y%3D%2212%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%2357c778%22/%3E%3Crect%20x%3D%2256%22%20y%3D%2212%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%232fa356%22/%3E%3Crect%20x%3D%2260%22%20y%3D%2212%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%232fa356%22/%3E%3Crect%20x%3D%2264%22%20y%3D%2212%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%232fa356%22/%3E%3Crect%20x%3D%2268%22%20y%3D%2212%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%232fa356%22/%3E%3Crect%20x%3D%2272%22%20y%3D%2212%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%232fa356%22/%3E%3Crect%20x%3D%2276%22%20y%3D%2212%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%2357c778%22/%3E%3Crect%20x%3D%2280%22%20y%3D%2212%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%2357c778%22/%3E%3Crect%20x%3D%22140%22%20y%3D%2212%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%2357c778%22/%3E%3Crect%20x%3D%22144%22%20y%3D%2212%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%2357c778%22/%3E%3Crect%20x%3D%22148%22%20y%3D%2212%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%2357c778%22/%3E%3Crect%20x%3D%22152%22%20y%3D%2212%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%2357c778%22/%3E%3Crect%20x%3D%22156%22%20y%3D%2212%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%2357c778%22/%3E%3Crect%20x%3D%22160%22%20y%3D%2212%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%2357c778%22/%3E%3Crect%20x%3D%22164%22%20y%3D%2212%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%2357c778%22/%3E%3Crect%20x%3D%22168%22%20y%3D%2212%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%2357c778%22/%3E%3Crect%20x%3D%22172%22%20y%3D%2212%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%2357c778%22/%3E%3Crect%20x%3D%228%22%20y%3D%2216%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%2357c778%22/%3E%3Crect%20x%3D%2212%22%20y%3D%2216%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%231f7a3f%22/%3E%3Crect%20x%3D%2216%22%20y%3D%2216%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%231f7a3f%22/%3E%3Crect%20x%3D%2220%22%20y%3D%2216%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%231f7a3f%22/%3E%3Crect%20x%3D%2224%22%20y%3D%2216%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%231f7a3f%22/%3E%3Crect%20x%3D%2228%22%20y%3D%2216%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%231f7a3f%22/%3E%3Crect%20x%3D%2232%22%20y%3D%2216%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%2357c778%22/%3E%3Crect%20x%3D%2244%22%20y%3D%2216%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%2357c778%22/%3E%3Crect%20x%3D%2248%22%20y%3D%2216%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%232fa356%22/%3E%3Crect%20x%3D%2252%22%20y%3D%2216%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%232fa356%22/%3E%3Crect%20x%3D%2256%22%20y%3D%2216%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%232fa356%22/%3E%3Crect%20x%3D%2260%22%20y%3D%2216%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%232fa356%22/%3E%3Crect%20x%3D%2264%22%20y%3D%2216%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%232fa356%22/%3E%3Crect%20x%3D%2268%22%20y%3D%2216%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%232fa356%22/%3E%3Crect%20x%3D%2272%22%20y%3D%2216%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%232fa356%22/%3E%3Crect%20x%3D%2276%22%20y%3D%2216%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%232fa356%22/%3E%3Crect%20x%3D%2280%22%20y%3D%2216%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%232fa356%22/%3E%3Crect%20x%3D%2284%22%20y%3D%2216%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%2357c778%22/%3E%3Crect%20x%3D%22104%22%20y%3D%2216%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%2357c778%22/%3E%3Crect%20x%3D%22108%22%20y%3D%2216%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%2357c778%22/%3E%3Crect%20x%3D%22112%22%20y%3D%2216%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%2357c778%22/%3E%3Crect%20x%3D%22116%22%20y%3D%2216%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%2357c778%22/%3E%3Crect%20x%3D%22120%22%20y%3D%2216%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%2357c778%22/%3E%3Crect%20x%3D%22136%22%20y%3D%2216%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%2357c778%22/%3E%3Crect%20x%3D%22140%22%20y%3D%2216%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%2357c778%22/%3E%3Crect%20x%3D%22144%22%20y%3D%2216%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%2357c778%22/%3E%3Crect%20x%3D%22148%22%20y%3D%2216%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%2357c778%22/%3E%3Crect%20x%3D%22152%22%20y%3D%2216%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%2357c778%22/%3E%3Crect%20x%3D%22156%22%20y%3D%2216%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%2357c778%22/%3E%3Crect%20x%3D%22160%22%20y%3D%2216%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%2357c778%22/%3E%3Crect%20x%3D%22164%22%20y%3D%2216%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%2357c778%22/%3E%3Crect%20x%3D%22168%22%20y%3D%2216%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%2357c778%22/%3E%3Crect%20x%3D%22172%22%20y%3D%2216%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%2357c778%22/%3E%3Crect%20x%3D%22176%22%20y%3D%2216%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%2357c778%22/%3E%3Crect%20x%3D%22192%22%20y%3D%2216%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%2357c778%22/%3E%3Crect%20x%3D%22196%22%20y%3D%2216%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%2357c778%22/%3E%3Crect%20x%3D%22200%22%20y%3D%2216%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%2357c778%22/%3E%3Crect%20x%3D%22204%22%20y%3D%2216%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%2357c778%22/%3E%3Crect%20x%3D%22208%22%20y%3D%2216%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%2357c778%22/%3E%3Crect%20x%3D%224%22%20y%3D%2220%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%2357c778%22/%3E%3Crect%20x%3D%228%22%20y%3D%2220%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%231f7a3f%22/%3E%3Crect%20x%3D%2212%22%20y%3D%2220%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%231f7a3f%22/%3E%3Crect%20x%3D%2216%22%20y%3D%2220%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%231f7a3f%22/%3E%3Crect%20x%3D%2220%22%20y%3D%2220%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%231f7a3f%22/%3E%3Crect%20x%3D%2224%22%20y%3D%2220%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%231f7a3f%22/%3E%3Crect%20x%3D%2228%22%20y%3D%2220%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%231f7a3f%22/%3E%3Crect%20x%3D%2232%22%20y%3D%2220%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%231f7a3f%22/%3E%3Crect%20x%3D%2236%22%20y%3D%2220%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%2357c778%22/%3E%3Crect%20x%3D%2244%22%20y%3D%2220%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%232fa356%22/%3E%3Crect%20x%3D%2248%22%20y%3D%2220%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%232fa356%22/%3E%3Crect%20x%3D%2252%22%20y%3D%2220%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%232fa356%22/%3E%3Crect%20x%3D%2256%22%20y%3D%2220%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%232fa356%22/%3E%3Crect%20x%3D%2260%22%20y%3D%2220%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%232fa356%22/%3E%3Crect%20x%3D%2264%22%20y%3D%2220%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%232fa356%22/%3E%3Crect%20x%3D%2268%22%20y%3D%2220%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%232fa356%22/%3E%3Crect%20x%3D%2272%22%20y%3D%2220%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%232fa356%22/%3E%3Crect%20x%3D%2276%22%20y%3D%2220%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%232fa356%22/%3E%3Crect%20x%3D%2280%22%20y%3D%2220%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%232fa356%22/%3E%3Crect%20x%3D%2284%22%20y%3D%2220%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%232fa356%22/%3E%3Crect%20x%3D%22100%22%20y%3D%2220%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%2357c778%22/%3E%3Crect%20x%3D%22104%22%20y%3D%2220%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%231f7a3f%22/%3E%3Crect%20x%3D%22108%22%20y%3D%2220%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%231f7a3f%22/%3E%3Crect%20x%3D%22112%22%20y%3D%2220%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%231f7a3f%22/%3E%3Crect%20x%3D%22116%22%20y%3D%2220%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%231f7a3f%22/%3E%3Crect%20x%3D%22120%22%20y%3D%2220%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%231f7a3f%22/%3E%3Crect%20x%3D%22124%22%20y%3D%2220%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%2357c778%22/%3E%3Crect%20x%3D%22136%22%20y%3D%2220%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%2357c778%22/%3E%3Crect%20x%3D%22140%22%20y%3D%2220%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%2357c778%22/%3E%3Crect%20x%3D%22144%22%20y%3D%2220%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%2357c778%22/%3E%3Crect%20x%3D%22148%22%20y%3D%2220%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%2357c778%22/%3E%3Crect%20x%3D%22152%22%20y%3D%2220%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%2357c778%22/%3E%3Crect%20x%3D%22156%22%20y%3D%2220%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%2357c778%22/%3E%3Crect%20x%3D%22160%22%20y%3D%2220%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%2357c778%22/%3E%3Crect%20x%3D%22164%22%20y%3D%2220%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%2357c778%22/%3E%3Crect%20x%3D%22168%22%20y%3D%2220%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%2357c778%22/%3E%3Crect%20x%3D%22172%22%20y%3D%2220%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%2357c778%22/%3E%3Crect%20x%3D%22176%22%20y%3D%2220%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%2357c778%22/%3E%3Crect%20x%3D%22188%22%20y%3D%2220%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%2357c778%22/%3E%3Crect%20x%3D%22192%22%20y%3D%2220%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%232fa356%22/%3E%3Crect%20x%3D%22196%22%20y%3D%2220%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%232fa356%22/%3E%3Crect%20x%3D%22200%22%20y%3D%2220%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%232fa356%22/%3E%3Crect%20x%3D%22204%22%20y%3D%2220%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%232fa356%22/%3E%3Crect%20x%3D%22208%22%20y%3D%2220%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%232fa356%22/%3E%3Crect%20x%3D%22212%22%20y%3D%2220%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%2357c778%22/%3E%3Crect%20x%3D%220%22%20y%3D%2224%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%2357c778%22/%3E%3Crect%20x%3D%224%22%20y%3D%2224%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%231f7a3f%22/%3E%3Crect%20x%3D%228%22%20y%3D%2224%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%231f7a3f%22/%3E%3Crect%20x%3D%2212%22%20y%3D%2224%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%231f7a3f%22/%3E%3Crect%20x%3D%2216%22%20y%3D%2224%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%231f7a3f%22/%3E%3Crect%20x%3D%2220%22%20y%3D%2224%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%231f7a3f%22/%3E%3Crect%20x%3D%2224%22%20y%3D%2224%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%231f7a3f%22/%3E%3Crect%20x%3D%2228%22%20y%3D%2224%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%231f7a3f%22/%3E%3Crect%20x%3D%2232%22%20y%3D%2224%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%231f7a3f%22/%3E%3Crect%20x%3D%2236%22%20y%3D%2224%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%231f7a3f%22/%3E%3Crect%20x%3D%2240%22%20y%3D%2224%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%2357c778%22/%3E%3Crect%20x%3D%2244%22%20y%3D%2224%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%232fa356%22/%3E%3Crect%20x%3D%2248%22%20y%3D%2224%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%232fa356%22/%3E%3Crect%20x%3D%2252%22%20y%3D%2224%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%232fa356%22/%3E%3Crect%20x%3D%2256%22%20y%3D%2224%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%232fa356%22/%3E%3Crect%20x%3D%2260%22%20y%3D%2224%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%232fa356%22/%3E%3Crect%20x%3D%2264%22%20y%3D%2224%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%232fa356%22/%3E%3Crect%20x%3D%2268%22%20y%3D%2224%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%232fa356%22/%3E%3Crect%20x%3D%2272%22%20y%3D%2224%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%232fa356%22/%3E%3Crect%20x%3D%2276%22%20y%3D%2224%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%232fa356%22/%3E%3Crect%20x%3D%2280%22%20y%3D%2224%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%232fa356%22/%3E%3Crect%20x%3D%2284%22%20y%3D%2224%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%232fa356%22/%3E%3Crect%20x%3D%2288%22%20y%3D%2224%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%2357c778%22/%3E%3Crect%20x%3D%2296%22%20y%3D%2224%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%2357c778%22/%3E%3Crect%20x%3D%22100%22%20y%3D%2224%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%231f7a3f%22/%3E%3Crect%20x%3D%22104%22%20y%3D%2224%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%231f7a3f%22/%3E%3Crect%20x%3D%22108%22%20y%3D%2224%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%231f7a3f%22/%3E%3Crect%20x%3D%22112%22%20y%3D%2224%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%231f7a3f%22/%3E%3Crect%20x%3D%22116%22%20y%3D%2224%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%231f7a3f%22/%3E%3Crect%20x%3D%22120%22%20y%3D%2224%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%231f7a3f%22/%3E%3Crect%20x%3D%22124%22%20y%3D%2224%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%231f7a3f%22/%3E%3Crect%20x%3D%22128%22%20y%3D%2224%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%2357c778%22/%3E%3Crect%20x%3D%22132%22%20y%3D%2224%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%2357c778%22/%3E%3Crect%20x%3D%22136%22%20y%3D%2224%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%2357c778%22/%3E%3Crect%20x%3D%22140%22%20y%3D%2224%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%2357c778%22/%3E%3Crect%20x%3D%22144%22%20y%3D%2224%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%2357c778%22/%3E%3Crect%20x%3D%22148%22%20y%3D%2224%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%2357c778%22/%3E%3Crect%20x%3D%22152%22%20y%3D%2224%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%2357c778%22/%3E%3Crect%20x%3D%22156%22%20y%3D%2224%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%2357c778%22/%3E%3Crect%20x%3D%22160%22%20y%3D%2224%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%2357c778%22/%3E%3Crect%20x%3D%22164%22%20y%3D%2224%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%2357c778%22/%3E%3Crect%20x%3D%22168%22%20y%3D%2224%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%2357c778%22/%3E%3Crect%20x%3D%22172%22%20y%3D%2224%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%2357c778%22/%3E%3Crect%20x%3D%22176%22%20y%3D%2224%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%2357c778%22/%3E%3Crect%20x%3D%22180%22%20y%3D%2224%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%2357c778%22/%3E%3Crect%20x%3D%22188%22%20y%3D%2224%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%232fa356%22/%3E%3Crect%20x%3D%22192%22%20y%3D%2224%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%232fa356%22/%3E%3Crect%20x%3D%22196%22%20y%3D%2224%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%232fa356%22/%3E%3Crect%20x%3D%22200%22%20y%3D%2224%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%232fa356%22/%3E%3Crect%20x%3D%22204%22%20y%3D%2224%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%232fa356%22/%3E%3Crect%20x%3D%22208%22%20y%3D%2224%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%232fa356%22/%3E%3Crect%20x%3D%22212%22%20y%3D%2224%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%232fa356%22/%3E%3Crect%20x%3D%220%22%20y%3D%2228%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%231f7a3f%22/%3E%3Crect%20x%3D%224%22%20y%3D%2228%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%231f7a3f%22/%3E%3Crect%20x%3D%228%22%20y%3D%2228%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%231f7a3f%22/%3E%3Crect%20x%3D%2212%22%20y%3D%2228%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%231f7a3f%22/%3E%3Crect%20x%3D%2216%22%20y%3D%2228%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%231f7a3f%22/%3E%3Crect%20x%3D%2220%22%20y%3D%2228%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%231f7a3f%22/%3E%3Crect%20x%3D%2224%22%20y%3D%2228%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%231f7a3f%22/%3E%3Crect%20x%3D%2228%22%20y%3D%2228%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%231f7a3f%22/%3E%3Crect%20x%3D%2232%22%20y%3D%2228%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%231f7a3f%22/%3E%3Crect%20x%3D%2236%22%20y%3D%2228%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%231f7a3f%22/%3E%3Crect%20x%3D%2240%22%20y%3D%2228%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%232fa356%22/%3E%3Crect%20x%3D%2244%22%20y%3D%2228%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%232fa356%22/%3E%3Crect%20x%3D%2248%22%20y%3D%2228%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%232fa356%22/%3E%3Crect%20x%3D%2252%22%20y%3D%2228%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%232fa356%22/%3E%3Crect%20x%3D%2256%22%20y%3D%2228%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%232fa356%22/%3E%3Crect%20x%3D%2260%22%20y%3D%2228%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%232fa356%22/%3E%3Crect%20x%3D%2264%22%20y%3D%2228%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%232fa356%22/%3E%3Crect%20x%3D%2268%22%20y%3D%2228%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%232fa356%22/%3E%3Crect%20x%3D%2272%22%20y%3D%2228%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%232fa356%22/%3E%3Crect%20x%3D%2276%22%20y%3D%2228%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%232fa356%22/%3E%3Crect%20x%3D%2280%22%20y%3D%2228%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%232fa356%22/%3E%3Crect%20x%3D%2284%22%20y%3D%2228%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%232fa356%22/%3E%3Crect%20x%3D%2288%22%20y%3D%2228%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%232fa356%22/%3E%3Crect%20x%3D%2292%22%20y%3D%2228%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%2357c778%22/%3E%3Crect%20x%3D%2296%22%20y%3D%2228%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%231f7a3f%22/%3E%3Crect%20x%3D%22100%22%20y%3D%2228%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%231f7a3f%22/%3E%3Crect%20x%3D%22104%22%20y%3D%2228%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%231f7a3f%22/%3E%3Crect%20x%3D%22108%22%20y%3D%2228%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%231f7a3f%22/%3E%3Crect%20x%3D%22112%22%20y%3D%2228%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%231f7a3f%22/%3E%3Crect%20x%3D%22116%22%20y%3D%2228%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%231f7a3f%22/%3E%3Crect%20x%3D%22120%22%20y%3D%2228%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%231f7a3f%22/%3E%3Crect%20x%3D%22124%22%20y%3D%2228%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%231f7a3f%22/%3E%3Crect%20x%3D%22128%22%20y%3D%2228%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%231f7a3f%22/%3E%3Crect%20x%3D%22132%22%20y%3D%2228%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%2357c778%22/%3E%3Crect%20x%3D%22136%22%20y%3D%2228%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%2357c778%22/%3E%3Crect%20x%3D%22140%22%20y%3D%2228%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%2357c778%22/%3E%3Crect%20x%3D%22144%22%20y%3D%2228%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%2357c778%22/%3E%3Crect%20x%3D%22148%22%20y%3D%2228%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%2357c778%22/%3E%3Crect%20x%3D%22152%22%20y%3D%2228%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%2357c778%22/%3E%3Crect%20x%3D%22156%22%20y%3D%2228%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%2357c778%22/%3E%3Crect%20x%3D%22160%22%20y%3D%2228%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%2357c778%22/%3E%3Crect%20x%3D%22164%22%20y%3D%2228%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%2357c778%22/%3E%3Crect%20x%3D%22168%22%20y%3D%2228%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%2357c778%22/%3E%3Crect%20x%3D%22172%22%20y%3D%2228%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%2357c778%22/%3E%3Crect%20x%3D%22176%22%20y%3D%2228%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%2357c778%22/%3E%3Crect%20x%3D%22180%22%20y%3D%2228%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%2357c778%22/%3E%3Crect%20x%3D%22184%22%20y%3D%2228%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%2357c778%22/%3E%3Crect%20x%3D%22188%22%20y%3D%2228%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%232fa356%22/%3E%3Crect%20x%3D%22192%22%20y%3D%2228%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%232fa356%22/%3E%3Crect%20x%3D%22196%22%20y%3D%2228%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%232fa356%22/%3E%3Crect%20x%3D%22200%22%20y%3D%2228%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%232fa356%22/%3E%3Crect%20x%3D%22204%22%20y%3D%2228%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%232fa356%22/%3E%3Crect%20x%3D%22208%22%20y%3D%2228%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%232fa356%22/%3E%3Crect%20x%3D%22212%22%20y%3D%2228%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%232fa356%22/%3E%3Crect%20x%3D%22216%22%20y%3D%2228%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%2357c778%22/%3E%3Crect%20x%3D%220%22%20y%3D%2232%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%231f7a3f%22/%3E%3Crect%20x%3D%224%22%20y%3D%2232%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%231f7a3f%22/%3E%3Crect%20x%3D%228%22%20y%3D%2232%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%231f7a3f%22/%3E%3Crect%20x%3D%2212%22%20y%3D%2232%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%231f7a3f%22/%3E%3Crect%20x%3D%2216%22%20y%3D%2232%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%231f7a3f%22/%3E%3Crect%20x%3D%2220%22%20y%3D%2232%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%231f7a3f%22/%3E%3Crect%20x%3D%2224%22%20y%3D%2232%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%231f7a3f%22/%3E%3Crect%20x%3D%2228%22%20y%3D%2232%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%231f7a3f%22/%3E%3Crect%20x%3D%2232%22%20y%3D%2232%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%231f7a3f%22/%3E%3Crect%20x%3D%2236%22%20y%3D%2232%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%231f7a3f%22/%3E%3Crect%20x%3D%2240%22%20y%3D%2232%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%232fa356%22/%3E%3Crect%20x%3D%2244%22%20y%3D%2232%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%232fa356%22/%3E%3Crect%20x%3D%2248%22%20y%3D%2232%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%232fa356%22/%3E%3Crect%20x%3D%2252%22%20y%3D%2232%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%232fa356%22/%3E%3Crect%20x%3D%2256%22%20y%3D%2232%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%232fa356%22/%3E%3Crect%20x%3D%2260%22%20y%3D%2232%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%232fa356%22/%3E%3Crect%20x%3D%2264%22%20y%3D%2232%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%232fa356%22/%3E%3Crect%20x%3D%2268%22%20y%3D%2232%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%232fa356%22/%3E%3Crect%20x%3D%2272%22%20y%3D%2232%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%232fa356%22/%3E%3Crect%20x%3D%2276%22%20y%3D%2232%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%232fa356%22/%3E%3Crect%20x%3D%2280%22%20y%3D%2232%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%232fa356%22/%3E%3Crect%20x%3D%2284%22%20y%3D%2232%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%232fa356%22/%3E%3Crect%20x%3D%2288%22%20y%3D%2232%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%232fa356%22/%3E%3Crect%20x%3D%2292%22%20y%3D%2232%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%231f7a3f%22/%3E%3Crect%20x%3D%2296%22%20y%3D%2232%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%231f7a3f%22/%3E%3Crect%20x%3D%22100%22%20y%3D%2232%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%231f7a3f%22/%3E%3Crect%20x%3D%22104%22%20y%3D%2232%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%231f7a3f%22/%3E%3Crect%20x%3D%22108%22%20y%3D%2232%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%231f7a3f%22/%3E%3Crect%20x%3D%22112%22%20y%3D%2232%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%231f7a3f%22/%3E%3Crect%20x%3D%22116%22%20y%3D%2232%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%231f7a3f%22/%3E%3Crect%20x%3D%22120%22%20y%3D%2232%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%231f7a3f%22/%3E%3Crect%20x%3D%22124%22%20y%3D%2232%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%231f7a3f%22/%3E%3Crect%20x%3D%22128%22%20y%3D%2232%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%231f7a3f%22/%3E%3Crect%20x%3D%22132%22%20y%3D%2232%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%2357c778%22/%3E%3Crect%20x%3D%22136%22%20y%3D%2232%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%2357c778%22/%3E%3Crect%20x%3D%22140%22%20y%3D%2232%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%2357c778%22/%3E%3Crect%20x%3D%22144%22%20y%3D%2232%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%2357c778%22/%3E%3Crect%20x%3D%22148%22%20y%3D%2232%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%2357c778%22/%3E%3Crect%20x%3D%22152%22%20y%3D%2232%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%2357c778%22/%3E%3Crect%20x%3D%22156%22%20y%3D%2232%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%2357c778%22/%3E%3Crect%20x%3D%22160%22%20y%3D%2232%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%2357c778%22/%3E%3Crect%20x%3D%22164%22%20y%3D%2232%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%2357c778%22/%3E%3Crect%20x%3D%22168%22%20y%3D%2232%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%2357c778%22/%3E%3Crect%20x%3D%22172%22%20y%3D%2232%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%2357c778%22/%3E%3Crect%20x%3D%22176%22%20y%3D%2232%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%2357c778%22/%3E%3Crect%20x%3D%22180%22%20y%3D%2232%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%2357c778%22/%3E%3Crect%20x%3D%22184%22%20y%3D%2232%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%232fa356%22/%3E%3Crect%20x%3D%22188%22%20y%3D%2232%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%232fa356%22/%3E%3Crect%20x%3D%22192%22%20y%3D%2232%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%232fa356%22/%3E%3Crect%20x%3D%22196%22%20y%3D%2232%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%232fa356%22/%3E%3Crect%20x%3D%22200%22%20y%3D%2232%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%232fa356%22/%3E%3Crect%20x%3D%22204%22%20y%3D%2232%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%232fa356%22/%3E%3Crect%20x%3D%22208%22%20y%3D%2232%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%232fa356%22/%3E%3Crect%20x%3D%22212%22%20y%3D%2232%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%232fa356%22/%3E%3Crect%20x%3D%22216%22%20y%3D%2232%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%232fa356%22/%3E%3C/svg%3E"); background-repeat:repeat-x; background-size:220px 36px; } /* ---- sky clouds (pixel sprites, furthest layer) ---- */ .sky-cloud{ position:absolute; top:0; width:6px; height:6px; } .sky-cloud.sc-1{ left:8%; top:14%; } .sky-cloud.sc-2{ left:62%; top:8%; } .sky-cloud.sc-3{ left:38%; top:20%; width:6px; height:6px; } .sky-cloud.sc-1, .sky-cloud.sc-2{ box-shadow: 12px 12px 0 #f3e8c8, 18px 12px 0 #f3e8c8, 24px 12px 0 #f3e8c8, 30px 12px 0 #f3e8c8, 36px 12px 0 #f3e8c8, 42px 12px 0 #f3e8c8, 48px 12px 0 #f3e8c8, 54px 12px 0 #f3e8c8, 60px 12px 0 #f3e8c8, 66px 12px 0 #f3e8c8, 72px 12px 0 #f3e8c8, 78px 12px 0 #f3e8c8, 6px 18px 0 #f3e8c8, 12px 18px 0 #f3e8c8, 18px 18px 0 #f3e8c8, 24px 18px 0 #fffaf0, 30px 18px 0 #fffaf0, 36px 18px 0 #fffaf0, 42px 18px 0 #fffaf0, 48px 18px 0 #fffaf0, 54px 18px 0 #fffaf0, 60px 18px 0 #fffaf0, 66px 18px 0 #fffaf0, 72px 18px 0 #f3e8c8, 78px 18px 0 #f3e8c8, 84px 18px 0 #f3e8c8, 0px 24px 0 #f3e8c8, 6px 24px 0 #f3e8c8, 12px 24px 0 #f3e8c8, 18px 24px 0 #fffaf0, 24px 24px 0 #fffaf0, 30px 24px 0 #fffaf0, 36px 24px 0 #fffaf0, 42px 24px 0 #fffaf0, 48px 24px 0 #fffaf0, 54px 24px 0 #fffaf0, 60px 24px 0 #fffaf0, 66px 24px 0 #fffaf0, 72px 24px 0 #fffaf0, 78px 24px 0 #f3e8c8, 84px 24px 0 #f3e8c8, 90px 24px 0 #f3e8c8, 6px 30px 0 #f3e8c8, 12px 30px 0 #f3e8c8, 18px 30px 0 #f3e8c8, 24px 30px 0 #fffaf0, 30px 30px 0 #fffaf0, 36px 30px 0 #fffaf0, 42px 30px 0 #fffaf0, 48px 30px 0 #fffaf0, 54px 30px 0 #fffaf0, 60px 30px 0 #fffaf0, 66px 30px 0 #fffaf0, 72px 30px 0 #f3e8c8, 78px 30px 0 #f3e8c8, 84px 30px 0 #f3e8c8, 12px 36px 0 #f3e8c8, 18px 36px 0 #f3e8c8, 24px 36px 0 #f3e8c8, 30px 36px 0 #f3e8c8, 36px 36px 0 #f3e8c8, 42px 36px 0 #f3e8c8, 48px 36px 0 #f3e8c8, 54px 36px 0 #f3e8c8, 60px 36px 0 #f3e8c8, 66px 36px 0 #f3e8c8, 72px 36px 0 #f3e8c8, 78px 36px 0 #f3e8c8; } .sky-cloud.sc-3{ box-shadow: 12px 6px 0 #f3e8c8, 18px 6px 0 #f3e8c8, 24px 6px 0 #f3e8c8, 30px 6px 0 #f3e8c8, 36px 6px 0 #f3e8c8, 42px 6px 0 #f3e8c8, 48px 6px 0 #f3e8c8, 6px 12px 0 #f3e8c8, 12px 12px 0 #f3e8c8, 18px 12px 0 #fffaf0, 24px 12px 0 #fffaf0, 30px 12px 0 #fffaf0, 36px 12px 0 #fffaf0, 42px 12px 0 #fffaf0, 48px 12px 0 #f3e8c8, 54px 12px 0 #f3e8c8, 6px 18px 0 #f3e8c8, 12px 18px 0 #f3e8c8, 18px 18px 0 #fffaf0, 24px 18px 0 #fffaf0, 30px 18px 0 #fffaf0, 36px 18px 0 #fffaf0, 42px 18px 0 #fffaf0, 48px 18px 0 #f3e8c8, 54px 18px 0 #f3e8c8, 12px 24px 0 #f3e8c8, 18px 24px 0 #f3e8c8, 24px 24px 0 #f3e8c8, 30px 24px 0 #f3e8c8, 36px 24px 0 #f3e8c8, 42px 24px 0 #f3e8c8, 48px 24px 0 #f3e8c8; } /* ---- trees ---- */ /* ---- trees (scaled up to fill more of the jungle) ---- */ /* ---- trees (scaled up to fill more of the jungle) ---- */ .jungle-tree{ position:absolute; bottom:40px; width:280px; height:400px; } .jungle-tree.small{ width:180px; height:260px; } .jungle-tree.jt-1{ left:max(220px, calc(50% - 430px)); } .jungle-tree.jt-2{ left:min(calc(100% - 200px), calc(50% + 340px)); } .jungle-tree.jt-3{ left:max(260px, calc(50% - 340px)); } .jungle-tree.jt-4{ left:min(calc(100% - 260px), calc(50% + 250px)); } .jungle-tree.jt-5{ left:6%; } .jungle-tree.jt-6{ left:90%; } .tree-canopy{ position:absolute; top:0; left:calc(50% - 119px); width:17px; height:17px; box-shadow: 68px 17px 0 var(--leaf-light), 85px 17px 0 var(--leaf-light), 102px 17px 0 var(--leaf-light), 119px 17px 0 var(--leaf-dark), 136px 17px 0 var(--leaf-dark), 153px 17px 0 var(--leaf-dark), 34px 34px 0 var(--leaf-light), 51px 34px 0 var(--leaf-light), 68px 34px 0 var(--leaf-light), 85px 34px 0 var(--leaf-light), 102px 34px 0 var(--leaf-light), 119px 34px 0 var(--leaf-light), 136px 34px 0 var(--leaf-mid), 153px 34px 0 var(--leaf-mid), 170px 34px 0 var(--leaf-dark), 187px 34px 0 var(--leaf-dark), 17px 51px 0 var(--leaf-dark), 34px 51px 0 var(--leaf-light), 51px 51px 0 var(--leaf-light), 68px 51px 0 var(--leaf-light), 85px 51px 0 var(--leaf-light), 102px 51px 0 var(--leaf-light), 119px 51px 0 var(--leaf-light), 136px 51px 0 var(--leaf-mid), 153px 51px 0 var(--leaf-mid), 170px 51px 0 var(--leaf-mid), 187px 51px 0 var(--leaf-dark), 204px 51px 0 var(--leaf-dark), 17px 68px 0 var(--leaf-dark), 34px 68px 0 var(--leaf-light), 51px 68px 0 var(--leaf-light), 68px 68px 0 var(--leaf-light), 85px 68px 0 var(--leaf-light), 102px 68px 0 var(--leaf-light), 119px 68px 0 var(--leaf-light), 136px 68px 0 var(--leaf-light), 153px 68px 0 var(--leaf-mid), 170px 68px 0 var(--leaf-mid), 187px 68px 0 var(--leaf-mid), 204px 68px 0 var(--leaf-dark), 17px 85px 0 var(--leaf-dark), 34px 85px 0 var(--leaf-mid), 51px 85px 0 var(--leaf-light), 68px 85px 0 var(--leaf-light), 85px 85px 0 var(--leaf-light), 102px 85px 0 var(--leaf-light), 119px 85px 0 var(--leaf-light), 136px 85px 0 var(--leaf-light), 153px 85px 0 var(--leaf-light), 170px 85px 0 var(--leaf-mid), 187px 85px 0 var(--leaf-mid), 204px 85px 0 var(--leaf-dark), 17px 102px 0 var(--leaf-dark), 34px 102px 0 var(--leaf-mid), 51px 102px 0 var(--leaf-mid), 68px 102px 0 var(--leaf-light), 85px 102px 0 var(--leaf-light), 102px 102px 0 var(--leaf-light), 119px 102px 0 var(--leaf-light), 136px 102px 0 var(--leaf-light), 153px 102px 0 var(--leaf-light), 170px 102px 0 var(--leaf-mid), 187px 102px 0 var(--leaf-mid), 204px 102px 0 var(--leaf-dark), 17px 119px 0 var(--leaf-dark), 34px 119px 0 var(--leaf-mid), 51px 119px 0 var(--leaf-mid), 68px 119px 0 var(--leaf-mid), 85px 119px 0 var(--leaf-light), 102px 119px 0 var(--leaf-light), 119px 119px 0 var(--leaf-light), 136px 119px 0 var(--leaf-light), 153px 119px 0 var(--leaf-mid), 170px 119px 0 var(--leaf-mid), 187px 119px 0 var(--leaf-mid), 204px 119px 0 var(--leaf-dark), 17px 136px 0 var(--leaf-dark), 34px 136px 0 var(--leaf-dark), 51px 136px 0 var(--leaf-mid), 68px 136px 0 var(--leaf-mid), 85px 136px 0 var(--leaf-mid), 102px 136px 0 var(--leaf-mid), 119px 136px 0 var(--leaf-mid), 136px 136px 0 var(--leaf-mid), 153px 136px 0 var(--leaf-mid), 170px 136px 0 var(--leaf-mid), 187px 136px 0 var(--leaf-dark), 204px 136px 0 var(--leaf-dark), 34px 153px 0 var(--leaf-dark), 51px 153px 0 var(--leaf-dark), 68px 153px 0 var(--leaf-mid), 85px 153px 0 var(--leaf-mid), 102px 153px 0 var(--leaf-mid), 119px 153px 0 var(--leaf-mid), 136px 153px 0 var(--leaf-mid), 153px 153px 0 var(--leaf-mid), 170px 153px 0 var(--leaf-dark), 187px 153px 0 var(--leaf-dark), 68px 170px 0 var(--leaf-dark), 85px 170px 0 var(--leaf-dark), 102px 170px 0 var(--leaf-dark), 119px 170px 0 var(--leaf-dark), 136px 170px 0 var(--leaf-dark), 153px 170px 0 var(--leaf-dark); } .tree-trunk{ position:absolute; top:157px; left:calc(50% - 20px); width:40px; height:224px; background:#6b4226; border:4px solid var(--ink); border-radius:4px; } .jungle-tree.small{ opacity:.92; } .jungle-tree.small .tree-canopy{ left:calc(50% - 70px); width:14px; height:14px; box-shadow: 28px 14px 0 var(--leaf-light), 42px 14px 0 var(--leaf-light), 56px 14px 0 var(--leaf-light), 70px 14px 0 var(--leaf-dark), 84px 14px 0 var(--leaf-dark), 98px 14px 0 var(--leaf-dark), 14px 28px 0 var(--leaf-light), 28px 28px 0 var(--leaf-light), 42px 28px 0 var(--leaf-light), 56px 28px 0 var(--leaf-light), 70px 28px 0 var(--leaf-light), 84px 28px 0 var(--leaf-mid), 98px 28px 0 var(--leaf-dark), 112px 28px 0 var(--leaf-dark), 14px 42px 0 var(--leaf-dark), 28px 42px 0 var(--leaf-light), 42px 42px 0 var(--leaf-light), 56px 42px 0 var(--leaf-light), 70px 42px 0 var(--leaf-light), 84px 42px 0 var(--leaf-mid), 98px 42px 0 var(--leaf-mid), 112px 42px 0 var(--leaf-dark), 0px 56px 0 var(--leaf-dark), 14px 56px 0 var(--leaf-dark), 28px 56px 0 var(--leaf-mid), 42px 56px 0 var(--leaf-light), 56px 56px 0 var(--leaf-light), 70px 56px 0 var(--leaf-light), 84px 56px 0 var(--leaf-light), 98px 56px 0 var(--leaf-mid), 112px 56px 0 var(--leaf-dark), 126px 56px 0 var(--leaf-dark), 14px 70px 0 var(--leaf-dark), 28px 70px 0 var(--leaf-mid), 42px 70px 0 var(--leaf-mid), 56px 70px 0 var(--leaf-light), 70px 70px 0 var(--leaf-light), 84px 70px 0 var(--leaf-mid), 98px 70px 0 var(--leaf-mid), 112px 70px 0 var(--leaf-dark), 14px 84px 0 var(--leaf-dark), 28px 84px 0 var(--leaf-dark), 42px 84px 0 var(--leaf-mid), 56px 84px 0 var(--leaf-mid), 70px 84px 0 var(--leaf-mid), 84px 84px 0 var(--leaf-mid), 98px 84px 0 var(--leaf-dark), 112px 84px 0 var(--leaf-dark), 28px 98px 0 var(--leaf-dark), 42px 98px 0 var(--leaf-dark), 56px 98px 0 var(--leaf-dark), 70px 98px 0 var(--leaf-dark), 84px 98px 0 var(--leaf-dark), 98px 98px 0 var(--leaf-dark); } .jungle-tree.small .tree-trunk{ top:95px; left:calc(50% - 13px); width:26px; height:140px; } /* hanging vines from the treeline */ .hang-vine{ position:absolute; top:46%; width:9px; background:var(--leaf-dark); border-radius:4px; transform-origin:top center; animation:leafSway 4s ease-in-out infinite; } .hang-vine.hv-1{ left:14%; height:260px; animation-delay:-1s; } .hang-vine.hv-2{ left:40%; height:160px; animation-delay:-2.4s; } .hang-vine.hv-3{ left:80%; height:270px; animation-delay:-.5s; } .hang-vine.hv-4{ left:4%; height:220px; animation-delay:-3.2s; } .hang-vine.hv-5{ left:60%; height:170px; animation-delay:-1.8s; } .hang-vine.hv-6{ left:92%; height:200px; animation-delay:-2.9s; } .hang-leaf{ position:absolute; width:4px; height:4px; box-shadow: 8px 4px 0 var(--leaf-dark), 12px 4px 0 var(--leaf-dark), 16px 4px 0 var(--leaf-dark), 20px 4px 0 var(--leaf-dark), 4px 8px 0 var(--leaf-dark), 8px 8px 0 var(--leaf-mid), 12px 8px 0 var(--leaf-mid), 16px 8px 0 var(--leaf-mid), 20px 8px 0 var(--leaf-mid), 24px 8px 0 var(--leaf-dark), 0px 12px 0 var(--leaf-dark), 4px 12px 0 var(--leaf-dark), 8px 12px 0 var(--leaf-mid), 12px 12px 0 var(--leaf-light), 16px 12px 0 var(--leaf-light), 20px 12px 0 var(--leaf-mid), 24px 12px 0 var(--leaf-dark), 28px 12px 0 var(--leaf-dark), 4px 16px 0 var(--leaf-dark), 8px 16px 0 var(--leaf-mid), 12px 16px 0 var(--leaf-mid), 16px 16px 0 var(--leaf-mid), 20px 16px 0 var(--leaf-mid), 24px 16px 0 var(--leaf-dark), 8px 20px 0 var(--leaf-dark), 12px 20px 0 var(--leaf-dark), 16px 20px 0 var(--leaf-dark), 20px 20px 0 var(--leaf-dark); } .hang-leaf.hl-a{ top:22%; left:-24px; } .hang-leaf.hl-b{ top:54%; left:12px; } .hang-leaf.hl-c{ bottom:-4px; left:-14px; } /* ground-level bushes */ .jungle-bush{ position:absolute; bottom:80px; width:5px; height:5px; box-shadow: 20px 10px 0 var(--leaf-light), 25px 10px 0 var(--leaf-light), 30px 10px 0 var(--leaf-dark), 35px 10px 0 var(--leaf-dark), 10px 15px 0 var(--leaf-light), 15px 15px 0 var(--leaf-light), 20px 15px 0 var(--leaf-light), 25px 15px 0 var(--leaf-light), 30px 15px 0 var(--leaf-light), 35px 15px 0 var(--leaf-mid), 40px 15px 0 var(--leaf-mid), 45px 15px 0 var(--leaf-dark), 5px 20px 0 var(--leaf-dark), 10px 20px 0 var(--leaf-light), 15px 20px 0 var(--leaf-light), 20px 20px 0 var(--leaf-light), 25px 20px 0 var(--leaf-light), 30px 20px 0 var(--leaf-light), 35px 20px 0 var(--leaf-light), 40px 20px 0 var(--leaf-mid), 45px 20px 0 var(--leaf-mid), 50px 20px 0 var(--leaf-dark), 5px 25px 0 var(--leaf-dark), 10px 25px 0 var(--leaf-mid), 15px 25px 0 var(--leaf-mid), 20px 25px 0 var(--leaf-light), 25px 25px 0 var(--leaf-light), 30px 25px 0 var(--leaf-light), 35px 25px 0 var(--leaf-light), 40px 25px 0 var(--leaf-mid), 45px 25px 0 var(--leaf-mid), 50px 25px 0 var(--leaf-dark), 10px 30px 0 var(--leaf-dark), 15px 30px 0 var(--leaf-mid), 20px 30px 0 var(--leaf-mid), 25px 30px 0 var(--leaf-mid), 30px 30px 0 var(--leaf-mid), 35px 30px 0 var(--leaf-mid), 40px 30px 0 var(--leaf-mid), 45px 30px 0 var(--leaf-dark); } .jungle-bush.jb-1{ left:6%; } .jungle-bush.jb-2{ left:28%; transform:scale(.8) scaleX(-1); transform-origin:bottom center; } .jungle-bush.jb-3{ left:64%; transform:scale(1.05); transform-origin:bottom center; } .jungle-bush.jb-4{ left:92%; transform:scale(.75) scaleX(-1); transform-origin:bottom center; } .jungle-bush.jb-5{ left:16%; transform:scale(.9); transform-origin:bottom center; } .jungle-bush.jb-6{ left:46%; transform:scale(.7) scaleX(-1); transform-origin:bottom center; } .jungle-bush.jb-7{ left:56%; transform:scale(1.15); transform-origin:bottom center; } .jungle-bush.jb-8{ left:84%; transform:scale(.85); transform-origin:bottom center; } /* ground-level ferns/grass tufts */ .jungle-fern{ position:absolute; bottom:82px; width:3px; height:3px; box-shadow: 12px 6px 0 var(--leaf-light), 12px 9px 0 var(--leaf-light), 12px 12px 0 var(--leaf-mid), 24px 12px 0 var(--leaf-light), 0px 15px 0 var(--leaf-light), 12px 15px 0 var(--leaf-mid), 24px 15px 0 var(--leaf-light), 0px 18px 0 var(--leaf-light), 12px 18px 0 var(--leaf-mid), 24px 18px 0 var(--leaf-mid), 0px 21px 0 var(--leaf-mid), 12px 21px 0 var(--leaf-dark), 21px 21px 0 var(--leaf-mid), 3px 24px 0 var(--leaf-mid), 12px 24px 0 var(--leaf-dark), 21px 24px 0 var(--leaf-dark), 3px 27px 0 var(--leaf-dark), 12px 27px 0 var(--leaf-dark), 21px 27px 0 var(--leaf-dark), 3px 30px 0 var(--leaf-dark), 12px 30px 0 var(--leaf-dark), 21px 30px 0 var(--leaf-dark), 3px 33px 0 var(--leaf-dark), 12px 33px 0 var(--leaf-dark), 21px 33px 0 var(--leaf-dark); } /* bounding box: 27px x 36px */ .jungle-fern.jf-1{ left:3%; } .jungle-fern.jf-2{ left:12%; transform:scale(.8); } .jungle-fern.jf-3{ left:20%; transform:scale(1.1) scaleX(-1); } .jungle-fern.jf-4{ left:44%; transform:scale(.9); } .jungle-fern.jf-5{ left:52%; transform:scale(1.05) scaleX(-1); } .jungle-fern.jf-6{ left:60%; transform:scale(.85); } .jungle-fern.jf-7{ left:80%; transform:scale(1.1); } .jungle-fern.jf-8{ left:88%; transform:scale(.9) scaleX(-1); } .jungle-fern.jf-9{ left:96%; transform:scale(.8); } /* fireflies */ .firefly{ position:absolute; width:6px; height:6px; border-radius:50%; background:var(--banana); box-shadow:0 0 8px 2px var(--banana); animation:fireflyDrift 6s ease-in-out infinite, fireflyGlow 1.8s ease-in-out infinite; } .firefly.ff-1{ left:20%; bottom:120px; animation-delay:0s, .3s; } .firefly.ff-2{ left:55%; bottom:160px; animation-delay:-2s, .9s; } .firefly.ff-3{ left:75%; bottom:100px; animation-delay:-4s, 0s; } @keyframes fireflyDrift{ 0%,100%{ transform:translate(0,0); } 25%{ transform:translate(14px,-10px); } 50%{ transform:translate(-8px,-18px); } 75%{ transform:translate(10px,-6px); } } @keyframes fireflyGlow{ 0%,100%{ opacity:.4; } 50%{ opacity:1; } } .monkey-desk{ position:absolute; left:50%; bottom:52px; transform:translateX(-50%); display:flex; align-items:flex-end; gap:28px; } .desk-leaf{ position:absolute; top:-30px; left:-24px; width:8px; height:8px; z-index:1; box-shadow: 16px 8px 0 var(--leaf-dark), 24px 8px 0 var(--leaf-dark), 32px 8px 0 var(--leaf-dark), 40px 8px 0 var(--leaf-dark), 8px 16px 0 var(--leaf-dark), 16px 16px 0 var(--leaf-mid), 24px 16px 0 var(--leaf-mid), 32px 16px 0 var(--leaf-mid), 40px 16px 0 var(--leaf-mid), 48px 16px 0 var(--leaf-dark), 0px 24px 0 var(--leaf-dark), 8px 24px 0 var(--leaf-dark), 16px 24px 0 var(--leaf-mid), 24px 24px 0 var(--leaf-light), 32px 24px 0 var(--leaf-light), 40px 24px 0 var(--leaf-mid), 48px 24px 0 var(--leaf-dark), 56px 24px 0 var(--leaf-dark), 8px 32px 0 var(--leaf-dark), 16px 32px 0 var(--leaf-mid), 24px 32px 0 var(--leaf-mid), 32px 32px 0 var(--leaf-mid), 40px 32px 0 var(--leaf-mid), 48px 32px 0 var(--leaf-dark), 16px 40px 0 var(--leaf-dark), 24px 40px 0 var(--leaf-dark), 32px 40px 0 var(--leaf-dark), 40px 40px 0 var(--leaf-dark); } /* ---------- profile monkey bust (shoulders up, faces the screen) ---------- */ /* ---------- monkey pose swap: profile (at the screen) <-> front (at the viewer) ---------- */ .desk-monkey-pose{ position:relative; width:175px; height:175px; flex-shrink:0; z-index:2; } .desk-monkey-bust, .desk-monkey-front{ position:absolute; bottom:0; left:0; } .desk-monkey-bust{ width:168px; height:175px; animation:monkeyPoseBust 7s linear infinite; } .desk-monkey-front{ width:175px; height:175px; animation:monkeyPoseFront 7s linear infinite; } @keyframes monkeyPoseBust{ 0%, 62%{ opacity:1; } 63%, 85%{ opacity:0; } 86%, 100%{ opacity:1; } } @keyframes monkeyPoseFront{ 0%, 62%{ opacity:0; } 63%, 85%{ opacity:1; } 86%, 100%{ opacity:0; } } .desk-monkey-bust::before{ content:''; position:absolute; top:0; left:0; width:7px; height:7px; box-shadow: 63px 0px 0 #1c3a2e, 70px 0px 0 #1c3a2e, 77px 0px 0 #1c3a2e, 84px 0px 0 #1c3a2e, 42px 7px 0 #1c3a2e, 49px 7px 0 #1c3a2e, 56px 7px 0 #1c3a2e, 63px 7px 0 #8a5a34, 70px 7px 0 #8a5a34, 77px 7px 0 #8a5a34, 84px 7px 0 #8a5a34, 91px 7px 0 #1c3a2e, 98px 7px 0 #1c3a2e, 105px 7px 0 #1c3a2e, 35px 14px 0 #1c3a2e, 42px 14px 0 #e8b57a, 49px 14px 0 #e8b57a, 56px 14px 0 #e8b57a, 63px 14px 0 #e8b57a, 70px 14px 0 #e8b57a, 77px 14px 0 #e8b57a, 84px 14px 0 #c98c4e, 91px 14px 0 #8a5a34, 98px 14px 0 #8a5a34, 105px 14px 0 #8a5a34, 112px 14px 0 #1c3a2e, 28px 21px 0 #1c3a2e, 35px 21px 0 #e8b57a, 42px 21px 0 #e8b57a, 49px 21px 0 #e8b57a, 56px 21px 0 #e8b57a, 63px 21px 0 #e8b57a, 70px 21px 0 #e8b57a, 77px 21px 0 #e8b57a, 84px 21px 0 #e8b57a, 91px 21px 0 #c98c4e, 98px 21px 0 #c98c4e, 105px 21px 0 #c98c4e, 112px 21px 0 #8a5a34, 119px 21px 0 #1c3a2e, 14px 28px 0 #1c3a2e, 21px 28px 0 #1c3a2e, 28px 28px 0 #8a5a34, 35px 28px 0 #e8b57a, 42px 28px 0 #e8b57a, 49px 28px 0 #e8b57a, 56px 28px 0 #e8b57a, 63px 28px 0 #e8b57a, 70px 28px 0 #e8b57a, 77px 28px 0 #e8b57a, 84px 28px 0 #e8b57a, 91px 28px 0 #e8b57a, 98px 28px 0 #e8b57a, 105px 28px 0 #e8b57a, 112px 28px 0 #c98c4e, 119px 28px 0 #8a5a34, 126px 28px 0 #1c3a2e, 7px 35px 0 #1c3a2e, 14px 35px 0 #c98c4e, 21px 35px 0 #c98c4e, 28px 35px 0 #c98c4e, 35px 35px 0 #c98c4e, 42px 35px 0 #e8b57a, 49px 35px 0 #e8b57a, 56px 35px 0 #e8b57a, 63px 35px 0 #e8b57a, 70px 35px 0 #e8b57a, 77px 35px 0 #e8b57a, 84px 35px 0 #e8b57a, 91px 35px 0 #e8b57a, 98px 35px 0 #e8b57a, 105px 35px 0 #e8b57a, 112px 35px 0 #e8b57a, 119px 35px 0 #c98c4e, 126px 35px 0 #8a5a34, 133px 35px 0 #1c3a2e, 0px 42px 0 #1c3a2e, 7px 42px 0 #c98c4e, 14px 42px 0 #c98c4e, 21px 42px 0 #c98c4e, 28px 42px 0 #c98c4e, 35px 42px 0 #c98c4e, 42px 42px 0 #c98c4e, 49px 42px 0 #e8b57a, 56px 42px 0 #e8b57a, 63px 42px 0 #e8b57a, 70px 42px 0 #e8b57a, 77px 42px 0 #e8b57a, 84px 42px 0 #e8b57a, 91px 42px 0 #e8b57a, 98px 42px 0 #e8b57a, 105px 42px 0 #e8b57a, 112px 42px 0 #e8b57a, 119px 42px 0 #c98c4e, 126px 42px 0 #8a5a34, 133px 42px 0 #1c3a2e, 0px 49px 0 #c98c4e, 7px 49px 0 #c98c4e, 14px 49px 0 #c98c4e, 21px 49px 0 #8a5a34, 28px 49px 0 #8a5a34, 35px 49px 0 #8a5a34, 42px 49px 0 #c98c4e, 49px 49px 0 #e8b57a, 56px 49px 0 #e8b57a, 63px 49px 0 #e8b57a, 70px 49px 0 #e8b57a, 77px 49px 0 #e8b57a, 84px 49px 0 #e8b57a, 91px 49px 0 #e8b57a, 98px 49px 0 #e8b57a, 105px 49px 0 #e8b57a, 112px 49px 0 #e8b57a, 119px 49px 0 #e8b57a, 126px 49px 0 #c98c4e, 133px 49px 0 #8a5a34, 140px 49px 0 #1c3a2e, 0px 56px 0 #c98c4e, 7px 56px 0 #c98c4e, 14px 56px 0 #8a5a34, 21px 56px 0 #8a5a34, 28px 56px 0 #8a5a34, 35px 56px 0 #8a5a34, 42px 56px 0 #c98c4e, 49px 56px 0 #c98c4e, 56px 56px 0 #e8b57a, 63px 56px 0 #e8b57a, 70px 56px 0 #e8b57a, 77px 56px 0 #e8b57a, 84px 56px 0 #e8b57a, 91px 56px 0 #e8b57a, 98px 56px 0 #e8b57a, 105px 56px 0 #e8b57a, 112px 56px 0 #e8b57a, 119px 56px 0 #e8b57a, 126px 56px 0 #c98c4e, 133px 56px 0 #8a5a34, 140px 56px 0 #1c3a2e, 0px 63px 0 #c98c4e, 7px 63px 0 #c98c4e, 14px 63px 0 #8a5a34, 21px 63px 0 #8a5a34, 28px 63px 0 #8a5a34, 35px 63px 0 #8a5a34, 42px 63px 0 #8a5a34, 49px 63px 0 #c98c4e, 56px 63px 0 #e8b57a, 63px 63px 0 #e8b57a, 70px 63px 0 #e8b57a, 77px 63px 0 #e8b57a, 84px 63px 0 #e8b57a, 91px 63px 0 #e8b57a, 98px 63px 0 #e8b57a, 105px 63px 0 #1c3a2e, 112px 63px 0 #e8b57a, 119px 63px 0 #e8b57a, 126px 63px 0 #e8b57a, 133px 63px 0 #e8b57a, 140px 63px 0 #e8b57a, 147px 63px 0 #1c3a2e, 0px 70px 0 #c98c4e, 7px 70px 0 #c98c4e, 14px 70px 0 #8a5a34, 21px 70px 0 #8a5a34, 28px 70px 0 #8a5a34, 35px 70px 0 #8a5a34, 42px 70px 0 #c98c4e, 49px 70px 0 #c98c4e, 56px 70px 0 #e8b57a, 63px 70px 0 #e8b57a, 70px 70px 0 #e8b57a, 77px 70px 0 #e8b57a, 84px 70px 0 #e8b57a, 91px 70px 0 #e8b57a, 98px 70px 0 #e8b57a, 105px 70px 0 #f3d9ae, 112px 70px 0 #f3d9ae, 119px 70px 0 #f3d9ae, 126px 70px 0 #f3d9ae, 133px 70px 0 #f3d9ae, 140px 70px 0 #1c3a2e, 147px 70px 0 #e8b57a, 154px 70px 0 #1c3a2e, 0px 77px 0 #c98c4e, 7px 77px 0 #c98c4e, 14px 77px 0 #c98c4e, 21px 77px 0 #8a5a34, 28px 77px 0 #8a5a34, 35px 77px 0 #8a5a34, 42px 77px 0 #c98c4e, 49px 77px 0 #e8b57a, 56px 77px 0 #e8b57a, 63px 77px 0 #e8b57a, 70px 77px 0 #e8b57a, 77px 77px 0 #e8b57a, 84px 77px 0 #e8b57a, 91px 77px 0 #e8b57a, 98px 77px 0 #f3d9ae, 105px 77px 0 #f3d9ae, 112px 77px 0 #f3d9ae, 119px 77px 0 #f3d9ae, 126px 77px 0 #f3d9ae, 133px 77px 0 #f3d9ae, 140px 77px 0 #f3d9ae, 147px 77px 0 #e8b57a, 154px 77px 0 #1c3a2e, 0px 84px 0 #1c3a2e, 7px 84px 0 #c98c4e, 14px 84px 0 #c98c4e, 21px 84px 0 #c98c4e, 28px 84px 0 #c98c4e, 35px 84px 0 #c98c4e, 42px 84px 0 #c98c4e, 49px 84px 0 #e8b57a, 56px 84px 0 #e8b57a, 63px 84px 0 #e8b57a, 70px 84px 0 #e8b57a, 77px 84px 0 #e8b57a, 84px 84px 0 #e8b57a, 91px 84px 0 #e8b57a, 98px 84px 0 #f3d9ae, 105px 84px 0 #f3d9ae, 112px 84px 0 #f3d9ae, 119px 84px 0 #f3d9ae, 126px 84px 0 #f3d9ae, 133px 84px 0 #f3d9ae, 140px 84px 0 #f3d9ae, 147px 84px 0 #e8b57a, 154px 84px 0 #1c3a2e, 7px 91px 0 #1c3a2e, 14px 91px 0 #c98c4e, 21px 91px 0 #c98c4e, 28px 91px 0 #c98c4e, 35px 91px 0 #c98c4e, 42px 91px 0 #e8b57a, 49px 91px 0 #e8b57a, 56px 91px 0 #e8b57a, 63px 91px 0 #e8b57a, 70px 91px 0 #e8b57a, 77px 91px 0 #e8b57a, 84px 91px 0 #e8b57a, 91px 91px 0 #e8b57a, 98px 91px 0 #1c3a2e, 105px 91px 0 #1c3a2e, 112px 91px 0 #1c3a2e, 119px 91px 0 #f3d9ae, 126px 91px 0 #f3d9ae, 133px 91px 0 #f3d9ae, 140px 91px 0 #f3d9ae, 147px 91px 0 #e8b57a, 154px 91px 0 #1c3a2e, 14px 98px 0 #1c3a2e, 21px 98px 0 #1c3a2e, 28px 98px 0 #8a5a34, 35px 98px 0 #c98c4e, 42px 98px 0 #e8b57a, 49px 98px 0 #e8b57a, 56px 98px 0 #e8b57a, 63px 98px 0 #e8b57a, 70px 98px 0 #e8b57a, 77px 98px 0 #e8b57a, 84px 98px 0 #e8b57a, 91px 98px 0 #e8b57a, 98px 98px 0 #e8b57a, 105px 98px 0 #f3d9ae, 112px 98px 0 #f3d9ae, 119px 98px 0 #f3d9ae, 126px 98px 0 #f3d9ae, 133px 98px 0 #f3d9ae, 140px 98px 0 #e8b57a, 147px 98px 0 #e8b57a, 154px 98px 0 #1c3a2e, 28px 105px 0 #1c3a2e, 35px 105px 0 #8a5a34, 42px 105px 0 #c98c4e, 49px 105px 0 #c98c4e, 56px 105px 0 #c98c4e, 63px 105px 0 #e8b57a, 70px 105px 0 #e8b57a, 77px 105px 0 #e8b57a, 84px 105px 0 #e8b57a, 91px 105px 0 #c98c4e, 98px 105px 0 #e8b57a, 105px 105px 0 #e8b57a, 112px 105px 0 #e8b57a, 119px 105px 0 #e8b57a, 126px 105px 0 #e8b57a, 133px 105px 0 #e8b57a, 140px 105px 0 #e8b57a, 147px 105px 0 #1c3a2e, 35px 112px 0 #1c3a2e, 42px 112px 0 #8a5a34, 49px 112px 0 #8a5a34, 56px 112px 0 #8a5a34, 63px 112px 0 #c98c4e, 70px 112px 0 #e8b57a, 77px 112px 0 #e8b57a, 84px 112px 0 #c98c4e, 91px 112px 0 #8a5a34, 98px 112px 0 #8a5a34, 105px 112px 0 #8a5a34, 112px 112px 0 #1c3a2e, 119px 112px 0 #1c3a2e, 126px 112px 0 #1c3a2e, 133px 112px 0 #1c3a2e, 140px 112px 0 #1c3a2e, 42px 119px 0 #1c3a2e, 49px 119px 0 #1c3a2e, 56px 119px 0 #1c3a2e, 63px 119px 0 #8a5a34, 70px 119px 0 #c98c4e, 77px 119px 0 #c98c4e, 84px 119px 0 #8a5a34, 91px 119px 0 #1c3a2e, 98px 119px 0 #1c3a2e, 105px 119px 0 #1c3a2e, 28px 126px 0 #1c3a2e, 35px 126px 0 #1c3a2e, 42px 126px 0 #1c3a2e, 49px 126px 0 #8a5a34, 56px 126px 0 #8a5a34, 63px 126px 0 #c98c4e, 70px 126px 0 #e8b57a, 77px 126px 0 #e8b57a, 84px 126px 0 #c98c4e, 91px 126px 0 #8a5a34, 98px 126px 0 #8a5a34, 105px 126px 0 #1c3a2e, 112px 126px 0 #1c3a2e, 119px 126px 0 #1c3a2e, 7px 133px 0 #1c3a2e, 14px 133px 0 #1c3a2e, 21px 133px 0 #1c3a2e, 28px 133px 0 #8a5a34, 35px 133px 0 #8a5a34, 42px 133px 0 #8a5a34, 49px 133px 0 #c98c4e, 56px 133px 0 #c98c4e, 63px 133px 0 #e8b57a, 70px 133px 0 #e8b57a, 77px 133px 0 #e8b57a, 84px 133px 0 #e8b57a, 91px 133px 0 #c98c4e, 98px 133px 0 #c98c4e, 105px 133px 0 #8a5a34, 112px 133px 0 #8a5a34, 119px 133px 0 #8a5a34, 126px 133px 0 #1c3a2e, 133px 133px 0 #1c3a2e, 140px 133px 0 #1c3a2e, 0px 140px 0 #1c3a2e, 7px 140px 0 #8a5a34, 14px 140px 0 #8a5a34, 21px 140px 0 #8a5a34, 28px 140px 0 #c98c4e, 35px 140px 0 #c98c4e, 42px 140px 0 #c98c4e, 49px 140px 0 #e8b57a, 56px 140px 0 #e8b57a, 63px 140px 0 #e8b57a, 70px 140px 0 #e8b57a, 77px 140px 0 #e8b57a, 84px 140px 0 #e8b57a, 91px 140px 0 #e8b57a, 98px 140px 0 #e8b57a, 105px 140px 0 #c98c4e, 112px 140px 0 #c98c4e, 119px 140px 0 #c98c4e, 126px 140px 0 #8a5a34, 133px 140px 0 #8a5a34, 140px 140px 0 #8a5a34, 147px 140px 0 #1c3a2e, 0px 147px 0 #8a5a34, 7px 147px 0 #c98c4e, 14px 147px 0 #c98c4e, 21px 147px 0 #c98c4e, 28px 147px 0 #e8b57a, 35px 147px 0 #e8b57a, 42px 147px 0 #e8b57a, 49px 147px 0 #e8b57a, 56px 147px 0 #e8b57a, 63px 147px 0 #e8b57a, 70px 147px 0 #e8b57a, 77px 147px 0 #e8b57a, 84px 147px 0 #e8b57a, 91px 147px 0 #e8b57a, 98px 147px 0 #e8b57a, 105px 147px 0 #e8b57a, 112px 147px 0 #e8b57a, 119px 147px 0 #e8b57a, 126px 147px 0 #c98c4e, 133px 147px 0 #c98c4e, 140px 147px 0 #c98c4e, 147px 147px 0 #8a5a34, 154px 147px 0 #1c3a2e, 0px 154px 0 #8a5a34, 7px 154px 0 #c98c4e, 14px 154px 0 #e8b57a, 21px 154px 0 #e8b57a, 28px 154px 0 #e8b57a, 35px 154px 0 #e8b57a, 42px 154px 0 #e8b57a, 49px 154px 0 #e8b57a, 56px 154px 0 #e8b57a, 63px 154px 0 #e8b57a, 70px 154px 0 #e8b57a, 77px 154px 0 #e8b57a, 84px 154px 0 #e8b57a, 91px 154px 0 #e8b57a, 98px 154px 0 #e8b57a, 105px 154px 0 #e8b57a, 112px 154px 0 #e8b57a, 119px 154px 0 #e8b57a, 126px 154px 0 #e8b57a, 133px 154px 0 #e8b57a, 140px 154px 0 #c98c4e, 147px 154px 0 #8a5a34, 154px 154px 0 #1c3a2e, 0px 161px 0 #8a5a34, 7px 161px 0 #c98c4e, 14px 161px 0 #c98c4e, 21px 161px 0 #c98c4e, 28px 161px 0 #c98c4e, 35px 161px 0 #c98c4e, 42px 161px 0 #c98c4e, 49px 161px 0 #c98c4e, 56px 161px 0 #c98c4e, 63px 161px 0 #c98c4e, 70px 161px 0 #c98c4e, 77px 161px 0 #c98c4e, 84px 161px 0 #c98c4e, 91px 161px 0 #c98c4e, 98px 161px 0 #c98c4e, 105px 161px 0 #c98c4e, 112px 161px 0 #c98c4e, 119px 161px 0 #c98c4e, 126px 161px 0 #c98c4e, 133px 161px 0 #c98c4e, 140px 161px 0 #c98c4e, 147px 161px 0 #8a5a34, 154px 161px 0 #1c3a2e, 0px 168px 0 #8a5a34, 7px 168px 0 #8a5a34, 14px 168px 0 #8a5a34, 21px 168px 0 #8a5a34, 28px 168px 0 #8a5a34, 35px 168px 0 #8a5a34, 42px 168px 0 #8a5a34, 49px 168px 0 #8a5a34, 56px 168px 0 #8a5a34, 63px 168px 0 #8a5a34, 70px 168px 0 #8a5a34, 77px 168px 0 #8a5a34, 84px 168px 0 #8a5a34, 91px 168px 0 #8a5a34, 98px 168px 0 #8a5a34, 105px 168px 0 #8a5a34, 112px 168px 0 #8a5a34, 119px 168px 0 #8a5a34, 126px 168px 0 #8a5a34, 133px 168px 0 #8a5a34, 140px 168px 0 #8a5a34, 147px 168px 0 #8a5a34, 154px 168px 0 #1c3a2e; } /* desk-monkey-bust: 168px x 175px */ .desk-monkey-front{ display:inline-block; width:175px; height:175px; position:relative; flex-shrink:0; } .desk-monkey-front::before{ content:''; position:absolute; top:0; left:0; width:7px; height:7px; box-shadow: 70px 0px 0 #1c3a2e, 77px 0px 0 #1c3a2e, 84px 0px 0 #1c3a2e, 91px 0px 0 #1c3a2e, 98px 0px 0 #1c3a2e, 56px 7px 0 #1c3a2e, 63px 7px 0 #1c3a2e, 70px 7px 0 #8a5a34, 77px 7px 0 #8a5a34, 84px 7px 0 #8a5a34, 91px 7px 0 #8a5a34, 98px 7px 0 #8a5a34, 105px 7px 0 #1c3a2e, 112px 7px 0 #1c3a2e, 42px 14px 0 #1c3a2e, 49px 14px 0 #1c3a2e, 56px 14px 0 #e8b57a, 63px 14px 0 #e8b57a, 70px 14px 0 #e8b57a, 77px 14px 0 #e8b57a, 84px 14px 0 #e8b57a, 91px 14px 0 #e8b57a, 98px 14px 0 #e8b57a, 105px 14px 0 #e8b57a, 112px 14px 0 #e8b57a, 119px 14px 0 #1c3a2e, 126px 14px 0 #1c3a2e, 35px 21px 0 #1c3a2e, 42px 21px 0 #8a5a34, 49px 21px 0 #e8b57a, 56px 21px 0 #e8b57a, 63px 21px 0 #e8b57a, 70px 21px 0 #e8b57a, 77px 21px 0 #e8b57a, 84px 21px 0 #e8b57a, 91px 21px 0 #e8b57a, 98px 21px 0 #e8b57a, 105px 21px 0 #e8b57a, 112px 21px 0 #e8b57a, 119px 21px 0 #e8b57a, 126px 21px 0 #8a5a34, 133px 21px 0 #1c3a2e, 14px 28px 0 #1c3a2e, 21px 28px 0 #1c3a2e, 28px 28px 0 #1c3a2e, 35px 28px 0 #8a5a34, 42px 28px 0 #c98c4e, 49px 28px 0 #e8b57a, 56px 28px 0 #e8b57a, 63px 28px 0 #e8b57a, 70px 28px 0 #e8b57a, 77px 28px 0 #e8b57a, 84px 28px 0 #e8b57a, 91px 28px 0 #e8b57a, 98px 28px 0 #e8b57a, 105px 28px 0 #e8b57a, 112px 28px 0 #e8b57a, 119px 28px 0 #e8b57a, 126px 28px 0 #c98c4e, 133px 28px 0 #8a5a34, 140px 28px 0 #1c3a2e, 147px 28px 0 #1c3a2e, 154px 28px 0 #1c3a2e, 0px 35px 0 #1c3a2e, 7px 35px 0 #1c3a2e, 14px 35px 0 #c98c4e, 21px 35px 0 #c98c4e, 28px 35px 0 #1c3a2e, 35px 35px 0 #8a5a34, 42px 35px 0 #c98c4e, 49px 35px 0 #e8b57a, 56px 35px 0 #e8b57a, 63px 35px 0 #e8b57a, 70px 35px 0 #e8b57a, 77px 35px 0 #e8b57a, 84px 35px 0 #e8b57a, 91px 35px 0 #e8b57a, 98px 35px 0 #e8b57a, 105px 35px 0 #e8b57a, 112px 35px 0 #e8b57a, 119px 35px 0 #e8b57a, 126px 35px 0 #c98c4e, 133px 35px 0 #8a5a34, 140px 35px 0 #1c3a2e, 147px 35px 0 #c98c4e, 154px 35px 0 #c98c4e, 161px 35px 0 #1c3a2e, 168px 35px 0 #1c3a2e, 0px 42px 0 #c98c4e, 7px 42px 0 #c98c4e, 14px 42px 0 #c98c4e, 21px 42px 0 #c98c4e, 28px 42px 0 #c98c4e, 35px 42px 0 #c98c4e, 42px 42px 0 #e8b57a, 49px 42px 0 #e8b57a, 56px 42px 0 #e8b57a, 63px 42px 0 #e8b57a, 70px 42px 0 #e8b57a, 77px 42px 0 #e8b57a, 84px 42px 0 #e8b57a, 91px 42px 0 #e8b57a, 98px 42px 0 #e8b57a, 105px 42px 0 #e8b57a, 112px 42px 0 #e8b57a, 119px 42px 0 #e8b57a, 126px 42px 0 #e8b57a, 133px 42px 0 #c98c4e, 140px 42px 0 #c98c4e, 147px 42px 0 #c98c4e, 154px 42px 0 #c98c4e, 161px 42px 0 #c98c4e, 168px 42px 0 #c98c4e, 0px 49px 0 #c98c4e, 7px 49px 0 #c98c4e, 14px 49px 0 #8a5a34, 21px 49px 0 #8a5a34, 28px 49px 0 #c98c4e, 35px 49px 0 #c98c4e, 42px 49px 0 #e8b57a, 49px 49px 0 #e8b57a, 56px 49px 0 #e8b57a, 63px 49px 0 #e8b57a, 70px 49px 0 #e8b57a, 77px 49px 0 #e8b57a, 84px 49px 0 #e8b57a, 91px 49px 0 #e8b57a, 98px 49px 0 #e8b57a, 105px 49px 0 #e8b57a, 112px 49px 0 #e8b57a, 119px 49px 0 #e8b57a, 126px 49px 0 #e8b57a, 133px 49px 0 #c98c4e, 140px 49px 0 #c98c4e, 147px 49px 0 #8a5a34, 154px 49px 0 #8a5a34, 161px 49px 0 #c98c4e, 168px 49px 0 #c98c4e, 0px 56px 0 #c98c4e, 7px 56px 0 #8a5a34, 14px 56px 0 #8a5a34, 21px 56px 0 #8a5a34, 28px 56px 0 #8a5a34, 35px 56px 0 #c98c4e, 42px 56px 0 #c98c4e, 49px 56px 0 #e8b57a, 56px 56px 0 #e8b57a, 63px 56px 0 #e8b57a, 70px 56px 0 #e8b57a, 77px 56px 0 #e8b57a, 84px 56px 0 #e8b57a, 91px 56px 0 #e8b57a, 98px 56px 0 #e8b57a, 105px 56px 0 #e8b57a, 112px 56px 0 #e8b57a, 119px 56px 0 #e8b57a, 126px 56px 0 #c98c4e, 133px 56px 0 #c98c4e, 140px 56px 0 #8a5a34, 147px 56px 0 #8a5a34, 154px 56px 0 #8a5a34, 161px 56px 0 #8a5a34, 168px 56px 0 #c98c4e, 0px 63px 0 #c98c4e, 7px 63px 0 #8a5a34, 14px 63px 0 #8a5a34, 21px 63px 0 #8a5a34, 28px 63px 0 #8a5a34, 35px 63px 0 #c98c4e, 42px 63px 0 #c98c4e, 49px 63px 0 #e8b57a, 56px 63px 0 #e8b57a, 63px 63px 0 #e8b57a, 70px 63px 0 #e8b57a, 77px 63px 0 #f3d9ae, 84px 63px 0 #f3d9ae, 91px 63px 0 #f3d9ae, 98px 63px 0 #e8b57a, 105px 63px 0 #e8b57a, 112px 63px 0 #e8b57a, 119px 63px 0 #e8b57a, 126px 63px 0 #c98c4e, 133px 63px 0 #c98c4e, 140px 63px 0 #8a5a34, 147px 63px 0 #8a5a34, 154px 63px 0 #8a5a34, 161px 63px 0 #8a5a34, 168px 63px 0 #c98c4e, 0px 70px 0 #c98c4e, 7px 70px 0 #8a5a34, 14px 70px 0 #8a5a34, 21px 70px 0 #8a5a34, 28px 70px 0 #8a5a34, 35px 70px 0 #c98c4e, 42px 70px 0 #c98c4e, 49px 70px 0 #e8b57a, 56px 70px 0 #1c3a2e, 63px 70px 0 #f3d9ae, 70px 70px 0 #f3d9ae, 77px 70px 0 #f3d9ae, 84px 70px 0 #f3d9ae, 91px 70px 0 #f3d9ae, 98px 70px 0 #f3d9ae, 105px 70px 0 #f3d9ae, 112px 70px 0 #1c3a2e, 119px 70px 0 #e8b57a, 126px 70px 0 #c98c4e, 133px 70px 0 #c98c4e, 140px 70px 0 #8a5a34, 147px 70px 0 #8a5a34, 154px 70px 0 #8a5a34, 161px 70px 0 #8a5a34, 168px 70px 0 #c98c4e, 0px 77px 0 #c98c4e, 7px 77px 0 #c98c4e, 14px 77px 0 #8a5a34, 21px 77px 0 #8a5a34, 28px 77px 0 #c98c4e, 35px 77px 0 #c98c4e, 42px 77px 0 #e8b57a, 49px 77px 0 #e8b57a, 56px 77px 0 #f3d9ae, 63px 77px 0 #f3d9ae, 70px 77px 0 #f3d9ae, 77px 77px 0 #f3d9ae, 84px 77px 0 #f3d9ae, 91px 77px 0 #f3d9ae, 98px 77px 0 #f3d9ae, 105px 77px 0 #f3d9ae, 112px 77px 0 #f3d9ae, 119px 77px 0 #e8b57a, 126px 77px 0 #e8b57a, 133px 77px 0 #c98c4e, 140px 77px 0 #c98c4e, 147px 77px 0 #8a5a34, 154px 77px 0 #8a5a34, 161px 77px 0 #c98c4e, 168px 77px 0 #c98c4e, 0px 84px 0 #c98c4e, 7px 84px 0 #c98c4e, 14px 84px 0 #c98c4e, 21px 84px 0 #c98c4e, 28px 84px 0 #c98c4e, 35px 84px 0 #c98c4e, 42px 84px 0 #e8b57a, 49px 84px 0 #e8b57a, 56px 84px 0 #f3d9ae, 63px 84px 0 #f3d9ae, 70px 84px 0 #f3d9ae, 77px 84px 0 #f3d9ae, 84px 84px 0 #f3d9ae, 91px 84px 0 #f3d9ae, 98px 84px 0 #f3d9ae, 105px 84px 0 #f3d9ae, 112px 84px 0 #f3d9ae, 119px 84px 0 #e8b57a, 126px 84px 0 #e8b57a, 133px 84px 0 #c98c4e, 140px 84px 0 #c98c4e, 147px 84px 0 #c98c4e, 154px 84px 0 #c98c4e, 161px 84px 0 #c98c4e, 168px 84px 0 #c98c4e, 0px 91px 0 #1c3a2e, 7px 91px 0 #1c3a2e, 14px 91px 0 #c98c4e, 21px 91px 0 #c98c4e, 28px 91px 0 #1c3a2e, 35px 91px 0 #8a5a34, 42px 91px 0 #e8b57a, 49px 91px 0 #e8b57a, 56px 91px 0 #f3d9ae, 63px 91px 0 #f3d9ae, 70px 91px 0 #f3d9ae, 77px 91px 0 #1c3a2e, 84px 91px 0 #f3d9ae, 91px 91px 0 #1c3a2e, 98px 91px 0 #f3d9ae, 105px 91px 0 #f3d9ae, 112px 91px 0 #f3d9ae, 119px 91px 0 #e8b57a, 126px 91px 0 #e8b57a, 133px 91px 0 #8a5a34, 140px 91px 0 #1c3a2e, 147px 91px 0 #c98c4e, 154px 91px 0 #c98c4e, 161px 91px 0 #1c3a2e, 168px 91px 0 #1c3a2e, 14px 98px 0 #1c3a2e, 21px 98px 0 #1c3a2e, 28px 98px 0 #1c3a2e, 35px 98px 0 #8a5a34, 42px 98px 0 #c98c4e, 49px 98px 0 #e8b57a, 56px 98px 0 #f3d9ae, 63px 98px 0 #f3d9ae, 70px 98px 0 #f3d9ae, 77px 98px 0 #f3d9ae, 84px 98px 0 #f3d9ae, 91px 98px 0 #f3d9ae, 98px 98px 0 #f3d9ae, 105px 98px 0 #f3d9ae, 112px 98px 0 #f3d9ae, 119px 98px 0 #e8b57a, 126px 98px 0 #c98c4e, 133px 98px 0 #8a5a34, 140px 98px 0 #1c3a2e, 147px 98px 0 #1c3a2e, 154px 98px 0 #1c3a2e, 35px 105px 0 #1c3a2e, 42px 105px 0 #8a5a34, 49px 105px 0 #e8b57a, 56px 105px 0 #e8b57a, 63px 105px 0 #1c3a2e, 70px 105px 0 #1c3a2e, 77px 105px 0 #1c3a2e, 84px 105px 0 #1c3a2e, 91px 105px 0 #1c3a2e, 98px 105px 0 #1c3a2e, 105px 105px 0 #1c3a2e, 112px 105px 0 #e8b57a, 119px 105px 0 #e8b57a, 126px 105px 0 #8a5a34, 133px 105px 0 #1c3a2e, 42px 112px 0 #1c3a2e, 49px 112px 0 #1c3a2e, 56px 112px 0 #e8b57a, 63px 112px 0 #e8b57a, 70px 112px 0 #e8b57a, 77px 112px 0 #f3d9ae, 84px 112px 0 #f3d9ae, 91px 112px 0 #f3d9ae, 98px 112px 0 #e8b57a, 105px 112px 0 #e8b57a, 112px 112px 0 #e8b57a, 119px 112px 0 #1c3a2e, 126px 112px 0 #1c3a2e, 56px 119px 0 #1c3a2e, 63px 119px 0 #1c3a2e, 70px 119px 0 #e8b57a, 77px 119px 0 #e8b57a, 84px 119px 0 #e8b57a, 91px 119px 0 #e8b57a, 98px 119px 0 #e8b57a, 105px 119px 0 #1c3a2e, 112px 119px 0 #1c3a2e, 35px 126px 0 #1c3a2e, 42px 126px 0 #1c3a2e, 49px 126px 0 #1c3a2e, 56px 126px 0 #8a5a34, 63px 126px 0 #8a5a34, 70px 126px 0 #c98c4e, 77px 126px 0 #e8b57a, 84px 126px 0 #e8b57a, 91px 126px 0 #e8b57a, 98px 126px 0 #c98c4e, 105px 126px 0 #8a5a34, 112px 126px 0 #8a5a34, 119px 126px 0 #1c3a2e, 126px 126px 0 #1c3a2e, 133px 126px 0 #1c3a2e, 14px 133px 0 #1c3a2e, 21px 133px 0 #1c3a2e, 28px 133px 0 #1c3a2e, 35px 133px 0 #8a5a34, 42px 133px 0 #8a5a34, 49px 133px 0 #8a5a34, 56px 133px 0 #c98c4e, 63px 133px 0 #c98c4e, 70px 133px 0 #e8b57a, 77px 133px 0 #e8b57a, 84px 133px 0 #e8b57a, 91px 133px 0 #e8b57a, 98px 133px 0 #e8b57a, 105px 133px 0 #c98c4e, 112px 133px 0 #c98c4e, 119px 133px 0 #8a5a34, 126px 133px 0 #8a5a34, 133px 133px 0 #8a5a34, 140px 133px 0 #1c3a2e, 147px 133px 0 #1c3a2e, 154px 133px 0 #1c3a2e, 0px 140px 0 #1c3a2e, 7px 140px 0 #1c3a2e, 14px 140px 0 #8a5a34, 21px 140px 0 #8a5a34, 28px 140px 0 #8a5a34, 35px 140px 0 #c98c4e, 42px 140px 0 #c98c4e, 49px 140px 0 #c98c4e, 56px 140px 0 #e8b57a, 63px 140px 0 #e8b57a, 70px 140px 0 #e8b57a, 77px 140px 0 #e8b57a, 84px 140px 0 #e8b57a, 91px 140px 0 #e8b57a, 98px 140px 0 #e8b57a, 105px 140px 0 #e8b57a, 112px 140px 0 #e8b57a, 119px 140px 0 #c98c4e, 126px 140px 0 #c98c4e, 133px 140px 0 #c98c4e, 140px 140px 0 #8a5a34, 147px 140px 0 #8a5a34, 154px 140px 0 #8a5a34, 161px 140px 0 #1c3a2e, 168px 140px 0 #1c3a2e, 0px 147px 0 #8a5a34, 7px 147px 0 #8a5a34, 14px 147px 0 #c98c4e, 21px 147px 0 #c98c4e, 28px 147px 0 #c98c4e, 35px 147px 0 #e8b57a, 42px 147px 0 #e8b57a, 49px 147px 0 #e8b57a, 56px 147px 0 #e8b57a, 63px 147px 0 #e8b57a, 70px 147px 0 #e8b57a, 77px 147px 0 #e8b57a, 84px 147px 0 #e8b57a, 91px 147px 0 #e8b57a, 98px 147px 0 #e8b57a, 105px 147px 0 #e8b57a, 112px 147px 0 #e8b57a, 119px 147px 0 #e8b57a, 126px 147px 0 #e8b57a, 133px 147px 0 #e8b57a, 140px 147px 0 #c98c4e, 147px 147px 0 #c98c4e, 154px 147px 0 #c98c4e, 161px 147px 0 #8a5a34, 168px 147px 0 #8a5a34, 0px 154px 0 #8a5a34, 7px 154px 0 #c98c4e, 14px 154px 0 #e8b57a, 21px 154px 0 #e8b57a, 28px 154px 0 #e8b57a, 35px 154px 0 #e8b57a, 42px 154px 0 #e8b57a, 49px 154px 0 #e8b57a, 56px 154px 0 #e8b57a, 63px 154px 0 #e8b57a, 70px 154px 0 #e8b57a, 77px 154px 0 #e8b57a, 84px 154px 0 #e8b57a, 91px 154px 0 #e8b57a, 98px 154px 0 #e8b57a, 105px 154px 0 #e8b57a, 112px 154px 0 #e8b57a, 119px 154px 0 #e8b57a, 126px 154px 0 #e8b57a, 133px 154px 0 #e8b57a, 140px 154px 0 #e8b57a, 147px 154px 0 #e8b57a, 154px 154px 0 #e8b57a, 161px 154px 0 #c98c4e, 168px 154px 0 #8a5a34, 0px 161px 0 #8a5a34, 7px 161px 0 #c98c4e, 14px 161px 0 #c98c4e, 21px 161px 0 #c98c4e, 28px 161px 0 #c98c4e, 35px 161px 0 #c98c4e, 42px 161px 0 #c98c4e, 49px 161px 0 #c98c4e, 56px 161px 0 #c98c4e, 63px 161px 0 #c98c4e, 70px 161px 0 #c98c4e, 77px 161px 0 #c98c4e, 84px 161px 0 #c98c4e, 91px 161px 0 #c98c4e, 98px 161px 0 #c98c4e, 105px 161px 0 #c98c4e, 112px 161px 0 #c98c4e, 119px 161px 0 #c98c4e, 126px 161px 0 #c98c4e, 133px 161px 0 #c98c4e, 140px 161px 0 #c98c4e, 147px 161px 0 #c98c4e, 154px 161px 0 #c98c4e, 161px 161px 0 #c98c4e, 168px 161px 0 #8a5a34, 0px 168px 0 #8a5a34, 7px 168px 0 #8a5a34, 14px 168px 0 #8a5a34, 21px 168px 0 #8a5a34, 28px 168px 0 #8a5a34, 35px 168px 0 #8a5a34, 42px 168px 0 #8a5a34, 49px 168px 0 #8a5a34, 56px 168px 0 #8a5a34, 63px 168px 0 #8a5a34, 70px 168px 0 #8a5a34, 77px 168px 0 #8a5a34, 84px 168px 0 #8a5a34, 91px 168px 0 #8a5a34, 98px 168px 0 #8a5a34, 105px 168px 0 #8a5a34, 112px 168px 0 #8a5a34, 119px 168px 0 #8a5a34, 126px 168px 0 #8a5a34, 133px 168px 0 #8a5a34, 140px 168px 0 #8a5a34, 147px 168px 0 #8a5a34, 154px 168px 0 #8a5a34, 161px 168px 0 #8a5a34, 168px 168px 0 #8a5a34; } /* desk-monkey-front: 175px x 175px */ /* ---------- pixel monkey sprite (shared: desks, splash, logo) ---------- */ .pixel-monkey{ display:inline-block; width:48px; height:48px; position:relative; flex-shrink:0; } .pixel-monkey::before{ content:''; position:absolute; top:0; left:0; width:3px; height:3px; box-shadow: 9px 3px 0 #8a5a34, 12px 3px 0 #8a5a34, 15px 3px 0 #8a5a34, 30px 3px 0 #8a5a34, 33px 3px 0 #8a5a34, 36px 3px 0 #8a5a34, 9px 6px 0 #8a5a34, 12px 6px 0 #c98c4e, 15px 6px 0 #c98c4e, 18px 6px 0 #c98c4e, 21px 6px 0 #c98c4e, 24px 6px 0 #c98c4e, 27px 6px 0 #c98c4e, 30px 6px 0 #c98c4e, 33px 6px 0 #c98c4e, 36px 6px 0 #8a5a34, 9px 9px 0 #8a5a34, 12px 9px 0 #c98c4e, 15px 9px 0 #e8b57a, 18px 9px 0 #e8b57a, 21px 9px 0 #e8b57a, 24px 9px 0 #e8b57a, 27px 9px 0 #e8b57a, 30px 9px 0 #e8b57a, 33px 9px 0 #c98c4e, 36px 9px 0 #8a5a34, 12px 12px 0 #c98c4e, 15px 12px 0 #e8b57a, 18px 12px 0 #1c3a2e, 21px 12px 0 #e8b57a, 24px 12px 0 #e8b57a, 27px 12px 0 #1c3a2e, 30px 12px 0 #e8b57a, 33px 12px 0 #c98c4e, 42px 12px 0 #8a5a34, 45px 12px 0 #8a5a34, 12px 15px 0 #c98c4e, 15px 15px 0 #f3d9ae, 18px 15px 0 #f3d9ae, 21px 15px 0 #f3d9ae, 24px 15px 0 #f3d9ae, 27px 15px 0 #f3d9ae, 30px 15px 0 #f3d9ae, 33px 15px 0 #c98c4e, 42px 15px 0 #8a5a34, 45px 15px 0 #8a5a34, 12px 18px 0 #c98c4e, 15px 18px 0 #f3d9ae, 18px 18px 0 #f3d9ae, 21px 18px 0 #f3d9ae, 24px 18px 0 #f3d9ae, 27px 18px 0 #f3d9ae, 30px 18px 0 #f3d9ae, 33px 18px 0 #c98c4e, 39px 18px 0 #8a5a34, 42px 18px 0 #8a5a34, 45px 18px 0 #8a5a34, 12px 21px 0 #c98c4e, 15px 21px 0 #f3d9ae, 18px 21px 0 #f3d9ae, 21px 21px 0 #f3d9ae, 24px 21px 0 #f3d9ae, 27px 21px 0 #f3d9ae, 30px 21px 0 #f3d9ae, 33px 21px 0 #c98c4e, 39px 21px 0 #8a5a34, 42px 21px 0 #8a5a34, 45px 21px 0 #8a5a34, 9px 24px 0 #c98c4e, 12px 24px 0 #c98c4e, 15px 24px 0 #c98c4e, 18px 24px 0 #c98c4e, 21px 24px 0 #c98c4e, 24px 24px 0 #c98c4e, 27px 24px 0 #c98c4e, 30px 24px 0 #c98c4e, 33px 24px 0 #c98c4e, 36px 24px 0 #c98c4e, 6px 27px 0 #8a5a34, 9px 27px 0 #8a5a34, 12px 27px 0 #e8b57a, 15px 27px 0 #e8b57a, 18px 27px 0 #e8b57a, 21px 27px 0 #e8b57a, 24px 27px 0 #e8b57a, 27px 27px 0 #e8b57a, 30px 27px 0 #e8b57a, 33px 27px 0 #e8b57a, 36px 27px 0 #8a5a34, 39px 27px 0 #8a5a34, 6px 30px 0 #8a5a34, 9px 30px 0 #8a5a34, 12px 30px 0 #e8b57a, 15px 30px 0 #e8b57a, 18px 30px 0 #e8b57a, 21px 30px 0 #e8b57a, 24px 30px 0 #e8b57a, 27px 30px 0 #e8b57a, 30px 30px 0 #e8b57a, 33px 30px 0 #e8b57a, 36px 30px 0 #8a5a34, 39px 30px 0 #8a5a34, 6px 33px 0 #8a5a34, 9px 33px 0 #8a5a34, 12px 33px 0 #e8b57a, 15px 33px 0 #e8b57a, 18px 33px 0 #e8b57a, 21px 33px 0 #e8b57a, 24px 33px 0 #e8b57a, 27px 33px 0 #e8b57a, 30px 33px 0 #e8b57a, 33px 33px 0 #e8b57a, 36px 33px 0 #8a5a34, 39px 33px 0 #8a5a34, 6px 36px 0 #8a5a34, 9px 36px 0 #8a5a34, 12px 36px 0 #e8b57a, 15px 36px 0 #e8b57a, 18px 36px 0 #e8b57a, 21px 36px 0 #e8b57a, 24px 36px 0 #e8b57a, 27px 36px 0 #e8b57a, 30px 36px 0 #e8b57a, 33px 36px 0 #e8b57a, 36px 36px 0 #8a5a34, 39px 36px 0 #8a5a34, 9px 39px 0 #8a5a34, 12px 39px 0 #8a5a34, 15px 39px 0 #8a5a34, 18px 39px 0 #c98c4e, 21px 39px 0 #c98c4e, 24px 39px 0 #c98c4e, 27px 39px 0 #c98c4e, 30px 39px 0 #8a5a34, 33px 39px 0 #8a5a34, 36px 39px 0 #8a5a34, 9px 42px 0 #8a5a34, 12px 42px 0 #8a5a34, 15px 42px 0 #8a5a34, 30px 42px 0 #8a5a34, 33px 42px 0 #8a5a34, 36px 42px 0 #8a5a34; } /* pixel-monkey: 48px x 48px */ .hero-monitor-stack{ position:relative; display:flex; flex-direction:column; align-items:center; } .desk-monitor{ width:220px; height:150px; margin:0 auto; padding:10px; box-sizing:border-box; background:var(--ink); border:5px solid var(--ink); border-radius:5px; position:relative; } .desk-screen{ width:100%; height:100%; background:#050805; position:relative; overflow:hidden; animation:screenFlicker 1.6s steps(2) infinite; } .desk-stand{ width:35px; height:25px; background:var(--ink); margin:0 auto; } .desk-keyboard{ width:175px; height:25px; background:var(--paper); border:3px solid var(--ink); border-radius:2px; margin:8px auto 0; } /* ---- matrix-style banana rain inside the desk monitor ---- */ .rain-col{ position:absolute; top:-35px; animation:bananaRain linear infinite; } .rain-col.rc-1{ left:6%; animation-duration:2.1s; animation-delay:-.2s; } .rain-col.rc-2{ left:22%; animation-duration:2.6s; animation-delay:-1.3s; } .rain-col.rc-3{ left:38%; animation-duration:1.9s; animation-delay:-.8s; } .rain-col.rc-4{ left:56%; animation-duration:2.4s; animation-delay:-1.9s; } .rain-col.rc-5{ left:74%; animation-duration:2.0s; animation-delay:-.5s; } .rain-col.rc-6{ left:90%; animation-duration:2.3s; animation-delay:-1.5s; } .rain-banana{ display:inline-block; width:5px; height:5px; position:relative; box-shadow: 5px 0px 0 var(--banana), 0px 5px 0 var(--banana-dark), 5px 5px 0 var(--banana), 5px 10px 0 var(--banana), 10px 10px 0 var(--banana-dark), 10px 15px 0 var(--banana-dark); } @keyframes bananaRain{ 0%{ transform:translateY(-35px); opacity:0; } 12%{ opacity:1; } 85%{ opacity:1; } 100%{ transform:translateY(150px); opacity:0; } } .code-bit{ position:absolute; top:-32px; font-family:var(--pixel); font-size:1rem; letter-spacing:.02em; color:var(--term-green); white-space:nowrap; opacity:0; z-index:2; } .code-bit.bit-1{ left:6px; animation:codeFloat 2.4s ease-out infinite; } .code-bit.bit-2{ left:150px; animation:codeFloat 2.4s ease-out infinite 1.2s; } @keyframes leafSway{ 0%,100%{ transform:rotate(-8deg); } 50%{ transform:rotate(8deg); } } @keyframes typeBob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-5px); } } @keyframes screenFlicker{ 0%,100%{ opacity:1; } 50%{ opacity:.6; } } @keyframes codeFloat{ 0%{ transform:translateY(0); opacity:0; } 15%{ opacity:1; } 100%{ transform:translateY(-36px); opacity:0; } } @media (prefers-reduced-motion: reduce){ .desk-leaf, .desk-screen, .code-bit, .hang-vine{ animation:none; } .desk-monkey-bust{ animation:none; opacity:1; } .desk-monkey-front{ animation:none; opacity:0; } .rain-col{ animation:none; opacity:0; } .firefly{ animation:none; opacity:.8; } .parallax-layer{ transition:none; } } .windows{ position:absolute; inset:0; z-index:5; pointer-events:none; } .taskbar{ position:absolute; left:0; right:0; bottom:0; height:44px; background:var(--ink); display:flex; align-items:center; gap:10px; padding:0 10px; border-top:4px solid var(--banana-dark); z-index:10; } .start-btn{ font-family:var(--pixel); font-size:.72rem; letter-spacing:.02em; background:var(--banana); color:#5c3d00; border:2px solid var(--ink); padding:8px 14px; cursor:pointer; } .start-btn:focus-visible{ outline:2px solid var(--paper); outline-offset:2px; } .start-menu{ position:absolute; bottom:44px; left:10px; background:var(--paper); border:3px solid var(--ink); display:flex; flex-direction:column; box-shadow:6px 6px 0 rgba(0,0,0,.3); z-index:20; } .start-menu[hidden]{ display:none; } .start-menu button{ font-family:var(--pixel); font-size:.68rem; letter-spacing:.02em; background:none; border:none; text-align:left; padding:10px 14px; cursor:pointer; color:var(--ink); } .start-menu button:hover, .start-menu button:focus-visible{ background:var(--banana); outline:none; } .taskbar-pills{ display:flex; gap:8px; overflow-x:auto; } /* ---------- windows ---------- */ .window{ position:absolute; pointer-events:auto; width:min(420px, 88vw); background:var(--paper); border:4px solid var(--ink); box-shadow:8px 8px 0 rgba(0,0,0,.35); display:flex; flex-direction:column; max-height:70vh; } .window.active{ border-color:var(--banana-dark); } .window-titlebar{ background:var(--ink); color:var(--paper); font-family:var(--pixel); font-size:.7rem; letter-spacing:.01em; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 10px; cursor:move; } .window-title{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .window-close{ background:var(--accent); color:#fff; border:2px solid var(--ink); cursor:pointer; font-family:var(--pixel); font-size:.62rem; padding:2px 6px; flex-shrink:0; } .window-close:focus-visible{ outline:2px solid var(--paper); outline-offset:2px; } .window-body{ padding:16px; overflow:auto; font-size:.95rem; line-height:1.5; flex:1; min-height:0; } .taskbar-pill{ display:flex; align-items:stretch; background:var(--leaf-mid); color:#fff; border:2px solid var(--ink); white-space:nowrap; overflow:hidden; } .taskbar-pill.active{ background:var(--banana); color:#5c3d00; } .taskbar-pill-label{ font-family:var(--pixel); font-size:.66rem; letter-spacing:.01em; background:none; color:inherit; border:none; padding:6px 10px; cursor:pointer; } .taskbar-pill-close{ font-family:var(--pixel); font-size:.62rem; background:rgba(0,0,0,.15); color:inherit; border:none; border-left:2px solid var(--ink); padding:6px 8px; cursor:pointer; } .taskbar-pill-label:focus-visible, .taskbar-pill-close:focus-visible{ outline:2px solid var(--paper); outline-offset:-2px; } .readme-app{ font-family:var(--pixel); font-size:.62rem; line-height:1.9; white-space:pre-wrap; margin:0; } /* ---------- chimp vpn app ---------- */ .vpn-app{ text-align:center; } .vpn-status{ display:flex; align-items:center; justify-content:center; gap:8px; margin-bottom:16px; font-family:var(--pixel); font-size:.72rem; letter-spacing:.01em; } .vpn-dot{ width:10px; height:10px; border-radius:50%; background:var(--accent); display:inline-block; } .vpn-dot.connecting{ background:var(--banana); animation:vpnPulse 1s ease-in-out infinite; } .vpn-dot.connected{ background:var(--term-green); } @keyframes vpnPulse{ 0%,100%{ opacity:1; } 50%{ opacity:.25; } } .vpn-label{ display:block; font-family:var(--pixel); font-size:.68rem; letter-spacing:.01em; margin-bottom:10px; } .vpn-select{ appearance:none; -webkit-appearance:none; -moz-appearance:none; font-family:var(--pixel); font-size:.75rem; letter-spacing:.02em; color:var(--ink); padding:10px 34px 10px 12px; border:3px solid var(--ink); border-radius:0; margin-bottom:14px; width:100%; max-width:260px; background-color:var(--paper); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Crect x='0' y='0' width='12' height='2' fill='%231c3a2e'/%3E%3Crect x='2' y='2' width='8' height='2' fill='%231c3a2e'/%3E%3Crect x='4' y='4' width='4' height='2' fill='%231c3a2e'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; box-shadow:3px 3px 0 rgba(0,0,0,.3); cursor:pointer; } .vpn-select:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; } .vpn-log{ background:#050805; color:var(--term-green); font-family:var(--pixel); font-size:.7rem; line-height:1.9; padding:12px; text-align:left; white-space:pre-wrap; border-radius:2px; min-height:90px; } .vpn-connected-msg{ font-family:var(--pixel); font-size:.68rem; letter-spacing:.01em; line-height:1.8; margin-bottom:16px; } .vpn-service-list{ list-style:none; padding:0; margin:0 0 16px; text-align:left; } .vpn-service-list li{ display:flex; align-items:flex-start; gap:8px; padding:8px 10px; border:2px solid var(--ink); border-radius:4px; margin-bottom:8px; background:var(--paper); font-family:var(--pixel); font-size:.58rem; letter-spacing:.01em; line-height:1.7; } .vpn-service-list li > span{ margin-top:1px; } .vpn-service-list li > div{ flex:1; } .vpn-service-list li strong{ display:block; font-size:.6rem; color:var(--leaf-dark); margin-bottom:4px; } /* ---------- pixel VPN service-list icons ---------- */ .vpn-icon-passport{ display:inline-block; width:20px; height:20px; position:relative; flex-shrink:0; } .vpn-icon-passport::before{ content:''; position:absolute; top:0; left:0; width:2px; height:2px; box-shadow: 2px 2px 0 #1c3a2e, 4px 2px 0 #1c3a2e, 6px 2px 0 #1c3a2e, 8px 2px 0 #1c3a2e, 10px 2px 0 #1c3a2e, 12px 2px 0 #1c3a2e, 14px 2px 0 #1c3a2e, 16px 2px 0 #1c3a2e, 2px 4px 0 #1c3a2e, 4px 4px 0 #3d6ea3, 6px 4px 0 #3d6ea3, 8px 4px 0 #3d6ea3, 10px 4px 0 #3d6ea3, 12px 4px 0 #3d6ea3, 14px 4px 0 #3d6ea3, 16px 4px 0 #1c3a2e, 2px 6px 0 #1c3a2e, 4px 6px 0 #3d6ea3, 6px 6px 0 #3d6ea3, 8px 6px 0 #3d6ea3, 10px 6px 0 #3d6ea3, 12px 6px 0 #3d6ea3, 14px 6px 0 #3d6ea3, 16px 6px 0 #1c3a2e, 2px 8px 0 #1c3a2e, 4px 8px 0 #3d6ea3, 6px 8px 0 #3d6ea3, 8px 8px 0 #fffaf0, 10px 8px 0 #fffaf0, 12px 8px 0 #3d6ea3, 14px 8px 0 #3d6ea3, 16px 8px 0 #1c3a2e, 2px 10px 0 #1c3a2e, 4px 10px 0 #3d6ea3, 6px 10px 0 #3d6ea3, 8px 10px 0 #fffaf0, 10px 10px 0 #fffaf0, 12px 10px 0 #3d6ea3, 14px 10px 0 #3d6ea3, 16px 10px 0 #1c3a2e, 2px 12px 0 #1c3a2e, 4px 12px 0 #3d6ea3, 6px 12px 0 #3d6ea3, 8px 12px 0 #3d6ea3, 10px 12px 0 #3d6ea3, 12px 12px 0 #3d6ea3, 14px 12px 0 #3d6ea3, 16px 12px 0 #1c3a2e, 2px 14px 0 #1c3a2e, 4px 14px 0 #3d6ea3, 6px 14px 0 #3d6ea3, 8px 14px 0 #3d6ea3, 10px 14px 0 #3d6ea3, 12px 14px 0 #3d6ea3, 14px 14px 0 #3d6ea3, 16px 14px 0 #1c3a2e, 2px 16px 0 #1c3a2e, 4px 16px 0 #1c3a2e, 6px 16px 0 #1c3a2e, 8px 16px 0 #1c3a2e, 10px 16px 0 #1c3a2e, 12px 16px 0 #1c3a2e, 14px 16px 0 #1c3a2e, 16px 16px 0 #1c3a2e; } /* vpn-icon-passport: 20px x 20px */ .vpn-icon-bank{ display:inline-block; width:20px; height:20px; position:relative; flex-shrink:0; } .vpn-icon-bank::before{ content:''; position:absolute; top:0; left:0; width:2px; height:2px; box-shadow: 0px 2px 0 #1c3a2e, 2px 2px 0 #1c3a2e, 4px 2px 0 #1c3a2e, 6px 2px 0 #1c3a2e, 8px 2px 0 #1c3a2e, 10px 2px 0 #1c3a2e, 12px 2px 0 #1c3a2e, 14px 2px 0 #1c3a2e, 16px 2px 0 #1c3a2e, 18px 2px 0 #1c3a2e, 2px 4px 0 #c98c4e, 4px 4px 0 #c98c4e, 6px 4px 0 #c98c4e, 8px 4px 0 #c98c4e, 10px 4px 0 #c98c4e, 12px 4px 0 #c98c4e, 14px 4px 0 #c98c4e, 16px 4px 0 #c98c4e, 2px 6px 0 #1c3a2e, 4px 6px 0 #e8b57a, 8px 6px 0 #1c3a2e, 10px 6px 0 #e8b57a, 14px 6px 0 #1c3a2e, 16px 6px 0 #e8b57a, 2px 8px 0 #1c3a2e, 4px 8px 0 #e8b57a, 8px 8px 0 #1c3a2e, 10px 8px 0 #e8b57a, 14px 8px 0 #1c3a2e, 16px 8px 0 #e8b57a, 2px 10px 0 #1c3a2e, 4px 10px 0 #e8b57a, 8px 10px 0 #1c3a2e, 10px 10px 0 #e8b57a, 14px 10px 0 #1c3a2e, 16px 10px 0 #e8b57a, 2px 12px 0 #1c3a2e, 4px 12px 0 #e8b57a, 8px 12px 0 #1c3a2e, 10px 12px 0 #e8b57a, 14px 12px 0 #1c3a2e, 16px 12px 0 #e8b57a, 2px 14px 0 #1c3a2e, 4px 14px 0 #e8b57a, 8px 14px 0 #1c3a2e, 10px 14px 0 #e8b57a, 14px 14px 0 #1c3a2e, 16px 14px 0 #e8b57a, 0px 16px 0 #1c3a2e, 2px 16px 0 #1c3a2e, 4px 16px 0 #1c3a2e, 6px 16px 0 #1c3a2e, 8px 16px 0 #1c3a2e, 10px 16px 0 #1c3a2e, 12px 16px 0 #1c3a2e, 14px 16px 0 #1c3a2e, 16px 16px 0 #1c3a2e, 18px 16px 0 #1c3a2e, 0px 18px 0 #1c3a2e, 2px 18px 0 #1c3a2e, 4px 18px 0 #1c3a2e, 6px 18px 0 #1c3a2e, 8px 18px 0 #1c3a2e, 10px 18px 0 #1c3a2e, 12px 18px 0 #1c3a2e, 14px 18px 0 #1c3a2e, 16px 18px 0 #1c3a2e, 18px 18px 0 #1c3a2e; } /* vpn-icon-bank: 20px x 20px */ .vpn-icon-registry{ display:inline-block; width:20px; height:20px; position:relative; flex-shrink:0; } .vpn-icon-registry::before{ content:''; position:absolute; top:0; left:0; width:2px; height:2px; box-shadow: 6px 0px 0 #1c3a2e, 8px 0px 0 #1c3a2e, 10px 0px 0 #1c3a2e, 12px 0px 0 #1c3a2e, 2px 2px 0 #1c3a2e, 4px 2px 0 #1c3a2e, 6px 2px 0 #1c3a2e, 8px 2px 0 #1c3a2e, 10px 2px 0 #1c3a2e, 12px 2px 0 #1c3a2e, 14px 2px 0 #1c3a2e, 16px 2px 0 #1c3a2e, 2px 4px 0 #1c3a2e, 4px 4px 0 #fffaf0, 6px 4px 0 #fffaf0, 8px 4px 0 #fffaf0, 10px 4px 0 #fffaf0, 12px 4px 0 #fffaf0, 14px 4px 0 #fffaf0, 16px 4px 0 #1c3a2e, 2px 6px 0 #1c3a2e, 4px 6px 0 #1c3a2e, 6px 6px 0 #1c3a2e, 8px 6px 0 #1c3a2e, 10px 6px 0 #1c3a2e, 12px 6px 0 #1c3a2e, 14px 6px 0 #1c3a2e, 16px 6px 0 #1c3a2e, 2px 8px 0 #1c3a2e, 4px 8px 0 #fffaf0, 6px 8px 0 #fffaf0, 8px 8px 0 #fffaf0, 10px 8px 0 #fffaf0, 12px 8px 0 #fffaf0, 14px 8px 0 #fffaf0, 16px 8px 0 #1c3a2e, 2px 10px 0 #1c3a2e, 4px 10px 0 #1c3a2e, 6px 10px 0 #1c3a2e, 8px 10px 0 #1c3a2e, 10px 10px 0 #1c3a2e, 12px 10px 0 #1c3a2e, 14px 10px 0 #1c3a2e, 16px 10px 0 #1c3a2e, 2px 12px 0 #1c3a2e, 4px 12px 0 #fffaf0, 6px 12px 0 #fffaf0, 8px 12px 0 #fffaf0, 10px 12px 0 #fffaf0, 12px 12px 0 #fffaf0, 14px 12px 0 #fffaf0, 16px 12px 0 #1c3a2e, 2px 14px 0 #1c3a2e, 4px 14px 0 #1c3a2e, 6px 14px 0 #1c3a2e, 8px 14px 0 #1c3a2e, 10px 14px 0 #1c3a2e, 12px 14px 0 #1c3a2e, 14px 14px 0 #1c3a2e, 16px 14px 0 #1c3a2e, 2px 16px 0 #1c3a2e, 4px 16px 0 #1c3a2e, 6px 16px 0 #1c3a2e, 8px 16px 0 #1c3a2e, 10px 16px 0 #1c3a2e, 12px 16px 0 #1c3a2e, 14px 16px 0 #1c3a2e, 16px 16px 0 #1c3a2e; } /* vpn-icon-registry: 20px x 20px */ .vpn-icon-chart{ display:inline-block; width:20px; height:20px; position:relative; flex-shrink:0; } .vpn-icon-chart::before{ content:''; position:absolute; top:0; left:0; width:2px; height:2px; box-shadow: 2px 4px 0 #e26a6a, 4px 4px 0 #e26a6a, 2px 6px 0 #e26a6a, 4px 6px 0 #e26a6a, 2px 8px 0 #e26a6a, 4px 8px 0 #e26a6a, 8px 8px 0 #c98c4e, 10px 8px 0 #c98c4e, 2px 10px 0 #e26a6a, 4px 10px 0 #e26a6a, 8px 10px 0 #c98c4e, 10px 10px 0 #c98c4e, 2px 12px 0 #e26a6a, 4px 12px 0 #e26a6a, 8px 12px 0 #c98c4e, 10px 12px 0 #c98c4e, 14px 12px 0 #4c6b52, 16px 12px 0 #4c6b52, 2px 14px 0 #e26a6a, 4px 14px 0 #e26a6a, 8px 14px 0 #c98c4e, 10px 14px 0 #c98c4e, 14px 14px 0 #4c6b52, 16px 14px 0 #4c6b52, 0px 16px 0 #1c3a2e, 2px 16px 0 #1c3a2e, 4px 16px 0 #1c3a2e, 6px 16px 0 #1c3a2e, 8px 16px 0 #1c3a2e, 10px 16px 0 #1c3a2e, 12px 16px 0 #1c3a2e, 14px 16px 0 #1c3a2e, 16px 16px 0 #1c3a2e, 18px 16px 0 #1c3a2e; } /* vpn-icon-chart: 20px x 20px */ .vpn-icon-deed{ display:inline-block; width:20px; height:20px; position:relative; flex-shrink:0; } .vpn-icon-deed::before{ content:''; position:absolute; top:0; left:0; width:2px; height:2px; box-shadow: 2px 2px 0 #8a5a34, 4px 2px 0 #8a5a34, 6px 2px 0 #8a5a34, 8px 2px 0 #8a5a34, 10px 2px 0 #8a5a34, 12px 2px 0 #8a5a34, 14px 2px 0 #8a5a34, 16px 2px 0 #8a5a34, 2px 4px 0 #8a5a34, 4px 4px 0 #c98c4e, 6px 4px 0 #c98c4e, 8px 4px 0 #c98c4e, 10px 4px 0 #c98c4e, 12px 4px 0 #c98c4e, 14px 4px 0 #c98c4e, 16px 4px 0 #8a5a34, 2px 6px 0 #8a5a34, 4px 6px 0 #c98c4e, 6px 6px 0 #8a5a34, 8px 6px 0 #8a5a34, 10px 6px 0 #8a5a34, 12px 6px 0 #8a5a34, 14px 6px 0 #c98c4e, 16px 6px 0 #8a5a34, 2px 8px 0 #8a5a34, 4px 8px 0 #c98c4e, 6px 8px 0 #8a5a34, 8px 8px 0 #c98c4e, 10px 8px 0 #c98c4e, 12px 8px 0 #8a5a34, 14px 8px 0 #c98c4e, 16px 8px 0 #8a5a34, 2px 10px 0 #8a5a34, 4px 10px 0 #c98c4e, 6px 10px 0 #8a5a34, 8px 10px 0 #c98c4e, 10px 10px 0 #c98c4e, 12px 10px 0 #8a5a34, 14px 10px 0 #c98c4e, 16px 10px 0 #8a5a34, 2px 12px 0 #8a5a34, 4px 12px 0 #c98c4e, 6px 12px 0 #8a5a34, 8px 12px 0 #8a5a34, 10px 12px 0 #8a5a34, 12px 12px 0 #8a5a34, 14px 12px 0 #c98c4e, 16px 12px 0 #8a5a34, 2px 14px 0 #8a5a34, 4px 14px 0 #c98c4e, 6px 14px 0 #c98c4e, 8px 14px 0 #c98c4e, 10px 14px 0 #c98c4e, 12px 14px 0 #c98c4e, 14px 14px 0 #c98c4e, 16px 14px 0 #8a5a34, 2px 16px 0 #8a5a34, 4px 16px 0 #8a5a34, 6px 16px 0 #8a5a34, 8px 16px 0 #8a5a34, 10px 16px 0 #8a5a34, 12px 16px 0 #8a5a34, 14px 16px 0 #8a5a34, 16px 16px 0 #8a5a34; } /* vpn-icon-deed: 20px x 20px */ @media (prefers-reduced-motion: reduce){ .vpn-dot.connecting{ animation:none; } } /* ---------- pixel button ---------- */ .pixel-btn{ font-family:var(--pixel); font-size:.72rem; letter-spacing:.02em; background:var(--banana); color:#5c3d00; border:2px solid var(--ink); box-shadow:3px 3px 0 rgba(0,0,0,.3); padding:10px 14px; cursor:pointer; } .pixel-btn:active{ transform:translate(2px,2px); box-shadow:1px 1px 0 rgba(0,0,0,.3); } .pixel-btn:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; } /* ---------- counter app ---------- */ .counter-app{ text-align:center; } .counter-face{ font-size:3rem; } .counter-value{ font-family:var(--pixel); font-size:1.1rem; color:var(--leaf-dark); margin:10px 0; } .counter-msg{ min-height:1.4em; font-weight:700; color:var(--accent2); margin-bottom:14px; } /* ---------- banana slots app ---------- */ .slots-app{ text-align:center; } .slots-marquee{ font-family:var(--pixel); font-size:.72rem; letter-spacing:.02em; color:var(--banana-dark); margin-bottom:16px; } .slots-reels{ display:flex; justify-content:center; gap:10px; margin-bottom:16px; } .slots-reel{ width:64px; height:64px; display:flex; align-items:center; justify-content:center; background:var(--paper); border:3px solid var(--ink); box-shadow:3px 3px 0 rgba(0,0,0,.3); } .slots-reel.spinning{ animation:reelShake .1s linear infinite; } .slots-msg{ min-height:1.4em; font-weight:700; color:var(--accent2); margin-bottom:14px; } .slots-msg.win{ color:var(--leaf-dark); } .slots-stats{ font-family:var(--pixel); font-size:.62rem; color:#5a6a5f; margin-top:14px; } @keyframes reelShake{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-3px); } } /* ---------- confetti ---------- */ .pixel-confetti{ position:fixed; top:-16px; width:8px; height:8px; z-index:50; pointer-events:none; animation-name:confettiFall; animation-timing-function:linear; animation-fill-mode:forwards; } @keyframes confettiFall{ to{ transform:translateY(110vh) rotate(360deg); } } @media (prefers-reduced-motion: reduce){ .pixel-confetti{ animation:none; display:none; } .slots-reel.spinning{ animation:none; } } /* ---------- facts app ---------- */ .facts-app{ text-align:center; } .fact-icon{ font-size:2.4rem; } .fact-title{ font-family:var(--pixel); font-size:.75rem; color:var(--leaf-dark); margin:8px 0; } .fact-body{ font-size:.95rem; line-height:1.6; } .fact-nav{ display:flex; align-items:center; justify-content:space-between; margin-top:14px; } .fact-counter{ font-family:var(--pixel); font-size:.68rem; color:#5a6a5f; } /* ---------- terminal app ---------- */ .terminal-app{ background:#050805; color:var(--term-green); font-family:var(--pixel); font-size:.7rem; line-height:1.9; padding:10px; margin:-16px; min-height:240px; display:flex; flex-direction:column; } .terminal-scrollback{ flex:1; overflow-y:auto; white-space:pre-wrap; max-height:200px; } .terminal-inputline{ display:flex; gap:6px; margin-top:8px; } .terminal-prompt{ white-space:nowrap; } .terminal-input{ flex:1; background:transparent; border:none; color:var(--term-green); font-family:var(--pixel); font-size:.7rem; outline:none; } /* ---------- boot ---------- */ .boot{ position:fixed; inset:0; background:#050805; color:var(--term-green); font-family:var(--pixel); font-size:.8rem; line-height:1.9; padding:6vh 6vw; cursor:pointer; z-index:100; } .boot[hidden]{ display:none; } .boot-log{ white-space:pre-wrap; margin:0; } .boot-log::after{ content:'█'; animation:blink 1s step-end infinite; } .boot-skip{ position:absolute; bottom:4vh; left:6vw; opacity:.6; font-size:.7rem; } @keyframes blink{ 50%{ opacity:0; } } @media (prefers-reduced-motion: reduce){ .boot-log::after{ animation:none; } } /* ---------- splash ---------- */ .splash{ position:fixed; inset:0; z-index:110; cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; background:radial-gradient(circle at 50% 40%, var(--banana) 0%, var(--banana-dark) 55%, var(--leaf-dark) 100%); text-align:center; padding:6vh 8vw; } .splash[hidden]{ display:none; } .splash-chimp{ display:flex; align-items:center; justify-content:center; margin-bottom:16px; filter:drop-shadow(0 8px 6px rgba(0,0,0,.25)); animation:splashPop .6s cubic-bezier(.34,1.56,.64,1) both, splashWave 2.4s ease-in-out .8s infinite; } .splash-title{ font-family:var(--pixel); font-size:clamp(1.3rem, 5vw, 2.2rem); color:var(--ink); text-shadow:3px 3px 0 var(--paper); margin:0; opacity:0; animation:splashFadeUp .5s ease-out .3s forwards; } .splash-sub{ font-weight:700; color:#5c3d00; max-width:420px; margin:0; opacity:0; animation:splashFadeUp .5s ease-out .55s forwards; } .splash-enter{ opacity:0; animation:splashFadeUp .5s ease-out .8s forwards; } .splash-hint{ opacity:0; font-size:.85rem; color:#5c3d00; animation:splashFadeUp .5s ease-out 1.05s forwards; } @keyframes splashPop{ 0%{ transform:scale(0) rotate(-25deg); } 100%{ transform:scale(1) rotate(0deg); } } @keyframes splashWave{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-6px); } } @keyframes splashFadeUp{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:translateY(0); } } @media (prefers-reduced-motion: reduce){ .splash-chimp, .splash-title, .splash-sub, .splash-enter, .splash-hint{ animation:none; opacity:1; transform:none; } } /* ---------- responsive ---------- */ @media (max-width:900px){ .jungle-tree, .hang-vine{ display:none; } } @media (max-width:640px){ .jungle-tree, .jungle-bush, .hang-vine, .firefly{ display:none; } .monkey-desk{ transform:translateX(-50%) scale(.58); transform-origin:bottom center; } .icons{ flex-direction:row; flex-wrap:wrap; top:48px; left:8px; right:8px; } .icon{ width:72px; } .window{ position:fixed !important; left:0 !important; top:44px !important; right:0; bottom:44px; width:100% !important; max-height:none; height:calc(100% - 88px); } .window-titlebar{ cursor:default; } }