Something went wrong. Try again.
💻 My corner on the internet kacaii.dev
lustre evergarden wisp-place gleam atproto
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228@import "tailwindcss";
@theme { --default-font-family: "B612", sans-serif; --default-mono-font-family: "B612", sans-serif;
--color-canvas: #1e2528; --color-green: #c5dfaa; --color-yellow: #f5d098; --color-subtext0: #96b4aa; --color-overlay0: #58686d; --color-surface0: #262f33; --color-surface1: #374145; --color-surface2: #4a585c; --color-white: #f8f9e8; --color-mantle: #191e21;
@keyframes blink { to { opacity: 0; } }
--animate-blink: blink 1s ease-in infinite;}
@theme inline { --color-primary: var(--color-green); --color-secondary: var(--color-subtext0); --color-overlay: var(--color-overlay0);
--color-muted: var(--color-surface2); --color-faint: var(--color-surface1);}
@layer base { html, body { max-width: 100vw; overflow-x: hidden;
background-color: var(--color-mantle); color: var(--color-white); }
body { position: relative; }
ul { list-style-type: square; list-style-position: inside; }
a { color: var(--color-secondary); padding: 0.125rem; text-decoration: underline; text-underline-offset: 4px;
&[aria-current="page"] { font-weight: bold;
&::after { font-weight: normal; } }
&:not(:has(img)) { &:hover, &:focus-visible { background-color: var(--color-secondary); color: var(--color-canvas); text-shadow: 0 0 3px rgba(0, 0, 0, 0.25); } } }
h1 { font-size: 1.5rem; margin-bottom: 2rem;
&::before { content: "# "; } }
h2 { font-size: 1.25rem; margin-bottom: 1.5rem;
&::before { content: "## "; } }
h3 { margin-bottom: 0.5rem;
&::before { content: "### "; } }
h1, h2, h3 { &::before { text-shadow: none; font-weight: normal; color: var(--color-muted); }
&:hover::before { color: var(--color-secondary); }
color: var(--color-primary); font-weight: bold; }
::selection { color: var(--color-canvas); background: var(--color-secondary); }
p, ul { margin-bottom: 1rem; }
[data-tooltip] { position: relative;
&::after { content: attr(data-tooltip); display: none; font-size: 1rem; font-weight: normal;
position: fixed; position-area: top; position-try-fallbacks: flip-block;
padding-inline: 0.25rem; margin-bottom: 0.25rem; white-space: nowrap;
background-color: var(--color-mantle); border: 1px solid var(--color-overlay); color: var(--color-white); }
&[data-tooltip-position="bottom"]::after { position-area: bottom; margin-bottom: 0; margin-top: 0.25rem; }
&:hover::after, &:focus-visible::after { display: block; } }}
@layer utilities { .shell { &::before { content: "$"; color: var(--color-primary); font-weight: bold; padding-right: 1ch; }
&::after { content: "█"; padding-left: 1ch; animation: var(--animate-blink); } }
.crt, [data-tooltip]::after { --drop-shadow-text: 0 0 3px var(--color-subtext0); --drop-shadow-svg: 0 0 2px var(--color-subtext0);
text-shadow: var(--drop-shadow-text);
svg { filter: drop-shadow(var(--drop-shadow-svg)); }
.text-overlay, .text-muted, .text-faint, .text-secondary { text-shadow: none; }
&::before { content: " "; display: block; position: fixed; top: 0; left: 0; bottom: 0; right: 0;
background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.05) 50%), linear-gradient( 90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06) );
background-size: 100% 2px, 3px 100%;
z-index: 99; pointer-events: none; } }}