css from project v2

static/styles/style.css

@@ -1,6 +1,171 @@
-.host_form {
+@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400;500&display=swap');
-  text-align: center;
+
+body {
+	min-height: 100vh;
+    padding: 0;
+    margin: 0;
+    background-color: #17141d;
+    color: white;
+    font-family: 'DM Mono', monospace;
 }
+
+.headings {
+	color: #fdc105;
+	display: flex;
+	justify-content: center;
+}
+
+.input_container {
+	padding: 30px 30px;
+	display: flex;
+	justify-content: center;
+}
+
+.forms_container {
+	display: flex;
+	justify-content: around;
+	align-items: center;
+	flex-direction: column;
+	padding: 75px 250px;
+	color: #fff;
+	background-image: url(/static/background/cool-background-trianglify.png);
+	/* background: linear-gradient(to bottom right, red, yellow); */
+	border: 0;
+	transition: 0.2s;
+	overflow: hidden;
+}
+
+.input_form {
+	padding: 5px 5px;
+	display: flex;
+}
+
 .upload_form {
-  text-align: center;
+	padding: 5px 5px;
+	display: flex;
 }
+
+.btn-warning {
+		position: relative;
+		padding: 11px 16px;
+		font-size: 15px;
+		line-height: 1.5;
+		border-radius: 3px;
+		color: #000000;
+		background-color: #ffc100;
+		border: 0;
+		transition: 0.2s;
+	        opacity: 50;
+		overflow: hidden;
+	}
+
+.btn-warning input[type="file"] {
+	color: transparent;
+		cursor: pointer;
+		position: absolute;
+		left: 0%;
+		top: 0%;
+		transform: scale(3);
+		opacity: 50;
+	        transition: 0.2s;
+	}
+.btn-warning:hover {
+	background-color: #eed519;
+	}
+
+.submit-button {
+		position: relative;
+		padding: 11px 16px;
+		font-size: 15px;
+		line-height: 1.5;
+		border-radius: 3px;
+		color: #000000;
+		background-color: #ffc100;
+		border: 0;
+		transition: 0.2s;
+	        opacity: 50;
+		overflow: hidden;
+}
+
+.submit-button:hover {
+	background-color: #eed519;
+}
+
+.table-container {
+	padding: 50px 50px;
+	border-radius: 3px;
+}
+
+.results-table {
+	padding: 50px 50px;
+	border-radius: 3px;
+}
+
+#myTable {
+	background-color: #fad253;
+  border-collapse: collapse;
+  width: 100%;
+  border: 1px solid #ddd;
+  font-size: 14px;
+}
+
+#myTable th {
+	background-color: #fad253;
+  text-align: left; /* Left-align text */
+  padding: 12px; /* Add padding */
+}
+
+#myTable tr {
+  /* Add a bottom border to all table rows */
+  border-bottom: 1px solid #ddd;
+}
+
+/*#myTable tr.header,*/ #myTable tr:hover {
+  /* Add a grey background color to the table header and on hover */
+  background-color: #ec974f;
+}
+
+#myTable td[colspan] {
+	padding-top: 0; padding-bottom: 0;
+}
+
+#myTable td[colspan] p {
+	padding-top: 12px; padding-bottom: 12px;
+}
+
+/* TEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEST */
+
+
+#data {
+	background-color: #fad253;
+  border-collapse: collapse;
+  width: 100%;
+  border: 1px solid #ddd;
+  font-size: 14px;
+}
+
+#data th {
+	background-color: #fad253;
+  text-align: left; /* Left-align text */
+  padding: 12px; /* Add padding */
+}
+
+#data tr {
+  /* Add a bottom border to all table rows */
+  border-bottom: 1px solid #ddd;
+}
+
+/*#myTable tr.header,*/ #data tr:hover {
+  /* Add a grey background color to the table header and on hover */
+  background-color: #ec974f;
+}
+
+#data td[colspan] {
+	padding-top: 0; padding-bottom: 0;
+}
+
+#data td[colspan] p {
+	padding-top: 12px; padding-bottom: 12px;
+}
+
+