Pulls out .btn block

2 files changed, 24 insertions, 23 deletions

diff --git a/public/css/btn.css b/public/css/btn.css
new file mode 100644
index 0000000..1df9f5a
--- /dev/null
+++ b/public/css/btn.css
@@ -0,0 +1,22 @@
+.btn {
+    color: var(--text-color);
+    border: solid 2px var(--text-color);
+    font-weight: 500;
+    text-decoration: underline;
+    padding-inline: 0.5rem;
+    padding-block: 0.25rem;
+    background-color: transparent;
+    transition:
+      background-color 300ms,
+      text-decoration-color 300ms,
+      transform 50ms;
+  }
+  
+  .btn:hover {
+    background-color: var(--background-highlight-color);
+    text-decoration-color: transparent;
+  }
+  
+  .btn:active {
+    transform: scale(1.1, 1.1);
+  }
\ No newline at end of file
diff --git a/public/main.css b/public/main.css
index c41c9cb..1f3cf13 100644
--- a/public/main.css
+++ b/public/main.css
@@ -1,3 +1,5 @@
+@import 'css/btn.css';
+
 :root {
   /*
    * This colour palette should not be accessed directly. Instead, use *
@@ -206,29 +208,6 @@ p:not(:first) {
   color: var(--special-text-highlight-color);
 }
 
-.btn {
-  color: var(--text-color);
-  border: solid 2px var(--text-color);
-  font-weight: 500;
-  text-decoration: underline;
-  padding-inline: 0.5rem;
-  padding-block: 0.25rem;
-  background-color: transparent;
-  transition:
-    background-color 300ms,
-    text-decoration-color 300ms,
-    transform 50ms;
-}
-
-.btn:hover {
-  background-color: var(--background-highlight-color);
-  text-decoration-color: transparent;
-}
-
-.btn:active {
-  transform: scale(1.1, 1.1);
-}
-
 td {
   padding-block-start: var(--spacing-block-sm);
 }