From 30ccba7834de117602c9e3cd130425514aff4cb7 Mon Sep 17 00:00:00 2001
From: Albert Wang <alberw5@uci.edu>
Date: Tue, 2 Apr 2024 17:23:05 -0700
Subject: [PATCH] small css fixes

---
 src/app/(main)/(home)/Home.scss |  6 +++
 src/app/globals.css             | 84 ++++++++++++++++++---------------
 2 files changed, 51 insertions(+), 39 deletions(-)

diff --git a/src/app/(main)/(home)/Home.scss b/src/app/(main)/(home)/Home.scss
index 25eb5d6..b5506a9 100644
--- a/src/app/(main)/(home)/Home.scss
+++ b/src/app/(main)/(home)/Home.scss
@@ -170,6 +170,7 @@ body {
 
 		#hero-right {
 			width: 48%;
+			margin-bottom: 20px;
 
 			@media screen and (max-width: $break-medium) {
 				width: initial;
@@ -233,6 +234,11 @@ body {
 				@media screen and (max-width: $break-medium) {
 					font-size: 16px;
 				}
+
+				@media screen and (max-width: $break-small) {
+					margin-right: 2px;
+					margin-left: 2px;
+				}
 			}
 
 			.venus-btn:hover {
diff --git a/src/app/globals.css b/src/app/globals.css
index ffbbed5..65a2214 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -4,78 +4,84 @@
 
 /* VH 2024 Colors */
 :root {
-  --color-background-upper-gradient: #322660;
-  --color-background-lower-gradient: #070024;
-  --color-vh-primary: #ffc999;
-  --color-vh-secondary: #ee99a0;
-  --color-vh-tertiary: #a8acf9;
-  --color-light-gray: #e8e8e8;
-  --color-pink: #ffc3ff;
-  --color-purple: #ccbbff;
-  --color-dark-blue: #a8abf2;
-  --color-blue: #afd6fa;
+	--color-background-upper-gradient: #322660;
+	--color-background-lower-gradient: #070024;
+	--color-vh-primary: #ffc999;
+	--color-vh-secondary: #ee99a0;
+	--color-vh-tertiary: #a8acf9;
+	--color-light-gray: #e8e8e8;
+	--color-pink: #ffc3ff;
+	--color-purple: #ccbbff;
+	--color-dark-blue: #a8abf2;
+	--color-blue: #afd6fa;
 }
 
 body {
-  min-height: 100vh;
-  width: 100vw;
-  margin: 0;
-  overflow-y: auto;
-  color: #fff;
-  background-image: linear-gradient(var(--color-vh-tertiary), var(--color-vh-primary));
+	min-height: 100vh;
+	width: 100vw;
+	margin: 0;
+	overflow-y: auto;
+	color: #fff;
+	background-image: linear-gradient(
+		to bottom,
+		var(--color-vh-tertiary),
+		var(--color-vh-primary)
+	);
+	background-size: cover;
+	background-repeat: no-repeat;
 }
 
 /* Legacy VH styles */
 
 button {
-  border-radius: 50px;
+	border-radius: 50px;
 }
 
 p {
-  margin-top: 0;
-  margin-bottom: 1rem;
-  font-size: 20px;
+	margin-top: 0;
+	margin-bottom: 1rem;
+	font-size: 20px;
 }
 
 hr {
-  margin: 1rem 0;
-  color: inherit;
-  border: 0;
-  border-top: 1px solid;
-  opacity: 0.25;
+	margin: 1rem 0;
+	color: inherit;
+	border: 0;
+	border-top: 1px solid;
+	opacity: 0.25;
 }
 
 h4 {
-  font-size: 30px;
-  margin-bottom: 0.5em;
+	font-size: 30px;
+	margin-bottom: 0.5em;
 }
 
 h3 {
-  font-size: 40px;
-  margin-bottom: 0.5em;
+	font-size: 40px;
+	margin-bottom: 0.5em;
 }
 
 h2 {
-  font-size: 60px;
-  margin-bottom: 0.5em;
+	font-size: 60px;
+	margin-bottom: 0.5em;
 }
 
 h1 {
-  font-size: 80px;
-  margin-bottom: 0.3em;
+	font-size: 80px;
+	margin-bottom: 0.3em;
 }
 
 button {
-  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
+	box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
 }
 
 a {
-  color: var(--color-pink);
-  font-weight: 500;
-  text-decoration: underline;
-  transition: 0.3s;
+	color: var(--color-pink);
+	font-weight: 500;
+	text-decoration: underline;
+	transition: 0.3s;
 }
 
 a:hover {
-  color: var(--color-purple);
+	color: var(--color-purple);
 }