add some responsive shit

html/styles/introduction.css

@@ -3,7 +3,7 @@
     align-items: center;
     justify-content: center;
 
-    width: 40%;
+    width: 45%;
     height: 100%;
 }
 
@@ -26,8 +26,6 @@
     margin-top: 10px;
 }
 
-
-
 .introduction-header
 {
     display: flex;
@@ -57,15 +55,12 @@
 .introduction-text {
     font-size: 1.1rem;
     line-height: 1.25rem;
-
 }
 
-.greetings
-{
-    font-size: 3.5rem;
+.introduction-text > section {
+    margin-top: 2rem;
 }
 
-
 .typer::after {
     content: '|';
     animation: blink 800ms infinite;
@@ -77,7 +72,8 @@
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    width: 60%;
+    width: 55%;
+    padding: 25px;
 }
 
 .punched-card
@@ -98,11 +94,15 @@
 {
     display: flex;
     flex-direction: row;
-    justify-content: start;
-    gap: 15px;
+    justify-content: center;
+
+    width: 100%;
     min-width: 375px;
-    overflow: scroll;
     padding: 20px;
+    gap: 15px;
+
+    overflow: scroll;
+
 }
 
 .card {

html/styles/mobile.css

@@ -1,8 +1,11 @@
-@media (max-width: 801px) {
+@media (max-width: 860px) {
     .container {
         flex-direction: column;
         justify-content: center;
         align-items: center;
+        height: auto;
+        width: 100%;
+        gap: 20px;
     }
 
     .introduction
@@ -15,4 +18,14 @@
         height: 100%;
     }
 
+    .projects
+    {
+        width: 100%;
+        height: 100%;
+    }
+
+    .card-list
+    {
+        justify-content: space-evenly;
+    }
 }

html/styles/style.css

@@ -8,7 +8,6 @@
 
 * {
     font-family: 'Roboto', 'PT sans', sans-serif;
-
     box-sizing: border-box;
     color: #333;
 }
@@ -62,6 +61,12 @@ a {
     text-decoration: none;
 }
 
+.logo
+{
+    width: 25px;
+    height: 25px;
+}
+
 .accentuated {
     color: var(--primary-color);
 }