j0site / posts / love-your-website.html

<p>
    I think — at least for me — that blogging is a form of journaling. I feel
    like if I was journaling physically<a ref="physicalnotetaking"></a> I would
    love to take care of a physical <em>tome</em> containing my thoughts.
    Decorate it, take care of it, et cetera. Following this logic, I take great
    joy in taking care of my website. Polishing the CSS, adding nice features,
    making a nice favicon<a ref="favicon"></a>, and other stuff (sorry I have
    been working on it a lot recently.) So, uh, I think I want to just gush
    about all the changes I have made recently to my site, and maybe circle back
    to some deeper point about self-love.
</p>

<figure>
    <img
        loading="lazy"
        width="1302"
        height="1310"
        src="https://vps.j0.lol/website-assets/lotsofcommits.png"
    />
    <figcaption>Lots of commits.</figcaption>
</figure>

<h2>Favicons are weird</h2>

<p>I have many questions about favicons.</p>
<ul>
    <li>
        Why are they called favicons?<a ref="whyfavicon"></a> Favorite icons?
        Shouldn't they be called like bookmark<a ref="bookmarksaside"></a> icons
        or something? Did they make this up in like Netscape Navigator or
        Internet Explorer or something?<a ref="ie"></a>
    </li>
    <li>
        Why are they so small? It's really hard to represent anything in a
        16&times;16 square. At least we can now use 32&times;32, and people who
        know their way around a vector design program can use an SVG.
    </li>
    <li>
        How have we not come up with a better way of linking an icon to your
        website than stuffing a bunch of
        <code>&lt;link&gt;</code> tags in your <code>&lt;head&gt;</code
        ><a ref="googwebmanifest"></a>??
    </li>
</ul>

<p>
    Um. Sorry about all the footnotes. When I started working on my current
    iteration of my site, which I arbitrarily named V4, I was getting into
    drawing at the same time. I wasn't sure what to fit in that thing, so I just
    put the drawing I had in there. It uh. It looked bad. Here's a recreation:
    <img
        loading="lazy"
        class="raw"
        src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAhGVYSWZNTQAqAAAACAAFARIAAwAAAAEAAQAAARoABQAAAAEAAABKARsABQAAAAEAAABSASgAAwAAAAEAAgAAh2kABAAAAAEAAABaAAAAAAAAAEgAAAABAAAASAAAAAEAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAEKADAAQAAAABAAAAEAAAAADHbxzxAAAACXBIWXMAAAsTAAALEwEAmpwYAAABWWlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNi4wLjAiPgogICA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczp0aWZmPSJodHRwOi8vbnMuYWRvYmUuY29tL3RpZmYvMS4wLyI+CiAgICAgICAgIDx0aWZmOk9yaWVudGF0aW9uPjE8L3RpZmY6T3JpZW50YXRpb24+CiAgICAgIDwvcmRmOkRlc2NyaXB0aW9uPgogICA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgoZXuEHAAACs0lEQVQ4EaWTXW8bRRSGn5nd9cf6Mx/YaWMcYzdpSgMSVXvRilvEBT8B/h//AVVcVOICVUXqh8BpWkibOFBqU3d3vbbX3h3OOAqEa87srvbMzPvOOzPvUd3ObcP/CPcyVkmileaCMTMZSppW6j99lzH/ENiJqQCCdIK2MGEra5+lWRKm8xUR8i05+ct4VgQX4Eouz43yDot0yXKpeBYe0fDW2at2MU4CRvHi/Yks4KxIjOjSFmyZI95Ry1q8eeVz/JuL79S4vfExV0rrRBPFr4ce7/+osuZsMidmYdKVKrWzc8s4OqXjfkqrHbLfe0s8c3jwk8/irCWLGm7eiuh9dEqaNHn4JMePv7/kw0qFs9kQ18qupW163YQv7ymm6YwNGdxvO4zeBeAEbNYXK5Wb1ZjWVsTrbxtcKa5T89bQe9U9zKTEzd0Yz/Fp1DPORiF/TU4Zxs9EwRlaj4RkxuvhgOnM46u7dU4HKQkT3EF8Qj7XIY426Q/6hLEjk7WQyTYeF/j8wDCdG34+VmxUS1QKOd78WWScO2IUj9BH0YDEH3D/hyVatrLdiCjmFPcfKb75wtDdhuHYodUMKOVrPDqc8Ph5wP4HTaKFHKR14l5ll+fhIT3uoKpDvjt5CgLKN1zmsjrjGfdudClkG3x//Ire9oTrpQN+Cfu4qVxH2StTcauc8JDPcnf5eneL0fwtwTzC1ZrmtSYFXeYo6NO+OqbrH1D0isyzBepq+xPTK3VoFrdEUkSSJoSLEN/zBVSU0zcEi4BlllLP1ym6BTGSph8cyo1NUb3OHTPN5rhSAwVdYJbNxL7pytYp2cpxnnJXdrN1UlB5xmlISchd5eBaO/oCzKQlWYKnPHLyWncqWxASRmrE5laNULPmVsiMRZrzWrBgO+wI43m3JPJnn3/jPLHybdFdxN8uVB7pghou7AAAAABJRU5ErkJggg=="
        width="16"
        height="16"
        style="vertical-align: top"
    />
    . Ew, right? So a few months ago I made this new drawing, the dialog box
    deer that you have definitely seen on this site already. And I realised that
    I can adapt it into a favicon:
    <img
        loading="lazy"
        class="raw"
        src="/static/favicon.ico"
        width="32"
        height="32"
        style="width: 16px; height: 16px; vertical-align: top"
    />. Much clearer, right? Just bicubic scaling the image down makes it quite
    readable, which I was honestly shocked at.
