Styling changes

src/styles/ButtonLink.module.css

@@ -1,17 +1,15 @@
 .button {
-    display: flex;
-    background: var(--secondary);
-    border: 2px solid var(--text-primary);
-    border-radius: 20px;
-    padding: 20px;
-    text-decoration: none;
-    white-space: nowrap;
-    height: 100%;
-    color: var(--text-primary);
-    justify-content: center;
+	display: flex;
+	background: var(--secondary);
+	border-radius: 20px;
+	padding: 20px;
+	text-decoration: none;
+	white-space: nowrap;
+	height: 100%;
+	color: var(--text-primary);
+	justify-content: center;
 }
 
 .button:hover {
-    background: var(--secondary-hover);
-    color: white;
+	background: var(--secondary-hover);
 }

src/styles/Home.css

@@ -1,5 +1,5 @@
 section > :is(h1, h2) {
-	font-size: 2.5em;
+	font-size: 2.5rem;
 	margin: 0;
 	text-align: center;
 	text-transform: uppercase;

src/styles/Layout.css

@@ -4,7 +4,7 @@
 
 	--primary: hsl(211 26% 39%);
 	--secondary: hsl(209 28% 29%);
-	--secondary-hover: hsl(209 28% 19%);
+	--secondary-hover: hsl(209 28% 25%);
 	--text-primary: hsl(0 0% 100%);
 	--secondary-text: hsl(211 26% 39%);
 }
@@ -15,7 +15,6 @@ body {
 	margin: 0;
 	background-attachment: fixed;
 	background-image: url("/images/background.jpg");
-	backdrop-filter: blur(10px);
 	color: var(--text-primary);
 }
 
@@ -27,7 +26,6 @@ body {
 
 svg {
 	vertical-align: middle;
-	font-size: 0.75rem;
 }
 
 img {
@@ -36,20 +34,22 @@ img {
 
 main {
 	display: flex;
-	gap: 2rem;
+	gap: 5rem;
 	flex-direction: column;
 	align-items: center;
-	padding-bottom: 2em;
+	padding-bottom: 10em;
 }
 
 main > section {
-	scroll-margin-top: 8rem;
+	scroll-margin-top: 9rem;
 	display: flex;
 	flex-direction: column;
 	border-radius: 1rem;
 	background: rgba(0 0 0 / 0.3);
 	padding: 2rem;
+	margin: 1rem;
 	width: 90%;
+	min-height: 80vh;
 	transition: scale 0.2s;
 }
 

src/styles/Nav.module.css

@@ -1,7 +1,7 @@
 .nav {
 	padding: 0.5rem;
 	display: flex;
-	font-size: 1.3em;
+	font-size: 1.3rem;
 	overflow-y: auto;
 	font-weight: bold;
 	background: hsl(0 0% 0% / 0.4);

src/styles/Portfolio.module.css

@@ -8,6 +8,11 @@
 
 .portfolioItems a {
 	color: var(--text-primary);
+	transition: scale 0.2s;
+}
+
+.portfolioItems a:not(:hover) {
+	filter: brightness(90%);
 }
 
 .portfolioItems a:not(:hover) {
@@ -37,6 +42,10 @@
 	width: 100%;
 }
 
+.portfolioItems a:hover {
+	scale: 1.1;
+}
+
 .projectName {
 	display: flex;
 	justify-content: center;