survey-form css

diff --git a/css/survey-form.css b/css/survey-form.css
new file mode 100644 (file)
index 0000000..88ec569
--- /dev/null
+++ b/css/survey-form.css
@@ -0,0 +1,103 @@
+*,\r
+::before,\r
+::after {\r
+  box-sizing: border-box;\r
+  margin: 0;\r
+  padding: 0;\r
+}\r
+html {\r
+  font-size: 62.5%;\r
+}\r
+body {\r
+  font-family: "Raleway", sans-serif;\r
+}\r
+main {\r
+  display: flex;\r
+  justify-content: center;\r
+  align-items: center;\r
+  background-color: #22243e;\r
+  height: 100vh;\r
+}\r
+.form-container {\r
+  width: 90%;\r
+  max-width: 45rem;\r
+  height: 80%;\r
+  padding: 4rem 2rem;\r
+  background-color: #e5e5e5;\r
+  border: 0.2rem solid #000;\r
+  border-radius: 1.4rem;\r
+  box-shadow: #000 0.7rem 1rem 0.7rem;\r
+}\r
+.header-container, .footer-container {\r
+  text-align: center;\r
+}\r
+form {\r
+  padding: 1rem 2rem;\r
+}\r
+.form-title {\r
+  font-size: 2.8rem;\r
+  font-family: "DM Sans", sans-serif;\r
+  font-weight: 900;\r
+}\r
+.form-subheading {\r
+  font-size: 1.6rem;\r
+  font-family: "DM Sans", sans-serif;\r
+  font-weight: 600;\r
+}\r
+.italicize {\r
+  font-style: italic;\r
+}\r
+fieldset {\r
+  border: none;\r
+  border-bottom: 0.2rem solid gray;\r
+  padding-bottom: 1.4rem;\r
+  margin-bottom: 1rem;\r
+}\r
+legend, p {\r
+  font-size: 1.4rem;\r
+  margin: 0.7rem;\r
+}\r
+label {\r
+  font-size: 1.4rem;\r
+  display: block;\r
+  margin: 0.7rem auto;\r
+}\r
+input, select, textarea {\r
+  padding: 0.2rem 0.4rem;\r
+  border: 0.1rem solid #000;\r
+  border-radius: 0.3rem;\r
+  background-color: #e5e5e5;\r
+  font-family: "Raleway", sans-serif;\r
+}\r
+input:focus, select:focus, textarea:focus {\r
+  box-shadow: #000 0.1rem 0.1rem;\r
+}\r
+option:checked {\r
+  background-color: #22243e;\r
+  color: #e5e5e5;\r
+}\r
+input[type="radio"], input[type="checkbox"] {\r
+  accent-color: #22243e;\r
+}\r
+textarea {\r
+  width: 100%;\r
+  height: 7rem;\r
+  resize: none;\r
+}\r
+input[type="submit"] {\r
+  font-family: "DM Sans", sans-serif;\r
+  font-weight: 700;\r
+  font-size: 1.8rem;\r
+  padding: 0.4rem 2rem;\r
+  background-color: #22243e;\r
+  color: #e5e5e5;\r
+  cursor: pointer;\r
+}\r
+input[type="submit"]:hover, input[type="submit"]:focus {\r
+  background-color: #e5e5e5;\r
+  color: #000;\r
+  transition: 0.2s;\r
+}\r
+a {\r
+  color: #22243e;\r
+}
\ No newline at end of file