</p>

<h2 id="fonts">Changing fonts</h2>

<figure>
    <img
        loading="lazy"
        width="1448"
        height="288"
        src="https://vps.j0.lol/website-assets/lovingyourwebsite/oldfont.png"
        alt="Screenshot of my blog, with an old rounded monospace heading font."
    />
    <figcaption>My old heading font</figcaption>
</figure>

<figure>
    <img
        loading="lazy"
        width="1452"
        height="192"
        src="https://vps.j0.lol/website-assets/lovingyourwebsite/newfont.png"
        alt="Screenshot of my blog, with an new rounded serif heading font."
    />
    <figcaption>My new heading font</figcaption>
</figure>

<p>
    I'm a programmer first, not a writer. So when I was making my website, it
    just made sense to add a touch of monospace to it. I imported my terminal
    font <em style="font-family: var(--font-mono)">(Maple Mono)</em> into my
    project and set it as a heading font, italicized with cursive symbols.
    Though I was getting kind of tired of it. I don't think monospace fonts look
    that good when at such a large size. So I found this new font on Google
    Fonts (where else?) called
    <em style="font-family: var(--font-serif)">Hepta Slab</em> and fell in love
    with it immediately. It's still very round, which captures the sort of look
    the rest of my fonts have (the sans-serif font is <em>DM Sans</em>) while
    feeling way more in place than a monospaced font.
</p>

<p>
    I think people all have complex relationship with fonts. Though maybe that's
    just my autism speaking. People hate
    <em style="font-family: &quot;Comic Sans MS&quot;">Comic Sans</em>. People
    love to write Word documents with
    <em style="font-family: Arial, Helvetica, sans-serif">Arial</em>. Web
    developers love <em style="font-family: Inter, sans-serif">Inter</em>.
    Everyone sort of has their own font, in their
    <span class="shantell">handwriting</span><a ref="shantell"></a>. You might
    feel comforted by a <span class="monospace">monospace</span> font.
    <span class="cursive">Cursive</span>
    might remind you of rigid school structures.
</p>

<?php speech_start(SpeechCharacter::Deer, SpeechEmotion::Happy); ?>
<p>In other words, fonts are highly personal.</p>
<?php speech_end(); ?> <?php speech_start(SpeechCharacter::Deer,
SpeechEmotion::Shocked); ?>
<p>
    Where did I get the idea to use
    <span style="font-family: var(--font-serif)">serif</span> for headings?
    Honestly I'm not sure. I've seen it in a few places, like
    <a href="https://highlysuspect.agency/">Quat's blog</a> and
    <a href="https://zed.dev/docs/">the Zed website</a>.
    <a
        href="https://www.smashingmagazine.com/2010/11/best-practices-of-combining-typefaces/"
        >Smashing Magazine</a
    >
    has writing on this from 2010(!) so it's clearly not a new practice.
