diff --git a/content/Webrings.md b/content/Webrings.md
index d85f522..70f1f01 100644
--- a/content/Webrings.md
+++ b/content/Webrings.md
@@ -1,6 +1,6 @@
 # Fediring
 <a href="https://fediring.net/">Fediring</a>
-<div style="display:flex; flex-flow: row wrap;">
+<div class="fring">
 <a class="fring-button" href="https://fediring.net/previous?host=nexie.net">◄</a>
 <a class="fring-button" href="https://fediring.net/random">Random</a>
 <a class="fring-button" href="https://fediring.net/next?host=nexie.net">►</a>
diff --git a/quartz/styles/custom.scss b/quartz/styles/custom.scss
index d88da09..ec903af 100644
--- a/quartz/styles/custom.scss
+++ b/quartz/styles/custom.scss
@@ -1,23 +1,27 @@
 @use "./base.scss";
 
 // put your custom CSS here!
-.fring-button {
-    text-size: 0.9rem !important;
-    border-radius: 16px !important;
-    border:none !important;
-    background-color: rgba(100,100,100, 0.3) !important;
-    padding: 0.4rem 0.8rem !important;
-    margin: 0.2rem 0.4rem !important;
-    text-decoration: none !important;
-    width: fit-content !important;
-    height: fit-content !important;
-    cursor:pointer !important;
+.fring {
+    display:flex;
+    flex-flow: row wrap;
+    .fring-button {
+        text-size: 0.9rem !important;
+        border-radius: 16px !important;
+        border:none !important;
+        background-color: rgba(100,100,100, 0.3) !important;
+        padding: 0.4rem 0.8rem !important;
+        margin: 0.2rem 0.4rem !important;
+        text-decoration: none !important;
+        width: fit-content !important;
+        height: fit-content !important;
+        cursor:pointer !important;
 
-    > svg {
-        display:none !important;
-    }
+        svg {
+            display:none !important;
+        }
 
-    &:hover{
-        background-color: rgba(100,100,100, 0.5) !important;
+        &:hover{
+            background-color: rgba(100,100,100, 0.5) !important;
+        }
     }
 }
\ No newline at end of file