diff --git a/_includes/layouts/base/header.njk b/_includes/layouts/base/header.njk
index 82be443..d348223 100644
--- a/_includes/layouts/base/header.njk
+++ b/_includes/layouts/base/header.njk
@@ -1,19 +1,19 @@
 {% set css %}
-        {% include "styles/accessibility.css" %}
-        {% include "styles/animations.css" %}
-        {% include "styles/base.css" %}
-        {% include "styles/colors.css" %}
-        {% include "styles/footer.css" %}
-        {% include "styles/icons.css" %}
-        {% include "styles/navbar.css" %}
+        {% include "styles/base/accessibility.css" %}
+        {% include "styles/base/animations.css" %}
+        {% include "styles/base/base.css" %}
+        {% include "styles/base/colors.css" %}
+        {% include "styles/base/footer.css" %}
+        {% include "styles/base/icons.css" %}
+        {% include "styles/base/navbar.css" %}
+        {% include "styles/base/prism-a11y-dark.css" %}
+        {% include "styles/base/settings.css" %}
+        {% include "styles/base/windows.css" %}
         {% include "styles/pages/admins.css" %}
         {% include "styles/pages/home.css" %}
         {% include "styles/pages/notebook.css" %}
         {% include "styles/pages/services.css" %}
         {% include "styles/pages/sneexy.css" %}
-        {% include "styles/prism-a11y-dark.css" %}
-        {% include "styles/settings.css" %}
-        {% include "styles/windows.css" %}
 {% endset %}
 {% set js %}
         {% include "scripts/alt-popup.js" %}
diff --git a/_includes/layouts/base/settings.njk b/_includes/layouts/base/settings.njk
index 117d01e..1d8606f 100644
--- a/_includes/layouts/base/settings.njk
+++ b/_includes/layouts/base/settings.njk
@@ -2,7 +2,6 @@
     <settings-model>
         <h2 style="margin-bottom: 0;">Settings</h2>
         <p class="caption" style="color: var(--red); margin-top: .4rem;">Settings are saved with JavaScript enabled.</p>
-        <hr class="solid">
         <div class="container">
             <settings-section theme>
                 <h3>Theme</h3>
diff --git a/_includes/layouts/pages/sneexy/nsfw/intro.njk b/_includes/layouts/pages/sneexy/nsfw/intro.njk
index a91e0e9..0d0087f 100644
--- a/_includes/layouts/pages/sneexy/nsfw/intro.njk
+++ b/_includes/layouts/pages/sneexy/nsfw/intro.njk
@@ -1,5 +1,5 @@
 <!-- content warned introduction -->
-<article window id="warning">
+<article window id="warning" sneexy-page>
     <div class="header">
         <titlebar-icon aria-hidden="true">
             <icon-tabler alert-triangle></icon-tabler>
@@ -13,15 +13,15 @@
             </close-button>
         </window-controls>
     </div>
-    <section>
-        <div class="info-box warn">
-            <p><span class="icon tabler--alert-triangle"></span> <b>Welcome to my <span class="_info" title="Not-safe-for-Work">NSFW</span> page of my random various kinks and fetishes I like,</b> mainly just for the curious. It should be obvious what type of content will be here, but just to make sure: things about <b>Fat/related, inflation/related, vore and other general/common NSFW topics</b> will be on this page.</p>
-            <p>A fair warning, I've also turned off my own limiter here. Full-blown sounds and actions and descriptions of things, I'm a fat fuck who needs to be fed pure food/energy and data. <i aria-hidden="true" style="color:var(--accent);">Breep, sloosh~</i></p>
-            <p>Toggle the checkbox below if you consent to viewing this page's content <small>or are <i>not</i> a minor</small>. Otherwise, you can just back out.</p>
-            <fieldset>
-                <input type="checkbox" id="view-nsfw-page" name="view-nsfw-page" />
-                <label for="view-nsfw-page">Open the way, and show me your weirdness!</label>
-            </fieldset>
-        </div>
-    </section>
+    <window-contents>
+        <section notice-card warning>
+            <h3><icon-tabler alert-triangle></icon-tabler> Welcome to "The Slosh Zone"</h3>
+            <p>This is a dedicated <span title="Not-safe-for-Work">NSFW</span> page going over my random various kinks and fetishes I like,</b> mainly just for the curious. It should be obvious what type of content will be here, but just to make sure: things about <b>Fat/related, inflation/related, vore and other general/common NSFW topics</b> will be on this page.</p>
+            <p>A fair warning, I've also turned off my own limiter here. Full-blown sounds and actions and descriptions of things, I'm a fat fuck who needs to be fed pure energy and data. <i aria-hidden="true" style="color:var(--accent);">Breep, slosh~</i></p>
+            <p>Toggle the checkbox below if you consent to viewing this page's content <small>or are <i>not</i> a minor</small>. Otherwise, just back out.</p>
+            <checkbox-button-group style="margin-top: 1rem;">
+                <label for="view-nsfw-page"><input type="checkbox" id="view-nsfw-page" name="view-nsfw-page"> Open the way, and show me your weirdness!</label>
+            </checkbox-button-group>
+        </section>
+    </window-contents>
 </article>
