made even more responsible

src/styles/global.scss

@@ -15,22 +15,27 @@
 body {
     font-family: system-ui, sans-serif;
     background-color: #0a0a0a;
+    height: 100vh;
+    width: 100vw;
+    margin: 0;
 }
 .page{
-    margin: -10px;
-    width: 100%;
-    height: 100%;
     position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    width: 100%;
     box-shadow:
       inset 60px 0 120px rgba($primary-color, 0.2),
       inset -60px 0 120px rgba($accent-color, 0.07);
 }
 
 .wip-title {
-    margin: 100px;
     font-size: 50px;
     text-align: center;
     color: white;
+    margin-top: 100px;
 }
 
 .text-gradient {
@@ -42,36 +47,39 @@ body {
 }
 
 .card {
-    position: absolute;
     background-color: #1d1d1d;
-    border-style: solid;
     border-color: #2d2d2d;
+    border-style: solid;
     border-width: 1px;
-    color: white;
-    padding: 35px;
-    width: 45%;
-    margin:0;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
     border-radius: 15px;
+    padding: 35px;
+    color: white;
+    width: 35%;
+    margin: auto;
+    margin-top: 7%;
+    display: flex;
+    justify-content: center;
+
     box-shadow: rgba($primary-color, 0.4) 5px 5px, rgba($primary-color, 0.3) 10px 10px, rgba($primary-color, 0.2) 15px 15px, rgba($primary-color, 0.1) 20px 20px, rgba($primary-color, 0.05) 25px 25px;
     a {
         color: #2525ca;
         text-decoration: underline 2px;
+        margin: auto;
+        max-width: 500px;
     }
     p{
         font-size: 20px;
+        margin: auto;
+        max-width: 500px;
     }
 }
 @media (max-width: 800px) {
 	.wip-title{
-        font-size: 30px;
-        margin: 100px;
         margin-top: 50px;
+        font-size: 30px;
     }
     .card {
-        margin-top: 20%;
-	    width: 60%;
+        margin-top: 10%;
+	    width: 65%;
 	}
 }