Starting to get responsive

1 files changed, 23 insertions, 13 deletions

diff --git a/assets/public/css/app.css b/assets/public/css/app.css
index 85d95ac..e23b16e 100644
--- a/assets/public/css/app.css
+++ b/assets/public/css/app.css
@@ -15,18 +15,36 @@ body {
     text-rendering: optimizeLegibility;
 }
 
+h1 {
+    font-size: 35px;
+    font-weight: 400;
+}
+
+p {
+    color: #626262;
+    font-size: 16px;
+    margin-bottom: 30px;
+}
+
 main {
     display: flex;
-    justify-content: space-around;
     align-items: center;
     height: 100%;
-    width: 66%;
     margin: auto;
+    justify-content: space-between;
+    width: 75%;
 }
 
-h1 {
-    font-size: 35px;
-    font-weight: 400;
+@media (max-width: 850px) {
+    main {
+        flex-direction: column;
+        justify-content: flex-start;
+        width: 100%;
+    }
+
+    .left-segment {
+        margin-top: 10rem;
+    }
 }
 
 .left-segment {
@@ -35,13 +53,5 @@ h1 {
 
 .right-segment {
     width: 315px;
-    height: 100%;
-    padding-top: 225px;
     box-sizing: border-box;
 }
-
-p {
-    color: #626262;
-    font-size: 16px;
-    margin-bottom: 30px;
-}