1 files changed, 45 insertions, 16 deletions

diff --git a/src/public/styles.css b/src/public/styles.css
index b753bd8..0a0a2e2 100644
--- a/src/public/styles.css
+++ b/src/public/styles.css
@@ -8,6 +8,7 @@
   --link-color: #29BC9B;
   --link-visited-color: #999;
   --accent: var(--link-color);
+  --error-text-color: red;
 
   font-family: Inter, sans-serif;
   font-feature-settings: 'ss01' 1, 'kern' 1, 'liga' 1, 'cv05' 1, 'dlig' 1, 'ss01' 1, 'ss07' 1, 'ss08' 1;
@@ -24,6 +25,7 @@
     --link-color: #79ffe1;
     --link-visited-color: #999;
     --accent: var(--link-color);
+  --error-text-color: lightcoral;
   }
 }
 
@@ -156,8 +158,7 @@ summary::before {
 .info-item, .header-item, .footer-item {
   margin-right: 14px;
 }
-
-
+ 
 .media-preview img,
 .media-preview video {
   object-fit: cover;
@@ -185,6 +186,13 @@ summary::before {
   max-width: 95%;
   padding: 5px;
 }
+ 
+form {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 90%;
+}
 
 @media (min-width: 768px) {
   .post, .comments-container, .hero, .header, .footer {
@@ -203,6 +211,9 @@ summary::before {
   .post-media {
     max-width: 50%;
   }
+  form {
+    width: 40%;
+  }
 }
 
 @media (min-width: 1080px) {
@@ -226,6 +237,9 @@ summary::before {
   .post-media {
     max-width: 50%;
   }
+  form {
+    width: 20%;
+  }
 }
 
 @media (min-width: 2560px) {
@@ -235,10 +249,6 @@ summary::before {
   }
 }
 
-.comments-container, .self-text {
-  text-align: justify;
-}
-
 .comment, .more {
   width: 100%;
   border-left: 1px dashed var(--text-color-muted);
@@ -320,7 +330,7 @@ hr {
 blockquote {
   margin: 0px;
   padding-left: 10px;
-  border-left: 4px solid var(--blockquote-color);
+  border-left: 2px solid var(--blockquote-color);
   color: var(--blockquote-color);
 }
 
@@ -400,8 +410,8 @@ a {
 }
 
 .gallery-item {
-    flex: 0 0 auto;
-    margin-right: 10px;
+  flex: 0 0 auto;
+  margin-right: 10px;
 }
 
 .gallery img {
@@ -439,20 +449,15 @@ textarea {
   color: var(--text-color);
 }
 
-form {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
 form label {
   width: 100%;
+  flex-basis: 100%;
   margin: 5px 0;
   color: var(--text-color);
 }
 
 form input[type="submit"] {
-  width: auto;
+  width: 100%;
   padding: 10px 20px;
   margin-top: 20px;
   background-color: var(--link-color);
@@ -466,3 +471,27 @@ form input[type="submit"]:hover {
   background-color: var(--link-color);
   opacity: 0.8;
 }
+
+.input-text {
+  width: 100%;
+}
+
+.submit-button {
+  margin: 24px 0;
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+}
+
+.submit-button button {
+  width: 100%;
+  padding: 12px;
+  background-color: var(--accent);
+  color: var(--bg-color);
+}
+
+.register-error-message {
+  flex-flow: row wrap;
+  color: var(--error-text-color);
+}