\ No newline at end of file
diff --git a/_includes/layouts/pages/sneexy/nsfw/nsfw.njk b/_includes/layouts/pages/sneexy/nsfw/nsfw.njk
index 128b2f3..e647b4b 100644
--- a/_includes/layouts/pages/sneexy/nsfw/nsfw.njk
+++ b/_includes/layouts/pages/sneexy/nsfw/nsfw.njk
@@ -1,5 +1,5 @@
 <!-- nsfw -->
-<article window id="nsfw">
+<article window id="nsfw" style="display: none;">
     <div class="header">
         <titlebar-icon aria-hidden="true">
             <icon-tabler user></icon-tabler>
@@ -13,7 +13,7 @@
             </close-button>
         </window-controls>
     </div>
-    <section>
+    <window-contents>
         <h2><a href="#nsfw">"the slosh zone"</a></h2>
         <p>In the case that it wasn't obvious, I like <i>big</i> things, as a whole, although I'm not very open about the other things I'm into <small>because why would I?</small> But specifically, I'm into:</p>
         <ul>
@@ -37,5 +37,5 @@
         <p>...and a variety of other things. I'm mostly flexible with my kinks/fetishes, and I fuck around with a good amount of things. <small>And yes, the general "NSFW" stuff like sex or whatever is cool by me.</small></p>
         <p>In general, I do my best to keep my open/public spaces and interactions clean, and avoid talking or going deep into these types of subjects. If I ever do on those spaces, I do so with a content-warning whenever possible. <small>So basically, only Fedi.</small></p>
         <p>I <i>do</i> have NSFW focused spaces/accounts for myself. Feel free to tease or be lewd or roleplay with me if you'd like on those accounts, although only if we know each other a decent amount. <small>In that case though, doing so in our direct messages is also fine. Poke at my belly, rub me... fill me full of zip bombs, <span style="color:var(--accent);">breeeeep~</span></small> Otherwise I'll just ignore or block you, especially if you keep trying to make things horny when <span style="text-transform:none;">I Do Not Know You.</span></p>
-    </section>
+    </window-contents>
 </article>
\ No newline at end of file
diff --git a/_includes/layouts/pages/sneexy/socials.njk b/_includes/layouts/pages/sneexy/socials.njk
index d259b37..e8c96fa 100644
--- a/_includes/layouts/pages/sneexy/socials.njk
+++ b/_includes/layouts/pages/sneexy/socials.njk
@@ -1,5 +1,5 @@
 <!-- socials -->
-<article window id="links">
+<article window id="links" sneexy-page>
     <div class="header">
         <titlebar-icon aria-hidden="true">
             <icon-tabler link></icon-tabler>
@@ -15,19 +15,23 @@
     </div>
     <window-contents>
         <h2><a href="#links">Links</a></h2>
