diff --git a/src/components/Avatar.astro b/src/components/Avatar.astro
index 51033a5..c22c6cf 100644
--- a/src/components/Avatar.astro
+++ b/src/components/Avatar.astro
@@ -24,7 +24,4 @@ const { size } = Astro.props;
     margin: auto;
     border-radius: 200px;
   }
-  a > svg {
-    transform: translateY(0.18rem);
-  }
 </style>
diff --git a/src/components/Blog/BlogHeader.astro b/src/components/Blog/BlogHeader.astro
index 532c40c..ee00d5b 100644
--- a/src/components/Blog/BlogHeader.astro
+++ b/src/components/Blog/BlogHeader.astro
@@ -31,10 +31,10 @@ const { title, date, slug } = Astro.props;
 
   .blog-header {
     margin: 1rem 0;
-  }
 
-  .blog-header > h2 {
-    margin: 0;
+    & h2 {
+      margin: 0;
+    }
   }
 
   .calendar-icon {
diff --git a/src/components/Blog/PostPreview.astro b/src/components/Blog/PostPreview.astro
index c79c873..86cb7a6 100644
--- a/src/components/Blog/PostPreview.astro
+++ b/src/components/Blog/PostPreview.astro
@@ -18,9 +18,9 @@ const { post } = Astro.props;
 <style lang="scss">
   article {
     padding-bottom: 20px;
-  }
 
-  article:not(:first-child) {
-    border-top: var(--border);
+    &:not(:first-child) {
+      border-top: var(--border);
+    }
   }
 </style>
diff --git a/src/components/Card.astro b/src/components/Card.astro
index 043b68e..11b212e 100644
--- a/src/components/Card.astro
+++ b/src/components/Card.astro
@@ -39,14 +39,14 @@ const { title, image, links } = Astro.props;
     border: var(--border);
     border-radius: $radius;
     overflow: hidden;
-  }
 
-  .card > div {
-    padding: 1rem;
-  }
+    & div {
+      padding: 1rem;
+    }
 
-  h2 {
-    margin: 0;
+    & h2 {
+      margin: 0;
+    }
   }
 
   img {
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index ea70e26..ecf7c9d 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -45,19 +45,19 @@ const year = new Date().getFullYear();
     display: flex;
     gap: 24px;
     justify-content: center;
-  }
 
-  .socials a {
-    color: var(--text);
-  }
+    & a {
+      color: var(--text);
 
-  .rss-icon {
-    color: var(--orange);
-  }
+      & .rss-icon {
+        color: var(--orange);
+      }
 
-  .mastodon-icon {
-    color: var(--blue);
-    transform: translateY(4px);
+      & .mastodon-icon {
+        color: var(--blue);
+        transform: translateY(4px);
+      }
+    }
   }
 
   @media (max-width: 516px) {
diff --git a/src/components/Header/Drawer.astro b/src/components/Header/Drawer.astro
index 67b984b..c7d725f 100644
--- a/src/components/Header/Drawer.astro
+++ b/src/components/Header/Drawer.astro
@@ -69,11 +69,11 @@ import { navLinks } from "../../data/nav-links";
     height: 100vh;
     z-index: 3;
     transition: $transition;
-  }
 
-  .drawer > div {
-    padding: 8px 6px 4px;
-    border-bottom: var(--border);
+    & div {
+      padding: 8px 6px 4px;
+      border-bottom: var(--border);
+    }
   }
 
   nav {
diff --git a/src/components/Header/Header.astro b/src/components/Header/Header.astro
index fa250fd..c94773f 100644
--- a/src/components/Header/Header.astro
+++ b/src/components/Header/Header.astro
@@ -26,23 +26,23 @@ import Nav from "./Nav.astro";
     position: fixed;
     z-index: 1;
     border-bottom: var(--border);
-  }
 
