Improved design

assets/css/style.css

@@ -15,7 +15,9 @@ body {
     line-height: 1.5;
     font-weight: 400;
     margin: 0;
-    padding: 0;
+    padding-top: 8vh;
+    padding-left: 5rem;
+    padding-right: 5rem;
     min-height: 100vh;
     text-rendering: optimizeLegibility;
     background-color: #e1e0e2;
@@ -41,37 +43,54 @@ body {
     }
 }
 
+.top-border {
+    position: absolute;
+    border-top: 6px solid #1e1f1d;
+    top: 0;
+    right: 0;
+    left: 0;
+}
+
 .top-logo {
     position: absolute;
     top: 0;
-    left: 0;
+    left: 5rem;
-    border: 0;
+    height: 50px;
-    width: 180px;
-    transition: left .1s ease-in-out, opacity .1s ease-in-out;
-    z-index: 999;
-    opacity: .8;
 }
 
-.top-logo:hover {
+.background-logo {
-    opacity: 1;
+    position: absolute;
+    bottom: 0;
+    right: 5rem;
+    height: 500px;
+    opacity: 0.1;
+    z-index: -9999;
+    margin-bottom: 35px;
+    display: none;
+}
+
+main {
+    position: relative;
+}
+
+ul {
+    list-style-type: none;
+    padding: 0px;
+    margin: 0px;
 }
 
 .container {
     display: flex;
     width: 100%;
     margin: auto;
-    padding-left: 16px;
-    padding-right: 16px;
 }
 
-
 .elem {
     padding: 16px;
     box-shadow: 0 1px 2px #00000010, 0 8px 12px #00000020;
     border-radius: 12px;
     overflow: hidden;
     background-color: #d7d7d7;
-    margin-top: 8vh;
 }
 
 .header {
@@ -91,7 +110,6 @@ body {
 .content p {
     hyphens: auto;
     line-height: 1.8;
-    text-justify: ideographic;
     margin-bottom: 1em;
 }
 
@@ -132,6 +150,15 @@ footer a>svg:hover {
 }
 
 @media screen and (max-width:600px) {
+    body {
+        padding-left: 1rem;
+        padding-right: 1rem;
+    }
+
+    .top-logo {
+        left: 1rem;
+    }
+
     .content {
         font-size: 16px;
     }
@@ -159,6 +186,13 @@ footer a>svg:hover {
     }
 }
 
+@media screen and (min-width: 100em) {
+    .background-logo {
+        display: block;
+    }
+
+}
+
 footer {
     padding-top: 16px;
     padding-bottom: 16px;
@@ -193,10 +227,19 @@ footer a {
         color: #e1e0e2;
     }
 
+    .top-border {
+        border-top: 7px solid #e1e0e2;
+
+    }
+
     .top-logo {
         filter: invert(100%);
     }
 
+    .background-logo {
+        filter: invert(100%);
+    }
+
     .logo {
         filter: invert(100%);
     }