new style

style.css

@@ -1,10 +1,22 @@
-body {
+html {
     font-family: sans-serif;
     font-size: 15pt;
+    background-color:#556;
+background-image: linear-gradient(30deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
+linear-gradient(150deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
+linear-gradient(30deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
+linear-gradient(150deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
+linear-gradient(60deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a), 
+linear-gradient(60deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a);
+background-size:80px 140px;
+background-position: 0 0, 0 0, 40px 70px, 40px 70px, 0 0, 40px 70px;
 }
 
 p {
-    font-family: serif;
+    font-family: sans-serif;
+}
+h1, section {
+    margin: 1em;
 }
 
 body.cfn {
@@ -12,9 +24,6 @@ body.cfn {
     color: white;
 }
 
-p {
-    font-family: serif;
-}
 
 a {
     text-decoration: none;
@@ -53,9 +62,6 @@ hr {
     font-size: 100%;
 }
 
-.logo {
-    float: right;
-}
 
 ul {
     list-style: none;
@@ -88,10 +94,10 @@ pre {
 
 .lang {
     border-radius: 100px;
-    padding: 1% 5% 4% 6%;
-    margin: 0% 110%;
+    margin: -1em 0 0 -1em;
     position: absolute;
     font-family: "Mono";
+    width: 40px;
 }
 
 .lang a:hover {
@@ -100,9 +106,9 @@ pre {
 
 body {
     max-width: 1200px;
-    left: 50%;
-    position: relative;
-    transform: translate(-50%, 0%);
+    padding:1em;
+    background-color:rgba(236,236,236,0.75);
+    font-family: sans-serif;
 }
 
 footer {
@@ -120,7 +126,6 @@ footer {
     display: inline-block;
 }
 
-> > > > > > > 5a9411117cf4b4055f9a81bb4561686b2119b662 
 section > h3 {
     text-align: left;
     margin-right: 2rem;
@@ -129,7 +134,7 @@ section > h3 {
 
 section p:nth-child(2) {
     font-size: large;
-    margin: auto 6rem;
+    margin: auto 3rem;
     text-align: justify;
 }
 
@@ -187,3 +192,14 @@ pre {
     white-space: pre-wrap;
 
 }
+
+/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
+::::::::::::::::::::::media:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
+::::::::::::::::::::::::::::*/
+
+@media (max-width: 400px) { 
+.logo {
+ float:none;
+    max-width: 250px;
+}
+}