@font-face{font-family:fsex300;font-display:block;src:url(media/FSEX300.woff2)}:root{color-scheme:only dark;--accent:#dd81a6}input[type=checkbox]{appearance:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:13px;height:1em;width:1em;margin:0;background-color:oklch(from var(--accent) calc(l - .65) c h);&::before { content:"?"; font-size:25px; font-family:"fsex300"; } &:checked::before { content:"X"; }}body:has(input[type=checkbox]:checked){&::before { animation:none; } header span { animation:none; } article,nav { transform:none; animation:none; }}::selection{background-color:oklch(from var(--accent) calc(l + .1) c h);color:oklch(from var(--accent) calc(l - .8) c h)}body{font-family:fsex300;font-size:22px;color:oklch(from var(--accent) calc(l + .3) c h);margin:0;display:flex;gap:35px;flex-direction:column;align-items:center;overflow-x:hidden;padding:10px;padding-top:100px;padding-bottom:200px;background-color:oklch(from var(--accent) calc(l + .1) c h);&::before { width:10000vw; height:10000vh; position:fixed; top:-10px; z-index:-20; background-color:black; background-image:url("media/cloudy.png"); background-repeat:repeat; background-size:500px; mix-blend-mode:multiply; content:""; @media (prefers-reduced-motion:no-preference) { animation:animate_background 500s linear infinite; } } &.blog { article { max-width:min(1000px,95%); } nav section > * { align-items:center; padding:5px; } section > * { align-items:start; text-align:unset; padding:10px; gap:1em; } }}a:not(:has(img)){background-color:oklch(from var(--accent) calc(l - .65) c h);color:inherit;text-decoration:none;padding:0 5px;white-space:pre;&::after { content:" >"; }}code{font-family:fsex300;background-color:oklch(from var(--accent) calc(l - .65) c h);font-size:22px;display:block;padding:10px;word-break:keep-all;white-space:pre;overflow-x:scroll;max-width:100%;scrollbar-width:thin;&:not(:has(span)) { display:inline-block; vertical-align:top; padding:3px; padding-top:0px; padding-bottom:0px; }}pre{margin:unset;background-color:oklch(from var(--accent) calc(l - .65) c h)!important}p{margin:0}.highlight{width:100%}header{@media(prefers-reduced-motion:no-preference){&[reverse]>span{animation:animate_scroller 15s linear infinite reverse}& span{animation:animate_scroller 15s linear infinite;padding-right:10px}}}article,nav{&:focus-within,&:hover { filter:grayscale(0%); scale:1; } display:flex;flex-direction:column;overflow:hidden;padding:10px;@media only screen and (min-width:1335px) and (prefers-reduced-motion:no-preference){transform: translateX(-10%) rotate(1deg);}max-width:min(750px,95%);gap:7px;@media(prefers-reduced-motion:no-preference){animation: table_rotate 3s linear infinite alternate,table_hover 2s ease-in-out infinite alternate; animation-composition: add; &:nth-child(even){@media only screen and (min-width:1335px){transform: translateX(10%) rotate(-1deg);}animation:table_rotate 3s linear infinite alternate-reverse,table_hover 2s ease-in-out infinite alternate-reverse}scale: 0.99; filter: grayscale(20%) opacity(90%); transition: filter 0.2s,scale 0.2s;}background-image:linear-gradient( 90deg,oklch(from var(--accent) l c h/80%) 50%,transparent 50% ),linear-gradient( 90deg,oklch(from var(--accent) l c h/80%) 50%,transparent 50% ),linear-gradient( 0deg,oklch(from var(--accent) l c h/80%) 50%,transparent 50% ),linear-gradient( 0deg,oklch(from var(--accent) l c h/80%) 50%,transparent 50% );background-repeat:repeat-x,repeat-x,repeat-y,repeat-y;background-size:15px 2px,15px 2px,2px 15px,2px 15px;background-position:0 0,100% 100%,0 100%,100% 0}header{background-color:oklch(from var(--accent) l c h/30%);font-size:20px;padding:3px;display:inline-flex;white-space:nowrap;user-select:none;overflow:hidden}section{& figure { & img { width: 95%; } user-select: none; font-size: unset; width: 15%; } & > * { &:has(p) { width: 100%; } box-sizing: border-box; background-color: oklch(from var(--accent) l c h / 30%); border-width: 2px; border-style: solid; border-color: oklch(from var(--accent) l c h / 80%); overflow: hidden; text-align: center; display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 5px; margin: 0px; gap: 10px; & > * { max-width: 100%; } } display: flex;gap:7px;@media only screen and (max-width:750px){flex-direction: column; align-items: center; & figure{width:20%}}}#pronounce{background:linear-gradient( 90deg,#5bcefa 0%,#f5a9b8 25%,#fff 50%,#f5a9b8 75%,#5bcefa 100% );background-clip:text;color:transparent}figure:has(img[src="/media/hood.avif"]),figure:has(img[src="/media/vennie.avif"]){width:45%}@keyframes animate_background{from{transform:translate(0,0)}to{transform:translate(-1e4px,-1e4px)}}@keyframes table_hover{from{transform:translateY(-2px)}to{transform:translateY(2px)}}@keyframes table_rotate{from{transform:rotate(-.5deg)}to{transform:rotate(.5deg)}}@keyframes animate_scroller{from{transform:translateX(0%)}to{transform:translateX(-100%)}}