Aprovechando scss para simplificar el codigo

Aprovecho que se pueden poner selectores dentro de selectores para
transformarlos en una especie de arbol de propiedades css :3

Es para lo unico que uso scss XD

src/styles/main.scss

@@ -1,4 +1,4 @@
-/*Colorscheme*/
+/* Colorscheme */
 :root {
   --white: hsl(0, 0%, 99%);
   --gray-1: hsl(0, 0%, 95%);
@@ -10,11 +10,10 @@
   --accent: hsl(354, 81%, 56%);
 }
 
-
-/*Modificacion basica de elementos*/
+/* Modificación básica de elementos*/
 body {
   max-width: 75rem;
-  margin: 0 auto ;
+  margin: 0 auto;
   padding: 0 1rem 1em 1em;
   font-family: sans-serif;
   color: var(--black);
@@ -28,23 +27,23 @@ input {
 
 button {
   border: 1px var(--gray-2) solid;
-}
 
-button.link {
+  &.link {
     display: inline;
     border: none;
     background-color: inherit;
     padding: 0;
     cursor: pointer;
+  }
 }
 
 a, button.link {
   color: var(--accent);
   text-decoration: none;
-}
 
-a:hover, button.link:hover {
+  &:hover {
     text-decoration: underline;
+  }
 }
 
 h1, h2, h3, h4 {
@@ -52,78 +51,71 @@ h1, h2, h3, h4 {
   margin-bottom: 1rem;
 }
 
-img {
-}
-
-/*Navbar*/
+/* Navbar */
 .nav {
   display: flex;
   min-height: 3.25rem;
   position: relative;
   justify-content: space-between;
   align-items: center;
-}
 
-.nav .branding {
+  .branding {
     margin: 0;
-}
+  }
 
-.nav-links {
+  .nav-links {
     display: flex;
-}
 
-.nav-links .link {
+    .link {
       margin-left: 1rem;
+    }
+  }
 }
 
-/*Pagination*/
+/* Pagination */
 ul.pagination {
   display: flex;
   margin: 1rem auto;
   justify-content: center;
-}
 
-.page-item {
+  .page-item {
     border: 1px solid var(--gray-2);
-}
 
-.page-link {
+    &.active {
+      background-color: var(--accent);
+
+      a {
+        color: white;
+      }
+    }
+  }
+
+  .page-link {
     color: var(--black);
     text-decoration: none;
     padding: 0 1rem;
-}
 
-@media (max-width: 767px) {
-  .page-link {
+    @media (max-width: 767px) {
       padding: 0 .4rem;
     }
+  }
 }
 
-.page-item.active {
-  background-color: var(--accent);
-}
-
-.page-item.active a {
-  color: white;
-}
-
-
-/*Input with icon*/
+/* Input with icon */
 .input-with-icon {
   display: flex;
-}
 
-.input-with-icon input {
+  input {
     border-right: none;
-}
+  }
 
-.input-with-icon button {
+  button {
     border-left: none;
     background: white;
+  }
 }
 
-
-/*Lista de entidades*/
+/* Lista de entidades */
 ul.entity_list {
   display: flex;
   flex-direction: column;
@@ -200,30 +192,29 @@ ul.entity_list {
   }
 }
 
-
 /* Tabs */
 ul.tabs {
   display: flex;
   align-items: stretch;
   border-bottom: 2px var(--gray-1) solid;
   margin: 1rem 0;
-}
 
-ul.tabs li.tab {
+  li.tab {
     padding: .5rem 1rem;
     margin-bottom: -2px;
     cursor: pointer;
-}
 
-ul.tabs li.tab:hover {
+    &:hover {
       border-bottom: 2px var(--gray-2) solid;
-}
+    }
 
-ul.tabs li.tab.selected {
+    &.selected {
       border-bottom: 2px var(--accent) solid;
+    }
+  }
 }
 
-/*Utils*/
+/* Utils */
 .full-width {
   width: 100%;
 }
@@ -232,9 +223,13 @@ ul.tabs li.tab.selected {
   animation: pulsating 1s infinite alternate ease-in-out;
 
   @keyframes pulsating {
-    from { background-color: var(--white);}
+    from {
+      background-color: var(--white);
+    }
 
-    to { background-color: var(--gray-2);}
+    to {
+      background-color: var(--gray-2);
+    }
   }
 }