diff --git a/src/components/NavItem.astro b/src/components/NavItem.astro
index a357cb3..bac7217 100644
--- a/src/components/NavItem.astro
+++ b/src/components/NavItem.astro
@@ -7,6 +7,45 @@ const isActive = href === "/"
   ? Astro.url.pathname === "/"
   : Astro.url.pathname.startsWith(href);
 ---
+<style>
+  a {
+    background-color: var(--primary);
+    border: var(--shadow) 1.5pt solid;
+    border-radius: 5px;
+    color: white;
+    font-weight: bold;
+    margin: 4px;
+    padding-bottom: 5px;
+    padding-top: 5px;
+    text-decoration: none;
+    &.titular-navbar-tab {
+      background-color: var(--secondary);
+      color: var(--text);
+    }
+  }
+
+  a {
+    box-shadow: 0px 2.5px 2.5px 0.25px var(--shadow);
+    padding-left: 10px;
+    padding-right: 10px;
+    &.titular-navbar-tab {
+      box-shadow: 0px 2.5px 2.5px 0.25px inset var(--shadow);
+    }
+  }
+
+  @media screen and (min-width: 965px) {
+    /* Large screen styles */
+    a {
+      box-shadow: 2px 0px 5px 0.25px var(--shadow);
+      padding-left: 20px;
+      padding-right: 15px;
+      width: max-content;
+      &.titular-navbar-tab {
+        box-shadow: -2px 0 5px 0.25px inset var(--shadow);
+      }
+    }
+  }
+</style>
 <a
   {href}
   class={isActive ? "titular-navbar-tab" : undefined}
diff --git a/src/components/Navigation.astro b/src/components/Navigation.astro
index 30a2942..374b15e 100644
--- a/src/components/Navigation.astro
+++ b/src/components/Navigation.astro
@@ -1,6 +1,32 @@
 ---
 import NavItem from "./NavItem.astro";
 ---
+<style>
+  nav {
+    /* Common styles */
+    display: flex;
+    width: 100%;
+  }
+
+  nav {
+    /* Small screen styles */
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 5px;
+  }
+
+  @media screen and (min-width: 965px) {
+    /* Large screen styles */
+    nav {
+      align-items: unset;
+      flex-direction: column;
+      justify-content: unset;
+      left: -15px;
+      position: fixed;
+      z-index: -1;
+    }
+  }
+</style>
 <nav>
   <NavItem href="/" label="Home" />
   <NavItem href="/about" label="About" />
diff --git a/src/styles/global.css b/src/styles/global.css
index 1ee6dd0..e2f4675 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -73,59 +73,3 @@ footer {
   }
 }
 
-nav {
-  /* Common styles */
-  display: flex;
-  width: 100%;
-  & > a {
-    background-color: var(--primary);
-    border: var(--shadow) 1.5pt solid;
-    border-radius: 5px;
-    color: white;
-    font-weight: bold;
-    margin: 4px;
-    padding-bottom: 5px;
-    padding-top: 5px;
-    text-decoration: none;
-    &.titular-navbar-tab {
-      background-color: var(--secondary);
-      color: var(--text);
-    }
-  }
-}
-
-nav {
-  /* Small screen styles */
-  align-items: center;
-  justify-content: center;
-  margin-bottom: 5px;
-  & > a {
-    box-shadow: 0px 2.5px 2.5px 0.25px var(--shadow);
-    padding-left: 10px;
-    padding-right: 10px;
-    &.titular-navbar-tab {
-      box-shadow: 0px 2.5px 2.5px 0.25px inset var(--shadow);
-    }
-  }
-}
-
-@media screen and (min-width: 965px) {
-  /* Large screen styles */
-  nav {
-    align-items: unset;
-    flex-direction: column;
-    justify-content: unset;
-    left: -15px;
-    position: fixed;
-    z-index: -1;
-    & > a {
-      box-shadow: 2px 0px 5px 0.25px var(--shadow);
-      padding-left: 20px;
-      padding-right: 15px;
-      width: max-content;
-      &.titular-navbar-tab {
-        box-shadow: -2px 0 5px 0.25px inset var(--shadow);
-      }
-    }
-  }
-}