1 files changed, 84 insertions, 84 deletions
diff --git a/src/css/main.css b/src/css/main.css
index f2cbe75..372bbc2 100644
--- a/src/css/main.css
+++ b/src/css/main.css
@@ -1,118 +1,100 @@
+/*
+ * FONTS
+ */
+
 @font-face {
   font-family: "Heroes";
   src: url('../fonts/texgyreheros-regular.otf') format('truetype');
 }
+
+/*
+ * RESET CSS
+ */
+
 * {
   font-family: Heroes;
-  font-size: 1em;
+  font-size: 1em; /* We use browser's default */
   margin: 0;
   padding: 0;
 }
 
-body {
-    margin-bottom: 42px;
-}
-
-header {
-  background-color: #519c60;
-  color: #ffffff;
-  padding: 30px 0px 1px 0px;
-}
+html { height: 100% }
 
-h1 {
-  font-size: 5em;
-}
-
-h2 {
-  font-size: 3em;
-}
-h3 {
-    font-size: 1.6em;
-}
-h4 {
-    font-size: 1.3em;
-}
-
-p {
-  font-size: 1.2em;
-  margin-top: 0.5em;
-  margin-bottom: 0.5em;
-}
-
-ul {
-    margin-left: 42px;
+body {
+  display: flex;
+  min-height: 100%;
+  flex-direction: row;
 }
 
-li {
-    padding-top: 4px;
-    padding-bottom: 4px;
-}
+/*
+ * RESPONSIVE
+ */
+.mobile_block, .mobile_inline { display: none }
 
-nav {
-    float: right;
-}
-
-.spacing {
-  margin-top: 1em;
-}
-.spacing2 {
-  margin-top: 3em;
-}
+@media screen and (max-width: 640px) {
+  body { flex-direction: column }
+  .computer_block { display: none }
+  .mobile_block { display: block }
+  .mobile_inline { display: inline }
+} 
 
-header > .container > h1 {
-  margin: 10px 0px -27px 0px;
-}
+/*
+ * CORE TEMPLATE
+ */
 
-header > .container > .menu-item {
-  float: right;
+/* Header + Menu */
+body > header {
+  color: white;
+  background-color: #519c60;
+  padding: 1.5rem;
 }
 
-header > .container > .menu-item > img {
-  vertical-align: -9px;
+body > header > a > svg { 
+  fill: white; 
+  display: inline;
+  vertical-align: sub;
+  margin-right: 1em;
 }
 
-header > .container > .menu-item > a, header > .container > .menu-item > span {
-  font-size: 30px;
+body > header > h1 { display: inline }
+body > header a {
   color: white;
   text-decoration: none;
 }
 
-.container {
-  padding: 0px 40px 0px 40px;
+body > main {
+  padding: 1.5rem;
+  max-width: 1200px;
 }
 
-.chapeau {
-  font-size: 1.8em;
-  font-weight: bold; 
-  line-height: 1.2;
-}
+/*
+ * TEXT CORE (think markdown)
+ */
 
-.service-box {
-  color: #000;
-  text-decoration: none;
-  border: 0.2em solid #000;
-  width: 250px;
-  text-align:center;
-  margin-right: 1em;
-  float: left;
-}
-
-.service-box:hover {
-  background-color: #000;
-  color: #fff;
-}
+h1 { font-size: 2.5rem }
+h2 { font-size: 2.0rem }
+h3 { font-size: 1.75rem }
+h4 { font-size: 1.50rem }
+h5 { font-size: 1.25rem }
+h6 { font-size: 1.10rem }
+section, p { margin-bottom: 1rem }
 
-.service-box h3 {
-    font-size: 1.15em;
-}
+/*
+ * UTILS
+ */
 
-.list > br {
-  clear: left;
+/* float */
+.left { float: left }
+.right { float: right }
+section::after, p::after { 
+  clear: both;
+  display: block;
+  content: "";
 }
 
-.center {
-    text-align: center;
-}
+/*
+ * ELEMENTS
+ */
 
 input {
   border: 0.1em black solid;
@@ -132,3 +114,21 @@ input {
   margin: 0em 0em 0em 1em;
   text-decoration: none;
 }
+
+/* service button */
+
+.service-box {
+  color: #000;
+  text-decoration: none;
+  border: 0.2em solid #000;
+  width: 250px;
+  text-align:center;
+  margin: 1em 1em 0em 0em;
+  display: block;
+}
+
+.service-box:hover {
+  background-color: #000;
+  color: #fff;
+}
+