</p>
<?php speech_end(); ?>

<h2>Physicality</h2>

<div class="hstack">
    <figure style="background: #1c1829">
        <img
            loading="lazy"
            width="1064"
            height="1298"
            src="https://vps.j0.lol/website-assets/lovingyourwebsite/nophysicality.png"
            alt="Screenshot of my website's home page. The 'page' is very bare."
        />
        <figcaption>The home page is floating on a background.</figcaption>
    </figure>

    <figure style="background: #1c1829; justify-content: space-between">
        <img
            loading="lazy"
            width="1064"
            height="1110"
            src="https://vps.j0.lol/website-assets/lovingyourwebsite/yesphysicality.png"
            alt="Screenshot of my website's home page. The 'page' feels a lot more grounded, with borders and a shadow."
        />
        <figcaption>The page has a nice border and a shadow now.</figcaption>
    </figure>
</div>

<p>
    As someone with autism, I have a divine fixation with tactile things. Shapes
    feel nice. During this redesign, I've been trying to add physicality
    wherever possible. This isn't <em>just</em> because of Apple's
    <em>Liquid Glass</em> design language, but I think flat design is boring
    generally. I think many people do??
</p>

<p>
    I've been adding physicality wherever possible. The figures now have a
    shadow and border. Well, I haven't really been able to add it anywhere else,
    due to some rigid CSS limitations. I'll figure it out eventually. I hope
    this looks good!
</p>

<h2>Cute little icons</h2>

<div class="hstack">
    <figure style="background: #08070f">
        <img
            loading="lazy"
            width="770"
            height="244"
            src="https://vps.j0.lol/website-assets/lovingyourwebsite/oldindex.png"
            alt="Screenshot of old post index. Arrows are used for date."
        />
        <figcaption>Old arrow icons.</figcaption>
    </figure>

    <figure style="background: #08070f">
        <img
            loading="lazy"
            width="744"
            height="226"
            src="https://vps.j0.lol/website-assets/lovingyourwebsite/newindex.png"
            alt="Screenshot of old post index. Clock icons are used for date."
        />
        <figcaption>New, nice clock icons.</figcaption>
    </figure>
</div>

<div class="hstack">
    <figure style="background: #08070f; justify-content: space-between">
        <img
            loading="lazy"
            width="1386"
            height="966"
            src="https://vps.j0.lol/website-assets/lovingyourwebsite/oldbsky.png"
            alt="Screenshot of old comment section"
        />
        <figcaption>
            Old comment section. Uses text for reply and like labels.
        </figcaption>
    </figure>

    <figure style="background: #08070f">
        <img
            loading="lazy"
            width="1412"
            height="988"
            src="https://vps.j0.lol/website-assets/lovingyourwebsite/newbsky.png"
            alt="Screenshot of new comment section"
        />
        <figcaption>
            New comment section. Lots of icons, and a <em>LOT</em> of tweaking
            to get things feeling better.*
        </figcaption>
    </figure>
</div>
<span
    ><small
        >＊ Note that the comment lines are very thin, and you might have to
        zoom in to see them.</small
    ></span
>
<p>
    I found a new icon library: <a href="https://css.gg">CSS.gg</a>. They serve
    very simple SVG icons you can just throw in your source. These have been
    sprinkled around where necessary.
</p>

<h2>Code Blocks and Highlighting</h2>

<pre><code class="language-rust">
fn main() {
    println!("Here's a code block!");

    // Explode
    unsafe { unreachable_unchecked!() }
}
</code></pre>

