Adjustments button styling and login screen

src/assets/scss/main.scss

@@ -18,6 +18,7 @@ body {
 h1, h2, h3, h4, h5, h6, button, a {
   font-family: "Poppins", serif;
   color: $white;
+  font-weight: 500;
 }
 
 p, span, li, label {
@@ -45,6 +46,7 @@ button {
     background-color: rgba($cyan, 0.5);
     border: 1px solid $white;
     border-radius: 5px;
+    text-shadow: 0 3px 6px rgba($black, 0.2);
 
     &:hover {
       background-color: $cyan;

src/components/screens/Login.vue

@@ -133,7 +133,7 @@ async function registerFunc() {
           background-color: rgba($white, 0.5);
           border-radius: 3px;
           border: $light-gray 1px solid;
-          min-width: 400px;
+          min-width: 500px;
           margin: 0 auto;
 
           label {
@@ -158,10 +158,10 @@ async function registerFunc() {
       .row-buttons {
         display: flex;
         justify-content: center;
-        gap: 8px;
+        gap: 15px;
 
         .button {
-          padding: 10px 0;
+          padding: 8px 0;
           min-width: 100px;
 
           span {
@@ -175,12 +175,7 @@ async function registerFunc() {
   .main-title {
     margin-top: 115px;
     text-align: center;
-    font-size: 3rem;
-    text-shadow:
-      -1px -1px 0 $gray,
-      1px -1px 0 $gray,
-      -1px 1px 0 $gray,
-      1px 1px 0 $gray;
+    font-size: 4rem;
   }
 
   a {
@@ -188,7 +183,7 @@ async function registerFunc() {
   }
 
   // Mobile screens (< 450px)
-  @media screen and (max-width: 450px) {
+  @media screen and (max-width: 550px) {
     .content-wrapper {
       .content-elements {
         .login-form {
@@ -197,6 +192,9 @@ async function registerFunc() {
             min-width: unset;
           }
         }
+        .row-buttons {
+          gap: 8px;
+        }
       }
     }
   }