fix: Responsivity for non 1080p displays

index.html

@@ -27,7 +27,8 @@ <h3>
 			Passionate about
 		</h3>
 		<ul>
-			<li>Learning and tinkering with computers and electronics</li>
+			<li>Tinkering with Electronics</li>
+			<li>Tinkering with Computers</li>
 			<li>Operating Systems</li>
 			<li>Computer Architecture</li>
 			<li>Graphics Programming</li>
@@ -51,9 +52,13 @@ <h3>
 			Experience
 		</h3>
 		<ul>
-			<li>  Server admin / Backend Developer for Techfest 23</li>
-			<li>  Server admin / Backend Developer for Techfest 24</li>
-			<li>  App Dev / Electronics / Website Dev for CycleOne</li>
+			<li>  Server admin Techfest 23</li>
+			<li>  Backend Developer Techfest 23</li>
+			<li>  Server admin Techfest 24</li>
+			<li>  Backend Developer Techfest 24</li>
+			<li>  App Dev for CycleOne </li>
+			<li>  Electronics for CycleOne </li>
+			<li>  Website for CycleOne </li>
 
 		</ul>
 	</div>

styles.css

@@ -155,14 +155,9 @@ body>div {
 	border-radius: 10px;
 	padding: 10px;
 	width: 95%;
-	overflow: scroll;
-	scrollbar-width: thin;
-	scrollbar-color: var(--bg-complementary);
 	background: radial-gradient(circle, var(--bg-square-edge-color) 0%,
 			var(--bg-square-edge-color) 25%,
-			transparent 100%),
-
-	;
+			transparent 100%);
 	transition: background-color 0.7s, transform 0.1s, box-shadow 0.3s;
 }
 
@@ -215,7 +210,7 @@ body>div:hover::after {
 	width: 98%;
 }
 
-@media screen and (max-width: 600px) {
+@media screen and (max-width: 768px) {
 	body {
 		grid-template-columns: auto;
 	}
@@ -247,46 +242,48 @@ body>div:hover::after {
 
 }
 
-@media only screen and (max-width: 600px) {
-	#profileInfo_links {
-		font-size: 0.8em;
-	}
+@media only screen and (max-width: 992px) {
 
 	body {
 		grid-template-columns: auto;
 	}
 
+	:root {
+		font-size: 0.8em;
+	}
+
+
 }
 
-@media only screen and (max-width: 768px) {
+@media only screen and (min-width: 992px) {
+
+	body {
+		grid-template-columns: auto auto;
 
-	#profileInfo_links {
-		font-size: 0.8em;
 	}
 
+}
+@media only screen and (min-width: 1200px) {
+
 	body {
-		grid-template-columns: auto;
+		grid-template-columns: auto auto;
+
 	}
 
 }
-
-@media only screen and (max-width: 992px) {
+@media only screen and (min-width: 1800px) {
 
 	body {
-		grid-template-columns: auto;
-	}
+		grid-template-columns: auto auto auto;
 
-	:root {
-		font-size: 0.8em;
 	}
 
-
 }
-
-@media only screen and (min-width: 992px) {
+@media only screen and (min-width: 2500px) {
 
 	body {
-		grid-template-columns: auto auto;
+		grid-template-columns: auto auto auto auto;
+		font-size: 1.5em;
 
 	}