Edit code, update font

practice/practice-02/src/styles/bases/_typography.scss

@@ -1,13 +1,15 @@
 $font-path: "../assets/fonts";
 
 @font-face {
-  src: url("#{$font-path}/sofia-pro-regular.woff2") format("woff2");
   font-family: "Sofia Pro";
+  src: url("#{$font-path}/sofia-pro-regular.woff2") format("woff2"),
+    url("#{$font-path}/sofia-pro-regular.ttf") format("truetype");
 }
 
 @font-face {
-  src: url("#{$font-path}/inter-regular.woff2") format("woff2");
   font-family: "Inter";
+  src: url("#{$font-path}/inter-regular.woff2") format("woff2"),
+    url("#{$font-path}/inter-regular.ttf") format("truetype");
 }
 
 * {

practice/practice-02/src/styles/components/_button.scss

@@ -9,17 +9,3 @@
   white-space: nowrap;
   transition: 0.2s;
 }
-
-.nav-download-btn {
-  display: none;
-}
-
-@media screen and (min-width: 840px) {
-  .nav-download-btn {
-    display: block;
-
-    &:hover {
-      background-color: $secondary-color;
-    }
-  }
-}

practice/practice-02/src/styles/components/_toggle-menu.scss

@@ -45,7 +45,7 @@
 }
 
 .toggle-menu:checked ~ .nav-list {
-  right: 0px;
+  right: 0;
 }
 
 @media screen and (min-width: 840px) {

practice/practice-02/src/styles/layouts/_navbar.scss

@@ -3,7 +3,7 @@
   transition: 0.1s;
   position: fixed;
   border: 2px solid $primary-color;
-  top: 0px;
+  top: 0;
   right: -300px;
   width: auto;
   height: auto;
@@ -14,8 +14,12 @@
   background-color: $white;
 }
 
+.nav-download-btn {
+  display: none;
+}
+
 .nav-item {
-  font-size: 14px;
+  font-size: $fs-xx-sm;
   padding: 14px;
   border-bottom: 1px solid $black;
 
@@ -40,6 +44,14 @@
     height: auto;
   }
 
+  .nav-download-btn {
+    display: block;
+
+    &:hover {
+      background-color: $secondary-color;
+    }
+  }
+
   .nav-list {
     position: unset;
     display: flex;
@@ -51,7 +63,7 @@
 
   .nav-item {
     border-bottom: none;
-    padding: 0px;
+    padding: 0;
 
     &:hover {
       background-color: unset;