Estilos decentes en Tabs

src/styles/main.css

@@ -6,7 +6,7 @@
     --gray-3: hsl(0, 0%, 30%);
     --black: hsl(0, 0%, 20%);
 
-    --red: hsl(354, 81%, 56%);
+    --accent: hsl(354, 81%, 56%);
 }
 
 
@@ -17,6 +17,7 @@ body {
     padding: 0 1rem;
     font-family: sans-serif;
     color: var(--black);
+    overflow-y: scroll;
 }
 
 input {
@@ -37,7 +38,7 @@ button.link {
 }
 
 a, button.link {
-    color: var(--red);
+    color: var(--accent);
     text-decoration: none;
 }
 
@@ -46,8 +47,8 @@ a:hover, button.link:hover {
 }
 
 h1, h2, h3, h4 {
-    margin-top: .5rem;
-    margin-bottom: .2rem;
+    margin-top: 1rem;
+    margin-bottom: 1rem;
 }
 
 /*Navbar*/
@@ -89,7 +90,7 @@ ul.pagination {
 }
 
 .page-item.active {
-    background-color: var(--red);
+    background-color: var(--accent);
 }
 
 .page-item.active a {
@@ -148,6 +149,28 @@ li.entity a .small {
     color: var(--gray-3);
 }
 
+/* Tabs */
+ul.tabs {
+    display: flex;
+    align-items: stretch;
+    border-bottom: 2px var(--gray-1) solid;
+    margin: 1rem 0;
+}
+
+ul.tabs li.tab {
+    padding: .5rem 1rem;
+    margin-bottom: -2px;
+    cursor: pointer;
+}
+
+ul.tabs li.tab:hover {
+    border-bottom: 2px var(--gray-2) solid;
+}
+
+ul.tabs li.tab.selected {
+    border-bottom: 2px var(--accent) solid;
+}
+
 /*Utils*/
 .full-width {
     width: 100%;