Final design solidified

.vuepress/media/svg/text-logo--white.svg

@@ -0,0 +1,6 @@
+<svg viewBox="0 0 800 300" xmlns="http://www.w3.org/2000/svg" fill="#fcfcfc">
+  <path d="M567.328, 43.44l72.864, 130.464l0, 82.656l46.944, 0l0, -82.656l72.576, -130.464l-50.688, 0l-44.64, 84.672l-44.64, -84.672l-52.416, 0Z"/>
+  <path d="M520.672, 173.616c22.464, -10.656 34.848, -31.968 34.848, -61.056c0, -44.64 -26.496, -68.832 -81.216, -69.12l-82.368, 0l0, 213.12l46.656, 0l0, -75.168l35.136, 0l31.392, 75.168l52.416, 0l-36.864, -82.944Zm-46.656, -32.544l-35.424, 0l0, -56.448l35.712, 0c23.904, 0 31.968, 12.96 31.968, 27.936c0, 15.264 -8.352, 28.512 -32.256, 28.512Z"/>
+  <path d="M328.864, 150.576c15.552, -7.2 28.512, -23.04 28.512, -48.096c0, -34.848 -25.344, -58.464 -67.104, -58.464l-43.776, 0l-46.368, 0l0, 212.544l89.568, 0c42.048, 0 70.272, -19.584 70.272, -55.872c0, -26.784 -14.976, -42.048 -31.104, -50.112Zm-43.776, -67.104c19.008, 0 25.92, 14.112 25.92, 25.344c0, 11.808 -7.2, 24.768 -25.92, 24.768l-38.592, 0l0, -50.112l38.592, 0Zm2.592, 133.632l-41.184, 0l0, -49.248l41.184, 0c15.264, 0 26.208, 10.08 26.208, 25.056c0, 14.976 -10.656, 24.192 -26.208, 24.192Z"/>
+  <path d="M87.52, 214.8l0, -171.36l-47.232, 0l0, 213.12l130.752, 0l0, -41.76l-83.52, 0Z"/>
+</svg>

.vuepress/media/svg/text-logo.svg

@@ -0,0 +1,6 @@
+<svg viewBox="0 0 800 300" xmlns="http://www.w3.org/2000/svg">
+  <path d="M567.328, 43.44l72.864, 130.464l0, 82.656l46.944, 0l0, -82.656l72.576, -130.464l-50.688, 0l-44.64, 84.672l-44.64, -84.672l-52.416, 0Z"/>
+  <path d="M520.672, 173.616c22.464, -10.656 34.848, -31.968 34.848, -61.056c0, -44.64 -26.496, -68.832 -81.216, -69.12l-82.368, 0l0, 213.12l46.656, 0l0, -75.168l35.136, 0l31.392, 75.168l52.416, 0l-36.864, -82.944Zm-46.656, -32.544l-35.424, 0l0, -56.448l35.712, 0c23.904, 0 31.968, 12.96 31.968, 27.936c0, 15.264 -8.352, 28.512 -32.256, 28.512Z"/>
+  <path d="M328.864, 150.576c15.552, -7.2 28.512, -23.04 28.512, -48.096c0, -34.848 -25.344, -58.464 -67.104, -58.464l-43.776, 0l-46.368, 0l0, 212.544l89.568, 0c42.048, 0 70.272, -19.584 70.272, -55.872c0, -26.784 -14.976, -42.048 -31.104, -50.112Zm-43.776, -67.104c19.008, 0 25.92, 14.112 25.92, 25.344c0, 11.808 -7.2, 24.768 -25.92, 24.768l-38.592, 0l0, -50.112l38.592, 0Zm2.592, 133.632l-41.184, 0l0, -49.248l41.184, 0c15.264, 0 26.208, 10.08 26.208, 25.056c0, 14.976 -10.656, 24.192 -26.208, 24.192Z"/>
+  <path d="M87.52, 214.8l0, -171.36l-47.232, 0l0, 213.12l130.752, 0l0, -41.76l-83.52, 0Z"/>
+</svg>

.vuepress/scss/_layout.scss

