@font-face{font-family:fsex300;font-display:block;src:url(media/FSEX300.woff2)}:root{color-scheme:only dark;--accent:#d1aeb3}main{width:100%}body{font-family:fsex300;font-size:22px;color:oklch(from var(--accent) calc(l + .5) c h);margin:0;&, main{display:flex;margin:0;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:1e4vw;height:1e4vh;position:fixed;top:-10px;z-index:-20;background-color:#000;background-image:url(media/cloudy.png);background-repeat:repeat;background-size:500px;mix-blend-mode:multiply;content:"";transition:transform 1s linear;@media(prefers-reduced-motion:no-preference){animation: animate_background 500s linear infinite;}}&.blog{article{max-width:min(1e3px,95%)}nav section > *{align-items:center;padding:5px}section > *{align-items:start;text-align:unset;padding:10px;gap:1em}}}article,nav{&:focus-within, &:hover{filter:grayscale(0%);scale:1}display:flex;flex-direction:column;overflow:hidden;padding:10px;max-width:min(750px,95%);gap:7px;transition:filter .2s,scale .2s;@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){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%);}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;@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}}}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:0;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%}}}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:0;padding-bottom:0}}pre{margin:unset;background-color:oklch(from var(--accent) calc(l - .65) c h)!important}p{margin:0}.highlight{width:100%}#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%}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);color:inherit;&::before{content:"?";font-size:25px;font-family:fsex300}&:checked::before{content:"X"}}body:has(input[type=checkbox]:checked){&::before{animation-play-state:paused}header span{animation-play-state:paused}article, nav{animation:none;scale:unset;filter:unset}}::selection{background-color:oklch(from var(--accent) calc(l + .1) c h);color:oklch(from var(--accent) calc(l - .8) c h)}@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%)}}