Fix lagging

src/style/a.scss

@@ -1,5 +1,5 @@
-@import "vars";
-@import "mixins";
+@import 'vars';
+@import 'mixins';
 
 a {
   @include insignificant-font();
@@ -13,14 +13,13 @@ a {
   $border-shift: 10px;
 
   transition: transform $long-transition-time;
-  $dot-size: 4px;
 
   &:before {
-    content: "";
+    content: '';
     display: block;
     position: absolute;
     width: 100%;
-    height: $dot-size;
+    height: $line-width;
     bottom: 0;
     z-index: 1;
     background: linear-gradient(
@@ -33,11 +32,11 @@ a {
   }
 
   &:after {
-    content: "";
+    content: '';
     display: block;
     width: calc(100% + #{$border-shift});
     z-index: 0;
-    border-bottom: $dot-size dotted $accent-color;
+    border-bottom: $line-width dashed $accent-color;
     transition: transform $long-transition-time;
   }
 

src/style/mixins.scss

@@ -1,4 +1,4 @@
-@import "vars";
+@import 'vars';
 
 @mixin center-children() {
   display: flex;
@@ -47,7 +47,7 @@
 }
 
 @mixin title-font() {
-  font: 400 3.5rem "Montserrat", serif;
+  font: 400 3.5rem 'Montserrat', serif;
   font-style: normal;
   line-height: 1;
 
@@ -58,16 +58,16 @@
 }
 
 @mixin sub-title-font() {
-  font: 400 2rem "Montserrat", serif;
+  font: 400 2rem 'Montserrat', serif;
   font-style: normal;
 }
 
 @mixin main-font() {
-  font: 400 1.25rem "Lato", sans-serif;
+  font: 400 1.25rem 'Lato', sans-serif;
   line-height: 1.6;
 }
 
 @mixin insignificant-font() {
-  font: 400 1.1rem "Lato", sans-serif;
+  font: 400 1.1rem 'Lato', sans-serif;
   font-style: italic;
 }

src/style/vars.scss

@@ -1,4 +1,4 @@
-@import "fonts";
+@import 'fonts';
 
 $background: white;
 
@@ -13,7 +13,7 @@ $scrollbar-color: #ffd6d6;
 $short-transition-time: 220ms;
 $long-transition-time: 350ms;
 $line-width: 3px;
-$border-radius: 15px;
+$border-radius: var(--border-radius);
 $breakpoint-width: 925px;
 
 $large-margin: var(--large-margin);
@@ -36,6 +36,7 @@ $body-width: var(--body-width);
   --body-width: 765px;
   --shadow1: 0 0 10px 2px rgba(0, 0, 0, 0.075);
   --shadow2: 0 0 1px rgba(0, 0, 0, 0.2);
+  --border-radius: 15px;
 
   @media (max-width: $breakpoint-width) {
     --large-margin: 60px;
@@ -45,5 +46,6 @@ $body-width: var(--body-width);
     --body-width: 90%;
     --shadow1: 0 0 10px 2px rgba(0, 0, 0, 0.05);
     --shadow2: 0 0 1px rgba(0, 0, 0, 0.125);
+    --border-radius: 10px;
   }
 }