1 files changed, 149 insertions, 46 deletions

diff --git a/src/css/main.css b/src/css/main.css
index 481471b..342901a 100644
--- a/src/css/main.css
+++ b/src/css/main.css
@@ -13,12 +13,15 @@
 
 * {
   font-family: Heroes;
-  font-size: 1em; /* We use browser's default */
+  font-size: 1em;
+  /* We use browser's default */
   margin: 0;
   padding: 0;
 }
 
-html { height: 100% }
+html {
+  height: 100%
+}
 
 body {
   display: flex;
@@ -30,53 +33,82 @@ body {
 /*
  * RESPONSIVE
  */
-.mobile_block, .mobile_inline { display: none }
+.mobile_block,
+.mobile_inline {
+  display: none
+}
 
 @media screen and (max-width: 800px) {
-  body { flex-direction: column }
-  .computer_block { display: none }
-  .mobile_block { display: block }
-  .mobile_inline { display: inline }
-} 
+  body {
+    flex-direction: column
+  }
+
+  .computer_block {
+    display: none
+  }
+
+  .mobile_block {
+    display: block
+  }
+
+  .mobile_inline {
+    display: inline
+  }
+}
 
 /*
  * CORE TEMPLATE
  */
 
 /* Header + Menu */
-body > aside > header {
+body>aside>header {
   color: white;
-  background: rgb(12,144,110);
+  background: rgb(12, 144, 110);
   background: linear-gradient(0deg, rgb(21, 65, 73) 0%, rgb(55, 141, 100) 50%, rgb(12, 144, 110) 100%);
   padding: 1.5rem;
   margin: 0.8rem;
   border-radius: 0.5rem;
-  box-shadow: 0px 0px 30px rgba(31,38,103,0.2);
+  box-shadow: 0px 0px 30px rgba(31, 38, 103, 0.2);
 }
 
-body > aside > header > a > svg { 
-  fill: white; 
+body>aside>header>a>svg {
+  fill: white;
   display: inline;
   vertical-align: sub;
   margin-right: 1em;
 }
 
-body > aside > header > h1 { display: inline }
-body > aside > header a {
+body>aside>header>h1 {
+  display: inline
+}
+
+body>aside>header a {
   color: white;
   text-decoration: none;
 }
 
-body > aside > header > nav ul { 
+body>aside>header>nav ul {
   list-style-type: none;
   padding-left: 1em;
 }
-body > aside > header > nav > ul { padding-left: 0px }
-body > aside > header > nav a:hover { text-decoration: underline }
-body > aside > header > nav .selected { font-weight: bold }
-body > aside > header > nav .selected::before { content: "» " }
 
-body > main {
+body>aside>header>nav>ul {
+  padding-left: 0px
+}
+
+body>aside>header>nav a:hover {
+  text-decoration: underline
+}
+
+body>aside>header>nav .selected {
+  font-weight: bold
+}
+
+body>aside>header>nav .selected::before {
+  content: "» "
+}
+
+body>main {
   padding: 1.5rem;
   max-width: 1200px;
 }
@@ -86,46 +118,99 @@ body > main {
  * TEXT CORE (think markdown)
  */
 
-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 }
-h1, h2, h3, h4, h5, h6 { margin-bottom: 1rem }
-section, p, ul, ol, table, pre { margin-bottom: 1rem }
-ul, ol { padding-left: 1.5em }
-a { color:  rgb(12,144,110)}
-table { border-collapse: collapse }
-th { background-color: #fafafa }
-td, th { 
+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
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin-bottom: 1rem
+}
+
+section,
+p,
+ul,
+ol,
+table,
+pre {
+  margin-bottom: 1rem
+}
+
+ul,
+ol {
+  padding-left: 1.5em
+}
+
+a {
+  color: rgb(12, 144, 110)
+}
+
+table {
+  border-collapse: collapse
+}
+
+th {
+  background-color: #fafafa
+}
+
+td,
+th {
   border: 1px solid #ddd;
   padding: 0.3rem 0.5rem;
 }
+
 pre {
   background-color: #1e1e1e;
   padding: 1rem;
   overflow-x: auto;
 }
+
 code {
   font-family: Monospace;
   background-color: #1e1e1e;
   color: #fff;
   padding: 0.25rem 0.4rem;
 }
-img { 
+
+img {
   border-radius: 0.5rem;
-  box-shadow: 0px 0px 30px rgba(31,38,103,0.2); 
+  box-shadow: 0px 0px 30px rgba(31, 38, 103, 0.2);
   margin: 0.5rem;
 }
+
 img.simple {
   border-radius: 0px;
   box-shadow: none;
   margin: 0px;
 }
+
 strong {
-	background-color: rgb(12, 144, 110);
-	color: #fff;
+  background-color: rgb(12, 144, 110);
+  color: #fff;
   padding: 0.20rem 0.4rem;
 }
 
@@ -134,18 +219,25 @@ strong {
  */
 
 /* float */
-.left { float: left }
-.right { float: right }
-section::after, p::after { 
+.left {
+  float: left
+}
+
+.right {
+  float: right
+}
+
+section::after,
+p::after {
   clear: both;
   display: block;
   content: "";
 }
 
 /* center */
-.center { 
-  margin-left: auto; 
-  margin-right: auto; 
+.center {
+  margin-left: auto;
+  margin-right: auto;
   text-align: center;
 }
 
@@ -180,7 +272,7 @@ input {
   border: 1px solid #ddd;
   border-radius: 0.5rem;
   width: 250px;
-  text-align:center;
+  text-align: center;
   margin: 1em 1em 0em 0em;
   display: block;
 }
@@ -190,7 +282,18 @@ input {
   color: #fff;
 }
 
+.callout {
+  font-size: 1.2rem;
+  text-align: center;
+  position: relative;
+  margin: 2rem 0;
+  padding: 1rem;
+  border: 1px solid rgba(10, 10, 10, 0.25);
+  border-radius: .2rem;
+  background-color: #cbf0e6;
+}
+
 .frame {
   border-left: 1rem solid #ddd;
   padding-left: 1rem;
-}
+}
\ No newline at end of file