@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap');
:root{--ceu:#58a9ee;--grama:#3fa34d;--terra:#9a6234;--tinta:#2b1a10;--creme:#fff4d6;--ouro:#f8d030;--caramelo:#e0943a}
*{box-sizing:border-box}
body{margin:0;background:var(--ceu);color:var(--tinta);font-family:'VT323',monospace;font-size:22px;line-height:1.35;image-rendering:pixelated}
header{text-align:center;padding:32px 16px 24px;background:linear-gradient(#3e8fe0,#92d0f8)}
header img{width:112px;height:112px;border:4px solid var(--tinta);border-radius:20px;box-shadow:6px 6px 0 var(--tinta)}
h1{font-family:'Press Start 2P',monospace;font-size:20px;line-height:1.6;color:var(--ouro);text-shadow:3px 3px 0 var(--tinta);margin:20px 0 6px}
h2{font-family:'Press Start 2P',monospace;font-size:14px;line-height:1.6;margin:28px 0 10px}
.sub{color:#fff;text-shadow:2px 2px 0 var(--tinta);font-size:26px;margin:0}
nav{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:18px}
nav a,.botao{font-family:'Press Start 2P',monospace;font-size:11px;text-decoration:none;color:var(--tinta);background:var(--ouro);border:3px solid var(--tinta);padding:10px 12px;box-shadow:4px 4px 0 var(--tinta)}
nav a:hover,.botao:hover{background:#fff}
.grama{height:18px;background:repeating-linear-gradient(90deg,#6fd858 0 8px,#3fa34d 8px 16px);border-top:4px solid #2a7a3a}
main{background:var(--creme);max-width:820px;margin:0 auto;padding:8px 20px 40px;border-left:4px solid var(--tinta);border-right:4px solid var(--tinta)}
.caixa{background:#fff;border:3px solid var(--tinta);box-shadow:5px 5px 0 var(--tinta);padding:14px 16px;margin:16px 0}
ul{padding-left:22px}
img.tela{width:100%;border:3px solid var(--tinta);box-shadow:5px 5px 0 var(--tinta)}
footer{background:var(--terra);color:var(--creme);text-align:center;padding:22px 16px;border-top:4px solid var(--tinta);font-size:20px}
footer a{color:var(--ouro)}