-  .container {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-    max-width: $max-page-width;
-    margin: auto;
-    padding: 0 16px;
-    height: 100%;
-  }
+    & .container {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+      max-width: $max-page-width;
+      margin: auto;
+      padding: 0 16px;
+      height: 100%;
 
-  .container > div {
-    display: flex;
-    gap: 20px;
-    align-items: center;
+      & div {
+        display: flex;
+        gap: 20px;
+        align-items: center;
+      }
+    }
   }
 
   a {
diff --git a/src/components/Header/Nav.astro b/src/components/Header/Nav.astro
index 5d955cb..2282b36 100644
--- a/src/components/Header/Nav.astro
+++ b/src/components/Header/Nav.astro
@@ -17,7 +17,7 @@ import { navLinks } from "../../data/nav-links";
 <style lang="scss">
   @use "../../styles/variables.scss" as *;
 
-  nav > ul {
+  ul {
     display: flex;
     flex-direction: row;
     list-style: none;
@@ -25,11 +25,11 @@ import { navLinks } from "../../data/nav-links";
     font-size: 1.15rem;
     font-weight: 600;
     align-items: center;
-  }
 
-  a {
-    color: var(--text);
-    padding: 5px 10px;
+    & a {
+      color: var(--text);
+      padding: 5px 10px;
+    }
   }
 
   @media screen and (max-width: $max-mobile-width) {
diff --git a/src/components/ThemeToggle.astro b/src/components/ThemeToggle.astro
index af41b79..13cad88 100644
--- a/src/components/ThemeToggle.astro
+++ b/src/components/ThemeToggle.astro
@@ -14,18 +14,20 @@ import BrushIcon from "../../assets/svg/paintbrush.svg";
 </div>
 
 <style lang="scss">
+  @use "../styles/variables.scss" as *;
+
   .toggles {
     padding: 1rem;
     display: flex;
     justify-content: center;
     align-items: center;
     gap: 12px;
-  }
 
-  .toggles > div {
-    display: flex;
-    align-items: center;
-    gap: 4px;
+    div {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+    }
   }
 
   input {
@@ -36,26 +38,26 @@ import BrushIcon from "../../assets/svg/paintbrush.svg";
     padding: 10px;
     background-color: var(--orange);
     border-radius: 120px;
-  }
 
-  input:checked {
-    background-color: var(--sky);
-  }
+    &:checked {
+      background-color: var(--sky);
+    }
 
-  input::after {
-    content: "";
-    position: absolute;
-    height: 22px;
-    width: 22px;
-    border-radius: 100%;
-    background-color: var(--background);
-    left: 1px;
-    top: 1px;
-    transition: all 0.1s ease-in-out;
-  }
+    &:after {
+      content: "";
+      position: absolute;
+      height: 22px;
+      width: 22px;
+      border-radius: 100%;
+      background-color: var(--background);
+      left: 1px;
+      top: 1px;
+      transition: $quick-transition;
+    }
 
-  input:checked:after {
-    left: 15px;
+    &:checked:after {
+      left: 15px;
+    }
   }
 
   @media (max-width: 516px) {
diff --git a/src/styles/global.scss b/src/styles/global.scss
index 18af9c3..48bc4e3 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -46,10 +46,10 @@ main {
 a {
   color: var(--blue);
   text-decoration: none;
-}
 
-a:hover {
-  opacity: 0.75;
+  &:hover {
+    opacity: 0.75;
+  }
 }
 
 main p {
@@ -112,14 +112,14 @@ kbd {
   aspect-ratio: square;
   height: 24px;
   width: 24px;
-}
 
-.icon-button:active {
-  opacity: 0.3;
-}
+  &:active {
+    opacity: 0.3;
+  }
 
-.icon-button > svg {
-  color: var(--text);
+  & svg {
+    color: var(--text);
+  }
 }
 
 /* shiki */
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index fe6b42c..3a33edf 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -2,4 +2,10 @@ $max-mobile-width: 768px;
 $max-page-width: 800px;
 $radius: 5px;
 $border-style: 1px solid;
-$transition: all 0.3s ease-in-out;
+
+/* transitions */
+$transition-duration: 0.3s;
+$quick-transition-duration: 0.1s;
+
+$transition: all $transition-duration ease-in-out;
+$quick-transition: all $quick-transition-duration ease-in-out;