Four shades of green, a tiny LCD screen and a chunky bezel around every block.
Using a template swaps your colors, font and custom CSS. Your name, bio, avatar and links stay.
See the CSS
/* Game Boy */
html, body { overflow-x: clip; }
body.zbr-page {
font-size: 11px; line-height: 1.6;
background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .03) 0 2px, transparent 2px 4px), #c4c0b0;
}
.zbr-space { gap: 36px; padding: 14px; }
.zbr-col { gap: 36px; }
.zbr-card {
backdrop-filter: none; border-radius: 6px 6px 22px 6px;
background-image: repeating-linear-gradient(0deg, rgba(15, 56, 15, .07) 0 1px, transparent 1px 3px);
box-shadow: 0 0 0 10px #4b4b5c, 0 0 0 13px #2a2a36, 8px 14px 0 13px rgba(0, 0, 0, .18);
}
.zbr-box-profile::before, .cols-1 .zbr-card::before {
content: '● BATTERY'; display: block; margin-bottom: 14px; font-size: .5rem; letter-spacing: .1em; color: #8b1a1a; text-align: left;
}
.zbr-box-title { font-size: .75rem; font-weight: 400; text-transform: uppercase; line-height: 1.4; }
.zbr-box-title::before { content: '▶ '; }
.zbr-avatar {
border: 0; border-radius: 0; image-rendering: pixelated;
filter: grayscale(1) contrast(1.2) sepia(1) hue-rotate(35deg) saturate(2.4) brightness(.85);
}
.zbr-name { font-size: 1rem; font-weight: 400; line-height: 1.4; overflow-wrap: anywhere; text-transform: uppercase; }
.zbr-bio, .zbr-text, .zbr-comment-body { font-size: .6rem; line-height: 1.9; opacity: 1; }
.zbr-link { background: none; border: 0; border-radius: 0; padding: 8px 4px; font-weight: 400; font-size: .6rem; text-transform: uppercase; text-align: left; }
.zbr-link::before { content: ' '; white-space: pre; }
.zbr-link:hover { background: #0f380f; color: #9bbc0f; transform: none; }
.zbr-link:hover::before { content: '▶ '; }
.zbr-table th, .zbr-table td, .zbr-comment, .zbr-links .zbr-link, .zbr-posts .zbr-link { border-color: rgba(15, 56, 15, .4); }
.zbr-table { font-size: .55rem; }
.zbr-table th { opacity: 1; font-weight: 400; text-transform: uppercase; }
.zbr-friend b, .zbr-comment-meta, .zbr-friends-count, .zbr-wall-count { font-size: .5rem; font-weight: 400; }
.zbr-comment-meta small { opacity: .8; }
.zbr-friend img, .zbr-friend .zbr-noavatar, .zbr-comment-author img, .zbr-comment-author .zbr-noavatar { border-radius: 0; image-rendering: pixelated; filter: grayscale(1) sepia(1) hue-rotate(35deg) saturate(2.4) brightness(.85); }
.zbr-noavatar { background: #306230; color: #9bbc0f; border-radius: 0 !important; filter: none !important; }
.zbr-online { color: #0f380f; font-size: .6rem; }
.zbr-online::before { border-radius: 0; }
.zbr-wall-form input { font-size: .6rem; }
.zbr-btn { background: #0f380f; color: #9bbc0f; border-radius: 0; font-weight: 400; font-size: .55rem; }
.zbr-views { color: #3b3b4f; opacity: 1; font-size: .55rem; text-align: center; }
