## Custom CSS
```html
<style>
:root {
background: #A08CC0;
}
body:is(#r,*)::before {
top: unset;
left: unset;
right: 0;
bottom: 0;
background-size: auto, auto 90%;
background-position: 0% 0%, right calc((100vw - 120vh) / 3) bottom;
}
#image01 .frame:is(#r,*) {
transform: translateX(-5px);
height: 9rem !important;
}
:is(#buttons02, #buttons03) li a:not(:hover) {
transition-duration: 0.3s;
transition-timing-function: cubic-bezier(0.5, 2.5, 0.69, 0.42);
}
:is(#buttons02, #buttons03) li a:hover {
cubic-bezier(0.2, 0.3, 0.69, 1);
}
.list.style1 strong {
letter-spacing: 0.03em;
font-weight: 600;
font-variant: small-caps;
font-size: 0.9em;
transition: letter-spacing 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.list.style1 a:not(:hover) strong {
text-decoration: underline;
}
.list.style1 a:hover strong {
letter-spacing: 0.1em;
transition: letter-spacing 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.list.style1 code {
user-select: all;
-webkit-user-select: all;
}
[hidden] {
display: none;
}
@media (pointer: coarse) {
.list.style1 ul li:has(code) {
margin-top: 1em;
margin-bottom: 1em;
}
.list.style1 code {
padding: 1em 1.5em;
}
}
</style>
```
## status.lol
```html
<script>(async()=>{let t;for("loading"===document.readyState&&await new Promise(t=>window.addEventListener("DOMContentLoaded",t,{once:!0}));!(t=document.getElementById("statuslog"));)await new Promise(t=>setTimeout(t,100));let e=document.createElement("a");for(e.setAttribute("href","https://rue.status.lol/latest"),e.setAttribute("title","Rue’s Statuslog"),e.textContent=t.textContent,t.replaceChildren(e),t=e;;){let e=t.getBoundingClientRect();if(e.top>window.innerHeight||e.bottom<0||e.left>window.innerWidth||e.right<0){await new Promise(t=>requestAnimationFrame(t));continue}try{let e=await fetch("https://api.omg.lol/address/rue/statuses");if(!e.ok)throw Error(`HTTP ${e.status} ${e.statusText}`);let s=await e.json(),{id:o,emoji:i,content:n,relative_time:a}=s.response.statuses[0],r=`${i} ${n} — ${a}`;t.setAttribute("data-rue-typing",r),t.setAttribute("title",r),t.setAttribute("href",`https://rue.status.lol/${o}`)}catch(t){console.error(t)}await new Promise(t=>setTimeout(t,18e4))}})();</script>
```
## Rue Typing
```html
<script>(async()=>{for(;;){for(let t of(await new Promise(t=>requestAnimationFrame(t)),document.querySelectorAll("[data-rue-typing]"))){let e=t.getBoundingClientRect();if(e.top>window.innerHeight||e.bottom<0||e.left>window.innerWidth||e.right<0)continue;let n=t.textContent??"",i=t.getAttribute("data-rue-typing")??"";if(n===i)continue;let o=[…n],l=[…i];if(1===o.length&&l.length>0&&o[0]!==l[0]){t.textContent=l[0];continue}o.length>l.length||o.some((t,e)=>t!==l[e])?o.pop():o.push(l[o.length]),t.textContent=o.join("")}await new Promise(t=>setTimeout(t))}})();</script>
```