Made different files for login and register

website/public/styles/index.css

@@ -28,10 +28,10 @@ body {
 form {
     /*background-color: #a87a87;*/
     border-radius: 12px;
-    height: 80%;
+    height: 85%;
     margin: auto;
     width: 600px;
-    overflow-y:auto;
+    overflow-y: auto;
     overflow-x: hidden;
 
 }
@@ -46,13 +46,13 @@ h1 {
 
 /* registreer titel*/
 h2 {
-    padding: 16px;
+    padding: 8px;
     text-align: left;
     font-size: 2.0em;
 }
 
 h3 {
-    padding: 16px;
+    padding: 8px;
     text-align: center;
     font-size: 1.5em;
 }
@@ -63,7 +63,7 @@ input[type=text], input[type=password], input[type=email], input[type="date"] {
     display: inline-block;
     height: 60%;
     font-size: 16px;
-    padding: 8px 20px;
+    padding: 8px 10px;
     margin: 4px 0;
     width: 55%;
 }
@@ -79,7 +79,7 @@ button {
     cursor: pointer;
     height: 50%;
     padding: 8px 20px;
-    margin: 10px;
+    margin: 5px;
     font-family: Arial;
     font-size: 22px;
     box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
@@ -90,6 +90,7 @@ button {
     font-family: Arial;
     font-size: 15px;
     color: red;
+    text-align: left;
 }
 
 label {
@@ -98,19 +99,19 @@ label {
 
 /* padding voor registreer container */
 .login_containerregister {
-    padding: 16px;
+    padding: 8px;
     text-align: left;
 }
 
 /* padding voor login_containers */
 .login_containerlogin {
-    padding:16px;
+    padding:8px;
     text-align: center;
 }
 
 /* padding voor foutmelding login */
 .login_containerfault {
-    padding: 16px;
+    padding: 4px;
     text-align: center;
     color: red;
 }
@@ -129,7 +130,7 @@ label {
     background-attachment: fixed;*/
     box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
     height: 400px;
-    margin: 34px auto;
+    margin: 16px auto;
     overflow-y: auto;
     padding: 20px;
     width: 600px;
@@ -149,12 +150,12 @@ ul {
     display: none; /* Hidden by default */
     position: fixed; /* Stay in place */
     z-index: 1; /* Sit on top */
-    padding-top: 100px; /* Location of the box */
+    padding-top: 30px; /* Location of the box */
     left: 0;
     top: 0;
     width: 100%; /* Full width */
     height: 100%; /* Full height */
-    overflow: auto; /* Enable scroll if needed */
+    overflow: hidden; /* Enable scroll if needed */
     background-color: rgb(0,0,0); /* Fallback color */
     background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
 }
@@ -166,7 +167,7 @@ ul {
     margin: auto;
     padding: 0;
     border: 1px solid #888;
-    width: 589px;
+    width: 600px;
     box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
     -webkit-animation-name: animatetop;
     -webkit-animation-duration: 0.4s;
@@ -189,7 +190,7 @@ ul {
 .close {
     color: white;
     float: right;
-    font-size: 28px;
+    font-size: 36px;
     font-weight: bold;
 }
 
@@ -201,7 +202,7 @@ ul {
 }
 
 .modal-header {
-    padding: 2px 16px;
+    padding: 4px 16px;
     background-color: #FBC02D;
     color: black;
 }