Updated main page

src/pages/MainPage/Main.sass

@@ -24,6 +24,8 @@ h1
   &__list
     position: relative
     display: flex
+    gap: 5rem
+    
 
   &__list[data-orientation="horizontal"]
     align-items: center
@@ -34,29 +36,42 @@ h1
 
   &__indicator
     position: absolute
-    background-color: hsl(200 98% 39%)
+    background-color: color.adjust(vars.$background, $lightness: 20%)
     transition: all 250ms
 
   &__indicator[data-orientation="horizontal"]
     bottom: -1px
-    height: 2px
+    height: 3px
 
   &__indicator[data-orientation="vertical"]
     right: -1px
     width: 2px
 
   &__trigger
+    // display: inline-block
+    // padding: 8px 16px
+    // outline: none
+    // cursor: pointer
+    background-color: vars.$background
+    border: none
+    border-radius: 6px 6px 0 0
+    color: vars.$textColor
+    padding: 0.75rem 1.75rem
+    width: 10rem
+    text-align: center
+    text-decoration: none
     display: inline-block
-    padding: 8px 16px
-    outline: none
+    font-size: 1rem
+    font-weight: 500
     cursor: pointer
+    // transition: all 0.2s ease-out
 
   &__trigger:hover
-    background-color: hsl(0 0% 98%)
-    color: hsl(240 5% 34%)
+    background-color: color.adjust(vars.$background, $lightness: 20%)
+    // color: hsl(240 5% 34%)
 
   &__trigger:focus-visible
-    background-color: hsl(240 5% 96%)
+    // background-color: hsl(240 5% 96%)
 
 .tabs__trigger[data-disabled],
 .tabs__trigger[data-disabled]:hover
@@ -67,25 +82,40 @@ h1
   padding: 16px
 
 .table
-  width: 100%
+  width: 90%
   border-collapse: collapse
   margin: 2rem
 
   th, td
-    border: 1px solid vars.$tableBorderColor
+    // border: 1px solid vars.$tableBorderColor
     padding: 0.75rem
     text-align: left
-    font-size: 1.1rem
-
-  td:nth-child(1)
-    width: 12rem
-
-  td:nth-child(3)
-    width: 9rem
+    font-size: 1rem
 
   th
     background-color: vars.$tableHeaderBackground
-    color: white
+    color: vars.$textColor
+    padding: 1rem
+
+  th:nth-child(1)
+    text-align: center
+    border-radius: 1rem 0 0 0
+
+  th:nth-child(3)
+    border-radius: 0 1rem 0 0
+
+  td
+    background-color: rgba(color.adjust(vars.$background, $blackness: 5%), 0.8)
+
+  td:nth-child(1)
+    width: 10rem
+    text-align: center
+
+  td:nth-child(3)
+    width: 8.75rem
+
+  tbody tr:nth-child(even) 
+    background-color: rgba(color.adjust(vars.$background, $lightness: 10%), 0.8)
 
 .modal
   font-weight: 500