@@ -0,0 +1,92 @@
+html,
+body {
+  width: 100%; height: 100%;
+}
+
+html {
+  background-color: $white;
+}
+
+body {
+  min-width: 320px; min-height: 100vh;
+
+  color: $black;
+  display: flex;
+  flex-direction: column;
+  @include font-sans;
+  font-size: 12px;
+  overflow-x: hidden;
+  position: relative;
+  z-index: 0;
+}
+
+main {
+  flex: 1;
+  padding-top: 4rem !important; // override Vue
+}
+
+.inner-wrap {
+  margin-right: auto;
+  margin-left: auto;
+  max-width: 1200px;
+
+  @media (min-width: 901px) {
+    padding-right: 1rem;
+    padding-left: 1rem;
+  }
+
+  @media (max-width: 900px) {
+    padding-right: 2rem;
+    padding-left: 2rem;
+  }
+
+  &::after {
+    @include clearfix;
+  }
+}
+
+h1, h2, h3, h4, h5 {
+  .header-anchor {
+    display: none;
+  }
+}
+
+h1 {
+  font-size: 3rem;
+}
+
+h2 {
+  font-size: 1.75rem;
+}
+
+h3 {
+  font-size: 1.5rem;
+}
+
+.__message {
+  bottom: 4rem; left: 10%;
+
+  animation: close-message linear;
+  animation-delay: 2s;
+  font-size: 0.8rem;
+  line-height: 1.33;
+  padding-bottom: 1rem;
+  padding-top: 1rem;
+  position: absolute;
+  text-align: center;
+  width: 80%;
+  z-index: 2;
+
+  a {
+    font-weight: 700;
+  }
+
+  &[type="error"] {
+    background-color: $red;
+    color: $white;
+  }
+
+  &[type="warning"] {
+    background-color: $yellow;
+  }
+}

.vuepress/scss/init/_base.scss