<p>
    I'm currently using <a href="https://prismjs.com/">Prism.js</a> for code
    highlighting. It's widely supported, has good theming, and a heck of a lot
    of language support. Um. The only issue is that it doesn't really make sense
    in <samp>$CURRENT_YEAR</samp>. Since the advent of
    <a href="https://tree-sitter.github.io/tree-sitter/">tree-sitter</a>, code
    highlighting is done via syntax trees instead of regex parsing. It's faster,
    and makes more sense. However: tree-sitter is written in a compiled
    language. This makes it a pain to run in the browser
    <a ref="highlightssr"></a>... There's web bindings via wasm
    <a href="https://www.npmjs.com/package/web-tree-sitter">on npm</a>, but it
    would need a bit of work to use to highlight. Plus, I'm sort of worried
    about the size of WASM blobs. Each language requires its own blob, so I
    could be pulling in several wasm blobs on every site. Prism.js is (at time
    of writing, on this site)
    <math>
        <mrow>
            <mn>74.4</mn>
            <mi>kB</mi>
        </mrow>
        <mtext><sub>JS</sub></mtext>
        <mo>+</mo>
        <mrow>
            <mn>1.4</mn>
            <mi>kB</mi>
        </mrow>
        <mtext><sub>CSS</sub></mtext>
    </math>
    big. As a test, I pulled in tree-sitter JS, WASM and the Javascript WASM
    blob. That alone (without any highlighting code or anything!) is
    <math>
        <mrow>
            <mn>152</mn>
            <mi>kB</mi>
        </mrow>
        <mtext><sub>JS</sub></mtext>
        <mo>+</mo>
        <mrow>
            <mn>206</mn>
            <mi>kB</mi>
        </mrow>
        <mtext><sub>WASM</sub></mtext>
        <mo>+</mo>
        <mrow>
            <mn>359</mn>
            <mi>kB</mi>
        </mrow>
        <mtext><sub>WASM js grammar</sub></mtext> </math
    >. Yipes!
</p>

<p>
    So this is why I'm using Prism. There are other regex-based highlighters,
    but this one works fine. One thing I added recently is the little language
    tag, which makes it more obvious which language is in the code block. I
    added it for my blog post where I talk about Swift in comparison to Rust.
</p>

<h2>About footnotes</h2>

<p>
    Umm. I like tangents. You might notice the large footnotes section on this
    article. This was pretty fun to implement! If you've used markdown, and not
    really thought about writing in HTML, you might assume that footnotes are a
    HTML primitive. Nah! My current implementation looks like this:
</p>

<pre><code class="language-html"><!--
<p>
    This is a paragraph <a ref="umm_actually"></a>.
</p>

<footer>
    <h2 id="notes_heading">Footnotes</h2>
    <ol>
        <li id="note_umm_actually">
            Well, there's not really much text there. Its a sentence.
            Should it really even be put in a p tag?
            It's kind of semantically wrong.
        </li>
    </ol>
</footer>
--></code></pre>

<p>
    A <a href="/static/js/footnotes.js">script</a> comes along and fills out
    everything to be <em>semantically correct</em> HTML. It's based on this
    <a href="https://www.niquette.ca/articles/accessible-footnotes/"
        >great article about making footnotes accessible</a
    >, but I tweaked it a bit to remove markup boilerplate. Note that the
    <code>&lt;a&gt;</code> tag uses <code>ref</code>, not <code>href</code>. Not
    sure if this attribute is used in other places, but I thought it would be
    fine to use here. (It gets stripped by the script and replaced with a
    <code>href</code>.)
</p>

<p>
    One fun issue I found is that the "return" ↩ symbol looks different
    depending on browser. Mobile browsers (at least mine) will make it an emoji,
    while desktop browsers will use a normal font. You can choose this behaviour
    by suffixing a unicode character:
</p>

<style>
    table {
        margin: 0 auto;
        border-collapse: collapse;
        border: 1px solid var(--border);
    }

    th,
    td {
        padding: 0.2rem;
        border: 1px solid var(--border);
    }
</style>

<figure>
    <table>
        <tr>
            <th>Default</th>
            <td>↩</td>
            <td>⛄</td>
        </tr>
        <tr>
            <th>Variation Selector 15 <code>&amp;#xfe0e;</code></th>
            <td>↩&#xfe0e;</td>
            <td>⛄&#xfe0e;</td>
        </tr>

        <tr>
            <th>Variation Selector 16 <code>&amp;#xfe0f;</code></th>

            <td>↩&#xfe0f;</td>
            <td>⛄&#xfe0f;</td>
        </tr>
    </table>
    <figcaption>
        Weirdly, on Chrome macOS it always picks the snowman emoji.
    </figcaption>
