style update

projects/style.css

@@ -5,7 +5,7 @@ body {
     flex-direction: column;
     min-height: 100vh;
     margin: 0;
-    font-family: 'Hack', monospace;
+    font-family: monospace;
     font-size: 1rem;
     background-color: #2a2a2a;
     color: #f0f0f0;

style.css

@@ -1,29 +1,21 @@
-@font-face {
-    font-family: 'Hack';
-    src: url(fonts/Hack-Regular.ttf) format('truetype');
-    font-weight: normal;
-    font-style: normal;
-}
+/* Global Styles */
 
 body {
     display: flex;
     justify-content: center;
     align-items: center;
-    height: 100%;
-    min-height: 100%;
-    font-family: monospace;
-    font-size: small;
-    background-color: #2a2a2a;
-    transition: background-color 0.3s, color 0.3s;
-    color: #f0f0f0;
     flex-direction: column;
-    overflow-x: hidden;
+    min-height: 100vh;
     margin: 0;
+    font-family: monospace;
+    font-size: 1rem;
+    background-color: #2a2a2a;
+    color: #f0f0f0;
+    overflow-x: hidden;
 }
 
 html {
     height: 100%;
-    min-height: 100%;
 }
 
 ::selection {
@@ -31,12 +23,7 @@ html {
     color: #2a2a2a;
 }
 
-img {
-    user-select: none;
-    perspective: 1000px;
-    transform-origin: center;
-    transition: transform 0.1s ease;
-}
+/* Topbar Styles */
 
 .topbar {
     display: flex;
@@ -47,7 +34,7 @@ img {
     max-width: 100vw;
     position: fixed;
     background-color: rgba(59, 59, 59, 0.885);
-    backdrop-filter: blur(3px);
+    backdrop-filter: blur(5px);
     font-size: large;
     top: 0;
     border-bottom: 1px solid rgba(70, 70, 70, 0.885);
@@ -55,13 +42,7 @@ img {
     overflow-x: hidden;
 }
 
-.theme-button {
-    cursor: pointer;
-    background: none;
-    border: none;
-    transition: 0.3s;
-    margin-left: 30px;
-}
+/* Welcome Section Styles */
 
 .welcome {
     text-align: center;
@@ -69,8 +50,7 @@ img {
     width: 60vw;
     max-width: 1920px;
     line-height: 1.4;
-    padding-bottom: 25px;
-    padding-top: 60px; 
+    padding-top: 60px;
     box-sizing: border-box;
     overflow-wrap: break-word;
 }
@@ -83,6 +63,8 @@ img {
     margin: 0 0 10px 0;
 }
 
+/* Tools Section Styles */
+
 .tools-main {
     display: flex;
     flex-wrap: wrap;
@@ -90,12 +72,11 @@ img {
     justify-content: center;
     min-height: 10vh;
     max-width: 80vw;
-    margin-bottom: 50px !important;
+    margin-bottom: 100px;
 }
 
 .tool-div {
     bottom: 20px !important;
-    padding: 1vh 3vw;
     background-color: rgba(75, 75, 75, 1);
     border: 2px solid rgba(80, 80, 80, 1);
     border-radius: 7px;
@@ -109,6 +90,8 @@ img {
     max-width: 90vw;
     width: 50vw;
     box-shadow: 0 4px 10px rgba(16, 16, 16, 0.5);
+    scale: 0.79;
+    margin-bottom: -100px;
 }
 
 .tool-header {
@@ -120,7 +103,7 @@ img {
 .tool-desc {
     margin: 5px;
     font-weight: normal;
-    max-width: 60%;
+    max-width: 90%;
 }
 
 .tool-media {
@@ -146,6 +129,8 @@ img {
     border-color: rgb(90, 150, 115);
 }
 
+/* Slideshow Styles */
+
 .slideshow-container {
     position: relative;
     width: 90vw;
@@ -160,3 +145,44 @@ img {
     border-radius: 10px;
     object-fit: contain;
 }
+
+/* Theme Button Styles */
+
+.theme-button {
+    cursor: pointer;
+    background: none;
+    border: none;
+    transition: 0.3s;
+    margin-left: 30px;
+}
+
+/* Media Queries */
+
+@media (max-width: 768px) {
+    .main {
+        width: 95%;
+    }
+
+    h2 {
+        font-size: 1.5rem;
+    }
+
+    .project-div {
+        font-size: 0.9rem;
+    }
+}
+
+@media (max-width: 480px) {
+    body {
+        font-size: 0.9rem;
+    }
+
+    h2 {
+        font-size: 1.2rem;
+    }
+
+    .project-div {
+        padding: 15px;
+        font-size: 0.85rem;
+    }
+}