From def09be97af48ed508098dec8348801e7519e314 Mon Sep 17 00:00:00 2001
From: Mukul <mukulprajapati1319@gmail.com>
Date: Mon, 24 Jun 2024 18:47:48 +0530
Subject: [PATCH] more visually appealing css changes

---
 styles.css | 362 ++++++++++++++++++++++++++---------------------------
 1 file changed, 177 insertions(+), 185 deletions(-)

diff --git a/styles.css b/styles.css
index 5c072b7..c2b0aad 100644
--- a/styles.css
+++ b/styles.css
@@ -1,186 +1,178 @@
 @media (prefers-reduced-motion: no-preference) {
-    * {
-      scroll-behavior: smooth;
-    }
-  }
-  
-  body {
-    background: #f5f6f7;
-    color: #1b1b32;
-    font-family: Helvetica;
-    margin: 0;
-  }
-  
-  header {
-    width: 100%;
-    height: 50px;
-    background-color: #1b1b32;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    position: fixed;
-    top: 0;
-  }
-  
-  #logo {
-    width: max(100px, 18vw);
-    background-color: #0a0a23;
-    aspect-ratio: 35 / 4;
-    padding: 0.4rem;
-  }
-  
-  h1 {
-    color: #f1be32;
-    font-size: min(5vw, 1.2em);
-    text-align: center;
-  }
-  
-  nav {
-    width: 50%;
-    max-width: 300px;
-    height: 50px;
-  }
-  
-  nav > ul {
-    display: flex;
-    justify-content: space-evenly;
-    flex-wrap: wrap;
-    align-items: center;
-    padding-inline-start: 0;
-    margin-block: 0;
-    height: 100%;
-  }
-  
-  nav > ul > li {
-    color: #dfdfe2;
-    margin: 0 0.2rem;
-    padding: 0.2rem;
-    display: block;
-  }
-  
-  nav > ul > li:hover {
-    background-color: #dfdfe2;
-    color: #1b1b32;
-    cursor: pointer;
-  }
-  
-  li > a {
-    color: inherit;
-    text-decoration: none;
-  }
-  
-  main {
-    padding-top: 50px;
-  }
-  
-  section {
-    width: 80%;
-    margin: 0 auto 10px auto;
-    max-width: 600px;
-  }
-  
-  h1,
-  h2 {
-    font-family: Verdana, Tahoma;
-  }
-  
-  h2 {
-    border-bottom: 4px solid #dfdfe2;
-    margin-top: 0px;
-    padding-top: 60px;
-  }
-  
-  .info {
-    padding: 10px 0 0 5px;
-  }
-  
-  .formrow {
-    margin-top: 30px;
-    padding: 0px 15px;
-  }
-  
-  input {
-    font-size: 16px;
-  }
-  
-  .info label, .info input {
-    display: inline-block;
-  }
-  
-  .info input {
-    width: 50%;
-    text-align: left;
-  }
-  
-  .info label {
-    width: 10%;
-    min-width: 55px;
-    text-align: right;
-  }
-  
-  .question-block {
-    text-align: left;
-    display: block;
-    width: 100%;
-    margin-top: 20px;
-    padding-top: 5px;
-  }
-  
-  p {
-    margin-top: 5px;
-    padding-left: 15px;
-    font-size: 20px;
-  }
-  
-  p::before {
-    content: "Question #";
-  }
-  
-  .question {
-    border: none;
-    padding-bottom: 0;
-  }
-  
-  .answers-list {
-    list-style: none;
-    padding: 0;
-  }
-  
-  button {
-    display: block;
-    margin: 40px auto;
-    width: 40%;
-    padding: 15px;
-    font-size: 23px;
-    background: #d0d0d5;
-    border: 3px solid #3b3b4f;
-  }
-  
-  footer {
-    background-color: #2a2a40;
-    display: flex;
-    justify-content: center;
-  }
-  
-  footer,
-  footer a {
-    color: #dfdfe2;
-  }
-  
-  address {
-    text-align: center;
-    padding: 0.3em;
-  }
-  
-  .sr-only {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    white-space: nowrap;
-    border: 0;
-  }
-  
\ No newline at end of file
+  * {
+    scroll-behavior: smooth;
+  }
+}
+
+body {
+  background: #f5f6f7;
+  color: #1b1b32;
+  font-family: Helvetica, Arial, sans-serif;
+  margin: 0;
+}
+
+header {
+  width: 100%;
+  height: 70px;
+  background-color: #1b1b32;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 20px;
+  position: fixed;
+  top: 0;
+  z-index: 1000;
+}
+
+#logo {
+  width: max(100px, 18vw);
+  background-color: #0a0a23;
+  aspect-ratio: 35 / 4;
+  padding: 0.4rem;
+}
+
+h1 {
+  color: #f1be32;
+  font-size: min(5vw, 1.5em);
+  text-align: center;
+  margin: 0;
+}
+
+nav {
+  width: 50%;
+  max-width: 300px;
+  height: 50px;
+}
+
+nav > ul {
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
+  padding-inline-start: 0;
+  margin-block: 0;
+  height: 100%;
+  list-style: none;
+}
+
+nav > ul > li {
+  color: #dfdfe2;
+  margin: 0 0.2rem;
+  padding: 0.2rem;
+}
+
+nav > ul > li:hover {
+  background-color: #dfdfe2;
+  color: #1b1b32;
+  cursor: pointer;
+}
+
+li > a {
+  color: inherit;
+  text-decoration: none;
+}
+
+main {
+  padding-top: 80px;
+}
+
+section {
+  width: 90%;
+  margin: 20px auto;
+  max-width: 600px;
+  background-color: #ffffff;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  border-radius: 8px;
+  padding: 20px;
+}
+
+h2 {
+  font-family: Verdana, Tahoma, sans-serif;
+  font-size: 1.5em;
+  border-bottom: 4px solid #dfdfe2;
+  margin-top: 0;
+  padding-top: 20px;
+}
+
+.info, .formrow {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin-bottom: 20px;
+}
+
+label {
+  font-size: 1em;
+  color: #333;
+}
+
+input, select, textarea {
+  font-size: 16px;
+  padding: 10px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+input[type="radio"] {
+  width: auto;
+  margin-right: 10px;
+}
+
+.question-block {
+  margin-top: 20px;
+}
+
+.answers-list {
+  list-style: none;
+  padding: 0;
+}
+
+.answers-list li {
+  margin-bottom: 10px;
+}
+
+button {
+  display: block;
+  margin: 40px auto;
+  width: 50%;
+  padding: 15px;
+  font-size: 18px;
+  background: #1b1b32;
+  color: #fff;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+button:hover {
+  background: #333;
+}
+
+footer {
+  background-color: #2a2a40;
+  display: flex;
+  justify-content: center;
+  padding: 10px 0;
+}
+
+footer, footer a {
+  color: #dfdfe2;
+}
+
+address {
+  text-align: center;
+  padding: 0.3em;
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}