added form styling and edited base.css and home.css

bellapanghulan_reading/static/stylesheets/base.css

@@ -53,7 +53,7 @@ a:visited {
 
 .links {  
   display: flex;
-  margin-top: 5rem;
+  margin-top: 2rem;
   align-items: center;
   justify-content: center;
   gap: 1rem;

bellapanghulan_reading/static/stylesheets/form.css

+body {
+    height: 100vh;
+    display: flex;
+    align-items: center;
+    background-color: #E9E3FE;
+}
+
+.form {
+    width: 50%;
+    margin-top: auto;
+    margin-right: auto;
+    margin-left: auto;
+    padding: 2rem;
+    border-radius: 0.5rem;
+    background-color: white;
+}
+
+.form form label {
+    display: inline-block;
+    vertical-align: middle;
+    margin-bottom: 10px;
+    width: 30%;
+    text-align: left;
+    padding-right: 2rem;
+}
+
+form [type="text"],
+form [type="number"],
+form select,
+form textarea {
+    display: inline-block;
+    vertical-align: middle;
+    margin-bottom: 10px;
+    width: 60%;
+    padding: 10px;
+    border-radius: 5px;
+    border: 1px solid #ccc;
+    box-sizing: border-box;
+    margin-bottom: 20px;
+}
+
+input[type="submit"] {
+    display: block;
+    background-color: #7448F6;
+    margin: auto;
+    padding: 0.75rem 1.2rem;
+    border-radius: 0.4rem;
+    cursor: pointer;
+    border: 1px solid #7448F6;
+    transition: all 400ms ease;
+    color: white;
+}
+
+input[type="submit"]:hover {
+    background-color: #E9E3FE;
+    color: #7448F6;
+    border-color: transparent;
+    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
+    transform: translateY(-5px);
+}
+
+
+@media only screen and (max-width: 700px) {
+    form [type="text"],
+    form [type="number"],
+    form select,
+    form textarea {
+        width: 100%;
+    }
+}
\ No newline at end of file

bellapanghulan_reading/static/stylesheets/home.css

@@ -4,7 +4,8 @@ body {
   margin-top: 10%;
   background-image: url('../assets/home.png');
   background-repeat: no-repeat;
-  background-size: cover; 
+  background-size: 120%; 
+  background-position: right top;
 }
 
 header {
@@ -25,6 +26,16 @@ header {
     font-weight: bold;
 }
 
+.links {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+}
+
+.links a {
+  display: block;
+  margin-top: 0.5rem;
+}
+
 @media only screen and (max-width: 1200px) {
   header {
     display: flex;