-        <p>My links to all of my public facing socials and contacts. If I know you well, you may ask me for anything more private, like Signal or Matrix, etc. <small>The fastest way to get this is by checking my <i>followers only</i> pinned post if you follow me/we're mutuals on the Fediverse.</small></span></p>
-        <div class="socials-contacts-list">
-            <a class="fedi-icon" href="https://booping.synth.download/@sneexy" style="background-color: color-mix(in srgb, var(--orange) 25%, transparent); color: var(--orange);" aria-label="Fediverse/Mastodon"><span class="icon tabler--universe" style="pointer-events: none;"></span></a>
-            <a class="fedi-icon-2" href="https://booping.synth.download/@sneexy" style="background-color: color-mix(in srgb, var(--teal) 25%, transparent); color: var(--teal);" aria-label="Fediverse/Mastodon" aria-hidden="true"><span class="icon tabler--brand-mastodon" style="pointer-events: none;"></span></a>
-            <a href="mailto:&#x73;&#x6e;&#x65;&#x65;&#x78;&#x79;&#x40;&#x73;&#x79;&#x6e;&#x74;&#x68;&#x2e;&#x64;&#x6f;&#x77;&#x6e;&#x6c;&#x6f;&#x61;&#x64;" style="background-color: color-mix(in srgb, var(--red) 25%, transparent); color: var(--red);" aria-label="Email"><span class="icon tabler--mail" style="pointer-events: none;"></span></a>
-            <a href="https://listenbrainz.org/user/Sneexy" style="background-color: color-mix(in srgb, var(--sapphire) 25%, transparent); color: var(--sapphire);" aria-label="ListenBraniz"><span class="icon tabler--brand-metabrainz" style="pointer-events: none;"></span></a>
-            <a href="https://www.last.fm/user/sneexy_is_gay" style="background-color: color-mix(in srgb, var(--red) 25%, transparent); color: var(--red);" aria-label="Last.fm"><span class="icon tabler--brand-lastfm" style="pointer-events: none;"></span></a>
-            <a href="https://git.gay/sneexy" style="background-color: color-mix(in srgb, var(--maroon) 25%, transparent); color: var(--maroon);" aria-label="Git"><span class="icon tabler--brand-git" style="pointer-events: none;"></span></a>
-            <a href="https://github.com/sneexy-boi" style="background-color: color-mix(in srgb, var(--lavender) 25%, transparent); color: var(--lavender);" aria-label="GitHub"><span class="icon tabler--brand-github" style="pointer-events: none;"></span></a>
-            <a href="https://archive.org/details/@sneexy" style="background-color: color-mix(in srgb, var(--foreground) 25%, transparent); color: var(--foreground);" aria-label="Internet Archive"><span class="icon tabler--building-bank" style="pointer-events: none;"></span></a>
+        <p>All of my public facing profiles and contacts that are worth checking or if in need of contacting me. <small>I have other contacts that are private for mutuals, I'll share if you ask.</small></p>
+        <div class="container">
+            <socials-links>
+                <a button fedi href="https://booping.synth.download/@sneexy"><icon-tabler social></icon-tabler> Fediverse <small username>@sneexy@booping.synth.download</small></a>
+                <a button bsky href="https://bsky.app/profile/sneexy.synth.download"><icon-tabler brand-bluesky></icon-tabler> Bluesky <small username>@sneexy.synth.download</small></a>
+                <a button email href="mailto:&#x73;&#x6e;&#x65;&#x65;&#x78;&#x79;&#x40;&#x73;&#x79;&#x6e;&#x74;&#x68;&#x2e;&#x64;&#x6f;&#x77;&#x6e;&#x6c;&#x6f;&#x61;&#x64;"><icon-tabler mail></icon-tabler> Email <small username>&#x73;&#x6e;&#x65;&#x65;&#x78;&#x79;&#x40;&#x73;&#x79;&#x6e;&#x74;&#x68;&#x2e;&#x64;&#x6f;&#x77;&#x6e;&#x6c;&#x6f;&#x61;&#x64;</small></a>
+                <a button listenbrainz href="https://listenbrainz.org/user/Sneexy"><icon-tabler brand-metabrainz></icon-tabler> ListenBrainz <small username>Sneexy</small></a>
+                <a button lastfm href="https://www.last.fm/user/sneexy_is_gay"><icon-tabler brand-lastfm></icon-tabler> Last.fm <small username>sneexy_is_gay</small></a>
+                <a button git href="https://forged.synth.download/sneexy"><icon-tabler brand-git></icon-tabler> Git <small username>sneexy@forged.synth.download</small></a>
+                <a button gitgay href="https://git.gay/sneexy"><icon-tabler brand-git></icon-tabler> Git.gay <small username>sneexy@git.gay</small></a>
+                <a button github href="https://github.com/sneexy-boi"><icon-tabler brand-github></icon-tabler> GitHub <small username>sneexy-boi</small></a>
+                <a button archive href="https://archive.org/details/@sneexy"><icon-tabler building-bank></icon-tabler> Internet Archive <small username>sneexy</small></a>
+            </socials-links>
+            <socials-fedi>
+                <iframe src="https://booping.synth.download/embed/user-timeline/9zy33jqk7ljg0001?maxHeight=o" data-misskey-embed-id="v1_8a5d48c6-2549-4fd1-b2a9-a37194567beb" loading="lazy" referrerpolicy="strict-origin-when-cross-origin" style="border: none; width: 100%; max-width: 500px; height: 300px; color-scheme: light dark;"></iframe>
+                <script defer src="https://booping.synth.download/embed.js"></script>
+            </socials-fedi>
         </div>
