diff --git a/www/components/banner/banner.css b/www/components/banner/banner.css
index 6d4f34aba..0c0f77633 100644
--- a/www/components/banner/banner.css
+++ b/www/components/banner/banner.css
@@ -1,4 +1,3 @@
-/* TODO restore to nested styles */
 @keyframes fadeOut {
   from {
     opacity: 1;
@@ -19,73 +18,75 @@
   }
 }
 
-:host .banner {
-  background-color: #F6F2F4;
-  min-height: 60vh;
-}
-
-:host .content {
-  padding: 5vh 10px;
-  font-size:1.7rem;
-  text-align:center;
-}
-
-:host .content hr {
-  border-radius:25px;
-  border-style:none;
-  height:3px;
-  margin:0 auto;
-  background-color:white;
-  border:1px solid rgba(0, 0, 0, 0.6);
-  width: 160px;
-}
-
-:host .content h1 {
-  font-size:3.5rem;
-  text-shadow: 1px 1px rgba(0, 0, 0, 0.6);
-}
-
-:host .content h3 {
-  padding-top: 10px;
-  text-shadow: 1px 1px rgba(0, 0, 0, 0.6);
-}
-
-:host .content img {
-  width: 300px;
-  height: 300px;
-}
-
-:host .content span.off {
-  animation: 1s fadeOut ease-in-out;
-}
-
-:host .content span.on {
-  animation: 1s fadeIn linear;
-}
+:host {
 
-/* @media (max-width: 980px) {
   & .banner {
-    min-height: 40vh;
+    background-color: #F6F2F4;
+    min-height: 60vh;
 
     & .content {
-      font-size: 1.5rem;
+      padding: 5vh 10px;
+      font-size:1.7rem;
+      text-align:center;
+
+      & hr {
+        border-radius:25px;
+        border-style:none;
+        height:3px;
+        margin:0 auto;
+        background-color:white;
+        border:1px solid rgba(0, 0, 0, 0.6);
+        width: 160px;
+      }
+
       & h1 {
-        font-size: 3rem;
+        font-size:3.5rem;
+        text-shadow: 1px 1px rgba(0, 0, 0, 0.6);
       }
+      & h3 {
+        padding-top: 10px;
+        text-shadow: 1px 1px rgba(0, 0, 0, 0.6);
+      }
+
       & img {
-        width: 250px;
-        height: 250px;
+        width: 300px;
+        height: 300px;
       }
     }
+
+    & span.off {
+      animation: 1s fadeOut ease-in-out;
+    }
+
+    & span.on {
+      animation: 1s fadeIn linear;
+    }
   }
-}
 
-@media (max-width: 756px) {
-  & .banner {
-      padding:0px;
+  @media (max-width: 980px) {
+    & .banner {
+      min-height: 40vh;
 
       & .content {
-        margin-top: 0;
+        font-size: 1.5rem;
+        & h1 {
+          font-size: 3rem;
+        }
+        & img {
+          width: 250px;
+          height: 250px;
+        }
       }
+    }
+  }
+
+  @media (max-width: 756px) {
+    & .banner {
+       padding:0px;
+
+       & .content {
+         margin-top: 0;
+       }
+    }
   }
-} */
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/www/components/card/card.css b/www/components/card/card.css
index b9c29cb8a..a0fe490a3 100644
--- a/www/components/card/card.css
+++ b/www/components/card/card.css
@@ -1,63 +1,65 @@
-/* TODO restore to nested styles */
-:host .card {
-  padding: 2.5rem;
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  min-width: 0;
-  word-wrap: break-word;
-  background-color: #fff;
-  background-clip: initial;
-  text-align: center;
-
-  @media(max-width:768px) {
-    padding:0;
+:host {
+
+  & .card {
+    padding: 2.5rem;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    word-wrap: break-word;
+    background-color: #fff;
+    background-clip: initial;
+    text-align: center;
+
+    @media(max-width:768px) {
+      padding:0;
+    }
+
+    & .body {
+      padding:10px;
+    }
   }
-}
 
-:host .card .body {
-  padding:10px;
-}
 
-:host .card-xs {
-  margin: 0.25rem;
-  flex: 1 1 16.666%;
-  max-width: 250px;
+  & .card-xs {
+    margin: 0.25rem;
+    flex: 1 1 16.666%;
+    max-width: 250px;
+
+    @media (max-width: 1024px) {
+      max-width: 100%;
+    }
+  }
+  & .card-sm {
+    margin: 0.25rem;
+    flex: 1 1 25%;
+    max-width: 380px;
+
+    @media (max-width: 1024px) {
+      max-width: 100%;
+    }
+  }
+  & .card-md {
+    margin: 0.25rem;
+    flex: 1 1 33.333%;
+    max-width: 450px;
 
-  @media (max-width: 1024px) {
-    max-width: 100%;
+    @media (max-width: 1024px) {
+      max-width: 100%;
+    }
   }
-}
-:host .card-sm {
-  margin: 0.25rem;
-  flex: 1 1 25%;
-  max-width: 380px;
-
-  @media (max-width: 1024px) {
-    max-width: 100%;
+  & .card-full {
+    margin: 0.25rem;
+    flex: 1 1 33.333%;
   }
-}
-:host .card-md {
-  margin: 0.25rem;
-  flex: 1 1 33.333%;
-  max-width: 450px;
-
-  @media (max-width: 1024px) {
-    max-width: 100%;
+
+  & .card-img-top {
+    background-size: cover;
+    background-position-x: center;
+    background-position-y: center;
+    & img {
+      width: 100%;
+      max-width: 200px;
+    }
   }
-}
-:host .card-full {
-  margin: 0.25rem;
-  flex: 1 1 33.333%;
-}
-
-:host .card-img-top {
-  background-size: cover;
-  background-position-x: center;
-  background-position-y: center;
-}
-
-:host .card-img-top img {
-  width: 100%;
-  max-width: 200px;
 }
\ No newline at end of file
diff --git a/www/components/footer/footer.css b/www/components/footer/footer.css
index 8a0a6da35..e7e1f36f4 100644
--- a/www/components/footer/footer.css
+++ b/www/components/footer/footer.css
@@ -1,22 +1,20 @@
-/* TODO restore to nested styles */
 :host {
   grid-area: footer;
-}
+  & .footer {
+    background-color: #192a27;
+    min-height: 30px;
+    padding-top: 10px;
 
-:host .footer {
-  background-color: #192a27;
-  min-height: 30px;
-  padding-top: 10px;
-}
+    & h4 {
+      width: 90%;
+      margin: 0 auto;
+      padding: 0;
+      text-align: center;
+    }
 
-:host h4 {
-  width: 90%;
-  margin: 0 auto;
-  padding: 0;
-  text-align: center;
-}
-
-:host a {
-  color: white;
-  text-decoration:none;
+    & a {
+      color: white;
+      text-decoration:none;
+    }
+  }
 }
\ No newline at end of file
diff --git a/www/components/header/header.css b/www/components/header/header.css
index 4f36b7e50..20ad937db 100644
--- a/www/components/header/header.css
+++ b/www/components/header/header.css
@@ -1,84 +1,78 @@
-/* TODO restore to nested styles */
-:host .header {
-  background-color: #192a27;
-  min-height: 30px;
-  padding: 10px;
-  font-size: 1.2rem;
-}
+:host {
+  & .header {
+    background-color: #192a27;
+    min-height: 30px;
+    padding: 10px;
+    font-size: 1.2rem;
 
-:host a {
-  color: white;
-  text-decoration:none;
-}
+    & a {
+      color: white;
+      text-decoration:none;
+    }
 
-:host .project-name {
-  margin: -2px 0 auto;
-  padding:0;
-  padding-top:4px;
-  display:inline-block;
-  color: #1d337a;
-  font-weight: bold;
-}
+    & .project-name {
+      margin: -2px 0 auto;
+      padding:0;
+      padding-top:4px;
+      display:inline-block;
+      color: #1d337a;
+      font-weight: bold;
+    }
 
-:host .head-wrap {
-  display: flex;
-  align-items:center;
-  flex-wrap:wrap;
-  justify-content: space-between;
+    & .head-wrap {
+      display: flex;
+      align-items:center;
+      flex-wrap:wrap;
+      justify-content: space-between;
 
-  @media (max-width:768px) {
-    flex-direction:column;
-    text-align: center;
-  }
-}
-
-:host nav {
-  justify-items: left;
-  width: 55%;
-}
-
-:host nav ul {
-  padding:0;
-  margin:0;
-  list-style: none;
-  text-align: center;
-}
-
-:host nav li {
-  margin:0;
-  color:white;
-  display: inline-block;
-  padding:10px;
-}
+      @media (max-width:768px) {
+        flex-direction:column;
+        text-align: center;
+      }
+    }
 
-:host nav li:hover {
-  color: #F9E7CA;
-}
- 
-:host nav li a {
-  @media (max-width: 768px) {
-    width:100%;
+    & nav {
+      justify-items: left;
+      width: 55%;
+      & ul {
+        padding:0;
+        margin:0;
+        list-style: none;
+        text-align: center;
+        & li {
+          margin:0;
+          color:white;
+          display: inline-block;
+          padding:10px;
+          &:hover {
+          color: #F9E7CA;
+            & a {
+              color:green;
+            }
+          }
+        }
+      }
+      @media (max-width: 768px) {
+        width:100%;
+      }
+    }
+    & .brand {
+      justify-items: left;
+      padding: 10px;
+      & img {
+        float:left;
+        height: 30px;
+        width: 30px;
+        margin-right: .5rem;
+      }
+    }
+    & .social {
+      margin-left:auto;
+      text-align: right;
+      & img {
+        width:84px;
+        height:20px;
+      }
+    }
   }
-}
-
-:host .brand {
-  justify-items: left;
-  padding: 10px;
-}
-
-:host img {
-  float: left;
-  height: 30px;
-  width: 30px;
-  margin-right: .5rem;
-}
-
-:host .social {
-  margin-left: auto;
-  text-align: right;
-}
- 
-:host .social img {
-  width:84px;
-  height:20px;
 }
\ No newline at end of file
diff --git a/www/components/row/row.css b/www/components/row/row.css
index baa00f083..9a5c65f98 100644
--- a/www/components/row/row.css
+++ b/www/components/row/row.css
@@ -8,4 +8,4 @@
   @media (max-width: 1024px) {
     flex-direction: column;
   }
-}
+}
\ No newline at end of file
diff --git a/www/components/shelf/shelf.css b/www/components/shelf/shelf.css
index f6af4c1bc..55a629e7f 100644
--- a/www/components/shelf/shelf.css
+++ b/www/components/shelf/shelf.css
@@ -1,102 +1,99 @@
-:host h1, :host h2, :host h3, :host h4, :host h5, :host h6 {
-  font-family: 'Source Sans Pro', sans-serif;
-}
+:host {
 
-:host a {
-  text-decoration: none;
-  color: #2D3D3A;
-}
+  & h1, & h2, & h3, & h4, & h5, & h6 {
+    font-family: 'Source Sans Pro', sans-serif;
+  }
 
-:host a:hover {
-  color:black;
-}
+  & a {
+    text-decoration: none;
+    color: #2D3D3A;
 
-:host .list-wrap > :first-child {
-  display: grid;
-  grid-template-columns: auto 20px;
-  align-items: center;
-  font-size: 1.5em;
-  margin-block-start: 0.83em;
-  margin-block-end: 0.83em;
-  margin-inline-start: 0px;
-  margin-inline-end: 0px;
-  font-weight: bold;
-  
-  @media (max-width: 768px) {
-    padding-left:10px;
-    padding-right:10px;
+    &:hover {
+      color:black;
+    }
   }
-}
 
-:host h2 {
-  display: block;
-  font-size: 1.5em;
-  margin-block-start: 0.83em;
-  margin-block-end: 0.83em;
-  margin-inline-start: 0px;
-  margin-inline-end: 0px;
-  font-weight: bold;
-  @media (max-width: 768px) {
-    padding-left:10px;
-    padding-right:10px;
+  & .list-wrap > :first-child {
+    display: grid;
+    grid-template-columns: auto 20px;
+    align-items: center;
+    font-size: 1.5em;
+    margin-block-start: 0.83em;
+    margin-block-end: 0.83em;
+    margin-inline-start: 0px;
+    margin-inline-end: 0px;
+    font-weight: bold;
+    @media (max-width: 768px) {
+      padding-left:10px;
+      padding-right:10px;
+    }
+    
   }
-}
-
-:host hr {
-  display: block;
-  unicode-bidi: isolate;
-  margin-block-start: 0.5em;
-  margin-block-end: 0.5em;
-  margin-inline-start: auto;
-  margin-inline-end: auto;
-  overflow: hidden;
-  border-style: inset;
-  border-width: 1px;
-}
-
-:host div > ul  {
-  padding-left: 0px;
-}
 
-:host ul li {
-  list-style:none;
-}
-
-
-:host .list-wrap ul {
-  padding-left: 0px;
+  & h2 {
+    display: block;
+    font-size: 1.5em;
+    margin-block-start: 0.83em;
+    margin-block-end: 0.83em;
+    margin-inline-start: 0px;
+    margin-inline-end: 0px;
+    font-weight: bold;
+    @media (max-width: 768px) {
+      padding-left:10px;
+      padding-right:10px;
+    }
+  }
+  & hr {
+    display: block;
+    unicode-bidi: isolate;
+    margin-block-start: 0.5em;
+    margin-block-end: 0.5em;
+    margin-inline-start: auto;
+    margin-inline-end: auto;
+    overflow: hidden;
+    border-style: inset;
+    border-width: 1px;
+  }
 
-  @media (max-width: 768px) {
-    padding-left:10px;
+  & div > ul  {
+    padding-left: 0px;
+    & li {
+      list-style:none;
+    }
   }
-}
 
-:host .list-wrap ul li {
-  display: block;
-  margin-block-start: 1em;
-  margin-block-end: 1em;
-  margin-inline-start: 0px;
-  margin-inline-end: 0px;
-}
+  & .list-wrap ul {
+    padding-left: 0px;
 
-:host .list-wrap ul li  a {
-  cursor: pointer;
-}
+    & li {
+      display: block;
+      margin-block-start: 1em;
+      margin-block-end: 1em;
+      margin-inline-start: 0px;
+      margin-inline-end: 0px;
+      & a {
+        cursor: pointer;
+      }
+    }
+    @media (max-width: 768px) {
+      padding-left:10px;
+    }
+  }
 
-:host span {
-  pointer-events: none;
-}
-  
-:host span  > svg {
-  margin-top:10px;
-  margin-left: auto;
-  height:20px;
-}
+  & span {
+    pointer-events: none;
+    > svg {
+      margin-top:10px;
+      margin-left: auto;
+      height:20px;
+    }
+  }
 
-:host .hidden {
-  display:none !important;
-}
+  & .hidden {
+    display:none !important;
+  }
 
-:host .active {
-  color:red;
+  & .active {
+    color:red;
+  }
 }
\ No newline at end of file
diff --git a/www/components/social-icons/social-icons.css b/www/components/social-icons/social-icons.css
index fc3bff782..356c6a395 100644
--- a/www/components/social-icons/social-icons.css
+++ b/www/components/social-icons/social-icons.css
@@ -13,4 +13,4 @@
   @media (max-width: 768px) {
     flex-direction: row;
   }
-}
+}
\ No newline at end of file