Techniques
Question-block button
A raised gold block with a hard black outline and an offset pixel drop-shadow that "presses in" on hover — no blur, ever.
.qblock-btn {
font-family: 'Press Start 2P', monospace;
font-size: 0.75rem;
text-transform: uppercase;
color: #0B0B0B;
background: #FBD000;
border: 3px solid #000000;
border-radius: 0;
padding: 16px 24px;
box-shadow: 4px 4px 0 #000000;
transition: transform 120ms steps(3, end), box-shadow 120ms steps(3, end);
}
.qblock-btn:hover {
transform: translate(-2px, -2px);
box-shadow: 6px 6px 0 #000000;
}
.qblock-btn:active {
transform: translate(4px, 4px);
box-shadow: 0 0 0 #000000; /* block pressed flush */
}
Pixel-grid sky field
The signature NES backdrop — flat sky blue with a faint tile grid, kept crisp by `image-rendering: pixelated`.
.sky-field {
background-color: #5C94FC;
background-image:
linear-gradient(to right, rgba(0,0,0,0.06) 1px, transparent 1px),
linear-gradient(to bottom, rgba(0,0,0,0.06) 1px, transparent 1px);
background-size: 16px 16px; /* one tile */
image-rendering: pixelated;
}
Brick panel
A content card built as masonry — white brick fill, black mortar outline, hard offset shadow.
.brick-panel {
background: #FFFFFF;
border: 3px solid #000000;
border-radius: 0;
box-shadow: 6px 6px 0 #000000;
padding: 24px;
}