Prettier & Better font use

aero.css

@@ -2,7 +2,10 @@
 /*   Important things  */
 /* ******************* */
 
-@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3&display=swap');
+@font-face {
+  font-family: "Source Sans 3";
+  src: url("fonts/SourceSans3-Regular.ttf");
+}
 
 :root {
   --primary: rgb(255, 0, 136);
@@ -18,7 +21,7 @@
   box-sizing: border-box;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
-  font-family: 'Source Sans 3', sans-serif;
+  font-family: "Source Sans 3", sans-serif;
 }
 
 /* ******************* */
@@ -41,13 +44,13 @@ body {
   align-items: center;
   justify-content: center;
   font-size: 1em;
-  gap: .5em;
+  gap: 0.5em;
   background: hsl(0, 0%, 10%);
   color: hsl(0, 0%, 95%);
   border: 1px solid transparent;
-  border-radius: .2em;
+  border-radius: 0.2em;
   cursor: pointer;
-  padding: .5em 1em;
+  padding: 0.5em 1em;
   outline-color: #fff;
   text-decoration: none;
   transition: 200ms;
@@ -58,7 +61,7 @@ body {
 }
 
 .button:hover {
-  opacity: .8;
+  opacity: 0.8;
 }
 
 .button.primary {
@@ -84,7 +87,7 @@ body {
   padding: 0;
   border: 1px transparent solid;
   outline: none;
-}       
+}
 
 .button.link:focus {
   border-color: #fff;
@@ -129,9 +132,9 @@ hr {
   background: hsl(0, 0%, 5%);
   color: hsl(0, 0%, 97%);
   border: 1px hsl(0, 0%, 10%) solid;
-  padding: .5em 1em;
+  padding: 0.5em 1em;
   font-size: 1em;
-  border-radius: .2em;
+  border-radius: 0.2em;
   cursor: pointer;
   outline-color: #fff;
 }
@@ -140,9 +143,9 @@ hr {
   background: hsl(0, 0%, 5%);
   color: hsl(0, 0%, 97%);
   border: 1px hsl(0, 0%, 10%) solid;
-  padding: .5em 1em;
+  padding: 0.5em 1em;
   font-size: 1em;
-  border-radius: .2em;
+  border-radius: 0.2em;
   outline-color: #fff;
 }
 
@@ -153,7 +156,7 @@ hr {
 .card {
   padding: 1em;
   border: 1px hsl(0, 0%, 10%) solid;
-  border-radius: .2em;
+  border-radius: 0.2em;
 }
 
 .card .title {
@@ -272,11 +275,11 @@ hr {
 /* Margin Helpers */
 
 .mt-1 {
-  margin-top: .2em;
+  margin-top: 0.2em;
 }
 
 .mt-2 {
-  margin-top: .5em;
+  margin-top: 0.5em;
 }
 
 .mt-3 {
@@ -292,11 +295,11 @@ hr {
 }
 
 .mb-1 {
-  margin-bottom: .2em;
+  margin-bottom: 0.2em;
 }
 
 .mb-2 {
-  margin-bottom: .5em;
+  margin-bottom: 0.5em;
 }
 
 .mb-3 {
@@ -312,11 +315,11 @@ hr {
 }
 
 .ml-1 {
-  margin-left: .2em;
+  margin-left: 0.2em;
 }
 
 .ml-2 {
-  margin-left: .5em;
+  margin-left: 0.5em;
 }
 
 .ml-3 {
@@ -332,11 +335,11 @@ hr {
 }
 
 .mr-1 {
-  margin-right: .2em;
+  margin-right: 0.2em;
 }
 
 .mr-2 {
-  margin-right: .5em;
+  margin-right: 0.5em;
 }
 
 .mr-3 {
@@ -352,11 +355,11 @@ hr {
 }
 
 .mx-1 {
-  margin: .2em;
+  margin: 0.2em;
 }
 
 .mx-2 {
-  margin: .5em;
+  margin: 0.5em;
 }
 
 .mx-3 {
@@ -374,11 +377,11 @@ hr {
 /* Padding Helpers */
 
 .pt-1 {
-  padding-top: .2em;
+  padding-top: 0.2em;
 }
 
 .pt-2 {
-  padding-top: .5em;
+  padding-top: 0.5em;
 }
 
 .pt-3 {
@@ -394,11 +397,11 @@ hr {
 }
 
 .pb-1 {
-  padding-bottom: .2em;
+  padding-bottom: 0.2em;
 }
 
 .pb-2 {
-  padding-bottom: .5em;
+  padding-bottom: 0.5em;
 }
 
 .pb-3 {
@@ -414,11 +417,11 @@ hr {
 }
 
 .pl-1 {
-  padding-left: .2em;
+  padding-left: 0.2em;
 }
 
 .pl-2 {
-  padding-left: .5em;
+  padding-left: 0.5em;
 }
 
 .pl-3 {
@@ -434,11 +437,11 @@ hr {
 }
 
 .pr-1 {
-  padding-right: .2em;
+  padding-right: 0.2em;
 }
 
 .pr-2 {
-  padding-right: .5em;
+  padding-right: 0.5em;
 }
 
 .pr-3 {
@@ -454,11 +457,11 @@ hr {
 }
 
 .px-1 {
-  padding: .2em;
+  padding: 0.2em;
 }
 
 .px-2 {
-  padding: .5em;
+  padding: 0.5em;
 }
 
 .px-3 {
@@ -471,4 +474,4 @@ hr {
 
 .px-5 {
   padding: 1.5em;
-}
+}