</figure>

<h2>Aside on writing in HTML</h2>

<p>
    I think HTML might be the most expressive way to write. You can express
    almost anything (see the <a href="#fonts">fonts section</a> :p) and it
    doesn't have the same issues that other markup formats have with wordiness
    (if you think HTML is bad, see
    <math>
        <mrow>
            <mtext>L</mtext>
            <mrow style="margin-left: -0.35em"></mrow>
            <mpadded voffset="0.2em" style="padding: 0.2em 0 0 0">
                <mstyle scriptlevel="0" displaystyle="false">
                    <mstyle scriptlevel="1" displaystyle="false">
                        <mtext>A</mtext>
                    </mstyle>
                </mstyle>
            </mpadded>
            <mrow style="margin-left: -0.15em"></mrow>
            <mtext>T</mtext>
            <mrow style="margin-left: -0.1667em"></mrow>
            <mpadded voffset="-0.2155em" style="padding: 0 0 0.2155em 0">
                <mstyle scriptlevel="0" displaystyle="false">
                    <mtext>E</mtext>
                </mstyle>
            </mpadded>
            <mrow style="margin-left: -0.125em"></mrow>
            <mtext>X</mtext>
        </mrow> </math
    >.) I see most bloggers using markdown and I wonder: why? It makes
    everything harder. If you want to have a "component", you basically have to
    <a href="https://mdxjs.com/">extend markdown</a>, then have a framework or
    preprocessor to convert into HTML. You can put HTML in markdown (sometimes),
    but the syntax is very odd. Either way, it's gross.
</p>

<p>
    I think people are scared of HTML. It's not that hard to write, and you can
    use <a href="https://emmet.io/">Emmet</a> to write a lot of HTML from very
    understandable abbreviations if you have worked with CSS.
    <code>footer>h2#notes_heading+ol>li*3</code> produces an entire footnotes
    section from earlier, and it lets you use tab to jump between text fields to
    fill.
</p>

<p>
    You also lose a lot of
    <a href="https://developer.mozilla.org/en-US/docs/Glossary/Semantics"
        >semantic information</a
    >
    with markdown. You could represent a
    <code>figure>img+figcaption</code>
    like this:
</p>
<pre><code class="language-md">
    ![alt text](/static/foo.png)
    This is an image.
</code></pre>

<p>
    But what happens when you want to style a figure? If you want to center the
    caption, frame the image, add a <code>::before</code> pseudo-element with a
    counter, etc. What will a screen reader do when it comes across your figure?
    Not what you want it to do!
</p>

<p>
    So it's either restrictive, ugly, or heavy. Um, maybe that was convincing. I
    think using HTML thoughtfully like this makes you better at using HTML
    thoughtfully elsewhere. When writing in HTML, go to
    <a
        href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements"
        >MDN</a
    >
    and think: "Is there an element for this?" By doing this, you'll learn about
    new tags like <code>&lt;samp&gt;</code> for quoting output from a program,
    <code>&lt;abbr&gt;</code> for acronyms or abbreviations, all of MathML,
    <code>&lt;ruby&gt;</code> for displaying
    <ruby
        >pronounciation<rp>(</rp>
        <rt>pro-noun-si-a-tion</rt>
        <rp>)</rp> </ruby
    >. It's fun :&rpar;
</p>

<h2>Trying to conclude this post</h2>

<p>
    I've had a lot of fun writing this post, as well as working on my website.
    HTML+CSS is one of the most expressive technologies we have in software
    development. Working on your personal website is, I think, a form of self
    love. It's a construct built for the express purpose of self-expression.
    Express yourself!
</p>

<?php speech_start(SpeechCharacter::Deer, SpeechEmotion::Happy); ?>
<p>
    I see you've made it to the end. Thanks for sticking with me here, this is
    probably the longest blog post I have made yet. If you want to see more of
    my posts when they come out, <a href="/feed">subscribe to my RSS feed</a>!
    Due to how RSS is designed, I have literally no idea how many people are
    subscribed. But that's kind of fun!
</p>
<?php speech_end(); ?>

