diff --git a/site/calculator.html b/site/calculator.html
index 11f14c9..a0fc4a2 100644
--- a/site/calculator.html
+++ b/site/calculator.html
@@ -4,39 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>CO2 Emissions Calculator</title>
-    <style>
-        body {
-            font-family: Arial, sans-serif;
-            margin: 20px;
-        }
-
-        input, output {
-            margin-bottom: 15px;
-        }
-
-        .tree-slider {
-            margin-bottom: 30px;
-            background-color: #aaaaaa;
-        }
-
-        .result-section, .input-section {
-            display: flex;
-            justify-content: flex-start;
-            align-items: baseline;
-            margin-bottom: 10px;
-        }
-
-        input[type=number]::-webkit-inner-spin-button,  
-        input[type=number]::-webkit-outer-spin-button {  
-            -webkit-appearance: none;  
-            margin:  0;  
-        }
-
-        input[type=number] {
-            -moz-appearance: textfield;
-            appearance: textfield;
-        }
-    </style>
+    <link rel="stylesheet" href="./styles.css">
 </head>
 <body>
     <h1>CO2 Emissions Calculator</h1>
diff --git a/site/styles.css b/site/styles.css
new file mode 100644
index 0000000..4dc9708
--- /dev/null
+++ b/site/styles.css
@@ -0,0 +1,31 @@
+body {
+    font-family: Arial, sans-serif;
+    margin: 20px;
+}
+
+input, output {
+    margin-bottom: 15px;
+}
+
+.tree-slider {
+    margin-bottom: 30px;
+    background-color: #aaaaaa;
+}
+
+.result-section, .input-section {
+    display: flex;
+    justify-content: flex-start;
+    align-items: baseline;
+    margin-bottom: 10px;
+}
+
+input[type=number]::-webkit-inner-spin-button,  
+input[type=number]::-webkit-outer-spin-button {  
+    -webkit-appearance: none;  
+    margin:  0;  
+}
+
+input[type=number] {
+    -moz-appearance: textfield;
+    appearance: textfield;
+}
\ No newline at end of file
