section improvements; hotfixes

src/styles/global.scss

@@ -1,5 +1,3 @@
-@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&display=swap');
-
 $breakpointMd: 960px;
 $breakpointSm: 550px;
 
@@ -8,6 +6,36 @@ $textColor: #fff;
 $secondaryColor: #222;
 $accentColor: #e4c428;
 
+@font-face {
+  font-family: 'Lato';
+  src:
+    url('$fonts/Lato-Light.woff2') format('woff2'),
+    url('$fonts/Lato-Light.woff') format('woff');
+  font-weight: 300;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Lato';
+  src:
+    url('$fonts/Lato-Bold.woff2') format('woff2'),
+    url('$fonts/Lato-Bold.woff') format('woff');
+  font-weight: bold;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Lato';
+  src:
+    url('$fonts/Lato-Regular.woff2') format('woff2'),
+    url('$fonts/Lato-Regular.woff') format('woff');
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+
 ::-webkit-scrollbar {
   width: 7px;
   height: 7px;
@@ -32,7 +60,7 @@ html {
   margin: 0;
   padding: 0;
 
-  font-family: 'Lato', sans-serif;
+  font-family: Lato, sans-serif;
 
   background-color: $bgColor;
   overflow-x: hidden;
@@ -64,7 +92,7 @@ select,
 option,
 input,
 button {
-  font-family: 'Lato', sans-serif;
+  font-family: Lato, sans-serif;
   font-size: 1em;
 }
 
@@ -157,7 +185,7 @@ button {
 select,
 input[type='text'],
 input[type='number'] {
-  background: none;
+  background: $bgColor;
   border: 2px solid #aaa;
   outline: none;