@@ -0,0 +1,151 @@
+html {
+  box-sizing: border-box;
+  text-rendering: optimizeLegibility;
+
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+}
+
+*,
+*::before,
+*::after {
+  margin: 0; padding: 0;
+
+  box-sizing: inherit;
+  outline: 0 !important;
+}
+
+a,
+area,
+button,
+[role="button"],
+input,
+label,
+select,
+summary,
+textarea { // Remove touch delay on supported devices
+  touch-action: manipulation;
+}
+
+a {
+  color: currentColor;
+  text-decoration: none;
+}
+
+*[readonly] {
+  cursor: not-allowed;
+}
+
+textarea {
+  &[disabled] {
+    resize: none;
+  }
+
+  &:not[disabled] {
+    resize: vertical;
+  }
+}
+
+button {
+  &:not(:disabled) {
+    cursor: pointer;
+  }
+
+  &:active {
+    top: 2px;
+  }
+}
+
+button,
+input,
+select,
+textarea {
+  border: none;
+  border-radius: 0;
+  font-family: inherit;
+  font-size: inherit;
+
+  -moz-appearance: none;
+  -webkit-appearance: none;
+
+  &:focus {
+    outline: none;
+  }
+}
+
+input,
+select,
+textarea {
+  background-color: transparent;
+}
+
+input[type=submit] {
+  cursor: pointer;
+}
+
+.left {
+  float: left;
+}
+
+.right {
+  float: right;
+}
+
+iframe {
+  border: 0;
+}
+
+img {
+  font-size: 0;
+
+  &::after {
+    width: 100%; height: 100%;
+    top: -100%; left: 0;
+
+    background-color: $white;
+    background-image: url("../media/images/missing.png");
+    background-size: cover;
+    box-shadow: 0 0 1px 0 rgba($black, 0.3);
+    content: "";
+    display: block;
+    position: relative;
+  }
+}
+
+
+
+@media print {
+  // Intelligent print styles
+  pre, blockquote { border: 1px solid #999 !important; page-break-inside: avoid !important; }
+  tr, img { page-break-inside: avoid !important; }
+  img { max-width: 100% !important; }
+  @page { margin: 0.5cm !important; }
+  p, h2, h3 { orphans: 3 !important; widows: 3 !important; }
+  h2, h3 { page-break-after: avoid !important; }
+  thead { display: table-header-group !important; }
+
+  // Faster, more stable printing
+  * { background: transparent !important; color: black !important; text-shadow: none !important; filter: none !important; }
+
+  // Show hypertext data for links and abbreviations
+  p a[href]::after { content: " (" attr(href) ")" !important; }
+  p abbr[title]::after { content: " (" attr(title) ")" !important; }
+  p a[href^="javascript:"]::after, p a[href^="#"]::after { content: "" !important; }
+  p a, p abbr { word-wrap: break-word !important; text-decoration: underline !important; }
+}
+
+
+
+input::-moz-focus-inner,
+button::-moz-focus-inner {
+  display: none;
+}
+
+// Get rid of yellow autofill background
+input:-webkit-autofill {
+  -webkit-box-shadow: 0 0 0 1000px $white inset !important;
+
+  &:focus {
+    outline: none;
+  }
+}

.vuepress/scss/init/_colors.scss

@@ -0,0 +1,18 @@
+$white:   #fcfcfc;
+$black:   #222;
+
+$gray:    #a3b7ad;
+$yellow:  #dbdb3e;
+$lime:    #8ddb3e;
+$green:   #3edb3e;
+$teal:    #3edb8d;
+$cyan:    #3edbdb;
+$blue:    #3e8cdb;
+$indigo:  #3e3edb;
+$violet:  #8c3edb;
+$fuchsia: #db3edb;
+$pink:    #db3e8d;
+$red:     #db3e3e;
+$orange:  #db8c3e;
+
+// via https://palx.jxnblk.com/3edb8d

.vuepress/scss/init/_extends.scss

@@ -0,0 +1,181 @@
+
+//  B U T T O N S
+
+.__button-base {
+  border: 1px solid;
+  font-size: 1rem;
+  letter-spacing: 0.025rem;
+  position: relative;
+  transition: all 0.2s;
+}
+
+.__button-basic {
+  @extend .__button-base;
+  @extend .__button-padding-vertical;
+
+  background-color: transparent;
+  border-color: transparent;
+
+  &::after {
+    width: 100%; height: 2px;
+    bottom: 2px; left: 0;
+
+    content: "";
+    display: block;
+    transition: background-color 0.2s;
+  }
+
+  &:not(:hover)::after {
+    background-color: transparent;
+  }
+
+  &:hover::after {
+    background-color: $black;
+  }
+}
+
+.__button-black {
+  @extend .__button-base;
+  @extend .__button-padding-vertical;
+  @extend .__button-padding-horizontal;
+
+  &:not(:hover) {
+    background-color: $black;
+    border-color: $white;
+    box-shadow: 2px 2px 0 $white;
+    color: $white;
+  }
+
+  &:hover {
+    background-color: $white;
+    border-color: $black;
+    box-shadow: 2px 2px 0 $black;
+    color: inherit;
+  }
+}
+
+.__button-white {
+  @extend .__button-base;
+  @extend .__button-padding-vertical;
+  @extend .__button-padding-horizontal;
+
+  &:not(:hover) {
+    background-color: $white;
+    border-color: transparent;
+    box-shadow: 2px 2px 0 $black;
+    color: inherit;
+  }
+
+  &:hover {
+    background-color: $black;
+    border-color: $white;
+    box-shadow: 2px 2px 0 $white;
+    color: $white;
+  }
+}
+
+.__button-gray {
+  @extend .__button-base;
+  @extend .__button-padding-vertical;
+  @extend .__button-padding-horizontal;
+
+  background-color: $white;
+
+  &:not(:hover) {
+    border-color: transparent;
+    box-shadow: 2px 2px 0 $black;
+  }
+
+  &:hover {
+    border-color: $teal;
+    box-shadow: 2px 2px 0 $teal;
+    color: $teal;
+  }
+}
+
+.__button-padding-vertical {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+
+.__button-padding-horizontal {
+  padding-right: 1rem;
+  padding-left: 1rem;
+}
+
+
+
+//  G R I D
+
+.__grid {
+  &:first-of-type {
+    cursor: default;
+    font-size: 0.8rem;
+    font-weight: 600;
+    letter-spacing: 0.2rem;
+    text-transform: uppercase;
+  }
+
+  &:not(:first-of-type) {
+    border-left: 1px solid $gray;
+
+    .col {
+      border-bottom-style: solid;
+      border-bottom-width: 1px;
+
+      &:last-of-type {
+        border-right-style: solid;
+        border-right-width: 1px;
+      }
+
+      &:not(.red):not(.orange):not(.yellow):not(.green) {
+        border-color: $gray;
+      }
+    }
+  }
+
+  @media (min-width: 600px) {
+    display: table;
+    table-layout: fixed;
+    width: 100%;
+
+    .col {
+      display: table-cell;
+    }
+  }
+}
+
+.col {
+  padding: 0.5rem 1rem;
+  width: 100%;
+
+  &:not(:first-of-type) {
+    text-align: right;
+  }
+}
+
+// Padded columns
+.grid-padded {
+  @media (min-width: 600px) {
+    margin-right: -1rem;
+    margin-left: -1rem;
+
+    .grid {
+      border-spacing: 1rem 0;
+    }
+  }
+}
+
+// Vertically center grid content
+// Requires content within the column to be inline/inline-block
+.grid-align-middle .col {
+  vertical-align: middle;
+}
+
+.grid-reverse {
+  direction: rtl;
+
+  .col {
+    direction: ltr;
+  }
+}

.vuepress/scss/init/_mixins.scss

@@ -0,0 +1,72 @@
+@mixin center {
+  align-items: center;
+  display: inline-flex;
+  justify-content: center;
+}
+
+
+
+@mixin font-sans {
+  font-family: Karla, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+}
+
+@mixin font-serif {
+  font-family: Georgia, serif;
+}
+
+@mixin font-mono {
+  font-family: "Courier New", monospace;
+}
+
+
+
+@mixin clearfix {
+  clear: both;
+  content: "";
+  display: block;
+}
+
+@mixin hide-text {
+  border: 0;
+  color: transparent;
+  font: 0/0 a;
+  text-shadow: none;
+}
+
+@mixin ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+@mixin selection($background, $foreground) {
+  ::selection {
+    background-color: $background;
+    color: $foreground;
+  }
+
+  ::-moz-selection {
+    background-color: $background;
+    color: $foreground;
+  }
+}
+
+
+
+@mixin no-user-select {
+  user-select: none;
+
+  -ms-user-select: none;
+  -moz-user-select: none;
+  -webkit-user-select: none;
+}
+
+
+
+.clear {
+  @include clearfix;
+}
+
+.hide-text {
+  @include hide-text;
+}

.vuepress/scss/pages/_home.scss

@@ -0,0 +1,105 @@
+.home {
+  h1, h2 {
+    text-align: center;
+  }
+
+  h1 {
+    margin-bottom: 1rem;
+    text-transform: uppercase;
+  }
+
+  h2 {
+    font-weight: 400;
+    margin-bottom: 4rem;
+  }
+
+  hr {
+    width: 100%; height: 1px;
+
+    background-color: rgba($black, 0.1);
+    border: none;
+    margin-bottom: 4rem;
+  }
+
+  &.hero {
+    align-items: center;
+    background-color: $black;
+    background-image: url("../media/svg/text-logo--white.svg");
+    background-position: center;
+    background-repeat: no-repeat;
+    display: flex;
+    height: calc(50vh - 4rem);
+    justify-content: center;
+
+    h2 {
+      background-color: $white;
+      border: 1px solid rgba($black, 0.1);
+      box-decoration-break: clone;
+      display: inline;
+      line-height: 2;
+      padding: 0.4rem 1rem;
+    }
+  }
+
+  &.features {
+    .home__features {
+      align-content: center;
+      border-bottom: 1px solid rgba($black, 0.05);
+      display: flex;
+      flex-flow: row wrap;
+      list-style-type: none;
+      padding-top: 2rem;
+      padding-bottom: 2rem;
+    }
+
+    .home__feature {
+      position: relative;
+      text-align: center;
+      vertical-align: top;
+      width: 50%;
+    }
+
+
+
+    .home__feature__title {
+      font-size: 2rem;
+      margin-bottom: 0.5rem;
+    }
+
+    .home__feature__description {
+      font-size: 1rem;
+      left: 10%;
+      margin-bottom: 1rem;
+      position: relative;
+      width: 80%;
+    }
+
+    .home__feature__cta {
+      @extend .__button-black;
+      display: inline-block;
+      font-size: 1rem;
+      position: relative;
+    }
+  }
+
+  &.intro,
+  &.docs,
+  &.contribute,
+  &.develop,
+  &.community {
+    padding-top: 3rem;
+    padding-bottom: 3rem;
+
+    h3 {
+      @extend .inner-wrap;
+      font-size: 3rem;
+    }
+  }
+
+  &.intro,
+  &.docs,
+  &.contribute,
+  &.develop {
+    border-bottom: 1px solid rgba($black, 0.05);
+  }
+}

.vuepress/scss/partials/_navigation.scss

@@ -0,0 +1,55 @@
+.navigation {
+  top: 0; left: 0;
+
+  background-color: $white;
+  box-shadow: 0 1px 5px rgba($black, 0.1);
+  // color: $white;
+  position: fixed;
+  width: 100%;
+  z-index: 10;
+
+  > div:first-of-type {
+    align-items: stretch;
+    display: flex;
+    flex-flow: row wrap;
+  }
+}
+
+.navigation__item {
+  color: inherit;
+  font-size: 1rem;
+  line-height: 4rem;
+  overflow: hidden;
+  padding-right: 0.5rem;
+  padding-left: 0.5rem;
+  position: relative;
+
+  &:first-of-type {
+    flex: 1;
+  }
+
+  &:not(:first-of-type) {
+    &::after {
+      width: 100%; height: 3px;
+
+      background-color: $teal;
+      content: "";
+      left: 0;
+      position: absolute;
+      transition: bottom 0.2s;
+    }
+
+    &:not(:hover) {
+      &::after {
+        bottom: -3px;
+      }
+    }
+
+    &:hover,
+    &.active {
+      &::after {
+        bottom: 0;
+      }
+    }
+  }
+}

.vuepress/scss/type/_karla.scss

@@ -0,0 +1,22 @@
+// via //brick.freetls.fastly.net/Karla:400,700,400i (brick.im)
+
+@font-face {
+  font-family: "Karla";
+  font-style: normal;
+  font-weight: 400;
+  src: local("Karla Regular"), url(//brick.freetls.fastly.net/fonts/karla/400.woff) format("woff");
+}
+
+@font-face {
+  font-family: "Karla";
+  font-style: italic;
+  font-weight: 400;
+  src: local("Karla Italic"), url(//brick.freetls.fastly.net/fonts/karla/400i.woff) format("woff");
+}
+
+@font-face {
+  font-family: "Karla";
+  font-style: normal;
+  font-weight: 700;
+  src: local("Karla Bold"), url(//brick.freetls.fastly.net/fonts/karla/700.woff) format("woff");
+}

.vuepress/theme/Layout.vue

@@ -1,12 +1,14 @@
 <template>
   <v-app>
 
-    <v-toolbar clipped-left app scroll-off-screen>
+    <!--/
-
+    <v-toolbar>
       <v-toolbar-title class="align-center">
         <span class="title"><router-link to="/">LBRY.tech</router-link></span>
       </v-toolbar-title>
+
       <v-spacer></v-spacer>
+
       <v-toolbar-items class="hidden-sm-and-down">
         <v-btn flat to="/overview.html">Overview</v-btn>
         <v-btn flat to="/documentation.html">Documentation</v-btn>
@@ -14,65 +16,108 @@
         <v-btn flat to="/develop.html">How to Develop</v-btn>
         <v-btn flat to="/resources/">Resources</v-btn>
       </v-toolbar-items>
-
     </v-toolbar>
+    /-->
+
+    <nav class="navigation">
+      <div class="inner-wrap">
+        <a class="navigation__item" href="/" title="Go back home">LBRY</a>
+        <a class="navigation__item" href="/overview.html" title="TBD">Overview</a>
+        <a class="navigation__item" href="/documentation.html" title="TBD">Documentation</a>
+        <a class="navigation__item" href="/contribute.html" title="TBD">Contribute</a>
+        <a class="navigation__item" href="/develop.html" title="TBD">Develop</a>
+        <a class="navigation__item" href="/resources" title="TBD">Resources</a>
+      </div>
+    </nav>
 
     <v-content>
-
+      <!--/
-      <v-alert type="error" value="true" id="in-development-alert" class="pt-4 pb-4 ma-0">
+      <v-alert type="error" value="true" id="in-development-alert">
         <strong>This website is in beta.</strong> We are actively developing this website to showcase and teach about the LBRY protocol. All things may not work as expected!<br/>This website is open source and you can <a href="https://github.com/lbryio/lbry.tech" target="_blank">contribute to it on Github</a>.</v-alert>
       </v-alert>
+      /-->
 
       <template v-if="$page.frontmatter.home">
+        <section class="home hero">
+          <!--/ <h1 class="home__heading">LBRY Technology</h1> /-->
+          <div>
+            <h2>
+              LBRY is a free, open, and community-run digital marketplace.<br/>
+              Build the future of content freedom.
+            </h2>
+          </div>
+        </section>
 
-        <hook></hook>
+        <section class="home features">
+          <ul class="home__features">
+            <li class="home__feature">
+              <p class="home__feature__title"><strong>New to LBRY?</strong></p>
+              <p class="home__feature__description">Learn how LBRY works in 3 easy steps</p>
+              <a class="home__feature__cta" href="">Check it out</a>
+            </li>
 
+            <li class="home__feature">
+              <p class="home__feature__title"><strong>Want to contribute?</strong></p>
+              <p class="home__feature__description">Start exploring our API and help make LBRY better</p>
+              <a class="home__feature__cta" href="">Jump in</a>
+            </li>
+          </ul>
+        </section>
+
+        <section class="home intro">
+          <h3>Intro/Overview</h3>
+          <p>Text and such</p>
+        </section>
+
+        <section class="home docs">
+          <h3>Documentation</h3>
+          <p>Text and such</p>
+        </section>
+
+        <section class="home contribute">
+          <h3>Contribute</h3>
+          <p>Text and such</p>
+        </section>
+
+        <section class="home develop">
+          <h3>Development</h3>
+          <p>Text and such</p>
+        </section>
+
+        <section class="home community">
+          <h3>Community</h3>
+          <p>Text and such</p>
+        </section>
+
+        <!--/ <hook></hook> /-->
+
+        <!--/
         <v-container fluid>
-
           <v-layout row wrap>
-
+            <v-flex>
-            <v-flex xs12 xl6 offset-xl3>
-        
               <Content custom></Content>
-
               <edit-link :path="this.$page.path"></edit-link>
-              
             </v-flex>
-
           </v-layout>
-
         </v-container>
-
+        /-->
       </template>
 
       <template v-else-if="$page.path == '/whitepaper.html'">
-
         <Content custom></Content>
-
       </template>
 
       <template v-else>
-
         <v-container>
-
+          <v-layout>
-          <v-layout row wrap>
+            <v-flex>
-
-            <v-flex xs12 xl6 offset-xl3>
-
               <Sidebar v-if="$page.headers"></Sidebar>
-
               <Content custom></Content>
-
               <edit-link :path="this.$page.path"></edit-link>
-            
             </v-flex>
-
           </v-layout>
-
         </v-container>
-
       </template>
-
     </v-content>
 
   </v-app>
@@ -85,12 +130,7 @@ import Vuetify from 'vuetify'
 import VueResource from 'vue-resource'
 import VueHighlightJS from 'vue-highlightjs'
 
-Vue.use(Vuetify, {
+Vue.use(Vuetify);
-  theme: {
-    primary: '#155b4a'
-  }
-});
-
 Vue.use(VueResource)
 Vue.use(VueHighlightJS)
 
@@ -149,12 +189,19 @@ function updateMetaTags (meta, current) {
 }
 </script>
 
-<style src="../../node_modules/vuetify/dist/vuetify.min.css"></style>
+<!--/ <style src="../../node_modules/vuetify/dist/vuetify.min.css"></style> /-->
 
 <style lang="scss">
+  @import "../scss/type/karla";
+  @import "../scss/init/colors";
+  @import "../scss/init/base";
+  @import "../scss/init/extends";
+  @import "../scss/init/mixins";
+  @import "../scss/layout";
+  @import "../scss/pages/home";
+  @import "../scss/partials/navigation";
 
-@import '../scss/fonts';
+  /*
-
   html {
     font-size: 16px;
   }
@@ -186,5 +233,5 @@ img {
       color: white;
     }
   }
-
+  */
 </style>