Aquarium

Sunlight rays, rising bubbles and little fish swimming behind your blocks.

0 uses · 0 likes

Using a template swaps your colors, font and custom CSS. Your name, bio, avatar and links stay.

See the CSS

/* Aquarium */
html, body { overflow-x: clip; }
body.zbr-page { background-attachment: fixed; }
/* light rays from the surface */
html::after {
  content: ''; position: fixed; left: -10%; right: -10%; top: 0; height: 80vh; z-index: -3; pointer-events: none;
  background: repeating-linear-gradient(100deg, rgba(255, 255, 255, .09) 0 38px, transparent 38px 120px);
  -webkit-mask-image: linear-gradient(#000, transparent); mask-image: linear-gradient(#000, transparent);
  transform-origin: top; animation: sway 10s ease-in-out infinite alternate;
}
/* bubbles */
body.zbr-page::before {
  content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(circle, rgba(255, 255, 255, .06) 0 5px, rgba(255, 255, 255, .55) 6px 7px, transparent 8px) 20px 0 / 170px 260px,
    radial-gradient(circle, rgba(255, 255, 255, .06) 0 8px, rgba(255, 255, 255, .5) 9px 10px, transparent 11px) 90px 0 / 230px 330px,
    radial-gradient(circle, rgba(255, 255, 255, .06) 0 3px, rgba(255, 255, 255, .5) 4px 5px, transparent 6px) 50px 0 / 110px 190px;
  animation: rise 14s linear infinite;
}
/* two fish, one each way */
html::before {
  content: '🐠'; position: fixed; top: 62vh; left: 0; z-index: -1; font-size: 2.2rem; pointer-events: none;
  animation: swim 38s linear infinite;
}
body.zbr-page::after {
  content: '🐟'; position: fixed; top: 82vh; left: 0; z-index: -1; font-size: 1.8rem; pointer-events: none;
  animation: swim-back 52s linear infinite;
}
.zbr-card {
  border: 1px solid rgba(255, 255, 255, .28); border-radius: 28px;
  backdrop-filter: blur(10px); box-shadow: 0 12px 40px rgba(0, 20, 60, .35);
}
.zbr-box-title { font-size: 1.15rem; font-weight: 800; color: var(--accent); }
.zbr-box-title::before { content: '🫧 '; }
.zbr-avatar { border: 4px solid rgba(255, 255, 255, .85); border-radius: 50%; box-shadow: 0 0 30px rgba(120, 220, 255, .5); }
.zbr-name { font-size: 1.9rem; font-weight: 800; }
.zbr-link { background: none; border: 0; border-radius: 12px; padding: 9px 10px; }
.zbr-link:hover { background: rgba(255, 255, 255, .14); color: var(--accent); transform: none; }
.zbr-table th, .zbr-table td, .zbr-comment, .zbr-links .zbr-link, .zbr-posts .zbr-link { border-color: rgba(255, 255, 255, .16); }
.zbr-table th { color: #a8e6ff; opacity: 1; }
.zbr-friend img, .zbr-friend .zbr-noavatar, .zbr-comment-author img, .zbr-comment-author .zbr-noavatar { border-radius: 50%; border: 2px solid rgba(255, 255, 255, .7); }
.zbr-noavatar { background: #0e7490; }
.zbr-online { color: #86efac; }
.zbr-btn { background: var(--accent); color: #05243f; font-weight: 800; }
@keyframes rise { to { background-position: 20px -260px, 90px -330px, 50px -190px; } }
@keyframes sway { to { transform: skewX(-8deg); opacity: .6; } }
@keyframes swim { from { transform: translateX(-10vw); } to { transform: translateX(110vw); } }
@keyframes swim-back { from { transform: translateX(110vw) scaleX(-1); } to { transform: translateX(-10vw) scaleX(-1); } }