diff --git a/dist/2d47c8cd43d85995abf14afd917c8434.js b/dist/2d47c8cd43d85995abf14afd917c8434.js
new file mode 100644
index 0000000..acf117c
--- /dev/null
+++ b/dist/2d47c8cd43d85995abf14afd917c8434.js
@@ -0,0 +1,207 @@
+// modules are defined as an array
+// [ module function, map of requires ]
+//
+// map of requires is short require name -> numeric require
+//
+// anything defined in a previous bundle is accessed via the
+// orig method which is the require for previous bundles
+
+require = (function (modules, cache, entry) {
+  // Save the require from previous bundle to this closure if any
+  var previousRequire = typeof require === "function" && require;
+
+  function newRequire(name, jumped) {
+    if (!cache[name]) {
+      if (!modules[name]) {
+        // if we cannot find the module within our internal map or
+        // cache jump to the current global require ie. the last bundle
+        // that was added to the page.
+        var currentRequire = typeof require === "function" && require;
+        if (!jumped && currentRequire) {
+          return currentRequire(name, true);
+        }
+
+        // If there are other bundles on this page the require from the
+        // previous one is saved to 'previousRequire'. Repeat this as
+        // many times as there are bundles until the module is found or
+        // we exhaust the require chain.
+        if (previousRequire) {
+          return previousRequire(name, true);
+        }
+
+        var err = new Error('Cannot find module \'' + name + '\'');
+        err.code = 'MODULE_NOT_FOUND';
+        throw err;
+      }
+      
+      localRequire.resolve = resolve;
+
+      var module = cache[name] = new newRequire.Module;
+
+      modules[name][0].call(module.exports, localRequire, module, module.exports);
+    }
+
+    return cache[name].exports;
+
+    function localRequire(x){
+      return newRequire(localRequire.resolve(x));
+    }
+
+    function resolve(x){
+      return modules[name][1][x] || x;
+    }
+  }
+
+  function Module() {
+    this.bundle = newRequire;
+    this.exports = {};
+  }
+
+  newRequire.Module = Module;
+  newRequire.modules = modules;
+  newRequire.cache = cache;
+  newRequire.parent = previousRequire;
+
+  for (var i = 0; i < entry.length; i++) {
+    newRequire(entry[i]);
+  }
+
+  // Override the current require with this new one
+  return newRequire;
+})({7:[function(require,module,exports) {
+var code = document.querySelectorAll("code");
+
+code.forEach(c => {
+    let code = c.innerHTML.toString();
+    var output = "";
+    for(let i = 0; i < code.length; i++){
+        switch(code.charAt(i)){
+            default: output += code.charAt(i); break;
+            case ">": output += "&gt;"; break;
+            case "<": output += "&lt;"; break;
+            case "&": output += "&amp;"; break;
+            case "\"": output += "&quot;"; break;
+        }
+    }
+    c.innerHTML = output;
+})
+},{}],0:[function(require,module,exports) {
+var global = (1, eval)('this');
+var OldModule = module.bundle.Module;
+function Module() {
+  OldModule.call(this);
+  this.hot = {
+    accept: function (fn) {
+      this._acceptCallback = fn || function () {};
+    },
+    dispose: function (fn) {
+      this._disposeCallback = fn;
+    }
+  };
+}
+
+module.bundle.Module = Module;
+
+if (!module.bundle.parent && typeof WebSocket !== 'undefined') {
+  var ws = new WebSocket('ws://localhost:54707/');
+  ws.onmessage = function(event) {
+    var data = JSON.parse(event.data);
+
+    if (data.type === 'update') {
+      data.assets.forEach(function (asset) {
+        hmrApply(global.require, asset);
+      });
+
+      data.assets.forEach(function (asset) {
+        if (!asset.isNew) {
+          hmrAccept(global.require, asset.id);
+        }
+      });
+    }
+
+    if (data.type === 'reload') {
+      ws.close();
+      ws.onclose = function () {
+        window.location.reload();
+      }
+    }
+
+    if (data.type === 'error-resolved') {
+      console.log('[parcel] ✨ Error resolved');
+    }
+
+    if (data.type === 'error') {
+      console.error('[parcel] 🚨  ' + data.error.message + '\n' + 'data.error.stack');
+    }
+  };
+}
+
+function getParents(bundle, id) {
+  var modules = bundle.modules;
+  if (!modules) {
+    return [];
+  }
+
+  var parents = [];
+  var k, d, dep;
+
+  for (k in modules) {
+    for (d in modules[k][1]) {
+      dep = modules[k][1][d];
+      if (dep === id || (Array.isArray(dep) && dep[dep.length - 1] === id)) {
+        parents.push(+k);
+      }
+    }
+  }
+
+  if (bundle.parent) {
+    parents = parents.concat(getParents(bundle.parent, id));
+  }
+
+  return parents;
+}
+
+function hmrApply(bundle, asset) {
+  var modules = bundle.modules;
+  if (!modules) {
+    return;
+  }
+
+  if (modules[asset.id] || !bundle.parent) {
+    var fn = new Function('require', 'module', 'exports', asset.generated.js);
+    asset.isNew = !modules[asset.id];
+    modules[asset.id] = [fn, asset.deps];
+  } else if (bundle.parent) {
+    hmrApply(bundle.parent, asset);
+  }
+}
+
+function hmrAccept(bundle, id) {
+  var modules = bundle.modules;
+  if (!modules) {
+    return;
+  }
+
+  if (!modules[id] && bundle.parent) {
+    return hmrAccept(bundle.parent, id);
+  }
+
+  var cached = bundle.cache[id];
+  if (cached && cached.hot._disposeCallback) {
+    cached.hot._disposeCallback();
+  }
+
+  delete bundle.cache[id];
+  bundle(id);
+
+  cached = bundle.cache[id];
+  if (cached && cached.hot && cached.hot._acceptCallback) {
+    cached.hot._acceptCallback();
+    return true;
+  }
+
+  return getParents(global.require, id).some(function (id) {
+    return hmrAccept(global.require, id)
+  });
+}
+},{}]},{},[0,7])
\ No newline at end of file
diff --git a/dist/9fe7b1b7e5e98c2e3a4ea4f053439023.css b/dist/9fe7b1b7e5e98c2e3a4ea4f053439023.css
new file mode 100644
index 0000000..14ec7d0
--- /dev/null
+++ b/dist/9fe7b1b7e5e98c2e3a4ea4f053439023.css
@@ -0,0 +1,351 @@
+* {
+  box-sizing: border-box; }
+
+pre {
+  border: 1px solid black; }
+
+body {
+  margin: 0;
+  padding: 0;
+  background: #f8f8f8;
+  font-family: sans-serifs; }
+
+main {
+  z-index: 980;
+  position: relative;
+  top: 5.5em;
+  width: 100%;
+  word-break: break-all; }
+
+h1 {
+  margin: 0; }
+
+h2 {
+  margin: 0; }
+
+h3 {
+  margin: 0; }
+
+h4 {
+  margin: 0; }
+
+h5 {
+  margin: 0; }
+
+h6 {
+  margin: 0; }
+
+h7 {
+  margin: 0; }
+
+h8 {
+  margin: 0; }
+
+h9 {
+  margin: 0; }
+
+h10 {
+  margin: 0; }
+
+h11 {
+  margin: 0; }
+
+h12 {
+  margin: 0; }
+
+.dev {
+  border: 1px solid black; }
+
+.display {
+  background-color: lightcoral;
+  border: 1px solid red;
+  text-align: center; }
+
+.container {
+  width: calc( 100% - 10em);
+  max-width: 90em;
+  margin: 0 auto; }
+
+.alert-primary {
+  border-radius: 2px;
+  background-color: #3498db;
+  border: 1px solid #2980b9;
+  padding: 1rem;
+  color: white; }
+
+.alert-danger {
+  border-radius: 2px;
+  background-color: #e74c3c;
+  border: 1px solid #c0392b;
+  padding: 1rem;
+  color: white; }
+
+.alert-warning {
+  border-radius: 2px;
+  background-color: #f1c40f;
+  border: 1px solid #f39c12;
+  padding: 1rem;
+  color: white; }
+
+.alert-success {
+  border-radius: 2px;
+  background-color: #2ecc71;
+  border: 1px solid #27ae60;
+  padding: 1rem;
+  color: white; }
+
+.notification-primary {
+  width: 100%;
+  display: flex;
+  padding: 5px;
+  border: 2px solid #3498db;
+  border-radius: 2px; }
+
+.notification-primary h2 {
+  border-right: 0.3rem solid #3498db;
+  padding: 5px;
+  margin-right: 5px;
+  min-width: 70px;
+  height: auto;
+  display: flex; }
+
+.notification-danger {
+  width: 100%;
+  display: flex;
+  padding: 5px;
+  border: 2px solid #e74c3c;
+  border-radius: 2px; }
+
+.notification-danger h2 {
+  border-right: 0.3rem solid #e74c3c;
+  padding: 5px;
+  margin-right: 5px;
+  min-width: 70px;
+  height: auto;
+  display: flex; }
+
+.notification-warning {
+  width: 100%;
+  display: flex;
+  padding: 5px;
+  border: 2px solid #f1c40f;
+  border-radius: 2px; }
+
+.notification-warning h2 {
+  border-right: 0.3rem solid #f1c40f;
+  padding: 5px;
+  margin-right: 5px;
+  min-width: 70px;
+  height: auto;
+  display: flex; }
+
+.notification-success {
+  width: 100%;
+  display: flex;
+  padding: 5px;
+  border: 2px solid #2ecc71;
+  border-radius: 2px; }
+
+.notification-success h2 {
+  border-right: 0.3rem solid #2ecc71;
+  padding: 5px;
+  margin-right: 5px;
+  min-width: 70px;
+  height: auto;
+  display: flex; }
+
+.notification-body {
+  line-height: 30pt;
+  font-size: 15pt;
+  word-wrap: break-word; }
+
+div[class^="col-"] {
+  padding: 1rem 0; }
+
+.row {
+  display: flex;
+  flex-wrap: wrap; }
+
+.col-1 {
+  flex: 0 0 8.33333%; }
+
+.col-offset-1 {
+  margin-left: 8.33333%; }
+
+.col-2 {
+  flex: 0 0 16.66667%; }
+
+.col-offset-2 {
+  margin-left: 16.66667%; }
+
+.col-3 {
+  flex: 0 0 25%; }
+
+.col-offset-3 {
+  margin-left: 25%; }
+
+.col-4 {
+  flex: 0 0 33.33333%; }
+
+.col-offset-4 {
+  margin-left: 33.33333%; }
+
+.col-5 {
+  flex: 0 0 41.66667%; }
+
+.col-offset-5 {
+  margin-left: 41.66667%; }
+
+.col-6 {
+  flex: 0 0 50%; }
+
+.col-offset-6 {
+  margin-left: 50%; }
+
+.col-7 {
+  flex: 0 0 58.33333%; }
+
+.col-offset-7 {
+  margin-left: 58.33333%; }
+
+.col-8 {
+  flex: 0 0 66.66667%; }
+
+.col-offset-8 {
+  margin-left: 66.66667%; }
+
+.col-9 {
+  flex: 0 0 75%; }
+
+.col-offset-9 {
+  margin-left: 75%; }
+
+.col-10 {
+  flex: 0 0 83.33333%; }
+
+.col-offset-10 {
+  margin-left: 83.33333%; }
+
+.col-11 {
+  flex: 0 0 91.66667%; }
+
+.col-offset-11 {
+  margin-left: 91.66667%; }
+
+.col-12 {
+  flex: 0 0 100%; }
+
+.col-offset-12 {
+  margin-left: 100%; }
+
+header {
+  background: #f1f1f1;
+  text-align: center;
+  position: fixed;
+  height: 30px;
+  z-index: 999;
+  width: 100%;
+  height: auto;
+  top: 0;
+  padding: 10px; }
+
+.nav-toggle {
+  display: none; }
+
+.nav-toggle-label {
+  position: absolute;
+  top: 0;
+  left: 0;
+  margin-left: 1em;
+  height: 100%;
+  display: flex;
+  align-items: center; }
+
+.nav-toggle-label span,
+.nav-toggle-label span::before,
+.nav-toggle-label span::after {
+  display: block;
+  background: white;
+  height: 2px;
+  width: 2em;
+  border-radius: 2px; }
+
+.nav-toggle-label span::before,
+.nav-toggle-label span::after {
+  content: '';
+  position: absolute; }
+
+.nav-toggle-label span::before {
+  bottom: 30px; }
+
+.nav-toggle-label span::after {
+  top: 30px; }
+
+nav {
+  position: absolute;
+  text-align: left;
+  top: 100%;
+  width: 100%;
+  left: 0;
+  background: #f1f1f1;
+  display: none;
+  transform: scale(1, 0);
+  transform-origin: top;
+  transition: transform 400ms ease-in-out; }
+
+nav ul {
+  margin: 0;
+  padding: 0;
+  list-style-type: none; }
+
+nav li {
+  margin-bottom: 1em;
+  margin-left: 1em; }
+
+nav a {
+  text-decoration: none;
+  font-size: 1.2rem;
+  text-transform: uppercase;
+  color: #2e2e2e;
+  opacity: 0; }
+
+nav a:hover {
+  color: #a5a5a5; }
+
+.nav-toggle:checked ~ nav {
+  display: block;
+  transform: scale(1, 1); }
+
+.nav-toggle:checked ~ nav a {
+  opacity: 1;
+  transition: opacity 150ms ease-in-out; }
+
+@media screen and (min-width: 800px) {
+  .nav-toggle-label {
+    display: none; }
+  header {
+    display: grid;
+    grid-template-columns: 1fr auto minmax(600px, 1fr) 1fr; }
+  nav {
+    all: unset;
+    display: flex;
+    align-items: center; }
+  nav a {
+    opacity: 1; }
+  nav ul {
+    display: flex; }
+  nav li {
+    margin-left: 1em;
+    margin-bottom: 0;
+    list-style: none; }
+  .nav-logo-left {
+    grid-column: 2 / span 1; }
+  .nav-left {
+    all: unset;
+    grid-column: 3 / 4;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center; }
+  .nav-left ul {
+    display: flex;
+    justify-content: flex-end; } }
diff --git a/dist/9fe7b1b7e5e98c2e3a4ea4f053439023.js b/dist/9fe7b1b7e5e98c2e3a4ea4f053439023.js
new file mode 100644
index 0000000..977cbaf
--- /dev/null
+++ b/dist/9fe7b1b7e5e98c2e3a4ea4f053439023.js
@@ -0,0 +1,253 @@
+// modules are defined as an array
+// [ module function, map of requires ]
+//
+// map of requires is short require name -> numeric require
+//
+// anything defined in a previous bundle is accessed via the
+// orig method which is the require for previous bundles
+
+require = (function (modules, cache, entry) {
+  // Save the require from previous bundle to this closure if any
+  var previousRequire = typeof require === "function" && require;
+
+  function newRequire(name, jumped) {
+    if (!cache[name]) {
+      if (!modules[name]) {
+        // if we cannot find the module within our internal map or
+        // cache jump to the current global require ie. the last bundle
+        // that was added to the page.
+        var currentRequire = typeof require === "function" && require;
+        if (!jumped && currentRequire) {
+          return currentRequire(name, true);
+        }
+
+        // If there are other bundles on this page the require from the
+        // previous one is saved to 'previousRequire'. Repeat this as
+        // many times as there are bundles until the module is found or
+        // we exhaust the require chain.
+        if (previousRequire) {
+          return previousRequire(name, true);
+        }
+
+        var err = new Error('Cannot find module \'' + name + '\'');
+        err.code = 'MODULE_NOT_FOUND';
+        throw err;
+      }
+      
+      localRequire.resolve = resolve;
+
+      var module = cache[name] = new newRequire.Module;
+
+      modules[name][0].call(module.exports, localRequire, module, module.exports);
+    }
+
+    return cache[name].exports;
+
+    function localRequire(x){
+      return newRequire(localRequire.resolve(x));
+    }
+
+    function resolve(x){
+      return modules[name][1][x] || x;
+    }
+  }
+
+  function Module() {
+    this.bundle = newRequire;
+    this.exports = {};
+  }
+
+  newRequire.Module = Module;
+  newRequire.modules = modules;
+  newRequire.cache = cache;
+  newRequire.parent = previousRequire;
+
+  for (var i = 0; i < entry.length; i++) {
+    newRequire(entry[i]);
+  }
+
+  // Override the current require with this new one
+  return newRequire;
+})({6:[function(require,module,exports) {
+var bundleURL = null;
+function getBundleURLCached() {
+  if (!bundleURL) {
+    bundleURL = getBundleURL();
+  }
+
+  return bundleURL;
+}
+
+function getBundleURL() {
+  // Attempt to find the URL of the current script and use that as the base URL
+  try {
+    throw new Error;
+  } catch (err) {
+    var matches = ('' + err.stack).match(/(https?|file|ftp):\/\/[^)\n]+/g);
+    if (matches) {
+      return getBaseURL(matches[0]);
+    }
+  }
+
+  return '/';
+}
+
+function getBaseURL(url) {
+  return ('' + url).replace(/^((?:https?|file|ftp):\/\/.+)\/[^/]+$/, '$1') + '/';
+}
+
+exports.getBundleURL = getBundleURLCached;
+exports.getBaseURL = getBaseURL;
+
+},{}],5:[function(require,module,exports) {
+var bundle = require('./bundle-url');
+
+function updateLink(link) {
+  var newLink = link.cloneNode();
+  newLink.onload = function () {
+    link.remove();
+  };
+  newLink.href = link.href.split('?')[0] + '?' + Date.now();
+  link.parentNode.insertBefore(newLink, link.nextSibling);
+}
+
+var cssTimeout = null;
+function reloadCSS() {
+  if (cssTimeout) {
+    return;
+  }
+
+  cssTimeout = setTimeout(function () {
+    var links = document.querySelectorAll('link[rel="stylesheet"]');
+    for (var i = 0; i < links.length; i++) {
+      if (bundle.getBaseURL(links[i].href) === bundle.getBundleURL()) {
+        updateLink(links[i]);
+      }
+    }
+
+    cssTimeout = null;
+  }, 50);
+}
+
+module.exports = reloadCSS;
+
+},{"./bundle-url":6}],0:[function(require,module,exports) {
+var global = (1, eval)('this');
+var OldModule = module.bundle.Module;
+function Module() {
+  OldModule.call(this);
+  this.hot = {
+    accept: function (fn) {
+      this._acceptCallback = fn || function () {};
+    },
+    dispose: function (fn) {
+      this._disposeCallback = fn;
+    }
+  };
+}
+
+module.bundle.Module = Module;
+
+if (!module.bundle.parent && typeof WebSocket !== 'undefined') {
+  var ws = new WebSocket('ws://localhost:54707/');
+  ws.onmessage = function(event) {
+    var data = JSON.parse(event.data);
+
+    if (data.type === 'update') {
+      data.assets.forEach(function (asset) {
+        hmrApply(global.require, asset);
+      });
+
+      data.assets.forEach(function (asset) {
+        if (!asset.isNew) {
+          hmrAccept(global.require, asset.id);
+        }
+      });
+    }
+
+    if (data.type === 'reload') {
+      ws.close();
+      ws.onclose = function () {
+        window.location.reload();
+      }
+    }
+
+    if (data.type === 'error-resolved') {
+      console.log('[parcel] ✨ Error resolved');
+    }
+
+    if (data.type === 'error') {
+      console.error('[parcel] 🚨  ' + data.error.message + '\n' + 'data.error.stack');
+    }
+  };
+}
+
+function getParents(bundle, id) {
+  var modules = bundle.modules;
+  if (!modules) {
+    return [];
+  }
+
+  var parents = [];
+  var k, d, dep;
+
+  for (k in modules) {
+    for (d in modules[k][1]) {
+      dep = modules[k][1][d];
+      if (dep === id || (Array.isArray(dep) && dep[dep.length - 1] === id)) {
+        parents.push(+k);
+      }
+    }
+  }
+
+  if (bundle.parent) {
+    parents = parents.concat(getParents(bundle.parent, id));
+  }
+
+  return parents;
+}
+
+function hmrApply(bundle, asset) {
+  var modules = bundle.modules;
+  if (!modules) {
+    return;
+  }
+
+  if (modules[asset.id] || !bundle.parent) {
+    var fn = new Function('require', 'module', 'exports', asset.generated.js);
+    asset.isNew = !modules[asset.id];
+    modules[asset.id] = [fn, asset.deps];
+  } else if (bundle.parent) {
+    hmrApply(bundle.parent, asset);
+  }
+}
+
+function hmrAccept(bundle, id) {
+  var modules = bundle.modules;
+  if (!modules) {
+    return;
+  }
+
+  if (!modules[id] && bundle.parent) {
+    return hmrAccept(bundle.parent, id);
+  }
+
+  var cached = bundle.cache[id];
+  if (cached && cached.hot._disposeCallback) {
+    cached.hot._disposeCallback();
+  }
+
+  delete bundle.cache[id];
+  bundle(id);
+
+  cached = bundle.cache[id];
+  if (cached && cached.hot && cached.hot._acceptCallback) {
+    cached.hot._acceptCallback();
+    return true;
+  }
+
+  return getParents(global.require, id).some(function (id) {
+    return hmrAccept(global.require, id)
+  });
+}
+},{}]},{},[0])
\ No newline at end of file
diff --git a/dist/index.html b/dist/index.html
index 237e7e2..5091252 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -4,7 +4,7 @@
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>Sass test</title>
-        <link rel="stylesheet" href="/dist/ef19487056b129c8f3eda17f9543ab70.css">
+        <link rel="stylesheet" href="/dist/9fe7b1b7e5e98c2e3a4ea4f053439023.css">
     </head>
     <body>
         <header>