<!-- end  -->
<footer>
    <h2 id="notes_heading">Footnotes</h2>
    <ol>
        <li id="note_physicalnotetaking">
            I've tried journaling physically before. I just really struggle with
            it. I think my hands aren't up to the task? They are very weak. I've
            always struggled with it. I'm left handed and I don't think I was
            ever raised to write properly? Maybe it's some deeper problem
            though. Oh well.
        </li>
        <li id="note_favicon">
            Did you know that Safari is really <em>really</em> annoying about
            favicon caching? Details are
            <a
                href="https://www.leereamsnyder.com/favicons-in-2021#clearing-the-icon-cache-in-macos-safari-is-deeply-unpleasant"
                >here</a
            >, but it really sucks. If you're trying to work on your favicon,
            see
            <a
                href="https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs"
                >this great article</a
            >
            about it, highlighted to me by one of my most favorite websites:
            <a href="https://css-tricks.com/how-to-favicon-in-2021/"
                >CSS-Tricks</a
            >.
        </li>
        <li id="note_whyfavicon">
            Because they helped differentiate URLS in your... favorites. They
            are called favorites instead of bookmarks because Microsoft said so.
        </li>

        <li id="note_bookmarksaside">
            Aside: I really don't use bookmarks. Maybe this really dates me as a
            member of Generation Z, but it's almost always a lot easier to just
            let the powerful browser autofill <samp>b</samp> into
            <samp>bsky.app</samp> for me. And the bookmarks toolbar is such a
            waste of space! If I don't have the URL saved in the browser for
            whatever reason, searching into Kagi will almost always give me what
            I want.
        </li>
        <li id="note_ie">
            They were introduced in IE5. Makes sense why they use the very
            Windows <samp>.ico</samp> format then.
        </li>

        <li id="note_googwebmanifest">
            Google actually tried. When they introduced Progressive Web Apps,
            they made a new Web Manifest that you can stuff (Android) icons into
            instead of the head. Here's what that looks like:
            <pre><code class="language-json">
            {
                "icons": [
                    { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
                    { "src": "/icon-mask.png", "type": "image/png", "sizes": "512x512", "purpose": "maskable" },
                    { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
                ]
            }</code></pre>

            It would be nice if we could standardise on this for favicons or
            whatever. But everything has been set in stone, I guess.
        </li>

        <li id="note_shantell" class="shantell">
            Shantell Sans has a really lovely story. You can
            <a href="https://shantellsans.com/process">read it here</a>.
        </li>

        <li id="note_highlightssr">
            You may be asking: Why don't you just render it serverside? A few
            reasons:
            <ul style="margin-block-end: 0.5rem">
                <li>
                    My website is in PHP, not a compiled language like Rust.
                </li>
                <li>
                    I did this <a href="/blog/php-site">before</a>, and made an
                    impossible-to-maintain PHP extension that sucks.
                </li>
                <li>
                    Even if I did this, I'm moving the highlighting computation
                    time onto the "load bearing" HTML step instead of loading
                    after the rest of the page is loaded.
                </li>
                <li>
                    Like, I'm not caching my pages (because PHP) so every page
                    gets rendered on every request. If I was making a static
                    site generator this would make a lot more sense. But I'm not
                    really interested in re-architecting my entire website for
                    this purpose (yet...)
                </li>
            </ul>
            So, I'm choosing to stick with client-side highlighting.
        </li>
    </ol>
</footer>

<style>
    @import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Playwrite+GB+S+Guides:ital@0;1&family=Shantell+Sans:ital,wght@0,300..800;1,300..800&display=swap");

    .monospace {
        font-family: "Courier New", Courier, monospace;
    }

    .cursive {
        font-family: "Playwrite GB S Guides", cursive;
        font-weight: 400;
        font-style: normal;
    }

    .shantell {
        font-family: "Shantell Sans", cursive;
        font-optical-sizing: auto;
        font-weight: 400;
        font-style: normal;
        font-variation-settings:
            "BNCE" 0,
            "INFM" 0,
            "SPAC" 0;
    }

    .hstack {
        display: flex;
        flex-direction: row;
        width: 100%;
        gap: 0.5rem;
        justify-content: center;

        > * {
            margin-left: 0;
            margin-right: 0;
        }
    }
</style>