Fix css for password reset pages.

views/passwordResetPages/email.ejs

@@ -5,7 +5,6 @@
         <meta content="width=device-width, initial-scale=1" name="viewport"/>
         <title>The Subline</title>
         <link rel="icon" type="img/png" href="/shared/images/logo.png">
-        <link rel="stylesheet" href="/shared/shared.css">
         <link rel="stylesheet" href="/passwordResetPages/passwordReset.css">
         <link href="https://fonts.googleapis.com/css?family=Saira&display=swap" rel="stylesheet"> 
     </head>

views/passwordResetPages/passwordReset.css

@@ -1,7 +1,203 @@
+*{margin:0;padding:0;}
+
 body{
     align-items: center;
 }
 
+.header{
+    display: flex;
+    justify-content: space-between;
+    background: #001b2d;
+    width: 100%;
+    height: 75px;
+}
+
+    .headerStart{
+        display: flex;
+        align-items:center;
+        text-decoration: none;
+        margin-left: 25px;
+        width: 275px;
+    }
+
+        .headerStart img{
+            max-height: 75%;
+        }
+
+        .headerLogo{
+            color: white;
+            font-size: 25px;
+            margin-left: 10px;
+        }
+
+        .mobileHomeButton{
+            display: none;
+        }
+
+    .headerEnd{
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        margin-right: 25px;
+        
+    }
+
+        .headerEnd > *{
+            margin-left: 20px;
+        }
+
+        .headerEnd a{
+            color: rgb(255, 99, 107);
+        }
+
+        h1 {
+            text-align: center;
+            padding-bottom: 13px;
+        }
+        
+        h3 {
+            text-align: center;
+            font-weight: 500;
+            font-size: 20px;
+        }
+        
+        button{
+            outline: 0;
+        }
+        
+        button::-moz-focus-inner{
+            border: 0;
+        }
+        
+        .link{
+            cursor: pointer;
+            color: gray;
+            text-decoration: underline;
+            text-align: center;
+            font-size: 20px;
+        }
+        
+            .link:hover {
+                color: #ff636b;
+                text-decoration: underline;
+                cursor: pointer;
+            }
+        
+        .button{
+            background: rgb(0, 27, 45);
+            border: none;
+            text-decoration: none;
+            padding: 10px 25px;
+            color: rgb(255, 99, 107);
+            cursor: pointer;
+            text-align: center;
+            font-size: 15px;
+            min-width: 100px;
+            margin: 5px;
+            max-height: 52px;
+        }
+        
+            .button:hover{
+                background: rgb(179, 191, 209);
+            }
+        
+            .button:active{
+                background: rgb(240, 252, 255);
+            }
+        
+        .dangerButton{
+            display: initial;
+            background: rgb(255, 99, 107);
+            border: none;
+            text-decoration: none;
+            padding: 10px 25px;
+            color: black;
+            cursor: pointer;
+            text-align: center;
+            font-size: 15px;
+            min-width: 100px;
+            margin: 5px;
+            max-height: 52px;
+        }
+        
+            .dangerButton:hover{
+                background: rgb(255, 129, 137);
+            }
+        
+            .dangerButton:active{
+                background: rgb(240, 252, 255);
+            }
+        
+        .linkButton{
+            background: none;
+            border: none;
+            text-decoration: underline;
+            color: white;
+            cursor: pointer;
+            margin: 5px;
+            font-size: 15px;
+        }
+        
+        .public-buttons {
+            position: inherit;
+            align-self: center;
+            margin-right: 39px;
+        }
+        
+        .buttonDisabled{
+            background: gray;
+            text-decoration: none;
+            border-radius: 10px;
+            padding: 10px 5px;
+            color: rgb(0, 27, 45);
+            cursor: default;
+            font-size: 25px;
+            text-align: center;
+        }
+        
+        .line-break{
+            border: 1px solid rgb(255, 99, 107);
+            margin: 30px 0;
+        }
+        
+        @media screen and (max-width: 1400px){
+            .button{
+                font-size: 15px;
+            }
+        
+            .header{
+                height: 30px;
+            }
+        
+                .headerStart{
+                    margin-left: 10px;
+                }
+        
+                .headerEnd{
+                    font-size: 8px;
+                }
+        
+                .headerLogo{
+                    white-space: nowrap;
+                    font-size: 10px;
+                }
+        
+            .truncateLong{
+                max-width: 100px;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
+        
+            .mobileHide{
+                display: none !important;
+            }
+        
+            .headerStart{
+                width: 0;
+            }
+        }
+
 .title{
     margin-top: 30px;
     font-size: 40px;