@@ -25,6 +25,20 @@
         </header>
         <main>
             <div class="container">
+                <pre style="margin: 0;" class="code">
+                    <code>
+<h1>test</h1>
+code here, escape it yourself.
+                    </code>
+                </pre>
+        
+                <pre>
+                    <code>
+<h1>test</h1>
+code here, escape it yourself.
+<h2>test</h2>
+                    </code>
+                </pre>
                 <h1 style="text-align: center;">Alert Elements</h1>
                 <div class="alert-primary"> test </div><br>
                 <div class="alert-danger"> test </div><br>
@@ -72,5 +86,6 @@
         </main>
         <br><br><br>
         <br><br><br>
+        <script src="/dist/2d47c8cd43d85995abf14afd917c8434.js"></script>
     </body>
 </html>
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 8f3ed4e..356a86c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5,7 +5,6 @@
   "requires": true,
   "packages": {
     "": {
-      "name": "steevcss",
       "version": "1.0.0",
       "license": "ISC",
       "devDependencies": {
diff --git a/src/index.html b/src/index.html
index c14e30e..de438bc 100644
--- a/src/index.html
+++ b/src/index.html
@@ -25,6 +25,20 @@
         </header>
         <main>
             <div class="container">
+                <pre style="margin: 0;" class="code">
+                    <code>
+<h1>test</h1>
+code here, escape it yourself.
+                    </code>
+                </pre>
+        
+                <pre>
+                    <code>
+<h1>test</h1>
+code here, escape it yourself.
+<h2>test</h2>
+                    </code>
+                </pre>
                 <h1 style="text-align: center;">Alert Elements</h1>
                 <div class="alert-primary"> test </div><br>
                 <div class="alert-danger"> test </div><br>
@@ -72,5 +86,6 @@
         </main>
         <br><br><br>
         <br><br><br>
+        <script src="js/steevcss.js"></script>
     </body>
 </html>
\ No newline at end of file
diff --git a/src/js/steevcss.js b/src/js/steevcss.js
new file mode 100644
index 0000000..b057c97
--- /dev/null
+++ b/src/js/steevcss.js
@@ -0,0 +1,16 @@
+var code = document.querySelectorAll("code");
+
+code.forEach(c => {
+    let code = c.innerHTML.toString();
+    var output = "";
+    for(let i = 0; i < code.length; i++){
+        switch(code.charAt(i)){
+            default: output += code.charAt(i); break;
+            case ">": output += "&gt;"; break;
+            case "<": output += "&lt;"; break;
+            case "&": output += "&amp;"; break;
+            case "\"": output += "&quot;"; break;
+        }
+    }
+    c.innerHTML = output;
+})
\ No newline at end of file
diff --git a/src/scss/main.sass b/src/scss/main.sass
index 85f3bf8..1b3a886 100644
--- a/src/scss/main.sass
+++ b/src/scss/main.sass
@@ -14,6 +14,8 @@ $success: #2ecc71
 $success_dark: #27ae60
 *
   box-sizing: border-box
+pre
+  border: 1px solid black
 body   
   margin: 0
   padding: 0