Style the error page, fix form styles

backend/web/page/error.html

@@ -1,14 +1,12 @@
 {{define "main"}}
 
-<div class="h-full flex items-center justify-center">
-	<div class="text-center">
-		<p class="font-semibold text-gray-700">{{.StatusCode}}</p>
-		<h1 class="mt-4 text-3xl font-bold text-gray-900">{{.StatusText}}</h1>
-		<p class="mt-6">{{.Message}}</p>
-		<div class="mt-10">
-			<a href="/" class="rounded-md px-4 py-2 font-semibold bg-gray-700 text-gray-100 shadow-sm hover:bg-gray-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-700">Go back home</a>
-		</div>
-	</div>
-</div>
+<section class="error">
+	<article>
+		<p class="error__code">{{.StatusCode}}</p>
+		<h1 class="error__status">{{.StatusText}}</h1>
+		<h2 class="error__message">{{.Message}}</h2>
+		<a class="error__link" href="/">Go back home</a>
+	</article>
+</section>
 
 {{end}}

backend/web/page/login.html

@@ -4,6 +4,8 @@
 	<form method="POST" action="/login" class="login-form">
 		<h2 class="login-heading">Log In to Your Account</h2>
 
+		<hr />
+
 		<div class="login-field">
 			<label for="username" class="login-label">
 				Username

backend/web/page/register.html

@@ -4,6 +4,8 @@
 	<form method="POST" action="/register" class="register-form">
 		<h2 class="register-heading">Register a New Account</h2>
 
+		<hr />
+
 		<div class="register-field">
 			<label for="username" class="register-label">
 				Username

public/css/style.css

@@ -40,6 +40,44 @@ svg {
 
 
 
+.error {
+	height: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	text-align: center;
+}
+
+.error__code {
+	font-weight: 500;
+	color: var(--color-medium);
+	margin-bottom: 1rem;
+}
+
+.error__status {
+	font-size: 2rem;
+	font-weight: 700;
+	color: var(--color-dark);
+	margin-bottom: 1.5rem;
+}
+
+.error__message {
+	margin-bottom: 2.5rem;
+}
+
+.error__link {
+	color: var(--color-light);
+	background-color: var(--color-dark);
+	text-decoration: none;
+	padding: 0.5rem 1rem;
+	border-radius: 0.25rem;
+	box-shadow: var(--shadow);
+}
+
+.error__link:hover {
+	background-color: var(--color-medium);
+}
+
 
 
 .header {
@@ -86,7 +124,7 @@ svg {
 }
 
 .articles-header-search {
-	padding: 0.5rem;
+	padding: 0.75rem 1rem;
 	border: 1px solid var(--color-gray);
 	border-radius: 0.375rem;
 }
@@ -248,7 +286,7 @@ svg {
 .register-input, .login-input {
 	display: block;
 	border-radius: 0.25rem;
-	padding: 0.5rem 0.5rem;
+	padding: 0.75rem 1rem;
 	border: 1px solid var(--color-gray);
 }
 
@@ -261,7 +299,7 @@ svg {
 .register-button, .login-button {
 	color: var(--color-light);
 	background-color: var(--color-dark);
-	padding: 0.5rem 0.5rem;
+	padding: 0.75rem 0.5rem;
 	font-weight: 500;
 	border-radius: 0.5rem;
 	border-width: 0;