Something went wrong. Try again.
Yet another attempt at making a personal website. (The 25 is for 2025, not the 25th attempt.)
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136:root { --color-primary: oklch(0.33 0.07 160); --color-text: oklch(from var(--color-primary) 1 c h);}
body { background-color: var(--color-primary); color: var(--color-text);
max-width: 42em; padding: 0 1em; margin: auto;}
nav { display: flex; gap: 0.5em;
font-family: monospace;}
:root { /* colors 😈 */ --gradient-pride: repeating-linear-gradient( to right, red, orange, yellow, green, blue, purple ); --gradient-enby: repeating-linear-gradient( to right, yellow, white, purple, black );}
h1 { font-family: monospace; margin-bottom: 0;}
/* only animate w/out reduced motion */@media (prefers-reduced-motion: no-preference) { /* See <https://stackoverflow.com/questions/54702124/rainbow-text-animation-using-only-css> */ h1:hover { background: var(--gradient-enby); background-clip: text; color: transparent;
animation: slide 1s linear infinite; background-size: calc(12em * 4); }}
@keyframes slide { from { background-position: calc(12em * 4); } to { background-position: 0; }}
a { color: oklch(from var(--color-primary) 0.9 calc(c * 3) h); text-decoration: none;}
a:hover,a:focus,a:focus-visible,a:active { text-decoration: underline;}
a.selected { color: var(--color-text);}
.btn88x31 { image-rendering: pixelated; transform: rotate(0deg); transition: transform 1.2s ease;}
a:has(.btn88x31) { text-decoration: none;}
/* only animate w/out reduced motion */@media (prefers-reduced-motion: no-preference) { .btn88x31:hover { transform: rotate(360deg); }
.hover-flip:hover { transform: scale(-1, 1) rotate(0deg); }
.hover-flip-v { /* So the transition works properly */ transform: scale(1, 1); }
.hover-flip-v:hover { transform: scale(1, -1) rotate(0deg); }}
@media (prefers-reduced-motion: reduce) { /* don't show gifs w/ reduced motion */ #btn-im-a-shark { content: url("/buttons/im-a-shark.png"); } #btn-helix { content: url("/buttons/helix.png"); } #btn-subway { content: url("/buttons/subway.png"); }}
#all-hell-btn { transition-property: filter;}
#all-hell-btn:hover { filter: contrast(500%); transform: rotate(0deg);}