Added style for index

website/styles/index.css

@@ -0,0 +1,135 @@
+/* Body */
+body {
+    background-color: #B78996;
+}
+
+/* Bordered form */
+form {
+    background-color: #a87a87;
+    border: 5px solid #325da3;
+    border-radius: 12px;
+    height: 50%;
+    margin: auto;
+    width: 45%;
+}
+
+h1 {
+    padding: 16px;
+    text-align: center;
+}
+
+h2 {
+    padding: 16px;
+    text-align: left;
+}
+
+label {
+    display: block;
+}
+
+/* Full-width inputs */
+input[type=text], input[type=password], input[type=email] {
+    border-radius: 12px;
+    border: 5px solid #ccc;
+    box-sizing: border-box;
+    display: inline-block;
+    height: 50%;
+    padding: 12px 20px;
+    margin: 8px 0;
+    width: 50%;
+}
+
+input[type=submit]{
+    background-color: #845663;
+    border: 2px solid black;
+    border-radius: 12px;
+    color: white;
+    cursor: pointer;
+    height: 50%;
+    margin: 8px 0;
+    padding: 14px 20px;
+    width: 50%;
+}
+
+/* Set a style for all buttons */
+button {
+    background-color: #845663;
+    border: 2px solid black;
+    border-radius: 12px;
+    color: white;
+    cursor: pointer;
+    height: 50%;
+    margin: 8px 0;
+    padding: 14px 20px;
+    width: 25%;
+}
+
+/* Add padding to containers */
+.container {
+    padding: 16px;
+    text-align: left;
+}
+
+.containercenter {
+    padding: 16px;
+    text-align: center;
+}
+
+/* The Modal (background) */
+.modal {
+    background-color: rgb(0,0,0); /* Fallback color */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+    display: none; /* Hidden by default */
+    height: 100%;
+    left: 0;
+    margin: auto;
+    overflow: auto; /* Enable scroll if needed */
+    padding-top: 60px;
+    position: fixed; /* Stay in place */
+    top: 0;
+    width: 100%; /* Full width */
+    z-index: 1; /* Sit on top */
+}
+
+/* Modal Content/Box */
+.modal-content {
+    background-color: #B78996;
+    border: 5px solid #325da3;
+    margin: 5px auto; /* 15% from the top and centered */
+    overflow-y: auto;
+    width: 50% /* Could be more or less, depending on screen size */
+}
+
+/* The Close Button */
+.close {
+    /* Position it in the top right corner outside of the modal */
+    color: white;
+    font-size: 100px;
+    font-weight: bold;
+    position: absolute;
+    right: 25px;
+    top: 0;
+}
+
+/* Close button on hover */
+.close:hover,
+.close:focus {
+    color: red;
+    cursor: pointer;
+}
+
+/* Add Zoom Animation */
+.animate {
+    animation: animatezoom 0.6s
+    -webkit-animation: animatezoom 0.6s;
+}
+
+@-webkit-keyframes animatezoom {
+    from {-webkit-transform: scale(0)}
+    to {-webkit-transform: scale(1)}
+}
+
+@keyframes animatezoom {
+    from {transform: scale(0)}
+    to {transform: scale(1)}
+}