-        <p><span class="icon tabler--corner-down-right"></span> You may observe my Fediverse activity below:</p>
-        <script defer src="https://booping.synth.download/embed.js"></script>
-        <iframe aria-hidden="true" src="https://booping.synth.download/embed/user-timeline/9zy33jqk7ljg0001?header=false&maxHeight=800&rounded=false&border=false" data-misskey-embed-id="v1_902c0e81-d9d7-4c03-af0e-a6e71c21e95b" loading="lazy" referrerpolicy="strict-origin-when-cross-origin" style="border: none; width: 100%; max-width: 500px; height: 300px; color-scheme: light dark;"></iframe>
     </window-contents>
 </article>
\ No newline at end of file
diff --git a/_includes/styles/accessibility.css b/_includes/styles/base/accessibility.css
similarity index 100%
rename from _includes/styles/accessibility.css
rename to _includes/styles/base/accessibility.css
diff --git a/_includes/styles/animations.css b/_includes/styles/base/animations.css
similarity index 100%
rename from _includes/styles/animations.css
rename to _includes/styles/base/animations.css
diff --git a/_includes/styles/base.css b/_includes/styles/base/base.css
similarity index 96%
rename from _includes/styles/base.css
rename to _includes/styles/base/base.css
index ecf87ba..e0c8431 100644
--- a/_includes/styles/base.css
+++ b/_includes/styles/base/base.css
@@ -168,10 +168,11 @@ small a {
 /* lists need some styling */
 ul {
     margin-left: -1.3rem;
+    ul { margin-bottom: .5rem; }
 
     li {
         margin-bottom: .5rem;
-        &:last-of-type { margin-bottom: 0; }
+        &:last-child { margin-bottom: 0; }
 
         &::marker {
             color: var(--accent);
@@ -414,6 +415,7 @@ card-container {
     --n-bg: var(--accent);
     border-radius: 1rem;
     border: .15rem solid color-mix(in srgb, var(--yellow) 20%, transparent);
+    color: var(--foreground);
     margin-bottom: .8rem;
     padding: .5rem;
 
@@ -423,9 +425,10 @@ card-container {
     }
     p, ul { &:last-of-type { margin-bottom: 0; } }
 
-    &[important] {
+    &[important], &[warning] {
         --n-bg: var(--yellow);
         background-color: color-mix(in srgb, var(--n-bg) 15%, transparent);
+        h3 { color: var(--yellow); }
     }
 }
 
@@ -690,18 +693,18 @@ buttons-container {
     display: flex;
     flex-flow: row wrap;
     gap: .4rem;
+}
 
-    [button] {
-        background: light-dark(color-mix(in srgb,var(--accent)60%,transparent), color-mix(in srgb,var(--accent)25%,transparent));
-        padding: .2rem .5rem;
-        border-radius: 10rem;
-        transition: .2s;
-        text-decoration: none !important;
+[button] {
+    background: light-dark(color-mix(in srgb,var(--accent)40%,transparent), color-mix(in srgb,var(--accent)25%,transparent));
+    border-radius: 10rem;
+    padding: .2rem .5rem;
+    text-decoration: none !important;
+    transition: .2s;
 
-        &:hover {
-            background: var(--accent);
-            color: light-dark(var(--foreground), var(--background));
-        }
+    &:hover {
+        background: var(--accent);
+        color: light-dark(var(--foreground), var(--background));
     }
 }
 
diff --git a/_includes/styles/colors.css b/_includes/styles/base/colors.css
similarity index 100%
rename from _includes/styles/colors.css
rename to _includes/styles/base/colors.css
diff --git a/_includes/styles/footer.css b/_includes/styles/base/footer.css
similarity index 99%
rename from _includes/styles/footer.css
rename to _includes/styles/base/footer.css
index 9dffd37..71a16ec 100644
--- a/_includes/styles/footer.css
+++ b/_includes/styles/base/footer.css
@@ -38,9 +38,10 @@ footer {
             p:last-child { margin-bottom: 0; }
 
             h3 {
+                border-bottom: unset;
                 font-size: 1.5rem;
-                margin-top: 0;
                 margin-bottom: .8rem;
+                margin-top: 0;
             }
         }
 
diff --git a/_includes/styles/icons.css b/_includes/styles/base/icons.css
similarity index 97%
rename from _includes/styles/icons.css
rename to _includes/styles/base/icons.css
index 623fee5..f5825d4 100644
--- a/_includes/styles/icons.css
+++ b/_includes/styles/base/icons.css
@@ -29,6 +29,7 @@ icon-tabler {
     &[article] { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 6a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2zm4 2h10M7 12h10M7 16h10'/%3E%3C/svg%3E"); }
     &[battery-filled] { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M17 6a3 3 0 0 1 2.995 2.824L20 9v.086l.052.019a1.5 1.5 0 0 1 .941 1.25L21 10.5v3a1.5 1.5 0 0 1-.948 1.395l-.052.018V15a3 3 0 0 1-2.824 2.995L17 18H6a3 3 0 0 1-2.995-2.824L3 15V9a3 3 0 0 1 2.824-2.995L6 6z'/%3E%3C/svg%3E"); }
     &[bell] { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M10 5a2 2 0 1 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3H4a4 4 0 0 0 2-3v-3a7 7 0 0 1 4-6M9 17v1a3 3 0 0 0 6 0v-1'/%3E%3C/svg%3E"); }
+    &[brand-bluesky] { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6.335 5.144C4.681 3.945 2 3.017 2 5.97c0 .59.35 4.953.556 5.661C3.269 14.094 5.686 14.381 8 14c-4.045.665-4.889 3.208-2.667 5.41C6.363 20.428 7.246 21 8 21c2 0 3.134-2.769 3.5-3.5q.5-1 .5-1.5q0 .5.5 1.5c.366.731 1.5 3.5 3.5 3.5c.754 0 1.637-.571 2.667-1.59C20.889 17.207 20.045 14.664 16 14c2.314.38 4.73.094 5.444-2.369c.206-.708.556-5.072.556-5.661c0-2.953-2.68-2.025-4.335-.826C15.372 6.806 12.905 10.192 12 12c-.905-1.808-3.372-5.194-5.665-6.856'/%3E%3C/svg%3E"); }
     &[brand-git] { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M15 12a1 1 0 1 0 2 0a1 1 0 1 0-2 0m-4-4a1 1 0 1 0 2 0a1 1 0 1 0-2 0m0 8a1 1 0 1 0 2 0a1 1 0 1 0-2 0m1-1V9m3 2l-2-2m-2-2L9.1 5.1'/%3E%3Cpath d='m13.446 2.6l7.955 7.954a2.045 2.045 0 0 1 0 2.892l-7.955 7.955a2.045 2.045 0 0 1-2.892 0l-7.955-7.955a2.045 2.045 0 0 1 0-2.892l7.955-7.955a2.045 2.045 0 0 1 2.892 0z'/%3E%3C/g%3E%3C/svg%3E"); }
     &[brand-github] { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M9 19c-4.3 1.4-4.3-2.5-6-3m12 5v-3.5c0-1 .1-1.4-.5-2c2.8-.3 5.5-1.4 5.5-6a4.6 4.6 0 0 0-1.3-3.2a4.2 4.2 0 0 0-.1-3.2s-1.1-.3-3.5 1.3a12.3 12.3 0 0 0-6.2 0C6.5 2.8 5.4 3.1 5.4 3.1a4.2 4.2 0 0 0-.1 3.2A4.6 4.6 0 0 0 4 9.5c0 4.6 2.7 5.7 5.5 6c-.6.6-.6 1.2-.5 2V21'/%3E%3C/svg%3E"); }
     &[brand-lastfm] { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M20 8c-.83-1-1.388-1-2-1s-2 .271-2 2s1.384 2.233 3 3s2.125 1.812 2 3s-1 2-3 2s-3-1-3.5-2s-1.585-4.78-2.497-6a5 5 0 1 0-1 7'/%3E%3C/svg%3E"); }
diff --git a/_includes/styles/navbar.css b/_includes/styles/base/navbar.css
similarity index 100%
rename from _includes/styles/navbar.css
rename to _includes/styles/base/navbar.css
diff --git a/_includes/styles/prism-a11y-dark.css b/_includes/styles/base/prism-a11y-dark.css
similarity index 100%
rename from _includes/styles/prism-a11y-dark.css
rename to _includes/styles/base/prism-a11y-dark.css
diff --git a/_includes/styles/settings.css b/_includes/styles/base/settings.css
similarity index 90%
rename from _includes/styles/settings.css
rename to _includes/styles/base/settings.css
index 6b6d9be..3e43044 100644
--- a/_includes/styles/settings.css
+++ b/_includes/styles/base/settings.css
@@ -41,6 +41,14 @@ settings-area {
             outline-color: var(--accent);
         }
 
+        h2, h3 {
+            margin-top: 0;
+
+            &:not(h2:first-child) {
+                border-bottom: unset !important;
+            }
+        }
+
         .container {
             display: flex;
             flex-flow: row wrap;
diff --git a/_includes/styles/windows.css b/_includes/styles/base/windows.css
similarity index 100%
rename from _includes/styles/windows.css
rename to _includes/styles/base/windows.css
diff --git a/_includes/styles/pages/sneexy.css b/_includes/styles/pages/sneexy.css
index a90aee5..d1d4d62 100644
--- a/_includes/styles/pages/sneexy.css
+++ b/_includes/styles/pages/sneexy.css
@@ -9,7 +9,7 @@
 /  ~sneexy - breeeep! my page! slooosh~ */
 
 /* my page has goop in html to set goopy colors */
-html:has(article#sneexy) {
+html:has(article[sneexy-page]) {
     --accent: light-dark(#00d131, #65ff88) !important;
 
     article#sneexy window-contents {
@@ -54,124 +54,61 @@ html:has(article#sneexy) {
     }
 
     /* socials and links sections */
-    .socials-contacts-list {
-        a {
-            width: 3rem;
-            height: 3rem;
-            display: inline-block;
-            vertical-align: middle;
-            align-content: center;
-            text-align: center;
-            border-radius: .5rem;
+    article#links {
+        window-contents {
+            .container {
+                display: flex;
+                flex-flow: row wrap;
+                gap: 1rem;
 
-            span {
-                transform: scale(1.58) translateY(.07rem);
-            }
-        }
+                socials-links {
+                    display: flex;
+                    flex-flow: column wrap;
+                    flex: content;
+                    gap: .8rem;
+                    min-width: 10rem;
 
-        .fedi-icon {
-            anchor-name: --fedi-icon;
-            animation: opacity-blink 4s infinite;
-        }
+                    [button] {
+                        height: fit-content;
+                        padding: .4rem .8rem;
 
-        .fedi-icon-2 {
-            position-anchor: --fedi-icon;
-            position: absolute;
-            margin-left: -3.681rem;
-            z-index: 2;
-            animation: opacity-blink-reverse 4s infinite;
-        }
-    }
+                        small[username] {
+                            float: right;
+                            margin-left: 2rem;
+                        }
 
-    /* sharkey iframe embed */
-    #links > section > iframe {
-        display: flex;
-        margin-top: 1rem;
-        margin-bottom: .3crem;
-        margin-left: auto;
-        margin-right: auto;
-
-        border: var(--accent) solid .15rem !important;
-        border-radius: .6rem;
-        transition: .2s box-shadow;
-    }
-
-    #links > section > iframe:hover {
-        box-shadow: var(--accent) 0px 0px 0px .3rem;
-        transition: .2s box-shadow;
-    }
-
-    /* nsfw page */
-    #warning {
-        fieldset {
-            background-color: color-mix(in srgb, var(--background) 95%, white);
-            border-radius: 1rem;
-            border: .2rem solid var(--border);
-            color: var(--foreground);
-            max-width: fit-content;
-            padding: .5rem;
-        }
-    }
-
-    #nsfw {
-        display: none;
-    }
-
-    @media screen and (max-width: 59em) {
-        #sneexy > section {
-            #logo {
-                max-width: 100%;
-            }
-
-            .selfinfo {
-                grid-template-areas:
-                    "pronouns"
-                    "names";
-                div {
-                    text-align: center;
-                    margin-left: auto;
-                    margin-right: auto;
-                    ul {
-                        text-align: left !important;
+                        &[fedi] { --accent: var(--yellow); }
+                        &[bsky] { --accent: var(--blue); }
+                        &[listenbrainz] { --accent: var(--purple); }
+                        &[lastfm] {
+                            --accent: var(--red);
+                            &:hover { color: var(--background); }
+                        }
+                        &[gitgay] { --accent: var(--green); }
+                        &[github] { --accent: light-dark(color-mix(in srgb, var(--white) 10%, var(--black)), var(--white)); }
+                        &[archive] {
+                            --accent: light-dark(color-mix(in srgb, var(--dark-white) 30%, var(--black)), color-mix(in srgb, var(--dark-white) 15%, var(--black)));
+                            &:hover { color: light-dark(var(--foreground), var(--foreground)); }
+                        }
                     }
                 }
-                div:first-child {
-                    margin-bottom: 1em;
-                }
-                div:last-child {
-                    margin-left: auto !important;
+
+                socials-fedi {
+                    margin-left: auto;
+                    margin-right: auto;
+                    height: 27rem;
+                    overflow-y: scroll;
+                    width: 25rem;
+                    border-radius: .5rem;
                 }
             }
         }
+    }
 
-        .socials-contacts-list {
-            text-align: center;
-            a {
-                margin-top: .5rem;
-                margin-bottom: .5rem;
-            }
+    /* enable nsfw window on nsfw page when checkbox is toggled */
+    &:has(input[type="checkbox"]#view-nsfw-page:checked) {
+        article#nsfw {
+            display: block !important;
         }
     }
-}
-
-/* enable nsfw window on nsfw page when checkbox is toggled */
-html[page-is="goopy"]:has(input[type="checkbox"]#view-nsfw-page:checked) {
-    #nsfw {
-        display: inherit !important;
-    }
-}
-
-html[data-theme="light"][page-is="goopy"] {
-    --accent: #00d131 !important;
-    --link: #008d21 !important;
-
-    .nav-baselink, .nav-accessibility {
-        background-color: var(--accent) !important;
-        color: var(--foreground) !important;
-    }
-}
-
-html[data-theme="dark"][page-is="goopy"] {
-    --accent: #65ff88 !important;
-    --link: var(--accent) !important;
 }
\ No newline at end of file