fix: stylesheet

public/autherror.tmpl

@@ -1,10 +1,13 @@
 <html>
     <head>
         <!-- NOTE: You should definitely host this yourself! (and you can adjust the style that way, too!) -->
-        <link rel="stylesheet" href="https://cdn.jsdelir.net/gh/janishutz/oidclogin/public/style.css">
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/janishutz/oidclogin/public/style.css">
     </head>
     <body>
-        <h1>401</h1>
+        <div class="message-wrapper">
+            <h1>401</h1>
+            <p>Unauthorized</p>
+        </div>
         <p>You are not authorized to view this page. Please log in</p>
         <a href="/">Back Home</a>
     </body>

public/oidcerror.tmpl

@@ -1,11 +1,14 @@
 <html>
     <head>
         <!-- NOTE: You should definitely host this yourself! (and you can adjust the style that way, too!) -->
-        <link rel="stylesheet" href="https://cdn.jsdelir.net/gh/janishutz/oidclogin/public/style.css">
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/janishutz/oidclogin/public/style.css">
     </head>
     <body>
-        <h1>500</h1>
-        <p>Login Failed!</p>
+        <div class="message-wrapper">
+            <h1>500</h1>
+            <p>Internal Server Error</p>
+        </div>
+        <p>There was an error logging you in. Please try again. We are sorry for the inconvenience</p>
         <a href="/">Back Home</a>
         <p class="error-msg">{{ .error }}</p>
     </body>

public/style.css

@@ -1,4 +1,5 @@
-html, body {
+html,
+body {
     background-color: #050505;
     color: #FFFFFF;
     width: 100vw;
@@ -12,16 +13,31 @@ body {
     display: flex;
     justify-content: center;
     align-items: center;
+    flex-direction: column;
 }
 
-h1 {
+.message-wrapper {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.message-wrapper h1 {
     font-size: 10rem;
 }
 
-p {
+.message-wrapper p {
     font-size: 1.5rem;
 }
 
+a {
+    color: white;
+    background-color: #101066;
+    padding: 10px;
+    border-radius: 10px;
+    cursor: pointer;
+}
+
 .error-msg {
     font-size: 0.8rem;
     position: fixed;