diff --git a/src/layouts/partials/head.html b/src/layouts/partials/head.html
index cf360e4..901535d 100644
--- a/src/layouts/partials/head.html
+++ b/src/layouts/partials/head.html
@@ -50,6 +50,7 @@
     <link rel="apple-touch-icon-precomposed" href="/favicon-180.png">
     <link rel="stylesheet" href="/css/style.css">
     <link rel="stylesheet" href="/css/typography.css">
+    <link rel="stylesheet" href="/css/navbar.css">
     <link href="https://fonts.googleapis.com/css2?family=Syne:wght@700&display=swap" rel="stylesheet">
     <link href="https://file.myfontastic.com/Fd33ifaooDVpESwnDXETgR/icons.css" rel="stylesheet">
     <link rel="preconnect" href="https://fonts.googleapis.com">
diff --git a/src/static/css/navbar.css b/src/static/css/navbar.css
new file mode 100644
index 0000000..e9f76e6
--- /dev/null
+++ b/src/static/css/navbar.css
@@ -0,0 +1,132 @@
+/* Navbar General */
+
+@media only screen and (min-width: 1200px) {
+
+  div.container-fluid.top-nav{
+    padding-left: 0px !important;
+  }
+
+  .navbar{
+    background-color: #1a1a1a !important;
+    height: 4.5vw;
+    border-bottom: 2px solid #949494;
+  }
+
+  .nav-logo{
+    width: 4.4vw;
+  }
+
+  .nav-logo:hover{
+    transform: scale(0.9);
+  }
+
+  .nav-item{
+    font-family: "pp-neue-machina", sans-serif;
+    text-transform: uppercase;
+    font-size: 1vw;
+  }
+}
+
+@media only screen and (min-width: 992px) and (max-width: 1200px) {
+  
+  div.container-fluid.top-nav{
+    padding-left: 0px !important;
+  }
+
+  .navbar{
+    background-color: #1a1a1a !important;
+    height: 5vw;
+    border-bottom: 2px solid #949494;
+  }
+
+  .navbar-brand{
+    padding-top:0px !important;
+    padding-bottom: 0px !important;
+  }
+
+  .nav-logo{
+    width: 4.9vw;
+  }
+
+  .nav-logo:hover{
+    transform: scale(0.9);
+  }
+
+  .nav-item{
+    font-family: "pp-neue-machina", sans-serif;
+    text-transform: uppercase;
+    font-size: 1.2vw;
+  }
+
+}
+
+@media only screen and (min-width: 768px) and (max-width: 992px) {
+
+  div.container-fluid.top-nav{
+    padding-left: 0px !important;
+  }
+
+  .navbar{
+    background-color: #1a1a1a !important;
+    height: 5vw;
+    border-bottom: 2px solid #949494;
+  }
+
+  .navbar-brand{
+    padding-top:0px !important;
+    padding-bottom: 0px !important;
+  }
+
+  .nav-logo{
+    width: 4.9vw;
+  }
+
+  .nav-logo:hover{
+    transform: scale(0.9);
+  }
+
+  .nav-item{
+    font-family: "pp-neue-machina", sans-serif;
+    text-transform: uppercase;
+    font-size: 1.2vw;
+  }
+}
+
+@media only screen and (min-width: 576px) and (max-width: 768px) {
+
+  div.container-fluid.top-nav{
+    padding-left: 0px !important;
+  }
+
+  .navbar{
+    background-color: #1a1a1a !important;
+    height: 13.5vw;
+    border-bottom: 2px solid #949494;
+    padding-top: 0px !important;
+    padding-bottom: 0px !important;
+  }
+
+  .navbar-brand{
+    padding-top:0px;
+    padding-bottom: 0px;
+  }
+
+  .container-fluid{
+    background: none !important;
+  }
+
+  .nav-logo{
+    width: 13.2vw;
+    top:0px !important;
+  }
+
+  .nav-logo:hover{
+    transform: scale(0.9);
+  }
+
+  .nav-item{
+    font-family: "pp-neue-machina", sans-serif;
+    text-transform: uppercase;
+    font-size: 1.2vw;
+  }
+}
diff --git a/src/static/css/style.css b/src/static/css/style.css
index ed765ec..a4d50f6 100644
--- a/src/static/css/style.css
+++ b/src/static/css/style.css
@@ -34,106 +34,6 @@ body{
   }
 }
 
-/* Navbar General */
-
-@media only screen and (min-width: 1200px) {
-
-  div.container-fluid.top-nav{
-    padding-left: 0px !important;
-  }
-
-  .navbar{
-    background-color: #1a1a1a !important;
-    height: 4.5vw;
-    border-bottom: 2px solid #949494;
-  }
-
-  .nav-logo{
-    width: 4.4vw;
-  }
-
-  .nav-logo:hover{
-    transform: scale(0.9);
-  }
-
-  .nav-item{
-    font-family: "pp-neue-machina", sans-serif;
-    text-transform: uppercase;
-    font-size: 1vw;
-  }
-}
-
-@media only screen and (min-width: 768px) and (max-width: 1200px) {
-
-  div.container-fluid.top-nav{
-    padding-left: 0px !important;
-  }
-
-  .navbar{
-    background-color: #1a1a1a !important;
-    height: 5vw;
-    border-bottom: 2px solid #949494;
-  }
-
-  .navbar-brand{
-    padding-top:0px !important;
-    padding-bottom: 0px !important;
-  }
-
-  .nav-logo{
-    width: 4.9vw;
-  }
-
-  .nav-logo:hover{
-    transform: scale(0.9);
-  }
-
-  .nav-item{
-    font-family: "pp-neue-machina", sans-serif;
-    text-transform: uppercase;
-    font-size: 1.2vw;
-  }
-}
-
-@media only screen and (min-width: 576px) and (max-width: 768px) {
-
-  div.container-fluid.top-nav{
-    padding-left: 0px !important;
-  }
-
-  .navbar{
-    background-color: #1a1a1a !important;
-    height: 13.5vw;
-    border-bottom: 2px solid #949494;
-    padding-top: 0px !important;
-    padding-bottom: 0px !important;
-  }
-
-  .navbar-brand{
-    padding-top:0px;
-    padding-bottom: 0px;
-  }
-
-  .container-fluid{
-    background: none !important;
-  }
-
-  .nav-logo{
-    width: 13.2vw;
-    top:0px !important;
-  }
-
-  .nav-logo:hover{
-    transform: scale(0.9);
-  }
-
-  .nav-item{
-    font-family: "pp-neue-machina", sans-serif;
-    text-transform: uppercase;
-    font-size: 1.2vw;
-  }
-}
-
 /* Brand Colors */
 
   /* Type Colors: */