diff --git a/assets/css/main.css b/assets/css/main.css
index a827ecd..65cf3ee 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -1,7 +1,6 @@
 * :not(ol) {
   padding: 0;
   margin: 0;
-  -webkit-box-sizing: border-box;
   box-sizing: border-box;
   font-family: "Roboto Slab", serif;
 }
@@ -11,19 +10,19 @@
 }
 
 body {
-  --accent-color: #E72C37;
+  --accent-color: #e72c37;
   --light-shade: rgba(var(--text-color), 0.06);
   --text-color: 17, 17, 17;
   --text-color-light: 100, 100, 100;
   --foreground-color: 255, 255, 255;
-  --background-color: #F6f6f6;
+  --background-color: #f6f6f6;
   --error-color: red;
   --green: #007936;
-  --banner-color: #1E88E5;
+  --banner-color: #1e88e5;
   --secondary-text-color: #034baa;
   --font-weight-factor: 1;
   color: rgba(var(--text-color), 1);
-  height: calc(100%);
+  height: 100%;
   background: var(--background-color);
 }
 
@@ -89,7 +88,8 @@ p {
 }
 
 img {
-  object-fit: cover;
+  -o-object-fit: cover;
+     object-fit: cover;
 }
 
 a {
@@ -171,6 +171,10 @@ ol[type="1"] {
   display: flex;
 }
 
+.flex-wrap {
+  flex-wrap: wrap;
+}
+
 .grid {
   display: grid;
 }
@@ -335,8 +339,6 @@ ol[type="1"] {
   word-wrap: break-word;
   -ms-word-break: break-all;
   word-break: break-word;
-  -ms-hyphens: auto;
-  -moz-hyphens: auto;
   -webkit-hyphens: auto;
   hyphens: auto;
 }
@@ -350,8 +352,8 @@ ol[type="1"] {
 }
 
 .icon {
-  width: 1.5rem;
-  height: 1.5rem;
+  width: 1.2rem;
+  height: 1.2rem;
   fill: rgba(var(--text-color), 0.9);
 }
 
@@ -452,7 +454,7 @@ ol[type="1"] {
 }
 
 #elevator_popup {
-  position: absolute;
+  position: fixed;
   width: 100%;
   height: 100%;
   top: 0;
@@ -465,6 +467,7 @@ ol[type="1"] {
 }
 
 .elevator__header {
+  position: -webkit-sticky;
   position: sticky;
   top: 0;
   padding: 1.2rem 1.5rem;
@@ -496,6 +499,7 @@ ol[type="1"] {
 }
 
 .floor_list__header {
+  position: -webkit-sticky;
   position: sticky;
   top: 0;
   padding-bottom: 0.5rem;
@@ -523,7 +527,9 @@ ol[type="1"] {
 
 .outlet-list__item {
   display: grid;
-  user-select: none;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
   width: min(50ch, 100%);
   counter-increment: outlet-counter;
 }
@@ -578,46 +584,31 @@ ol[type="1"] {
 }
 
 #main_header {
-  position: relative;
+  position: -webkit-sticky;
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  background: var(--background-color);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
   padding: 1rem;
-  grid-template-columns: repeat(3, 1fr);
 }
 
 #elevator_button {
   justify-self: flex-start;
   margin-left: -1rem;
 }
-#elevator_button .icon {
-  width: 1.7rem;
-  height: 1.7rem;
+
+.main-logo {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
 }
 
 #main_header__logo {
-  height: 1.8rem;
-  width: 1.8rem;
-}
-
-.theme-switcher {
-  position: relative;
-  justify-self: flex-end;
-  width: 1.5rem;
   height: 1.5rem;
-  cursor: pointer;
-  -webkit-tap-highlight-color: transparent;
-}
-.theme-switcher .icon {
-  position: absolute;
-  transition: transform 0.6s;
-}
-
-.theme-switcher__checkbox {
-  display: none;
-}
-.theme-switcher__checkbox:checked ~ .moon-icon {
-  transform: scale(0) rotate(90deg);
-}
-.theme-switcher__checkbox:not(:checked) ~ .sun-icon {
-  transform: scale(0) rotate(-90deg);
+  width: 1.5rem;
 }
 
 .page,
@@ -642,13 +633,11 @@ ol[type="1"] {
 
 #home_page {
   will-change: scroll-position;
-  overflow-y: auto;
-  max-height: calc(100vh - 5.2rem);
-  grid-template-columns: 2rem 1fr;
   scroll-behavior: smooth;
 }
 
 #floor_line_map {
+  position: -webkit-sticky;
   position: sticky;
   top: 1rem;
   height: 40vh;
@@ -697,7 +686,9 @@ ol[type="1"] {
   align-items: center;
   left: 0.2rem;
   margin-top: -1rem;
-  user-select: none;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
   transition: transform 0.3s;
 }
 
@@ -728,10 +719,6 @@ ol[type="1"] {
   transition: box-shadow 0.3s, opacity 0.3s;
 }
 
-#floor_container {
-  width: calc(100% - 1rem);
-}
-
 .floor {
   padding-bottom: 3rem;
   width: 100%;
@@ -899,7 +886,8 @@ ol[type="1"] {
   border-radius: 0.5rem;
   height: 10rem;
   width: 10rem;
-  object-position: top;
+  -o-object-position: top;
+     object-position: top;
   border-radius: 50%;
 }
 
@@ -944,12 +932,12 @@ ol[type="1"] {
 
 .motivated {
   color: black;
-  background-color: #FFCA28;
+  background-color: #ffca28;
 }
 
 .passionate {
   color: black;
-  background-color: #00E676;
+  background-color: #00e676;
 }
 
 #intern_level_popup {
@@ -1011,8 +999,6 @@ ol[type="1"] {
 }
 .outlet-label .icon {
   grid-area: icon;
-  height: 1.6rem;
-  width: 1.6rem;
   fill: var(--accent-color);
   justify-self: flex-end;
 }
@@ -1199,6 +1185,7 @@ ol[type="1"] {
 
 .room-container__header {
   display: flex;
+  position: -webkit-sticky;
   position: sticky;
   top: 0;
   z-index: 2;
@@ -1221,22 +1208,10 @@ ol[type="1"] {
   font-weight: calc(700 * var(--font-weight-factor));
 }
 
-/* .room-carousel{
-    display: flex;
-    overflow-x: auto;
-    scroll-snap-type: x mandatory;
-    height: 100%;
-    scroll-behavior: smooth;
-    & > *{
-        min-width: 100%;
-        scroll-snap-align: start;
-
-    }
-} */
 .room-container__footer {
+  position: -webkit-sticky;
   position: sticky;
   display: flex;
-  gap: 1rem;
   bottom: 0;
   z-index: 2;
   overflow-x: auto;
@@ -1245,6 +1220,9 @@ ol[type="1"] {
   margin-left: -3rem;
   background: linear-gradient(0deg, var(--background-color) 70%, rgba(0, 0, 0, 0) 100%);
 }
+.room-container__footer > h4 {
+  margin-right: 1rem;
+}
 
 #room_switcher {
   display: grid;
@@ -1405,48 +1383,37 @@ ol[type="1"] {
   .hide-on-mobile {
     display: none;
   }
-
   .outlet-preview {
     gap: 1.5rem;
   }
-
   .outlet-preview__number-container {
     grid-row: 1/2;
   }
-
   .outlet-preview__number::after {
     left: 0;
   }
-
   .outlet-preview__number,
 .outlet-label__no {
     font-size: 5rem;
   }
-
   #outlet_switcher {
     width: calc(100% - 2rem);
   }
-
   .outlet-label {
     grid-row: 1/2;
   }
-
   .outlet-hero-section {
     margin-top: 2rem;
   }
-
   .outlet-label__no {
     margin-bottom: 2rem;
   }
-
   .series-container {
     gap: 1rem;
   }
-
   .outlet-list__item .icon {
     margin-left: auto;
   }
-
   .rooms__header {
     flex-direction: column;
     align-items: flex-start;
@@ -1454,7 +1421,6 @@ ol[type="1"] {
   .rooms__header scroll-tab-header {
     width: calc(100vw - 2rem);
   }
-
   .room-tile {
     padding-top: 100%;
   }
@@ -1466,62 +1432,51 @@ ol[type="1"] {
     padding: 1rem;
     position: absolute;
   }
-
   .room-tile__icon {
     height: 4rem;
     width: 4rem;
   }
-
   .investors-icon {
     height: 6rem;
     width: 6rem;
   }
-
   #hero_title {
     margin-top: 2rem;
   }
-
   .ext-link-tile {
     padding: 1rem;
     flex-direction: column;
     align-items: flex-start;
   }
-
   .link-container {
     margin-top: 1.5rem;
   }
 }
 @media only screen and (min-width: 640px) {
-  #home_page, .page,
+  #home_page,
+.page,
 .page-layout {
     grid-template-columns: 1fr 90vw 1fr;
   }
-
   .h1 {
     font-size: 4rem;
   }
-
   .h2 {
     font-size: 2.5rem;
   }
-
   .h3 {
     font-size: 1.5rem;
   }
-
   .h4 {
     font-size: 1.1rem;
   }
-
   #main_header {
     padding: 1.2rem 2rem;
   }
-
   #floor_list {
     gap: 8vw;
     padding: 0 8vw 4rem 8vw;
   }
-
   .floor_list__item {
     position: relative;
     grid-template-columns: 1fr 1fr;
@@ -1552,7 +1507,6 @@ ol[type="1"] {
     grid-row: 1/2;
     grid-column: 1/2;
   }
-
   .floor__header::before {
     left: -10%;
     width: 10%;
@@ -1561,11 +1515,9 @@ ol[type="1"] {
     right: -10%;
     width: 10%;
   }
-
   .outlets-container {
     gap: 1.5rem;
   }
-
   .outlet-preview {
     gap: 1rem;
     padding: 5rem 4rem;
@@ -1593,59 +1545,46 @@ ol[type="1"] {
   .outlet-preview:nth-of-type(odd) .outlet-preview__number::after {
     right: 0;
   }
-
   .outlet__title {
     font-size: 2.5rem;
   }
-
   #outlet_switcher {
     padding: 1rem 1.5rem;
   }
-
   .outlet-label {
     grid-column: 2/3;
     justify-self: right;
   }
-
   .outlet-label__no {
     justify-content: flex-end;
   }
-
   .outlet-hero-section {
     position: relative;
     grid-template-columns: 1fr auto;
     gap: 1.5rem;
     margin-top: 4rem;
   }
-
   .auto-grid-layout {
     grid-template-columns: auto 1fr;
   }
-
   .rooms-layout {
     grid-template-rows: 1fr 1fr;
   }
-
   .room-container__header {
     padding: 1.5rem 0;
   }
-
   .people-grid {
     gap: 5rem 3rem;
   }
-
   #hero_title {
     font-size: 3rem;
   }
-
   .feature__title {
     font-size: 1.5rem;
   }
-
   .features-grid {
     grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
   }
-
   .graph-container {
     width: 80%;
     min-height: 60vh;
@@ -1653,23 +1592,21 @@ ol[type="1"] {
   }
 }
 @media only screen and (min-width: 1280px) {
-  #home_page, .page,
+  #home_page,
+.page,
 .page-layout {
     grid-template-columns: 1fr 85vw 1fr;
   }
-
   .grid-3 {
     justify-content: center;
   }
   .grid-3 > .grid {
     width: 100%;
   }
-
   .rooms-layout {
     grid-template-columns: repeat(3, 1fr);
     grid-auto-flow: column;
   }
-
   .link-container {
     grid-template-columns: auto auto;
   }
@@ -1679,7 +1616,6 @@ ol[type="1"] {
     width: 0.5rem;
     height: 0.5rem;
   }
-
   ::-webkit-scrollbar-thumb {
     background: rgba(var(--text-color), 0.3);
     border-radius: 1rem;
@@ -1687,7 +1623,6 @@ ol[type="1"] {
   ::-webkit-scrollbar-thumb:hover {
     background: rgba(var(--text-color), 0.5);
   }
-
   .page-link {
     cursor: pointer;
     transition: color 0.3s;
@@ -1698,11 +1633,9 @@ ol[type="1"] {
   .page-link:hover .icon {
     fill: var(--accent-color);
   }
-
   .floor__button:hover {
     background: var(--background-color);
   }
-
   .outlet-list__item .icon {
     fill: var(--accent-color);
     opacity: 0;
@@ -1714,7 +1647,6 @@ ol[type="1"] {
     opacity: 1;
     transform: translateX(0);
   }
-
   .intern__level {
     transition: transform 0.3s;
   }
diff --git a/assets/css/main.min.css b/assets/css/main.min.css
index c8a6466..5127e20 100644
--- a/assets/css/main.min.css
+++ b/assets/css/main.min.css
@@ -1 +1 @@
-.floor__header,body{background:var(--background-color)}a,button{color:inherit}.outlet-label,sm-tab-header{align-self:flex-start}#room_switcher,.flow-column{grid-auto-flow:column}.hide,.ripple{pointer-events:none}.pos-relative,button{position:relative}.ext-link-tile,.interact,.room-tile,.theme-switcher,button{-webkit-tap-highlight-color:transparent}* :not(ol){padding:0;margin:0;-webkit-box-sizing:border-box;box-sizing:border-box;font-family:"Roboto Slab",serif}.button__icon--left,.margin-right-0-5{margin-right:.5rem}:root{font-size:clamp(1rem,1.2vmax,3rem)}body{--accent-color:#E72C37;--light-shade:rgba(var(--text-color), 0.06);--text-color:17,17,17;--text-color-light:100,100,100;--foreground-color:255,255,255;--background-color:#F6f6f6;--error-color:red;--green:#007936;--banner-color:#1E88E5;--secondary-text-color:#034baa;--font-weight-factor:1;color:rgba(var(--text-color),1);height:calc(100%)}body[data-theme=dark]{--accent-color:#ff3949;--green:#13ff5a;--text-color:240,240,240;--text-color-light:170,170,170;--foreground-color:20,20,20;--background-color:#0a0a0a;--error-color:rgb(255, 106, 106);--banner-color:#0166be;--secondary-text-color:#4393fc;--font-weight-factor:0.9}body[data-theme=dark] #outlet_switcher{background:linear-gradient(rgba(var(--text-color),.06),rgba(var(--text-color),.06)),rgba(var(--foreground-color),1)}body[data-theme=dark] .outlet-preview{box-shadow:0 4rem 3rem -2rem rgba(0,0,0,.3)}.full-bleed{grid-column:1/4}.h1{font-size:2.5rem}.h2{font-size:2rem}.h3{font-size:1.4rem}.h4{font-size:1rem}.h5{font-size:.8rem}.uppercase{text-transform:uppercase}.capitalize,.floor_list__header,.outlet__title,.person__name{text-transform:capitalize}#my_popup{--width:min(24rem, 100%)}p{font-weight:calc(400 * var(--font-weight-factor));max-width:70ch;line-height:1.6}img{object-fit:cover}a{text-decoration:none}a:focus-visible{box-shadow:0 0 0 .1rem rgba(var(--text-color),1) inset}p a{color:var(--accent-color)}button{overflow:hidden;display:inline-flex;align-items:center;border:none;background:0 0;cursor:pointer;outline:0;font-weight:calc(500 * var(--font-weight-factor))}.button--primary,.tag{background:var(--accent-color)}.button{border-radius:.2rem;padding:.5rem .6rem}.button--primary{color:rgba(var(--foreground-color),1)}.button--primary .icon{fill:rgba(var(--foreground-color),1)}.feature__icon .icon,.icon{fill:rgba(var(--text-color),.9)}.button--outlined{box-shadow:0 0 0 1px rgba(var(--text-color),.5)}.button--filled{background-color:rgba(var(--text-color),.2)}button:focus-visible{outline:solid rgba(var(--text-color),1)}sm-input,sm-textarea{--border-radius:0.2rem;--background:rgba(var(--text-color), 0.06)}sm-button{--border-radius:0.2rem}ul{list-style:none}ol[type="1"]{display:grid;gap:2rem}.accent-color{color:var(--accent-color)}.flex{display:flex}.grid{display:grid}.grid-3{grid-template-columns:repeat(auto-fill,minmax(8rem,1fr))}.gap-0-5{gap:.5rem}.gap-1{gap:1rem}.gap-1-5{gap:1.5rem}.gap-2{gap:2rem}.gap-3{gap:3rem}.text-align-right{text-align:right}.feature,.person-card,.text-center{text-align:center}.align-start{align-items:flex-start}.align-center{align-items:center}.justify-start{justify-content:start}.justify-center{justify-content:center}.justify-right{margin-left:auto}.button__icon--right,.margin-left-0-5{margin-left:.5rem}.align-self-center{align-self:center}.justify-self-center{justify-self:center}.justify-self-start{justify-self:start}.direction-column{flex-direction:column}.space-between{justify-content:space-between}.w-100{width:100%}.margin-top-1-5{margin-top:1.5rem}.margin-bottom-0-5r{margin-bottom:.5rem}.margin-bottom-1r{margin-bottom:1rem}.margin-bottom-1-5r{margin-bottom:1.5rem}.margin-bottom-2r{margin-bottom:2rem}.margin-bottom-3r{margin-bottom:3rem}.margin-bottom-4r{margin-bottom:4rem}.hide{opacity:0}.hide-completely{display:none!important}.no-transformations{transform:none!important}.overflow-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.ripple{position:absolute;border-radius:50%;transform:scale(0);background:rgba(var(--text-color),.16)}.interact{position:relative;overflow:hidden;cursor:pointer}.breakable{overflow-wrap:break-word;word-wrap:break-word;-ms-word-break:break-all;word-break:break-word;-ms-hyphens:auto;-moz-hyphens:auto;-webkit-hyphens:auto;hyphens:auto}.observe-empty-state:empty{display:none}.observe-empty-state:not(:empty)~.empty-state{display:none}.icon{width:1.5rem;height:1.5rem}.icon-only{height:2.6rem;width:2.6rem;padding:.6rem}.close-icon{padding:.3rem}.close-button{left:-.5rem}.button__label{font-size:1rem}.button__icon{height:1.1rem;width:1.1rem}.color-0-9{color:rgba(var(--text-color),.9)}.color-0-8{color:rgba(var(--text-color),.8)}.color-0-7{color:rgba(var(--text-color),.7)}.color-0-3,.floor__num{color:rgba(var(--text-color),.3)}.banner .close-icon,.tile__brief{color:rgba(var(--text-color),.7)}.weight-400{font-weight:calc(400 * var(--font-weight-factor))}.weight-500{font-weight:calc(500 * var(--font-weight-factor))}.outlet-title,.weight-700{font-weight:calc(700 * var(--font-weight-factor))}.weight-900{font-weight:calc(900 * var(--font-weight-factor))}.popup__header{padding:.5rem 1.5rem 0 1rem;display:grid;grid-template-columns:auto 1fr;gap:.5rem;align-items:center;width:100%}.banner{display:grid;gap:1rem;padding:.5rem 0 .5rem 1rem;align-items:center;border:.1rem solid var(--banner-color);grid-template-columns:1fr auto;border-radius:.5rem;margin:0 1rem}.banner .close-icon{width:2.2rem;height:2.2rem}.banner__text{max-width:unset;font-size:.9rem}#elevator_popup{position:absolute;width:100%;height:100%;top:0;left:0;right:0;bottom:0;z-index:15;grid-template-rows:auto 1fr;background:rgba(var(--foreground-color),1)}.elevator__header,.floor_list__header{position:sticky;background:rgba(var(--foreground-color),1);z-index:1;top:0}.elevator__header{padding:1.2rem 1.5rem;display:grid;grid-template-columns:auto 1fr;gap:.5rem;align-items:center;justify-content:flex-start;width:100%}#floor_list{align-content:flex-start;padding:0 1.5rem 4rem;gap:2rem;overflow-y:auto;transform-origin:top}.floor_list__item{display:grid;gap:1.5rem;transform-origin:top}.floor_list__item:last-of-type{padding-bottom:25vh}.floor_list__header{padding-bottom:.5rem}.outlet-list{gap:2rem;counter-reset:outlet-counter}.floor-list__outlet{display:flex;align-items:center}.floor-list__outlet::before{content:"";width:.4rem;height:1.5rem;margin-right:.5rem;background-color:var(--accent-color)}.outlet-list__item{display:grid;user-select:none;width:min(50ch,100%);counter-increment:outlet-counter}.outlet-list__item .outlet-title::before{content:counter(outlet-counter) ". "}.outlet-list__item .icon{fill:var(--accent-color);flex-shrink:0}.outlet-title{font-size:1.2rem;margin-bottom:.5rem}.floor__button,.floor__num{font-weight:calc(900 * var(--font-weight-factor))}.outlet-brief{color:rgba(var(--text-color),.8)}.popup__header__close{padding:.5rem;cursor:pointer}.floor__button{padding:.5rem 0;flex-direction:column;text-align:left;align-items:flex-start;border-radius:.2rem;font-size:1.5rem;background:rgba(var(--foreground-color),1)}.floor__button--active{background:rgba(var(--text-color),.2);box-shadow:0 0 0 .4rem rgba(var(--text-color),1) inset}.floor-name{margin-top:.2rem;font-size:.8rem}.elevator__floor-line{flex:1;height:.1rem;margin-left:2rem;background-color:var(--accent-color)}#main_header{position:relative;padding:1rem;grid-template-columns:repeat(3,1fr)}#elevator_button{justify-self:flex-start;margin-left:-1rem}#elevator_button .icon{width:1.7rem;height:1.7rem}#main_header__logo{height:1.8rem;width:1.8rem}.theme-switcher{position:relative;justify-self:flex-end;width:1.5rem;height:1.5rem;cursor:pointer}.theme-switcher .icon{position:absolute;transition:transform .6s}.theme-switcher__checkbox{display:none}.theme-switcher__checkbox:checked~.moon-icon{transform:scale(0) rotate(90deg)}.theme-switcher__checkbox:not(:checked)~.sun-icon{transform:scale(0) rotate(-90deg)}.page,.page-layout{position:relative;display:grid;grid-template-columns:1rem 1fr 1rem}#floor_line_map,#home_page{grid-template-columns:2rem 1fr}.page-layout>*,.page>*{grid-column:2/3}.page{padding-bottom:4rem}.tag{padding:.4rem .6rem}#home_page{will-change:scroll-position;overflow-y:auto;max-height:calc(100vh - 5.2rem);scroll-behavior:smooth}#floor_line_map{position:sticky;top:1rem;height:40vh;z-index:10;grid-column:1/2}.line-map{height:100%}.line-map__circle{position:absolute;border-radius:1rem;width:1rem;height:1rem;margin-top:-.7rem;background:rgba(var(--foreground-color),1);border:.2rem solid var(--accent-color);transition:transform .1s linear;z-index:5}.line-map__bar{position:relative;width:.1rem;height:100%;border-radius:1rem;background:var(--accent-color)}.line-map__bar::after{position:absolute;content:"";bottom:0;left:50%;transform:translateX(-50%);width:.7rem;height:.2rem;background-color:var(--accent-color)}.floor-label{position:absolute;display:flex;align-items:center;left:.2rem;margin-top:-1rem;user-select:none;transition:transform .3s}.floor-circle{position:relative;border-radius:1rem;padding:.8rem}.floor-circle::after{content:"";position:absolute;padding:.3rem;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(var(--text-color),1);border-radius:1rem}.floor-title{opacity:.5;font-size:.9rem;white-space:nowrap;padding:.4rem .6rem;margin-left:1rem;border-radius:.2rem;background:rgba(var(--foreground-color),1);transition:box-shadow .3s,opacity .3s}#floor_container{width:calc(100% - 1rem)}.floor{padding-bottom:3rem;width:100%}.floor__header{position:relative;padding:.5rem 0;transform:translateY(-.1rem)}.bit-bond-series__row,.bob-fund__row,.card,.outlet-preview,.starter{background-color:rgba(var(--foreground-color),1)}.floor__num{display:flex;align-items:center;font-size:1.8rem}.outlet-hero-section,.outlet-preview,.table{display:grid}.floor__title{font-size:1.3rem;font-weight:calc(700 * var(--font-weight-factor))}.outlet__title,.svg-outlet-title{font-weight:calc(900 * var(--font-weight-factor))}.big-icon{height:2rem;width:2rem}.outlets-container{margin:1rem 0;gap:1.5rem}.outlet-preview{position:relative;padding:1rem;align-items:center;border-radius:.7rem}.outlet__title{line-height:1.2;max-width:18ch;font-size:1.8rem;margin-bottom:1rem}.svg-outlet-title{height:4rem;margin-bottom:1.5rem;fill:rgba(var(--text-color),1)}.outlet__description{color:rgba(var(--text-color),.8)}.outlet-preview__button{padding:.5rem 0;justify-self:flex-start;color:var(--accent-color);font-weight:calc(700 * var(--font-weight-factor))}.outlet-preview__number{position:relative;line-height:1;font-size:8rem;font-weight:900;-webkit-text-stroke:1rem var(--accent-color);-webkit-text-fill-color:rgba(var(--foreground-color),1);margin:0 .5rem}.outlet-preview__number::after{content:attr(data-number);position:absolute;line-height:1;font-size:1em;font-weight:inherit;-webkit-text-stroke:0;color:rgba(var(--foreground-color),1)}.intern__level,.outlet_switcher__button,.percent-gain{font-weight:calc(500 * var(--font-weight-factor))}.label{position:relative;font-size:.8rem;margin-bottom:.3rem}.value{font-size:1.2rem}.series-container{gap:1.5rem;padding-bottom:1.5rem;grid-template-columns:repeat(auto-fill,minmax(18rem,1fr))}.bit-bond-series__row,.bob-fund__row,.person-card{min-width:100%}.bob-fund__row .grid{align-content:flex-start}.bit-bond-series__row,.bob-fund__row,.card{gap:1rem;padding:1.5rem;border-radius:.5rem;align-items:flex-start;box-shadow:0 .5rem 1rem -.5rem rgba(0,0,0,.1)}.bit-bond-series__row .original-value{font-size:.85rem}.up-arrow{height:1em;width:1em;fill:var(--green);margin-right:.1em}.outlet-label .icon,.room-button[active] .icon{fill:var(--accent-color)}.percent-gain{margin-right:.5em}.percent-gain,.time-elapsed{font-size:.8rem}.time-elapsed{color:rgba(var(--text-color),.8)}.person-card{position:relative;gap:1rem;justify-items:center;align-content:flex-start;grid-template-columns:1fr}.person__image{height:10rem;width:10rem;object-position:top;border-radius:50%}.person__name{font-size:.9rem}.investor__bio,.investor__contribution{font-size:.85rem}.investor__bio{margin-top:.5rem}.intern-flo-id{margin-top:.3rem;font-size:.75rem}.intern__project{margin-top:.5rem}.intern__level{position:absolute;cursor:pointer;font-size:.8rem;border-radius:.2rem;margin-bottom:.3rem;padding:.3rem .5rem;justify-self:flex-end;box-shadow:0 .1rem .2rem rgba(0,0,0,.2)}.motivated{color:#000;background-color:#FFCA28}.passionate{color:#000;background-color:#00E676}#intern_level_popup{--width:min(48rem, 100%)}.table{gap:1rem;grid-template-columns:6rem 1fr}.table p{font-size:.9rem;color:rgba(var(--text-color),.9)}#outlet_switcher{position:absolute;top:0;padding:1rem;border-radius:.3rem;background:rgba(var(--foreground-color),1);box-shadow:0 2rem 4rem -1rem rgba(0,0,0,.2);z-index:2;outline:0}.ext-link-tile,.feature,.outlet-label__no,.room-button,.room-tile,.room__label,.rooms-layout,.timeline-item{position:relative}.outlet_switcher__floor{display:flex;flex-direction:column;overflow-y:auto}.outlet_switcher__button{display:flex;align-items:center;font-size:1rem;padding:.6rem 0}.outlet_switcher__button--active{color:var(--accent-color)!important}.outlet-label{display:grid;gap:.5rem;text-align:left;align-items:center;min-width:8rem;font-size:1.1rem;margin-bottom:.5rem;grid-template-areas:"label icon" "num num"}.outlet-label .icon{grid-area:icon;height:1.6rem;width:1.6rem;justify-self:flex-end}.outlet-label__name{font-size:1.7rem;color:rgba(var(--text-color),.5);font-weight:calc(900 * var(--font-weight-factor))}.outlet-label__no{grid-area:num;display:flex;line-height:1;font-size:8rem;font-weight:900;-webkit-text-stroke:1rem var(--accent-color);-webkit-text-fill-color:var(--background-color);margin:0 .5rem}.outlet-label__no::after{content:attr(data-number);position:absolute;line-height:1;font-size:1em;font-weight:inherit;-webkit-text-stroke:0;color:var(--background-color)}#hero_title,.room__label{font-weight:calc(700 * var(--font-weight-factor))}.auto-grid-layout{justify-content:flex-start;overflow-x:auto}.grid-2{grid-template-columns:auto 1fr}.rooms__header{z-index:1;display:flex;align-items:center;margin-bottom:1.5rem;background:var(--background-color);box-shadow:0 1rem 1rem -1rem rgba(0,0,0,.2)}.room__label{display:flex;align-items:center;padding-right:1.5rem;font-size:1.5rem}.room-button{opacity:.6;flex-shrink:0;border-radius:0;font-weight:calc(500 * var(--font-weight-factor));font-size:1.1rem;transition:opacity .3s,background-color .3s;padding:.6rem .8rem}.room-button:not(:last-of-type)::after{content:"";height:.1rem;width:4rem;margin-left:1rem;align-self:center;background:var(--accent-color)}#expanding_tile,.room-tile{background-color:rgba(var(--foreground-color),1)}.room-button[active]{opacity:1;color:var(--accent-color)}.people-grid{display:grid;gap:3rem 1.5rem;grid-template-columns:repeat(auto-fill,minmax(13rem,1fr))}.rooms-layout{display:grid;gap:1rem;grid-template-columns:1fr 1fr;margin-bottom:4rem}.room-tile{display:flex;border-radius:.5rem;transition:transform .3s;box-shadow:0 1rem 3rem -1rem rgba(0,0,0,.1)}.room-tile--main{padding-top:100%;grid-row:span 2}.room-tile--main .tile-content{position:absolute;bottom:0}.room-tile .tile-content{display:flex;width:100%;height:100%;padding:1.5rem;align-self:flex-end;flex-direction:column}.room-tile:active{transform:scale(.95)}.room-tile__icon{position:absolute;height:6rem;width:6rem;top:50%;left:50%;transform:translate(-50%,-50%)}.room-tile__icon:not(.room-tile__icon--colored){fill:rgba(var(--text-color),.1)}.investors-icon{height:8rem;width:8rem}.room-tile__title{font-size:.9rem;padding:.4rem .8rem;border:.1rem solid var(--secondary-text-color);color:var(--secondary-text-color);border-radius:.3rem}#performance_preview{margin-top:auto}#performance_preview>*{padding:0;box-shadow:none}#expanding_tile{position:fixed;border-radius:.5rem;z-index:5}.room-container{position:fixed;top:0;bottom:0;left:0;right:0;z-index:6;overflow-y:auto;background-color:var(--background-color);grid-template-rows:auto auto 1fr auto;align-items:flex-start}.room{padding-bottom:4rem}.room-container__header{display:flex;position:sticky;top:0;z-index:2;background-color:inherit;padding:1rem 0}.room-container__header::before{position:absolute;content:"";width:1rem;height:100%;left:-1rem;top:0;background-color:inherit}#hero_title{font-size:2rem;margin-bottom:2rem}.room-container__footer{position:sticky;display:flex;gap:1rem;bottom:0;z-index:2;overflow-x:auto;align-items:center;padding:2rem .5rem .5rem 3rem;margin-left:-3rem;background:linear-gradient(0deg,var(--background-color) 70%,rgba(0,0,0,0) 100%)}#room_switcher{display:grid;gap:.5rem;justify-content:flex-start}.room-shortcut .room-tile__title{font-weight:500;font-size:.9rem}.ext-link-tile{display:flex;padding:1.5rem;border-radius:.5rem;background-size:contain;align-items:center;justify-content:space-between;border:.1rem solid var(--banner-color);box-shadow:0 1rem 3rem -1rem rgba(0,0,0,.2);overflow:hidden}.tile__title{font-size:1.25rem;line-height:1;font-weight:calc(500 * var(--font-weight-factor));z-index:1}.tile__brief{margin-top:1rem;z-index:1}.round{display:inline-flex;flex-shrink:0;padding:.4rem 1rem;border-radius:.3rem;color:#fff;background-color:var(--banner-color);font-weight:700!important;font-size:1rem;z-index:1}.timeline-container{display:grid;padding:3rem 0;gap:4rem}.timeline-item{display:grid;padding-left:1rem}.timeline-item:not(:last-of-type):before{content:"";position:absolute;width:.1rem;height:calc(100% + 4rem);top:0;left:0;background-color:rgba(var(--text-color),.7)}.timeline-item:after{content:"";position:absolute;height:.6rem;width:.6rem;border-radius:50%;top:0;left:-.25rem;background-color:rgba(var(--text-color),1)}.timeline-item__header{display:flex;font-size:.8rem;padding:.5rem .8rem;border-radius:.2rem;justify-self:flex-start;transform:translateY(-.8rem);box-shadow:0 0 0 1px rgba(var(--text-color),.6);background-color:rgba(var(--foreground-color),1)}.features-grid{display:grid;gap:3rem 2rem;margin-bottom:5rem}.feature{display:flex;flex-direction:column;align-items:center;bottom:0;left:0;width:100%;height:100%}.feature__icon{display:flex;align-items:center;margin-bottom:1rem;padding:1.5rem;border-radius:50%;background-color:rgba(var(--text-color),.06)}.feature__icon .icon{height:2.5rem;width:2.5rem}.feature__title{color:rgba(var(--text-color),.9);font-size:1.2rem;margin-bottom:.5rem}.feature__brief{font-size:.9rem;color:rgba(var(--text-color),.8)}#line_sample{width:2rem;height:.2rem;margin-right:1rem;background:linear-gradient(90deg,#f49080,#80b6f4)}.graph-container{min-height:16rem;margin:1rem 0 4rem}.link-container{display:grid;gap:1rem;justify-items:flex-start;align-items:center}@media only screen and (max-width:640px){.outlet-label,.outlet-preview__number-container{grid-row:1/2}#hero_title,.outlet-hero-section{margin-top:2rem}.hide-on-mobile{display:none}.outlet-preview{gap:1.5rem}.outlet-preview__number::after{left:0}.outlet-label__no,.outlet-preview__number{font-size:5rem}#outlet_switcher{width:calc(100% - 2rem)}.outlet-label__no{margin-bottom:2rem}.series-container{gap:1rem}.outlet-list__item .icon{margin-left:auto}.rooms__header{flex-direction:column;align-items:flex-start}.rooms__header scroll-tab-header{width:calc(100vw - 2rem)}.room-tile{padding-top:100%}.room-tile--main{grid-column:span 2}.room-tile .tile-content{top:0;padding:1rem;position:absolute}.room-tile__icon{height:4rem;width:4rem}.investors-icon{height:6rem;width:6rem}.ext-link-tile{padding:1rem;flex-direction:column;align-items:flex-start}.link-container{margin-top:1.5rem}}@media only screen and (min-width:640px){#home_page,.page,.page-layout{grid-template-columns:1fr 90vw 1fr}.h1{font-size:4rem}.h2{font-size:2.5rem}.h3{font-size:1.5rem}.h4{font-size:1.1rem}#main_header{padding:1.2rem 2rem}#floor_list{gap:8vw;padding:0 8vw 4rem}.floor_list__item{position:relative;grid-template-columns:1fr 1fr;align-items:center;justify-content:center}.floor_list__item .floor_list__header{display:grid}.floor_list__item:not(:last-of-type){padding-bottom:8vw}.floor_list__item:not(:last-of-type)::after{content:"";position:absolute;width:24rem;height:.2rem;bottom:0;background-color:var(--accent-color);justify-self:center}.floor_list__item:nth-of-type(odd) .floor_list__header{text-align:right;grid-column:2/3;grid-row:1/2}.floor_list__item:nth-of-type(odd) .outlet-list{grid-row:1/2;grid-column:1/2}.floor__header::before{left:-10%;width:10%}.floor__header::after{right:-10%;width:10%}.outlets-container{gap:1.5rem}.outlet-preview{gap:1rem;padding:5rem 4rem;grid-template-columns:1.2fr 1fr;border:1px solid rgba(0,0,0,.2);box-shadow:0 4rem 3rem -2rem rgba(0,0,0,.06)}.outlet-preview:nth-of-type(even){grid-template-columns:1fr 2fr}.outlet-preview:nth-of-type(even) .outlet-preview__info{grid-column:2/3}.outlet-preview:nth-of-type(even) .outlet-preview__number-container{grid-column:1/2;grid-row:1/2}.outlet-preview:nth-of-type(even) .outlet-preview__number::after{left:0}.outlet-preview:nth-of-type(odd) .outlet-preview__number-container{margin-left:auto;text-align:right}.outlet-preview:nth-of-type(odd) .outlet-preview__number::after{right:0}.outlet__title{font-size:2.5rem}#outlet_switcher{padding:1rem 1.5rem}.outlet-label{grid-column:2/3;justify-self:right}.outlet-label__no{justify-content:flex-end}.outlet-hero-section{position:relative;grid-template-columns:1fr auto;gap:1.5rem;margin-top:4rem}.auto-grid-layout{grid-template-columns:auto 1fr}.rooms-layout{grid-template-rows:1fr 1fr}.room-container__header{padding:1.5rem 0}.people-grid{gap:5rem 3rem}#hero_title{font-size:3rem}.feature__title{font-size:1.5rem}.features-grid{grid-template-columns:repeat(auto-fill,minmax(20rem,1fr))}.graph-container{width:80%;min-height:60vh;justify-self:center}}@media only screen and (min-width:1280px){#home_page,.page,.page-layout{grid-template-columns:1fr 85vw 1fr}.grid-3{justify-content:center}.grid-3>.grid{width:100%}.rooms-layout{grid-template-columns:repeat(3,1fr);grid-auto-flow:column}.link-container{grid-template-columns:auto auto}}@media (any-hover:hover){.outlet-list__item .icon,.page-link:hover .icon{fill:var(--accent-color)}::-webkit-scrollbar{width:.5rem;height:.5rem}::-webkit-scrollbar-thumb{background:rgba(var(--text-color),.3);border-radius:1rem}::-webkit-scrollbar-thumb:hover{background:rgba(var(--text-color),.5)}.page-link{cursor:pointer;transition:color .3s}.page-link:hover{color:var(--accent-color)}.floor__button:hover{background:var(--background-color)}.outlet-list__item .icon{opacity:0;transform-origin:left;transform:translateX(-.5rem);transition:opacity .3s,transform .3s}.outlet-list__item:hover .icon{opacity:1;transform:translateX(0)}.intern__level{transition:transform .3s}.intern__level:hover{transform:scale(1.1)}}
\ No newline at end of file
+* :not(ol){padding:0;margin:0;box-sizing:border-box;font-family:"Roboto Slab",serif}:root{font-size:clamp(1rem,1.2vmax,3rem)}body{--accent-color: #e72c37;--light-shade: rgba(var(--text-color), 0.06);--text-color: 17, 17, 17;--text-color-light: 100, 100, 100;--foreground-color: 255, 255, 255;--background-color: #f6f6f6;--error-color: red;--green: #007936;--banner-color: #1e88e5;--secondary-text-color: #034baa;--font-weight-factor: 1;color:rgba(var(--text-color), 1);height:100%;background:var(--background-color)}body[data-theme=dark]{--accent-color: #ff3949;--green: #13ff5a;--text-color: 240, 240, 240;--text-color-light: 170, 170, 170;--foreground-color: 20, 20, 20;--background-color: #0a0a0a;--error-color: rgb(255, 106, 106);--banner-color: #0166be;--secondary-text-color: #4393fc;--font-weight-factor: 0.9}body[data-theme=dark] #outlet_switcher{background:linear-gradient(rgba(var(--text-color), 0.06), rgba(var(--text-color), 0.06)),rgba(var(--foreground-color), 1)}body[data-theme=dark] .outlet-preview{box-shadow:0 4rem 3rem -2rem rgba(0,0,0,.3)}.full-bleed{grid-column:1/4}.h1{font-size:2.5rem}.h2{font-size:2rem}.h3{font-size:1.4rem}.h4{font-size:1rem}.h5{font-size:.8rem}.uppercase{text-transform:uppercase}.capitalize{text-transform:capitalize}#my_popup{--width: min(24rem, 100%)}p{font-weight:calc(400*var(--font-weight-factor));max-width:70ch;line-height:1.6}img{-o-object-fit:cover;object-fit:cover}a{color:inherit;text-decoration:none}a:focus-visible{box-shadow:0 0 0 .1rem rgba(var(--text-color), 1) inset}p a{color:var(--accent-color)}button{position:relative;overflow:hidden;display:inline-flex;align-items:center;border:none;background:none;cursor:pointer;outline:none;color:inherit;font-weight:calc(500*var(--font-weight-factor));-webkit-tap-highlight-color:rgba(0,0,0,0)}.button{border-radius:.2rem;padding:.5rem .6rem}.button--primary{background:var(--accent-color);color:rgba(var(--foreground-color), 1)}.button--primary .icon{fill:rgba(var(--foreground-color), 1)}.button--outlined{box-shadow:0 0 0 1px rgba(var(--text-color), 0.5)}.button--filled{background-color:rgba(var(--text-color), 0.2)}button:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}sm-input,sm-textarea{--border-radius: 0.2rem;--background: rgba(var(--text-color), 0.06)}sm-button{--border-radius: 0.2rem}sm-tab-header{align-self:flex-start}ul{list-style:none}ol[type="1"]{display:grid;gap:2rem}.accent-color{color:var(--accent-color)}.flex{display:flex}.flex-wrap{flex-wrap:wrap}.grid{display:grid}.grid-3{grid-template-columns:repeat(auto-fill, minmax(8rem, 1fr))}.flow-column{grid-auto-flow:column}.gap-0-5{gap:.5rem}.gap-1{gap:1rem}.gap-1-5{gap:1.5rem}.gap-2{gap:2rem}.gap-3{gap:3rem}.pos-relative{position:relative}.text-align-right{text-align:right}.align-start{align-items:flex-start}.align-center{align-items:center}.text-center{text-align:center}.justify-start{justify-content:start}.justify-center{justify-content:center}.justify-right{margin-left:auto}.align-self-center{align-self:center}.justify-self-center{justify-self:center}.justify-self-start{justify-self:start}.direction-column{flex-direction:column}.space-between{justify-content:space-between}.w-100{width:100%}.margin-top-1-5{margin-top:1.5rem}.margin-bottom-0-5r{margin-bottom:.5rem}.margin-bottom-1r{margin-bottom:1rem}.margin-bottom-1-5r{margin-bottom:1.5rem}.margin-bottom-2r{margin-bottom:2rem}.margin-bottom-3r{margin-bottom:3rem}.margin-bottom-4r{margin-bottom:4rem}.margin-left-0-5{margin-left:.5rem}.margin-right-0-5{margin-right:.5rem}.hide{opacity:0;pointer-events:none}.hide-completely{display:none !important}.no-transformations{transform:none !important}.overflow-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.ripple{position:absolute;border-radius:50%;transform:scale(0);background:rgba(var(--text-color), 0.16);pointer-events:none}.interact{position:relative;overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0)}.breakable{overflow-wrap:break-word;word-wrap:break-word;-ms-word-break:break-all;word-break:break-word;-webkit-hyphens:auto;hyphens:auto}.observe-empty-state:empty{display:none}.observe-empty-state:not(:empty)~.empty-state{display:none}.icon{width:1.2rem;height:1.2rem;fill:rgba(var(--text-color), 0.9)}.icon-only{height:2.6rem;width:2.6rem;padding:.6rem}.close-icon{padding:.3rem}.close-button{left:-0.5rem}.button__label{font-size:1rem}.button__icon{height:1.1rem;width:1.1rem}.button__icon--left{margin-right:.5rem}.button__icon--right{margin-left:.5rem}.color-0-9{color:rgba(var(--text-color), 0.9)}.color-0-8{color:rgba(var(--text-color), 0.8)}.color-0-7{color:rgba(var(--text-color), 0.7)}.color-0-3{color:rgba(var(--text-color), 0.3)}.weight-400{font-weight:calc(400*var(--font-weight-factor))}.weight-500{font-weight:calc(500*var(--font-weight-factor))}.weight-700{font-weight:calc(700*var(--font-weight-factor))}.weight-900{font-weight:calc(900*var(--font-weight-factor))}.popup__header{padding:.5rem 1.5rem 0 1rem;display:grid;grid-template-columns:auto 1fr;gap:.5rem;align-items:center;width:100%}.popup__header__close{padding:.5rem;cursor:pointer}.banner{display:grid;gap:1rem;padding:.5rem 0 .5rem 1rem;align-items:center;border:.1rem solid var(--banner-color);grid-template-columns:1fr auto;border-radius:.5rem;margin:0 1rem}.banner .close-icon{width:2.2rem;height:2.2rem;color:rgba(var(--text-color), 0.7)}.banner__text{max-width:unset;font-size:.9rem}#elevator_popup{position:fixed;width:100%;height:100%;top:0;left:0;right:0;bottom:0;z-index:15;grid-template-rows:auto 1fr;background:rgba(var(--foreground-color), 1)}.elevator__header{position:-webkit-sticky;position:sticky;top:0;padding:1.2rem 1.5rem;display:grid;grid-template-columns:auto 1fr;gap:.5rem;align-items:center;justify-content:flex-start;width:100%;background:rgba(var(--foreground-color), 1);z-index:1}#floor_list{align-content:flex-start;padding:0 1.5rem 4rem 1.5rem;gap:2rem;overflow-y:auto;transform-origin:top}.floor_list__item{display:grid;gap:1.5rem;transform-origin:top}.floor_list__item:last-of-type{padding-bottom:25vh}.floor_list__header{position:-webkit-sticky;position:sticky;top:0;padding-bottom:.5rem;background:rgba(var(--foreground-color), 1);z-index:1;text-transform:capitalize}.outlet-list{gap:2rem;counter-reset:outlet-counter}.floor-list__outlet{display:flex;align-items:center}.floor-list__outlet::before{content:"";width:.4rem;height:1.5rem;margin-right:.5rem;background-color:var(--accent-color)}.outlet-list__item{display:grid;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:min(50ch,100%);counter-increment:outlet-counter}.outlet-list__item .outlet-title::before{content:counter(outlet-counter) ". "}.outlet-list__item .icon{fill:var(--accent-color);flex-shrink:0}.outlet-title{font-size:1.2rem;font-weight:calc(700*var(--font-weight-factor));margin-bottom:.5rem}.outlet-brief{color:rgba(var(--text-color), 0.8)}.popup__header__close{padding:.5rem;cursor:pointer}.floor__button{padding:.5rem 0;flex-direction:column;text-align:left;align-items:flex-start;border-radius:.2rem;font-size:1.5rem;font-weight:calc(900*var(--font-weight-factor));background:rgba(var(--foreground-color), 1)}.floor__button--active{background:rgba(var(--text-color), 0.2);box-shadow:0 0 0 .4rem rgba(var(--text-color), 1) inset}.floor-name{margin-top:.2rem;font-size:.8rem}.elevator__floor-line{flex:1;height:.1rem;margin-left:2rem;background-color:var(--accent-color)}#main_header{position:-webkit-sticky;position:sticky;top:0;z-index:1;background:var(--background-color);display:flex;align-items:center;justify-content:space-between;padding:1rem}#elevator_button{justify-self:flex-start;margin-left:-1rem}.main-logo{position:absolute;left:50%;transform:translateX(-50%)}#main_header__logo{height:1.5rem;width:1.5rem}.page,.page-layout{position:relative;display:grid;grid-template-columns:1rem 1fr 1rem}.page>*,.page-layout>*{grid-column:2/3}.page{padding-bottom:4rem}.tag{background:var(--accent-color);padding:.4rem .6rem}#home_page{will-change:scroll-position;scroll-behavior:smooth}#floor_line_map{position:-webkit-sticky;position:sticky;top:1rem;height:40vh;z-index:10;grid-template-columns:2rem 1fr;grid-column:1/2}.line-map{height:100%}.line-map__circle{position:absolute;border-radius:1rem;width:1rem;height:1rem;margin-top:-0.7rem;background:rgba(var(--foreground-color), 1);border:solid .2rem var(--accent-color);transition:transform .1s linear;z-index:5}.line-map__bar{position:relative;width:.1rem;height:100%;border-radius:1rem;background:var(--accent-color)}.line-map__bar::after{position:absolute;content:"";bottom:0;left:50%;transform:translateX(-50%);width:.7rem;height:.2rem;background-color:var(--accent-color)}.floor-label{position:absolute;display:flex;align-items:center;left:.2rem;margin-top:-1rem;-webkit-user-select:none;-moz-user-select:none;user-select:none;transition:transform .3s}.floor-circle{position:relative;border-radius:1rem;padding:.8rem}.floor-circle::after{content:"";position:absolute;padding:.3rem;top:50%;left:50%;transform:translate(-50%, -50%);background:rgba(var(--text-color), 1);border-radius:1rem}.floor-title{opacity:.5;font-size:.9rem;white-space:nowrap;padding:.4rem .6rem;margin-left:1rem;border-radius:.2rem;background:rgba(var(--foreground-color), 1);transition:box-shadow .3s,opacity .3s}.floor{padding-bottom:3rem;width:100%}.floor__header{position:relative;padding:.5rem 0;transform:translateY(-0.1rem);background:var(--background-color)}.floor__num{display:flex;align-items:center;font-size:1.8rem;font-weight:calc(900*var(--font-weight-factor));color:rgba(var(--text-color), 0.3)}.floor__title{font-size:1.3rem;font-weight:calc(700*var(--font-weight-factor))}.big-icon{height:2rem;width:2rem}.outlets-container{margin:1rem 0;gap:1.5rem}.outlet-preview{position:relative;display:grid;padding:1rem;align-items:center;border-radius:.7rem;background-color:rgba(var(--foreground-color), 1)}.outlet__title{line-height:1.2;max-width:18ch;font-size:1.8rem;margin-bottom:1rem;text-transform:capitalize;font-weight:calc(900*var(--font-weight-factor))}.svg-outlet-title{height:4rem;margin-bottom:1.5rem;fill:rgba(var(--text-color), 1);font-weight:calc(900*var(--font-weight-factor))}.outlet__description{color:rgba(var(--text-color), 0.8)}.outlet-preview__button{padding:.5rem 0;justify-self:flex-start;color:var(--accent-color);font-weight:calc(700*var(--font-weight-factor))}.outlet-preview__number{position:relative;line-height:1;font-size:8rem;font-weight:900;-webkit-text-stroke:1rem var(--accent-color);-webkit-text-fill-color:rgba(var(--foreground-color), 1);margin:0 .5rem}.outlet-preview__number::after{content:attr(data-number);position:absolute;line-height:1;font-size:1em;font-weight:inherit;-webkit-text-stroke:0;color:rgba(var(--foreground-color), 1)}.label{position:relative;font-size:.8rem;margin-bottom:.3rem}.value{font-size:1.2rem}.series-container{gap:1.5rem;padding-bottom:1.5rem;grid-template-columns:repeat(auto-fill, minmax(18rem, 1fr))}.bit-bond-series__row,.bob-fund__row,.person-card{min-width:100%}.bob-fund__row .grid{align-content:flex-start}.bob-fund__row,.bit-bond-series__row,.card{gap:1rem;padding:1.5rem;border-radius:.5rem;align-items:flex-start;background-color:rgba(var(--foreground-color), 1);box-shadow:0 .5rem 1rem -0.5rem rgba(0,0,0,.1)}.bit-bond-series__row .original-value{font-size:.85rem}.up-arrow{height:1em;width:1em;fill:var(--green);margin-right:.1em}.percent-gain{margin-right:.5em;font-weight:calc(500*var(--font-weight-factor))}.percent-gain,.time-elapsed{font-size:.8rem}.time-elapsed{color:rgba(var(--text-color), 0.8)}.person-card{position:relative;gap:1rem;text-align:center;justify-items:center;align-content:flex-start;grid-template-columns:1fr}.person__image{width:100%;height:auto;border-radius:.5rem;height:10rem;width:10rem;-o-object-position:top;object-position:top;border-radius:50%}.person__name{font-size:.9rem;text-transform:capitalize}.investor__bio{font-size:.85rem;margin-top:.5rem}.investor__contribution{font-size:.85rem}.intern-flo-id{margin-top:.3rem;font-size:.75rem}.intern__project{margin-top:.5rem}.intern__level{position:absolute;cursor:pointer;font-size:.8rem;border-radius:.2rem;margin-bottom:.3rem;padding:.3rem .5rem;justify-self:flex-end;font-weight:calc(500*var(--font-weight-factor));box-shadow:0 .1rem .2rem rgba(0,0,0,.2)}.starter{background-color:rgba(var(--foreground-color), 1)}.motivated{color:#000;background-color:#ffca28}.passionate{color:#000;background-color:#00e676}#intern_level_popup{--width: min(48rem, 100%)}.table{display:grid;gap:1rem;grid-template-columns:6rem 1fr}.table p{font-size:.9rem;color:rgba(var(--text-color), 0.9)}.outlet-hero-section{display:grid}#outlet_switcher{position:absolute;top:0;padding:1rem;border-radius:.3rem;background:rgba(var(--foreground-color), 1);box-shadow:0 2rem 4rem -1rem rgba(0,0,0,.2);z-index:2;outline:none}.outlet_switcher__floor{display:flex;flex-direction:column;overflow-y:auto}.outlet_switcher__button{display:flex;align-items:center;font-size:1rem;padding:.6rem 0;font-weight:calc(500*var(--font-weight-factor))}.outlet_switcher__button--active{color:var(--accent-color) !important}.outlet-label{display:grid;gap:.5rem;text-align:left;align-items:center;min-width:8rem;font-size:1.1rem;margin-bottom:.5rem;align-self:flex-start;grid-template-areas:"label icon" "num num"}.outlet-label .icon{grid-area:icon;fill:var(--accent-color);justify-self:flex-end}.outlet-label__name{font-size:1.7rem;color:rgba(var(--text-color), 0.5);font-weight:calc(900*var(--font-weight-factor))}.outlet-label__no{grid-area:num;display:flex;position:relative;line-height:1;font-size:8rem;font-weight:900;-webkit-text-stroke:1rem var(--accent-color);-webkit-text-fill-color:var(--background-color);margin:0 .5rem}.outlet-label__no::after{content:attr(data-number);position:absolute;line-height:1;font-size:1em;font-weight:inherit;-webkit-text-stroke:0;color:var(--background-color)}.auto-grid-layout{justify-content:flex-start;overflow-x:auto}.grid-2{grid-template-columns:auto 1fr}.rooms__header{z-index:1;display:flex;align-items:center;margin-bottom:1.5rem;background:var(--background-color);box-shadow:0 1rem 1rem -1rem rgba(0,0,0,.2)}.room__label{position:relative;display:flex;align-items:center;font-weight:calc(700*var(--font-weight-factor));padding-right:1.5rem;font-size:1.5rem}.room-button{position:relative;opacity:.6;flex-shrink:0;border-radius:0;font-weight:calc(500*var(--font-weight-factor));font-size:1.1rem;transition:opacity .3s,background-color .3s;padding:.6rem .8rem}.room-button:not(:last-of-type)::after{content:"";height:.1rem;width:4rem;margin-left:1rem;align-self:center;background:var(--accent-color)}.room-button[active]{opacity:1;color:var(--accent-color)}.room-button[active] .icon{fill:var(--accent-color)}.people-grid{display:grid;gap:3rem 1.5rem;grid-template-columns:repeat(auto-fill, minmax(13rem, 1fr))}.rooms-layout{position:relative;display:grid;gap:1rem;grid-template-columns:1fr 1fr;margin-bottom:4rem}.room-tile{display:flex;position:relative;border-radius:.5rem;transition:transform .3s;background-color:rgba(var(--foreground-color), 1);box-shadow:0 1rem 3rem -1rem rgba(0,0,0,.1);-webkit-tap-highlight-color:rgba(0,0,0,0)}.room-tile--main{padding-top:100%;grid-row:span 2}.room-tile--main .tile-content{position:absolute;bottom:0}.room-tile .tile-content{display:flex;width:100%;height:100%;padding:1.5rem;align-self:flex-end;flex-direction:column}.room-tile:active{transform:scale(0.95)}.room-tile__icon{position:absolute;height:6rem;width:6rem;top:50%;left:50%;transform:translate(-50%, -50%)}.room-tile__icon:not(.room-tile__icon--colored){fill:rgba(var(--text-color), 0.1)}.investors-icon{height:8rem;width:8rem}.room-tile__title{font-size:.9rem;padding:.4rem .8rem;border:solid .1rem var(--secondary-text-color);color:var(--secondary-text-color);border-radius:.3rem}#performance_preview{margin-top:auto}#performance_preview>*{padding:0;box-shadow:none}#expanding_tile{position:fixed;border-radius:.5rem;background-color:rgba(var(--foreground-color), 1);z-index:5}.room-container{position:fixed;top:0;bottom:0;left:0;right:0;z-index:6;overflow-y:auto;background-color:var(--background-color);grid-template-rows:auto auto 1fr auto;align-items:flex-start}.room{padding-bottom:4rem}.room-container__header{display:flex;position:-webkit-sticky;position:sticky;top:0;z-index:2;background-color:inherit;padding:1rem 0}.room-container__header::before{position:absolute;content:"";width:1rem;height:100%;left:-1rem;top:0;background-color:inherit}#hero_title{font-size:2rem;margin-bottom:2rem;font-weight:calc(700*var(--font-weight-factor))}.room-container__footer{position:-webkit-sticky;position:sticky;display:flex;bottom:0;z-index:2;overflow-x:auto;align-items:center;padding:2rem .5rem .5rem 3rem;margin-left:-3rem;background:linear-gradient(0deg, var(--background-color) 70%, rgba(0, 0, 0, 0) 100%)}.room-container__footer>h4{margin-right:1rem}#room_switcher{display:grid;gap:.5rem;grid-auto-flow:column;justify-content:flex-start}.room-shortcut .room-tile__title{font-weight:500;font-size:.9rem}.ext-link-tile{position:relative;display:flex;padding:1.5rem;border-radius:.5rem;background-size:contain;align-items:center;justify-content:space-between;border:solid .1rem var(--banner-color);box-shadow:0 1rem 3rem -1rem rgba(0,0,0,.2);-webkit-tap-highlight-color:rgba(0,0,0,0);overflow:hidden}.tile__title{font-size:1.25rem;line-height:1;font-weight:calc(500*var(--font-weight-factor));z-index:1}.tile__brief{margin-top:1rem;z-index:1;color:rgba(var(--text-color), 0.7)}.round{display:inline-flex;flex-shrink:0;padding:.4rem 1rem;border-radius:.3rem;color:#fff;background-color:var(--banner-color);font-weight:700 !important;font-size:1rem;z-index:1}.timeline-container{display:grid;padding:3rem 0;gap:4rem}.timeline-item{position:relative;display:grid;padding-left:1rem}.timeline-item:not(:last-of-type):before{content:"";position:absolute;width:.1rem;height:calc(100% + 4rem);top:0;left:0;background-color:rgba(var(--text-color), 0.7)}.timeline-item:after{content:"";position:absolute;height:.6rem;width:.6rem;border-radius:50%;top:0;left:-0.25rem;background-color:rgba(var(--text-color), 1)}.timeline-item__header{display:flex;font-size:.8rem;padding:.5rem .8rem;border-radius:.2rem;justify-self:flex-start;transform:translateY(-0.8rem);box-shadow:0 0 0 1px rgba(var(--text-color), 0.6);background-color:rgba(var(--foreground-color), 1)}.features-grid{display:grid;gap:3rem 2rem;margin-bottom:5rem}.feature{display:flex;position:relative;flex-direction:column;align-items:center;text-align:center;bottom:0;left:0;width:100%;height:100%}.feature__icon{display:flex;align-items:center;margin-bottom:1rem;padding:1.5rem;border-radius:50%;background-color:rgba(var(--text-color), 0.06)}.feature__icon .icon{height:2.5rem;width:2.5rem;fill:rgba(var(--text-color), 0.9)}.feature__title{color:rgba(var(--text-color), 0.9);font-size:1.2rem;margin-bottom:.5rem}.feature__brief{font-size:.9rem;color:rgba(var(--text-color), 0.8)}#line_sample{width:2rem;height:.2rem;margin-right:1rem;background:linear-gradient(90deg, #f49080, #80b6f4)}.graph-container{min-height:16rem;margin:1rem 0 4rem 0}.link-container{display:grid;gap:1rem;justify-items:flex-start;align-items:center}@media only screen and (max-width: 640px){.hide-on-mobile{display:none}.outlet-preview{gap:1.5rem}.outlet-preview__number-container{grid-row:1/2}.outlet-preview__number::after{left:0}.outlet-preview__number,.outlet-label__no{font-size:5rem}#outlet_switcher{width:calc(100% - 2rem)}.outlet-label{grid-row:1/2}.outlet-hero-section{margin-top:2rem}.outlet-label__no{margin-bottom:2rem}.series-container{gap:1rem}.outlet-list__item .icon{margin-left:auto}.rooms__header{flex-direction:column;align-items:flex-start}.rooms__header scroll-tab-header{width:calc(100vw - 2rem)}.room-tile{padding-top:100%}.room-tile--main{grid-column:span 2}.room-tile .tile-content{top:0;padding:1rem;position:absolute}.room-tile__icon{height:4rem;width:4rem}.investors-icon{height:6rem;width:6rem}#hero_title{margin-top:2rem}.ext-link-tile{padding:1rem;flex-direction:column;align-items:flex-start}.link-container{margin-top:1.5rem}}@media only screen and (min-width: 640px){#home_page,.page,.page-layout{grid-template-columns:1fr 90vw 1fr}.h1{font-size:4rem}.h2{font-size:2.5rem}.h3{font-size:1.5rem}.h4{font-size:1.1rem}#main_header{padding:1.2rem 2rem}#floor_list{gap:8vw;padding:0 8vw 4rem 8vw}.floor_list__item{position:relative;grid-template-columns:1fr 1fr;align-items:center;justify-content:center}.floor_list__item .floor_list__header{display:grid}.floor_list__item:not(:last-of-type){padding-bottom:8vw}.floor_list__item:not(:last-of-type)::after{content:"";position:absolute;width:24rem;height:.2rem;bottom:0;background-color:var(--accent-color);justify-self:center}.floor_list__item:nth-of-type(odd) .floor_list__header{text-align:right;grid-column:2/3;grid-row:1/2}.floor_list__item:nth-of-type(odd) .outlet-list{grid-row:1/2;grid-column:1/2}.floor__header::before{left:-10%;width:10%}.floor__header::after{right:-10%;width:10%}.outlets-container{gap:1.5rem}.outlet-preview{gap:1rem;padding:5rem 4rem;grid-template-columns:1.2fr 1fr;border:1px solid rgba(0,0,0,.2);box-shadow:0 4rem 3rem -2rem rgba(0,0,0,.06)}.outlet-preview:nth-of-type(even){grid-template-columns:1fr 2fr}.outlet-preview:nth-of-type(even) .outlet-preview__info{grid-column:2/3}.outlet-preview:nth-of-type(even) .outlet-preview__number-container{grid-column:1/2;grid-row:1/2}.outlet-preview:nth-of-type(even) .outlet-preview__number::after{left:0}.outlet-preview:nth-of-type(odd) .outlet-preview__number-container{margin-left:auto;text-align:right}.outlet-preview:nth-of-type(odd) .outlet-preview__number::after{right:0}.outlet__title{font-size:2.5rem}#outlet_switcher{padding:1rem 1.5rem}.outlet-label{grid-column:2/3;justify-self:right}.outlet-label__no{justify-content:flex-end}.outlet-hero-section{position:relative;grid-template-columns:1fr auto;gap:1.5rem;margin-top:4rem}.auto-grid-layout{grid-template-columns:auto 1fr}.rooms-layout{grid-template-rows:1fr 1fr}.room-container__header{padding:1.5rem 0}.people-grid{gap:5rem 3rem}#hero_title{font-size:3rem}.feature__title{font-size:1.5rem}.features-grid{grid-template-columns:repeat(auto-fill, minmax(20rem, 1fr))}.graph-container{width:80%;min-height:60vh;justify-self:center}}@media only screen and (min-width: 1280px){#home_page,.page,.page-layout{grid-template-columns:1fr 85vw 1fr}.grid-3{justify-content:center}.grid-3>.grid{width:100%}.rooms-layout{grid-template-columns:repeat(3, 1fr);grid-auto-flow:column}.link-container{grid-template-columns:auto auto}}@media(any-hover: hover){::-webkit-scrollbar{width:.5rem;height:.5rem}::-webkit-scrollbar-thumb{background:rgba(var(--text-color), 0.3);border-radius:1rem}::-webkit-scrollbar-thumb:hover{background:rgba(var(--text-color), 0.5)}.page-link{cursor:pointer;transition:color .3s}.page-link:hover{color:var(--accent-color)}.page-link:hover .icon{fill:var(--accent-color)}.floor__button:hover{background:var(--background-color)}.outlet-list__item .icon{fill:var(--accent-color);opacity:0;transform-origin:left;transform:translateX(-0.5rem);transition:opacity .3s,transform .3s}.outlet-list__item:hover .icon{opacity:1;transform:translateX(0)}.intern__level{transition:transform .3s}.intern__level:hover{transform:scale(1.1)}}
\ No newline at end of file
diff --git a/assets/css/main.scss b/assets/css/main.scss
index b39666d..d4b8fdc 100644
--- a/assets/css/main.scss
+++ b/assets/css/main.scss
@@ -1,1568 +1,1539 @@
-* :not(ol){
-    padding: 0;
-    margin: 0;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-    font-family: 'Roboto Slab', serif;
+* :not(ol) {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+  font-family: "Roboto Slab", serif;
 }
-:root{
-    font-size: clamp(1rem, 1.2vmax, 3rem);
+:root {
+  font-size: clamp(1rem, 1.2vmax, 3rem);
 }
 body {
-    --accent-color: #E72C37;
-    --light-shade: rgba(var(--text-color), 0.06);
-    --text-color: 17, 17, 17;
-    --text-color-light: 100, 100, 100;
-    --foreground-color: 255, 255, 255;
-    --background-color: #F6f6f6;
-    --error-color: red;
-    --green: #007936;
-    --banner-color: #1E88E5;
-    --secondary-text-color: #034baa;
-    --font-weight-factor: 1;
-    color: rgba(var(--text-color), 1);
-    height: calc(100%);
-    background: var(--background-color);
+  --accent-color: #e72c37;
+  --light-shade: rgba(var(--text-color), 0.06);
+  --text-color: 17, 17, 17;
+  --text-color-light: 100, 100, 100;
+  --foreground-color: 255, 255, 255;
+  --background-color: #f6f6f6;
+  --error-color: red;
+  --green: #007936;
+  --banner-color: #1e88e5;
+  --secondary-text-color: #034baa;
+  --font-weight-factor: 1;
+  color: rgba(var(--text-color), 1);
+  height: calc(100%);
+  background: var(--background-color);
 }
-body[data-theme='dark']{
-    --accent-color: #ff3949;
-    --green: #13ff5a;
-    --text-color: 240, 240, 240;
-    --text-color-light: 170, 170, 170;
-    --foreground-color: 20, 20, 20;
-    --background-color: #0a0a0a;
-    --error-color: rgb(255, 106, 106);
-    --banner-color: #0166be;
-    --secondary-text-color: #4393fc;
-    --font-weight-factor: 0.9;
-    #outlet_switcher{
-        background: linear-gradient(rgba(var(--text-color), 0.06), rgba(var(--text-color), 0.06)), rgba(var(--foreground-color), 1);
-    }
-    .outlet-preview{
-        box-shadow: 0 4rem 3rem -2rem rgba(0, 0, 0, 0.3);
-    }
+body[data-theme="dark"] {
+  --accent-color: #ff3949;
+  --green: #13ff5a;
+  --text-color: 240, 240, 240;
+  --text-color-light: 170, 170, 170;
+  --foreground-color: 20, 20, 20;
+  --background-color: #0a0a0a;
+  --error-color: rgb(255, 106, 106);
+  --banner-color: #0166be;
+  --secondary-text-color: #4393fc;
+  --font-weight-factor: 0.9;
+  #outlet_switcher {
+    background: linear-gradient(
+        rgba(var(--text-color), 0.06),
+        rgba(var(--text-color), 0.06)
+      ),
+      rgba(var(--foreground-color), 1);
+  }
+  .outlet-preview {
+    box-shadow: 0 4rem 3rem -2rem rgba(0, 0, 0, 0.3);
+  }
 }
 
-.full-bleed{
-    grid-column: 1/4;
+.full-bleed {
+  grid-column: 1/4;
 }
 
-.h1{
-    font-size: 2.5rem;
+.h1 {
+  font-size: 2.5rem;
 }
-.h2{
-    font-size: 2rem;
+.h2 {
+  font-size: 2rem;
 }
-.h3{
-    font-size: 1.4rem;
+.h3 {
+  font-size: 1.4rem;
 }
-.h4{
-    font-size: 1rem;
+.h4 {
+  font-size: 1rem;
 }
-.h5{
-    font-size: 0.8rem;
+.h5 {
+  font-size: 0.8rem;
 }
 
-.uppercase{
-    text-transform: uppercase;
+.uppercase {
+  text-transform: uppercase;
 }
-.capitalize{
-    text-transform: capitalize;
+.capitalize {
+  text-transform: capitalize;
 }
 
-#my_popup{
-    --width: min(24rem, 100%);
+#my_popup {
+  --width: min(24rem, 100%);
 }
 
 p {
-    font-weight: calc(400 * var(--font-weight-factor));
-    max-width: 70ch;
-    line-height: 1.6;
+  font-weight: calc(400 * var(--font-weight-factor));
+  max-width: 70ch;
+  line-height: 1.6;
 }
 
-img{
-    object-fit: cover;
+img {
+  object-fit: cover;
 }
 
-a{
-    color: inherit;
-    text-decoration: none;
-    &:focus-visible{
-        box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 1) inset;
-    }
+a {
+  color: inherit;
+  text-decoration: none;
+  &:focus-visible {
+    box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 1) inset;
+  }
 }
-p{
-    a{
-        color: var(--accent-color);
-    }
+p {
+  a {
+    color: var(--accent-color);
+  }
 }
 
-button{
-    position: relative;
-    overflow: hidden;
-    display: inline-flex;
-    align-items: center;
-    border: none;
-    background: none;
-    cursor: pointer;
-    outline: none;
-    color: inherit;
-    font-weight: calc(500 * var(--font-weight-factor));
-    -webkit-tap-highlight-color: transparent;
+button {
+  position: relative;
+  overflow: hidden;
+  display: inline-flex;
+  align-items: center;
+  border: none;
+  background: none;
+  cursor: pointer;
+  outline: none;
+  color: inherit;
+  font-weight: calc(500 * var(--font-weight-factor));
+  -webkit-tap-highlight-color: transparent;
 }
-.button{
-    border-radius: 0.2rem;
-    padding: 0.5rem 0.6rem;
-    &--primary{
-        background: var(--accent-color);
-        color: rgba(var(--foreground-color), 1);
-        .icon{
-            fill: rgba(var(--foreground-color), 1);
-        }
-    }
-    &--outlined{
-        box-shadow: 0 0 0 1px rgba(var(--text-color), 0.5);
-    }
-    &--filled{
-        background-color: rgba(var(--text-color), 0.2);
+.button {
+  border-radius: 0.2rem;
+  padding: 0.5rem 0.6rem;
+  &--primary {
+    background: var(--accent-color);
+    color: rgba(var(--foreground-color), 1);
+    .icon {
+      fill: rgba(var(--foreground-color), 1);
     }
+  }
+  &--outlined {
+    box-shadow: 0 0 0 1px rgba(var(--text-color), 0.5);
+  }
+  &--filled {
+    background-color: rgba(var(--text-color), 0.2);
+  }
 }
-button:focus-visible{
-    outline: rgba(var(--text-color), 1) 0.1rem solid;
+button:focus-visible {
+  outline: rgba(var(--text-color), 1) 0.1rem solid;
 }
 sm-input,
-sm-textarea{
-    --border-radius: 0.2rem;
-    --background: rgba(var(--text-color), 0.06);
+sm-textarea {
+  --border-radius: 0.2rem;
+  --background: rgba(var(--text-color), 0.06);
 }
-sm-button{
-    --border-radius: 0.2rem;
+sm-button {
+  --border-radius: 0.2rem;
 }
-sm-tab-header{
-    align-self: flex-start;
+sm-tab-header {
+  align-self: flex-start;
 }
-ul{
-    list-style: none;
+ul {
+  list-style: none;
 }
-ol[type="1"]{
-    display: grid;
-    gap: 2rem;
+ol[type="1"] {
+  display: grid;
+  gap: 2rem;
 }
-.accent-color{
-    color: var(--accent-color);
+.accent-color {
+  color: var(--accent-color);
 }
-.flex{
-    display: flex;
+.flex {
+  display: flex;
 }
-.grid{
-    display: grid;
+.flex-wrap {
+  flex-wrap: wrap;
 }
-.grid-3{
-    grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
+.grid {
+  display: grid;
 }
-.flow-column{
-    grid-auto-flow: column;
+.grid-3 {
+  grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
 }
-.gap-0-5{
-    gap: 0.5rem;
+.flow-column {
+  grid-auto-flow: column;
 }
-.gap-1{
-    gap: 1rem;
+.gap-0-5 {
+  gap: 0.5rem;
 }
-.gap-1-5{
-    gap: 1.5rem;
+.gap-1 {
+  gap: 1rem;
 }
-.gap-2{
-    gap: 2rem;
+.gap-1-5 {
+  gap: 1.5rem;
 }
-.gap-3{
-    gap: 3rem;
+.gap-2 {
+  gap: 2rem;
 }
-.pos-relative{
-    position: relative;
+.gap-3 {
+  gap: 3rem;
 }
-.text-align-right{
-    text-align: right;
+.pos-relative {
+  position: relative;
 }
-.align-start{
-    align-items: flex-start;
+.text-align-right {
+  text-align: right;
 }
-.align-center{
-    align-items: center;
+.align-start {
+  align-items: flex-start;
 }
-.text-center{
-    text-align: center;
+.align-center {
+  align-items: center;
 }
-.justify-start{
-    justify-content: start;
+.text-center {
+  text-align: center;
 }
-.justify-center{
-    justify-content: center;
+.justify-start {
+  justify-content: start;
 }
-.justify-right{
-    margin-left: auto;
+.justify-center {
+  justify-content: center;
 }
-.align-self-center{
-    align-self: center;
+.justify-right {
+  margin-left: auto;
 }
-.justify-self-center{
-    justify-self: center;
+.align-self-center {
+  align-self: center;
 }
-.justify-self-start{
-    justify-self: start;
+.justify-self-center {
+  justify-self: center;
 }
-.direction-column{
-    flex-direction: column;
+.justify-self-start {
+  justify-self: start;
 }
-.space-between{
-    justify-content: space-between;
+.direction-column {
+  flex-direction: column;
 }
-.w-100{
-    width: 100%;
+.space-between {
+  justify-content: space-between;
 }
-.margin-top-1-5{
-    margin-top: 1.5rem;
+.w-100 {
+  width: 100%;
 }
-.margin-bottom-0-5r{
-    margin-bottom: 0.5rem;
+.margin-top-1-5 {
+  margin-top: 1.5rem;
 }
-.margin-bottom-1r{
-    margin-bottom: 1rem;
+.margin-bottom-0-5r {
+  margin-bottom: 0.5rem;
 }
-.margin-bottom-1-5r{
-    margin-bottom: 1.5rem;
+.margin-bottom-1r {
+  margin-bottom: 1rem;
 }
-.margin-bottom-2r{
-    margin-bottom: 2rem;
+.margin-bottom-1-5r {
+  margin-bottom: 1.5rem;
 }
-.margin-bottom-3r{
-    margin-bottom: 3rem;
+.margin-bottom-2r {
+  margin-bottom: 2rem;
 }
-.margin-bottom-4r{
-    margin-bottom: 4rem;
+.margin-bottom-3r {
+  margin-bottom: 3rem;
 }
-.margin-left-0-5{
-    margin-left: 0.5rem;
+.margin-bottom-4r {
+  margin-bottom: 4rem;
 }
-.margin-right-0-5{
+.margin-left-0-5 {
+  margin-left: 0.5rem;
+}
+.margin-right-0-5 {
+  margin-right: 0.5rem;
+}
+.hide {
+  opacity: 0;
+  pointer-events: none;
+}
+.hide-completely {
+  display: none !important;
+}
+.no-transformations {
+  transform: none !important;
+}
+.overflow-ellipsis {
+  width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.ripple {
+  position: absolute;
+  border-radius: 50%;
+  transform: scale(0);
+  background: rgba(var(--text-color), 0.16);
+  pointer-events: none;
+}
+.interact {
+  position: relative;
+  overflow: hidden;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+}
+.breakable {
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  -ms-word-break: break-all;
+  word-break: break-word;
+  -ms-hyphens: auto;
+  -moz-hyphens: auto;
+  -webkit-hyphens: auto;
+  hyphens: auto;
+}
+.observe-empty-state:empty {
+  display: none;
+}
+.observe-empty-state:not(:empty) ~ .empty-state {
+  display: none;
+}
+.icon {
+  width: 1.2rem;
+  height: 1.2rem;
+  fill: rgba(var(--text-color), 0.9);
+}
+.icon-only {
+  height: 2.6rem;
+  width: 2.6rem;
+  padding: 0.6rem;
+}
+.close-icon {
+  padding: 0.3rem;
+}
+.close-button {
+  left: -0.5rem;
+}
+
+.button__label {
+  font-size: 1rem;
+}
+.button__icon {
+  height: 1.1rem;
+  width: 1.1rem;
+  &--left {
     margin-right: 0.5rem;
-}
-.hide{
-    opacity: 0;
-    pointer-events: none;
-}
-.hide-completely{
-    display: none !important;
-}
-.no-transformations{
-    transform: none !important;
-}
-.overflow-ellipsis{
-    width: 100%;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-}
-.ripple{
-    position: absolute;
-    border-radius: 50%;
-    transform: scale(0);
-    background: rgba(var(--text-color), 0.16);
-    pointer-events: none;
-}
-.interact{
-    position: relative;
-    overflow: hidden;
-    cursor: pointer;
-    -webkit-tap-highlight-color: transparent;
-}
-.breakable{
-    overflow-wrap: break-word;
-    word-wrap: break-word;
-    -ms-word-break: break-all;
-    word-break: break-word;
-    -ms-hyphens: auto;
-    -moz-hyphens: auto;
-    -webkit-hyphens: auto;
-    hyphens: auto;
-}
-.observe-empty-state:empty{
-    display: none;
-}
-.observe-empty-state:not(:empty) ~ .empty-state{
-    display: none;
-}
-.icon{
-    width: 1.5rem;
-    height: 1.5rem;
-    fill: rgba(var(--text-color), 0.9);
-}
-.icon-only{
-    height: 2.6rem;
-    width: 2.6rem;
-    padding: 0.6rem;
-}
-.close-icon{
-    padding: 0.3rem;
-}
-.close-button{
-    left: -0.5rem;
+  }
+  &--right {
+    margin-left: 0.5rem;
+  }
 }
 
-.button__label{
-    font-size: 1rem;
+.color-0-9 {
+  color: rgba(var(--text-color), 0.9);
 }
-.button__icon{
-    height: 1.1rem;
-    width: 1.1rem;
-    &--left{
-        margin-right: 0.5rem;
-    }
-    &--right{
-        margin-left: 0.5rem;
-    }
+.color-0-8 {
+  color: rgba(var(--text-color), 0.8);
+}
+.color-0-7 {
+  color: rgba(var(--text-color), 0.7);
+}
+.color-0-3 {
+  color: rgba(var(--text-color), 0.3);
 }
 
-.color-0-9{
-    color: rgba(var(--text-color), 0.9);
+.weight-400 {
+  font-weight: calc(400 * var(--font-weight-factor));
 }
-.color-0-8{
-    color: rgba(var(--text-color), 0.8);
+.weight-500 {
+  font-weight: calc(500 * var(--font-weight-factor));
 }
-.color-0-7{
+.weight-700 {
+  font-weight: calc(700 * var(--font-weight-factor));
+}
+.weight-900 {
+  font-weight: calc(900 * var(--font-weight-factor));
+}
+
+.popup__header {
+  padding: 0.5rem 1.5rem 0 1rem;
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 0.5rem;
+  align-items: center;
+  width: 100%;
+}
+.popup__header__close {
+  padding: 0.5rem;
+  cursor: pointer;
+}
+
+.banner {
+  display: grid;
+  gap: 1rem;
+  padding: 0.5rem 0 0.5rem 1rem;
+  align-items: center;
+  border: 0.1rem solid var(--banner-color);
+  grid-template-columns: 1fr auto;
+  border-radius: 0.5rem;
+  margin: 0 1rem;
+  .close-icon {
+    width: 2.2rem;
+    height: 2.2rem;
     color: rgba(var(--text-color), 0.7);
+  }
 }
-.color-0-3{
-    color: rgba(var(--text-color), 0.3);
+.banner__text {
+  max-width: unset;
+  font-size: 0.9rem;
 }
 
-.weight-400{
-    font-weight: calc(400 * var(--font-weight-factor));
+#elevator_popup {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 15;
+  grid-template-rows: auto 1fr;
+  background: rgba(var(--foreground-color), 1);
 }
-.weight-500{
-    font-weight: calc(500 * var(--font-weight-factor));
+.elevator__header {
+  position: sticky;
+  top: 0;
+  padding: 1.2rem 1.5rem;
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 0.5rem;
+  align-items: center;
+  justify-content: flex-start;
+  width: 100%;
+  background: rgba(var(--foreground-color), 1);
+  z-index: 1;
 }
-.weight-700{
-    font-weight: calc(700 * var(--font-weight-factor));
+#floor_list {
+  align-content: flex-start;
+  padding: 0 1.5rem 4rem 1.5rem;
+  gap: 2rem;
+  overflow-y: auto;
+  transform-origin: top;
 }
-.weight-900{
-    font-weight: calc(900 * var(--font-weight-factor));
+.floor_list__item {
+  display: grid;
+  gap: 1.5rem;
+  transform-origin: top;
+  &:last-of-type {
+    padding-bottom: 25vh;
+  }
+}
+.floor_list__header {
+  position: sticky;
+  top: 0;
+  padding-bottom: 0.5rem;
+  background: rgba(var(--foreground-color), 1);
+  z-index: 1;
+  text-transform: capitalize;
 }
 
-.popup__header{
-    padding: 0.5rem 1.5rem 0 1rem;
-    display: grid;
-    grid-template-columns: auto 1fr;
-    gap: 0.5rem;
-    align-items: center;
-    width: 100%;
+.outlet-list {
+  gap: 2rem;
+  counter-reset: outlet-counter;
 }
-.popup__header__close{
-    padding: 0.5rem;
-    cursor: pointer;
-}
-
-.banner{
-    display: grid;
-    gap: 1rem;
-    padding: 0.5rem 0 0.5rem 1rem;
-    align-items: center;
-    border: 0.1rem solid var(--banner-color);
-    grid-template-columns: 1fr auto;
-    border-radius: 0.5rem;
-    margin: 0 1rem;
-    .close-icon{
-        width: 2.2rem;
-        height: 2.2rem;
-        color: rgba(var(--text-color), 0.7);
-    }
-}
-.banner__text{
-    max-width: unset;
-    font-size: 0.9rem;
-}
-
-#elevator_popup{
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    z-index: 15;
-    grid-template-rows: auto 1fr;
-    background: rgba(var(--foreground-color), 1);
-}
-.elevator__header{
-    position: sticky;
-    top: 0;
-    padding: 1.2rem 1.5rem;
-    display: grid;
-    grid-template-columns: auto 1fr;
-    gap: 0.5rem;
-    align-items: center;
-    justify-content: flex-start;
-    width: 100%;
-    background: rgba(var(--foreground-color), 1);
-    z-index: 1;
-
-}
-#floor_list{
-    align-content: flex-start;
-    padding: 0 1.5rem 4rem 1.5rem;
-    gap: 2rem;
-    overflow-y: auto;
-    transform-origin: top;
-}
-.floor_list__item{
-    display: grid;
-    gap: 1.5rem;
-    transform-origin: top;
-    &:last-of-type{
-        padding-bottom: 25vh;
-    }
-}
-.floor_list__header{
-    position: sticky;
-    top: 0;
-    padding-bottom: 0.5rem;
-    background: rgba(var(--foreground-color), 1);
-    z-index: 1;
-    text-transform: capitalize;
-}
-
-.outlet-list{
-    gap: 2rem;
-    counter-reset: outlet-counter;
-}
-.floor-list__outlet{
-    display: flex;
-    align-items: center;
-    &::before{
-        content: '';
-        width: 0.4rem;
-        height: 1.5rem;
-        margin-right: 0.5rem;
-        background-color: var(--accent-color);
-    }
-}
-.outlet-list__item{
-    display: grid;
-    user-select: none;
-    width: min(50ch, 100%);
-    counter-increment: outlet-counter;
-    .outlet-title::before{
-        content: counter(outlet-counter)". ";
-    }
-    .icon{
-        fill: var(--accent-color);
-        flex-shrink: 0;
-    }
-}
-.outlet-title{
-    font-size: 1.2rem;
-    font-weight: calc(700 * var(--font-weight-factor));
-    margin-bottom: 0.5rem;
-}
-.outlet-brief{
-    color: rgba(var(--text-color), 0.8);
-}
-
-.popup__header__close{
-    padding: 0.5rem;
-    cursor: pointer;
-}
-
-
-.floor__button{
-    padding: 0.5rem 0;
-    flex-direction: column;
-    text-align: left;
-    align-items: flex-start;
-    border-radius: 0.2rem;
-    font-size: 1.5rem;
-    font-weight: calc(900 * var(--font-weight-factor));
-    background: rgba(var(--foreground-color), 1);
-    &--active{
-        background: rgba(var(--text-color), 0.2);
-        box-shadow: 0 0 0 0.4rem rgba(var(--text-color), 1) inset;
-    }
-}
-.floor-name{
-    margin-top: 0.2rem;
-    font-size: 0.8rem;
-}
-
-.elevator__floor-line{
-    flex: 1;
-    height: 0.1rem;
-    margin-left: 2rem;
-    background-color: var(--accent-color);
-}
-
-
-#main_header{
-    position: relative;
-    padding: 1rem;
-    grid-template-columns: repeat(3, 1fr);
-}
-#elevator_button{
-    justify-self: flex-start;
-    margin-left: -1rem;
-    .icon{
-        width: 1.7rem;
-        height: 1.7rem;
-    }
-}
-#main_header__logo{
-    height: 1.8rem;
-    width: 1.8rem;
-}
-.theme-switcher{
-    position: relative;
-    justify-self: flex-end;
-    width: 1.5rem;
+.floor-list__outlet {
+  display: flex;
+  align-items: center;
+  &::before {
+    content: "";
+    width: 0.4rem;
     height: 1.5rem;
-    cursor: pointer;
-    -webkit-tap-highlight-color: transparent;
-    .icon{
-        position: absolute;
-        transition: transform 0.6s;
-    }
+    margin-right: 0.5rem;
+    background-color: var(--accent-color);
+  }
 }
-.theme-switcher__checkbox{
-    display: none;
-    &:checked ~ .moon-icon{
-        transform: scale(0) rotate(90deg);
-    }
-    &:not(:checked) ~ .sun-icon{
-        transform: scale(0)  rotate(-90deg);
-    }
+.outlet-list__item {
+  display: grid;
+  user-select: none;
+  width: min(50ch, 100%);
+  counter-increment: outlet-counter;
+  .outlet-title::before {
+    content: counter(outlet-counter) ". ";
+  }
+  .icon {
+    fill: var(--accent-color);
+    flex-shrink: 0;
+  }
+}
+.outlet-title {
+  font-size: 1.2rem;
+  font-weight: calc(700 * var(--font-weight-factor));
+  margin-bottom: 0.5rem;
+}
+.outlet-brief {
+  color: rgba(var(--text-color), 0.8);
+}
+
+.popup__header__close {
+  padding: 0.5rem;
+  cursor: pointer;
+}
+
+.floor__button {
+  padding: 0.5rem 0;
+  flex-direction: column;
+  text-align: left;
+  align-items: flex-start;
+  border-radius: 0.2rem;
+  font-size: 1.5rem;
+  font-weight: calc(900 * var(--font-weight-factor));
+  background: rgba(var(--foreground-color), 1);
+  &--active {
+    background: rgba(var(--text-color), 0.2);
+    box-shadow: 0 0 0 0.4rem rgba(var(--text-color), 1) inset;
+  }
+}
+.floor-name {
+  margin-top: 0.2rem;
+  font-size: 0.8rem;
+}
+
+.elevator__floor-line {
+  flex: 1;
+  height: 0.1rem;
+  margin-left: 2rem;
+  background-color: var(--accent-color);
+}
+
+#main_header {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  background: var(--background-color);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem;
+}
+#elevator_button {
+  justify-self: flex-start;
+  margin-left: -1rem;
+}
+.main-logo {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+}
+#main_header__logo {
+  height: 1.5rem;
+  width: 1.5rem;
 }
 
 .page,
-.page-layout{
-    position: relative;
-    display: grid;
-    grid-template-columns: 1rem 1fr 1rem;
-    & > * {
-        grid-column: 2/3;
-    }
+.page-layout {
+  position: relative;
+  display: grid;
+  grid-template-columns: 1rem 1fr 1rem;
+  & > * {
+    grid-column: 2/3;
+  }
 }
 
-.page{
-    padding-bottom: 4rem;
+.page {
+  padding-bottom: 4rem;
 }
 
-.tag{
-    background: var(--accent-color);
-    padding: 0.4rem 0.6rem;
+.tag {
+  background: var(--accent-color);
+  padding: 0.4rem 0.6rem;
 }
 
-#home_page{
-    will-change: scroll-position;
-    overflow-y: auto;
-    max-height: calc(100vh - 5.2rem);
-    grid-template-columns: 2rem 1fr;
-    scroll-behavior: smooth;
+#home_page {
+  will-change: scroll-position;
+  scroll-behavior: smooth;
 }
 
-#floor_line_map{
-    position: sticky;
-    top: 1rem;
-    height: 40vh;
-    z-index: 10;
-    grid-template-columns: 2rem 1fr;
-    grid-column: 1/2;
+#floor_line_map {
+  position: sticky;
+  top: 1rem;
+  height: 40vh;
+  z-index: 10;
+  grid-template-columns: 2rem 1fr;
+  grid-column: 1/2;
 }
-.line-map{
-    height: 100%;
+.line-map {
+  height: 100%;
 }
-.line-map__circle{
+.line-map__circle {
+  position: absolute;
+  border-radius: 1rem;
+  width: 1rem;
+  height: 1rem;
+  margin-top: -0.7rem;
+  background: rgba(var(--foreground-color), 1);
+  border: solid 0.2rem var(--accent-color);
+  transition: transform 0.1s linear;
+  z-index: 5;
+}
+.line-map__bar {
+  position: relative;
+  width: 0.1rem;
+  height: 100%;
+  border-radius: 1rem;
+  background: var(--accent-color);
+  &::after {
     position: absolute;
-    border-radius: 1rem;
-    width: 1rem;
-    height: 1rem;
-    margin-top: -0.7rem;
-    background: rgba(var(--foreground-color), 1);
-    border: solid 0.2rem var(--accent-color);
-    transition: transform 0.1s linear;
-    z-index: 5;
-}
-.line-map__bar{
-    position: relative;
-    width: 0.1rem;
-    height: 100%;
-    border-radius: 1rem;
-    background: var(--accent-color);
-    &::after{
-        position: absolute;
-        content: '';
-        bottom: 0;
-        left: 50%;
-        transform: translateX(-50%);
-        width: 0.7rem;
-        height: 0.2rem;
-        background-color: var(--accent-color);
-    }
+    content: "";
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 0.7rem;
+    height: 0.2rem;
+    background-color: var(--accent-color);
+  }
 }
 
-.floor-label{
+.floor-label {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  left: 0.2rem;
+  margin-top: -1rem;
+  user-select: none;
+  transition: transform 0.3s;
+}
+.floor-circle {
+  position: relative;
+  border-radius: 1rem;
+  padding: 0.8rem;
+  &::after {
+    content: "";
     position: absolute;
-    display: flex;
-    align-items: center;
-    left: 0.2rem;
-    margin-top: -1rem;
-    user-select: none;
-    transition: transform 0.3s;
-}
-.floor-circle{
-    position: relative;
-    border-radius: 1rem;
-    padding: 0.8rem;
-    &::after{
-        content: '';
-        position: absolute;
-        padding: 0.3rem;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        background: rgba(var(--text-color), 1);
-        border-radius: 1rem;
-    }
-}
-.floor-title{
-    opacity: 0.5;
-    font-size: 0.9rem;
-    white-space: nowrap;
-    padding: 0.4rem 0.6rem;
-    margin-left: 1rem;
-    border-radius: 0.2rem;
-    background: rgba(var(--foreground-color), 1);
-    transition: box-shadow 0.3s, opacity 0.3s;
-}
-
-#floor_container{
-    width: calc(100% - 1rem);
-}
-
-.floor{
-    padding-bottom: 3rem;
-    width: 100%;
-}
-
-.floor__header{
-    position: relative;
-    padding: 0.5rem 0;
-    transform: translateY(-0.1rem);
-    background: var(--background-color);
-}
-
-.floor__num{
-    display: flex;
-    align-items: center;
-    font-size: 1.8rem;
-    font-weight: calc(900 * var(--font-weight-factor));
-    color: rgba(var(--text-color), 0.3);
-}
-
-.floor__title{
-    font-size: 1.3rem;
-    font-weight: calc(700 * var(--font-weight-factor));
-}
-
-.big-icon{
-    height: 2rem;
-    width: 2rem;
-}
-
-.outlets-container{
-    margin: 1rem 0;
-    gap: 1.5rem;
-}
-
-.outlet-preview{
-    position: relative;
-    display: grid;
-    padding: 1rem;
-    align-items: center;
-    border-radius: 0.7rem;
-    background-color: rgba(var(--foreground-color), 1);
-}
-.outlet__title{
-    line-height: 1.2;
-    max-width: 18ch;
-    font-size: 1.8rem;
-    margin-bottom: 1rem;
-    text-transform: capitalize;
-    font-weight: calc(900 * var(--font-weight-factor));
-}
-.svg-outlet-title{
-    height: 4rem;
-    margin-bottom: 1.5rem;
-    fill: rgba(var(--text-color), 1);
-    font-weight: calc(900 * var(--font-weight-factor));
-}
-.outlet__description{
-    color: rgba(var(--text-color), 0.8);
-}
-.outlet-preview__button{
-    padding: 0.5rem 0;
-    justify-self: flex-start;
-    color: var(--accent-color);
-    font-weight: calc(700 * var(--font-weight-factor));
-}
-
-.outlet-preview__number{
-    position: relative;
-    line-height: 1;
-    font-size: 8rem;
-    font-weight: 900;
-    -webkit-text-stroke: 1rem var(--accent-color);
-    -webkit-text-fill-color: rgba(var(--foreground-color), 1);
-    margin: 0 0.5rem;
-    &::after{
-        content: attr(data-number);
-        position: absolute;
-        line-height: 1;
-        font-size: 1em;
-        font-weight: inherit;
-        -webkit-text-stroke: 0;
-        color: rgba(var(--foreground-color), 1);
-    }
-}
-
-.label{
-    position: relative;
-    font-size: 0.8rem;
-    margin-bottom: 0.3rem;
-}
-.value{
-    font-size: 1.2rem;
-}
-
-.series-container{
-    gap: 1.5rem;
-    padding-bottom: 1.5rem;
-    grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
-}
-
-.bit-bond-series__row,
-.bob-fund__row,
-.person-card{
-    min-width: 100%;
-}
-
-.bob-fund__row{
-    .grid{
-        align-content: flex-start;
-    }
-}
-
-.bob-fund__row,
-.bit-bond-series__row,
-.card{
-    gap: 1rem;
-    padding: 1.5rem;
-    border-radius: 0.5rem;
-    align-items: flex-start;
-    background-color: rgba(var(--foreground-color), 1);
-    box-shadow: 0 0.5rem 1rem -0.5rem rgba(0, 0, 0, 0.1);
-}
-
-.bit-bond-series__row{
-    .original-value{
-        font-size: 0.85rem;
-    }
-}
-
-.up-arrow{
-    height: 1em;
-    width: 1em;
-    fill: var(--green);
-    margin-right: 0.1em;
-}
-.percent-gain{
-    margin-right: 0.5em;
-    font-weight: calc(500 * var(--font-weight-factor));
-}
-.percent-gain,
-.time-elapsed{
-    font-size: 0.8rem;
-}
-.time-elapsed{
-    color: rgba(var(--text-color), 0.8);
-}
-
-
-.person-card{
-    position: relative;
-    gap: 1rem;
-    text-align: center;
-    justify-items: center;
-    align-content: flex-start;
-    grid-template-columns: 1fr;
-}
-.person__image{
-    width: 100%;
-    height: auto;
-    border-radius: 0.5rem;
-    height: 10rem;
-    width: 10rem;
-    object-position: top;
-    border-radius: 50%;
-}
-.person__name{
-    font-size: 0.9rem;
-    text-transform: capitalize;
-}
-.investor__bio{
-    font-size: 0.85rem;
-    margin-top: 0.5rem;
-}
-.investor__contribution{
-    font-size: 0.85rem;
-}
-.intern-flo-id{
-    margin-top: 0.3rem;
-    font-size: 0.75rem;
-}
-.intern__project{
-    margin-top: 0.5rem;
-}
-.intern__level{
-    position: absolute;
-    cursor: pointer;
-    font-size: 0.8rem;
-    border-radius: 0.2rem;
-    margin-bottom: 0.3rem;
-    padding: 0.3rem 0.5rem;
-    justify-self: flex-end;
-    font-weight: calc(500 * var(--font-weight-factor));
-    box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.2);
-}
-.starter{
-    background-color: rgba(var(--foreground-color), 1);
-}
-.motivated{
-    color: black;
-    background-color: #FFCA28;
-}
-.passionate{
-    color: black;
-    background-color: #00E676;
-}
-#intern_level_popup{
-    --width: min(48rem, 100%);
-}
-.table{
-    display: grid;
-    gap: 1rem;
-    grid-template-columns: 6rem 1fr;
-    p{
-        font-size: 0.9rem;
-        color: rgba(var(--text-color), 0.9);
-    }
-}
-
-.outlet-hero-section{
-    display: grid;
-}
-
-#outlet_switcher{
-    position: absolute;
-    top: 0;
-    padding: 1rem;
-    border-radius: 0.3rem;
-    background: rgba(var(--foreground-color), 1);
-    box-shadow:  0 2rem 4rem -1rem rgba(0, 0, 0, 0.2);
-    z-index: 2;
-    outline: none;
-}
-.outlet_switcher__floor{
-    display: flex;
-    flex-direction: column;
-    overflow-y: auto;
-}
-.outlet_switcher__button{
-    display: flex;
-    align-items: center;
-    font-size: 1rem;
-    padding: 0.6rem 0;
-    font-weight: calc(500 * var(--font-weight-factor));
-    &--active{
-        color: var(--accent-color) !important;
-    }
-}
-.outlet-label{
-    display: grid;
-    gap: 0.5rem;
-    text-align: left;
-    align-items: center;
-    min-width: 8rem;
-    font-size: 1.1rem;
-    margin-bottom: 0.5rem;
-    align-self: flex-start;    
-    grid-template-areas: 'label icon' 'num num';
-    .icon{
-        grid-area: icon;
-        height: 1.6rem;
-        width: 1.6rem;
-        fill: var(--accent-color);
-        justify-self: flex-end;
-    }
-}
-.outlet-label__name{
-    font-size: 1.7rem;
-    color: rgba(var(--text-color), 0.5);
-    font-weight: calc(900 * var(--font-weight-factor));
-}
-.outlet-label__no{
-    grid-area: num;
-    display: flex;
-    position: relative;
-    line-height: 1;
-    font-size: 8rem;
-    font-weight: 900;
-    -webkit-text-stroke: 1rem var(--accent-color);
-    -webkit-text-fill-color: var(--background-color);
-    margin: 0 0.5rem;
-    &::after{
-        content: attr(data-number);
-        position: absolute;
-        line-height: 1;
-        font-size: 1em;
-        font-weight: inherit;
-        -webkit-text-stroke: 0;
-        color: var(--background-color);
-    }
-}
-.auto-grid-layout{
-    justify-content: flex-start;
-    overflow-x: auto;
-}
-.grid-2{
-    grid-template-columns: auto 1fr;
-}
-
-.rooms__header{
-    z-index: 1;
-    display: flex;
-    align-items: center;
-    margin-bottom: 1.5rem;
-    background: var(--background-color);
-    box-shadow: 0 1rem 1rem -1rem rgba(0, 0, 0, 0.2);
-}
-.room__label{
-    position: relative;
-    display: flex;
-    align-items: center;
-    font-weight: calc(700 * var(--font-weight-factor));
-    padding-right: 1.5rem;
-    font-size: 1.5rem;
-}
-.room-button{
-    position: relative;
-    opacity: 0.6;
-    flex-shrink: 0;
-    border-radius: 0;
-    font-weight: calc(500 * var(--font-weight-factor));
-    font-size: 1.1rem;
-    transition: opacity 0.3s, background-color 0.3s;
-    padding: 0.6rem 0.8rem;
-    &:not(:last-of-type)::after{
-        content: '';
-        height: 0.1rem;
-        width: 4rem;
-        margin-left: 1rem;
-        align-self: center;
-        background: var(--accent-color);
-    }
-    &[active]{
-        opacity: 1;
-        color: var(--accent-color);
-        .icon{
-            fill: var(--accent-color);
-        }
-    }
-
-}
-
-.people-grid{
-    display: grid;
-    gap: 3rem 1.5rem;
-    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
-}
-
-.rooms-layout{
-    position: relative;
-    display: grid;
-    gap: 1rem;
-    grid-template-columns: 1fr 1fr;
-    margin-bottom: 4rem;
-}
-.room-tile{
-    display: flex;
-    position: relative;
-    border-radius: 0.5rem;
-    transition: transform 0.3s;
-    background-color: rgba(var(--foreground-color), 1);
-    box-shadow: 0 1rem 3rem -1rem rgba(0, 0, 0, 0.1);
-    -webkit-tap-highlight-color: transparent;
-    &--main{
-        padding-top: 100%;
-        grid-row: span 2;
-        .tile-content{
-            position: absolute;
-            bottom: 0;
-        }
-    }
-    .tile-content{
-        display: flex;
-        width: 100%;
-        height: 100%;
-        padding: 1.5rem;
-        align-self: flex-end;
-        flex-direction: column;
-    }
-    &:active{
-        transform: scale(0.95);
-    }
-}
-.room-tile__icon{
-    position: absolute;
-    height: 6rem;
-    width: 6rem;
+    padding: 0.3rem;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
-    // margin-bottom: 1rem;
-    &:not(.room-tile__icon--colored){
-        fill: rgba(var(--text-color), 0.1);
-    }
+    background: rgba(var(--text-color), 1);
+    border-radius: 1rem;
+  }
 }
-.investors-icon{
-    height: 8rem;
-    width: 8rem;
-}
-.room-tile__title{
-    // font-size: 1.2rem;
-    // border-bottom: 1px solid;
-    font-size: 0.9rem;
-    padding: 0.4rem 0.8rem;
-    border: solid 0.1rem var(--secondary-text-color);
-    color: var(--secondary-text-color);
-    border-radius: 0.3rem;
-    // align-self: flex-start;
-}
-#performance_preview{
-    margin-top: auto;
-    & > *{
-        padding: 0;
-        box-shadow: none;
-    }
-}
-#expanding_tile{
-    position: fixed;
-    border-radius: 0.5rem;
-    background-color: rgba(var(--foreground-color), 1);
-    z-index: 5;
+.floor-title {
+  opacity: 0.5;
+  font-size: 0.9rem;
+  white-space: nowrap;
+  padding: 0.4rem 0.6rem;
+  margin-left: 1rem;
+  border-radius: 0.2rem;
+  background: rgba(var(--foreground-color), 1);
+  transition: box-shadow 0.3s, opacity 0.3s;
 }
 
-.room-container{
-    position: fixed;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    z-index: 6;
-    overflow-y: auto;
-    background-color: var(--background-color);
-    grid-template-rows: auto auto 1fr auto;
-    align-items: flex-start;
-}
-.room{
-    padding-bottom: 4rem;
+.floor {
+  padding-bottom: 3rem;
+  width: 100%;
 }
 
-.room-container__header{
-    display: flex;
-    position: sticky;
-    top: 0;
-    z-index: 2;
-    background-color: inherit;
-    padding: 1rem 0;
-    &::before{
-        position: absolute;
-        content: '';
-        width: 1rem;
-        height: 100%;
-        left: -1rem;
-        top: 0;
-        background-color: inherit;
-    }
-}
-#hero_title{
-    font-size: 2rem;
-    margin-bottom: 2rem;
-    font-weight: calc(700 * var(--font-weight-factor));
+.floor__header {
+  position: relative;
+  padding: 0.5rem 0;
+  transform: translateY(-0.1rem);
+  background: var(--background-color);
 }
 
-/* .room-carousel{
-    display: flex;
-    overflow-x: auto;
-    scroll-snap-type: x mandatory;
-    height: 100%;
-    scroll-behavior: smooth;
-    & > *{
-        min-width: 100%;
-        scroll-snap-align: start;
-
-    }
-} */
-
-.room-container__footer{
-    position: sticky;
-    display: flex;
-    gap: 1rem;
-    bottom: 0;
-    z-index: 2;
-    overflow-x: auto;
-    align-items: center;
-    padding: 2rem 0.5rem 0.5rem 3rem;
-    margin-left: -3rem;
-    background: linear-gradient(0deg, var(--background-color) 70%, rgba(0,0,0,0) 100%);
-}
-#room_switcher{
-    display: grid;
-    gap: 0.5rem;
-    grid-auto-flow: column;
-    justify-content: flex-start;
+.floor__num {
+  display: flex;
+  align-items: center;
+  font-size: 1.8rem;
+  font-weight: calc(900 * var(--font-weight-factor));
+  color: rgba(var(--text-color), 0.3);
 }
 
-.room-shortcut{
-    .room-tile__title{
-        font-weight: 500;
-        font-size: 0.9rem;
-    }
+.floor__title {
+  font-size: 1.3rem;
+  font-weight: calc(700 * var(--font-weight-factor));
 }
 
-.ext-link-tile{
-    position: relative;
-    display: flex;
-    padding: 1.5rem;
-    border-radius: 0.5rem;
-    background-size: contain;
-    align-items: center;
-    justify-content: space-between;
-    border : solid 0.1rem var(--banner-color);
-    box-shadow: 0 1rem 3rem -1rem rgba(0, 0, 0, 0.2);
-    -webkit-tap-highlight-color: transparent;
-    overflow: hidden;
+.big-icon {
+  height: 2rem;
+  width: 2rem;
 }
-.tile__title{
-    font-size: 1.25rem;
+
+.outlets-container {
+  margin: 1rem 0;
+  gap: 1.5rem;
+}
+
+.outlet-preview {
+  position: relative;
+  display: grid;
+  padding: 1rem;
+  align-items: center;
+  border-radius: 0.7rem;
+  background-color: rgba(var(--foreground-color), 1);
+}
+.outlet__title {
+  line-height: 1.2;
+  max-width: 18ch;
+  font-size: 1.8rem;
+  margin-bottom: 1rem;
+  text-transform: capitalize;
+  font-weight: calc(900 * var(--font-weight-factor));
+}
+.svg-outlet-title {
+  height: 4rem;
+  margin-bottom: 1.5rem;
+  fill: rgba(var(--text-color), 1);
+  font-weight: calc(900 * var(--font-weight-factor));
+}
+.outlet__description {
+  color: rgba(var(--text-color), 0.8);
+}
+.outlet-preview__button {
+  padding: 0.5rem 0;
+  justify-self: flex-start;
+  color: var(--accent-color);
+  font-weight: calc(700 * var(--font-weight-factor));
+}
+
+.outlet-preview__number {
+  position: relative;
+  line-height: 1;
+  font-size: 8rem;
+  font-weight: 900;
+  -webkit-text-stroke: 1rem var(--accent-color);
+  -webkit-text-fill-color: rgba(var(--foreground-color), 1);
+  margin: 0 0.5rem;
+  &::after {
+    content: attr(data-number);
+    position: absolute;
     line-height: 1;
-    font-weight: calc(500 * var(--font-weight-factor));
-    z-index: 1;
-}
-.tile__brief{
-    margin-top: 1rem;
-    z-index: 1;
-    color: rgba(var(--text-color), 0.7);
-}
-.round{
-    display: inline-flex;
-    flex-shrink: 0;
-    padding: 0.4rem 1rem;
-    border-radius: 0.3rem;
-    color: white;
-    background-color: var(--banner-color);
-    font-weight: 700 !important;
-    font-size: 1rem;
-    z-index: 1;
+    font-size: 1em;
+    font-weight: inherit;
+    -webkit-text-stroke: 0;
+    color: rgba(var(--foreground-color), 1);
+  }
 }
 
-.timeline-container{
-    display: grid;
-    padding: 3rem 0;
-    gap: 4rem;
+.label {
+  position: relative;
+  font-size: 0.8rem;
+  margin-bottom: 0.3rem;
 }
-.timeline-item{
-    position: relative;
-    display: grid;
-    padding-left: 1rem;
-    &:not(:last-of-type):before{
-        content: '';
-        position: absolute;
-        width: 0.1rem;
-        height: calc(100% + 4rem);
-        top: 0;
-        left: 0;
-        background-color: rgba(var(--text-color), 0.7);
-    }
-    &:after{
-        content: '';
-        position: absolute;
-        height: 0.6rem;
-        width: 0.6rem;
-        border-radius: 50%;
-        top: 0;
-        left: -0.25rem;
-        background-color: rgba(var(--text-color), 1);
-    }
-}
-.timeline-item__header{
-    display: flex;
-    font-size: 0.8rem;
-    padding: 0.5rem 0.8rem;
-    border-radius: 0.2rem;
-    justify-self: flex-start;
-    transform: translateY(-0.8rem);
-    box-shadow: 0 0 0 1px rgba(var(--text-color), 0.6);
-    background-color: rgba(var(--foreground-color), 1);
-    
+.value {
+  font-size: 1.2rem;
 }
 
-.features-grid{
-    display: grid;
-    gap: 3rem 2rem;
-    margin-bottom: 5rem;
+.series-container {
+  gap: 1.5rem;
+  padding-bottom: 1.5rem;
+  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
 }
-.feature{
+
+.bit-bond-series__row,
+.bob-fund__row,
+.person-card {
+  min-width: 100%;
+}
+
+.bob-fund__row {
+  .grid {
+    align-content: flex-start;
+  }
+}
+
+.bob-fund__row,
+.bit-bond-series__row,
+.card {
+  gap: 1rem;
+  padding: 1.5rem;
+  border-radius: 0.5rem;
+  align-items: flex-start;
+  background-color: rgba(var(--foreground-color), 1);
+  box-shadow: 0 0.5rem 1rem -0.5rem rgba(0, 0, 0, 0.1);
+}
+
+.bit-bond-series__row {
+  .original-value {
+    font-size: 0.85rem;
+  }
+}
+
+.up-arrow {
+  height: 1em;
+  width: 1em;
+  fill: var(--green);
+  margin-right: 0.1em;
+}
+.percent-gain {
+  margin-right: 0.5em;
+  font-weight: calc(500 * var(--font-weight-factor));
+}
+.percent-gain,
+.time-elapsed {
+  font-size: 0.8rem;
+}
+.time-elapsed {
+  color: rgba(var(--text-color), 0.8);
+}
+
+.person-card {
+  position: relative;
+  gap: 1rem;
+  text-align: center;
+  justify-items: center;
+  align-content: flex-start;
+  grid-template-columns: 1fr;
+}
+.person__image {
+  width: 100%;
+  height: auto;
+  border-radius: 0.5rem;
+  height: 10rem;
+  width: 10rem;
+  object-position: top;
+  border-radius: 50%;
+}
+.person__name {
+  font-size: 0.9rem;
+  text-transform: capitalize;
+}
+.investor__bio {
+  font-size: 0.85rem;
+  margin-top: 0.5rem;
+}
+.investor__contribution {
+  font-size: 0.85rem;
+}
+.intern-flo-id {
+  margin-top: 0.3rem;
+  font-size: 0.75rem;
+}
+.intern__project {
+  margin-top: 0.5rem;
+}
+.intern__level {
+  position: absolute;
+  cursor: pointer;
+  font-size: 0.8rem;
+  border-radius: 0.2rem;
+  margin-bottom: 0.3rem;
+  padding: 0.3rem 0.5rem;
+  justify-self: flex-end;
+  font-weight: calc(500 * var(--font-weight-factor));
+  box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.2);
+}
+.starter {
+  background-color: rgba(var(--foreground-color), 1);
+}
+.motivated {
+  color: black;
+  background-color: #ffca28;
+}
+.passionate {
+  color: black;
+  background-color: #00e676;
+}
+#intern_level_popup {
+  --width: min(48rem, 100%);
+}
+.table {
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: 6rem 1fr;
+  p {
+    font-size: 0.9rem;
+    color: rgba(var(--text-color), 0.9);
+  }
+}
+
+.outlet-hero-section {
+  display: grid;
+}
+
+#outlet_switcher {
+  position: absolute;
+  top: 0;
+  padding: 1rem;
+  border-radius: 0.3rem;
+  background: rgba(var(--foreground-color), 1);
+  box-shadow: 0 2rem 4rem -1rem rgba(0, 0, 0, 0.2);
+  z-index: 2;
+  outline: none;
+}
+.outlet_switcher__floor {
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+}
+.outlet_switcher__button {
+  display: flex;
+  align-items: center;
+  font-size: 1rem;
+  padding: 0.6rem 0;
+  font-weight: calc(500 * var(--font-weight-factor));
+  &--active {
+    color: var(--accent-color) !important;
+  }
+}
+.outlet-label {
+  display: grid;
+  gap: 0.5rem;
+  text-align: left;
+  align-items: center;
+  min-width: 8rem;
+  font-size: 1.1rem;
+  margin-bottom: 0.5rem;
+  align-self: flex-start;
+  grid-template-areas: "label icon" "num num";
+  .icon {
+    grid-area: icon;
+    fill: var(--accent-color);
+    justify-self: flex-end;
+  }
+}
+.outlet-label__name {
+  font-size: 1.7rem;
+  color: rgba(var(--text-color), 0.5);
+  font-weight: calc(900 * var(--font-weight-factor));
+}
+.outlet-label__no {
+  grid-area: num;
+  display: flex;
+  position: relative;
+  line-height: 1;
+  font-size: 8rem;
+  font-weight: 900;
+  -webkit-text-stroke: 1rem var(--accent-color);
+  -webkit-text-fill-color: var(--background-color);
+  margin: 0 0.5rem;
+  &::after {
+    content: attr(data-number);
+    position: absolute;
+    line-height: 1;
+    font-size: 1em;
+    font-weight: inherit;
+    -webkit-text-stroke: 0;
+    color: var(--background-color);
+  }
+}
+.auto-grid-layout {
+  justify-content: flex-start;
+  overflow-x: auto;
+}
+.grid-2 {
+  grid-template-columns: auto 1fr;
+}
+
+.rooms__header {
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  margin-bottom: 1.5rem;
+  background: var(--background-color);
+  box-shadow: 0 1rem 1rem -1rem rgba(0, 0, 0, 0.2);
+}
+.room__label {
+  position: relative;
+  display: flex;
+  align-items: center;
+  font-weight: calc(700 * var(--font-weight-factor));
+  padding-right: 1.5rem;
+  font-size: 1.5rem;
+}
+.room-button {
+  position: relative;
+  opacity: 0.6;
+  flex-shrink: 0;
+  border-radius: 0;
+  font-weight: calc(500 * var(--font-weight-factor));
+  font-size: 1.1rem;
+  transition: opacity 0.3s, background-color 0.3s;
+  padding: 0.6rem 0.8rem;
+  &:not(:last-of-type)::after {
+    content: "";
+    height: 0.1rem;
+    width: 4rem;
+    margin-left: 1rem;
+    align-self: center;
+    background: var(--accent-color);
+  }
+  &[active] {
+    opacity: 1;
+    color: var(--accent-color);
+    .icon {
+      fill: var(--accent-color);
+    }
+  }
+}
+
+.people-grid {
+  display: grid;
+  gap: 3rem 1.5rem;
+  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
+}
+
+.rooms-layout {
+  position: relative;
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: 1fr 1fr;
+  margin-bottom: 4rem;
+}
+.room-tile {
+  display: flex;
+  position: relative;
+  border-radius: 0.5rem;
+  transition: transform 0.3s;
+  background-color: rgba(var(--foreground-color), 1);
+  box-shadow: 0 1rem 3rem -1rem rgba(0, 0, 0, 0.1);
+  -webkit-tap-highlight-color: transparent;
+  &--main {
+    padding-top: 100%;
+    grid-row: span 2;
+    .tile-content {
+      position: absolute;
+      bottom: 0;
+    }
+  }
+  .tile-content {
     display: flex;
-    position: relative;
-    flex-direction: column;
-    align-items: center;
-    text-align: center;
-    // position: absolute;
-    bottom: 0;
-    left: 0;
     width: 100%;
     height: 100%;
-}
-.feature__icon{
-    display: flex;
-    align-items: center;
-    margin-bottom: 1rem;
     padding: 1.5rem;
-    border-radius: 50%;
-    background-color: rgba(var(--text-color), 0.06);
-    .icon{
-        height: 2.5rem;
-        width: 2.5rem;
-        fill: rgba(var(--text-color), 0.9);
-    }
+    align-self: flex-end;
+    flex-direction: column;
+  }
+  &:active {
+    transform: scale(0.95);
+  }
 }
-.feature__title{
-    color: rgba(var(--text-color), 0.9);
-    font-size: 1.2rem;
-    margin-bottom: 0.5rem;
+.room-tile__icon {
+  position: absolute;
+  height: 6rem;
+  width: 6rem;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  // margin-bottom: 1rem;
+  &:not(.room-tile__icon--colored) {
+    fill: rgba(var(--text-color), 0.1);
+  }
 }
-.feature__brief{
-    font-size: 0.9rem;
-    color: rgba(var(--text-color), 0.8);
+.investors-icon {
+  height: 8rem;
+  width: 8rem;
 }
-#line_sample{
-    width: 2rem;
-    height: 0.2rem;
+.room-tile__title {
+  // font-size: 1.2rem;
+  // border-bottom: 1px solid;
+  font-size: 0.9rem;
+  padding: 0.4rem 0.8rem;
+  border: solid 0.1rem var(--secondary-text-color);
+  color: var(--secondary-text-color);
+  border-radius: 0.3rem;
+  // align-self: flex-start;
+}
+#performance_preview {
+  margin-top: auto;
+  & > * {
+    padding: 0;
+    box-shadow: none;
+  }
+}
+#expanding_tile {
+  position: fixed;
+  border-radius: 0.5rem;
+  background-color: rgba(var(--foreground-color), 1);
+  z-index: 5;
+}
+
+.room-container {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 6;
+  overflow-y: auto;
+  background-color: var(--background-color);
+  grid-template-rows: auto auto 1fr auto;
+  align-items: flex-start;
+}
+.room {
+  padding-bottom: 4rem;
+}
+
+.room-container__header {
+  display: flex;
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  background-color: inherit;
+  padding: 1rem 0;
+  &::before {
+    position: absolute;
+    content: "";
+    width: 1rem;
+    height: 100%;
+    left: -1rem;
+    top: 0;
+    background-color: inherit;
+  }
+}
+#hero_title {
+  font-size: 2rem;
+  margin-bottom: 2rem;
+  font-weight: calc(700 * var(--font-weight-factor));
+}
+
+.room-container__footer {
+  position: sticky;
+  display: flex;
+  bottom: 0;
+  z-index: 2;
+  overflow-x: auto;
+  align-items: center;
+  padding: 2rem 0.5rem 0.5rem 3rem;
+  margin-left: -3rem;
+  background: linear-gradient(
+    0deg,
+    var(--background-color) 70%,
+    rgba(0, 0, 0, 0) 100%
+  );
+  & > h4 {
     margin-right: 1rem;
-    background: linear-gradient(90deg, #f49080, #80b6f4);
+  }
 }
-.graph-container{
-    min-height: 16rem;
-    margin: 1rem 0 4rem 0;
+#room_switcher {
+  display: grid;
+  gap: 0.5rem;
+  grid-auto-flow: column;
+  justify-content: flex-start;
 }
-.link-container{
-    display: grid;
-    gap: 1rem;
-    justify-items: flex-start;
-    align-items: center;
+
+.room-shortcut {
+  .room-tile__title {
+    font-weight: 500;
+    font-size: 0.9rem;
+  }
+}
+
+.ext-link-tile {
+  position: relative;
+  display: flex;
+  padding: 1.5rem;
+  border-radius: 0.5rem;
+  background-size: contain;
+  align-items: center;
+  justify-content: space-between;
+  border: solid 0.1rem var(--banner-color);
+  box-shadow: 0 1rem 3rem -1rem rgba(0, 0, 0, 0.2);
+  -webkit-tap-highlight-color: transparent;
+  overflow: hidden;
+}
+.tile__title {
+  font-size: 1.25rem;
+  line-height: 1;
+  font-weight: calc(500 * var(--font-weight-factor));
+  z-index: 1;
+}
+.tile__brief {
+  margin-top: 1rem;
+  z-index: 1;
+  color: rgba(var(--text-color), 0.7);
+}
+.round {
+  display: inline-flex;
+  flex-shrink: 0;
+  padding: 0.4rem 1rem;
+  border-radius: 0.3rem;
+  color: white;
+  background-color: var(--banner-color);
+  font-weight: 700 !important;
+  font-size: 1rem;
+  z-index: 1;
+}
+
+.timeline-container {
+  display: grid;
+  padding: 3rem 0;
+  gap: 4rem;
+}
+.timeline-item {
+  position: relative;
+  display: grid;
+  padding-left: 1rem;
+  &:not(:last-of-type):before {
+    content: "";
+    position: absolute;
+    width: 0.1rem;
+    height: calc(100% + 4rem);
+    top: 0;
+    left: 0;
+    background-color: rgba(var(--text-color), 0.7);
+  }
+  &:after {
+    content: "";
+    position: absolute;
+    height: 0.6rem;
+    width: 0.6rem;
+    border-radius: 50%;
+    top: 0;
+    left: -0.25rem;
+    background-color: rgba(var(--text-color), 1);
+  }
+}
+.timeline-item__header {
+  display: flex;
+  font-size: 0.8rem;
+  padding: 0.5rem 0.8rem;
+  border-radius: 0.2rem;
+  justify-self: flex-start;
+  transform: translateY(-0.8rem);
+  box-shadow: 0 0 0 1px rgba(var(--text-color), 0.6);
+  background-color: rgba(var(--foreground-color), 1);
+}
+
+.features-grid {
+  display: grid;
+  gap: 3rem 2rem;
+  margin-bottom: 5rem;
+}
+.feature {
+  display: flex;
+  position: relative;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  // position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+.feature__icon {
+  display: flex;
+  align-items: center;
+  margin-bottom: 1rem;
+  padding: 1.5rem;
+  border-radius: 50%;
+  background-color: rgba(var(--text-color), 0.06);
+  .icon {
+    height: 2.5rem;
+    width: 2.5rem;
+    fill: rgba(var(--text-color), 0.9);
+  }
+}
+.feature__title {
+  color: rgba(var(--text-color), 0.9);
+  font-size: 1.2rem;
+  margin-bottom: 0.5rem;
+}
+.feature__brief {
+  font-size: 0.9rem;
+  color: rgba(var(--text-color), 0.8);
+}
+#line_sample {
+  width: 2rem;
+  height: 0.2rem;
+  margin-right: 1rem;
+  background: linear-gradient(90deg, #f49080, #80b6f4);
+}
+.graph-container {
+  min-height: 16rem;
+  margin: 1rem 0 4rem 0;
+}
+.link-container {
+  display: grid;
+  gap: 1rem;
+  justify-items: flex-start;
+  align-items: center;
 }
 
 @media only screen and (max-width: 640px) {
-    .hide-on-mobile{
-        display: none;
+  .hide-on-mobile {
+    display: none;
+  }
+  .outlet-preview {
+    gap: 1.5rem;
+  }
+  .outlet-preview__number-container {
+    grid-row: 1/2;
+  }
+  .outlet-preview__number::after {
+    left: 0;
+  }
+  .outlet-preview__number,
+  .outlet-label__no {
+    font-size: 5rem;
+  }
+  #outlet_switcher {
+    width: calc(100% - 2rem);
+  }
+  .outlet-label {
+    grid-row: 1/2;
+  }
+  .outlet-hero-section {
+    margin-top: 2rem;
+  }
+  .outlet-label__no {
+    margin-bottom: 2rem;
+  }
+  .series-container {
+    gap: 1rem;
+  }
+  .outlet-list__item {
+    .icon {
+      margin-left: auto;
     }
-    .outlet-preview{
-        gap: 1.5rem;
+  }
+  .rooms__header {
+    flex-direction: column;
+    align-items: flex-start;
+    scroll-tab-header {
+      width: calc(100vw - 2rem);
     }
-    .outlet-preview__number-container{
-        grid-row: 1/2;
+  }
+  .room-tile {
+    padding-top: 100%;
+    &--main {
+      // padding-top: 50%;
+      grid-column: span 2;
     }
-    .outlet-preview__number::after{
-        left: 0;
-    }
-    .outlet-preview__number,
-    .outlet-label__no{
-        font-size: 5rem;
-    }
-    #outlet_switcher{
-        width: calc(100% - 2rem);
-    }
-    .outlet-label{
-        grid-row: 1/2;
-    }
-    .outlet-hero-section{
-        margin-top: 2rem;
-    }
-    .outlet-label__no{
-        margin-bottom: 2rem;
-    }
-    .series-container{
-        gap: 1rem;
-    }
-    .outlet-list__item{
-        .icon{
-            margin-left: auto;
-        }
-    }
-    .rooms__header{
-        flex-direction: column;
-        align-items: flex-start;
-        scroll-tab-header{
-            width: calc(100vw - 2rem);
-        }
-    }
-    .room-tile{
-        padding-top: 100%;
-        &--main{
-            // padding-top: 50%;
-            grid-column: span 2;
-        }
-        .tile-content{
-            top: 0;
-            padding: 1rem;
-            position: absolute;
-        }
-    }
-    .room-tile__icon{
-        height: 4rem;
-        width: 4rem;
-    }
-    .investors-icon{
-        height: 6rem;
-        width: 6rem;
-    }
-    #hero_title{
-        margin-top: 2rem;
-    }
-    .ext-link-tile{
-        padding: 1rem;
-        flex-direction: column;
-        align-items: flex-start;
-    }
-    .link-container{
-        margin-top: 1.5rem;
+    .tile-content {
+      top: 0;
+      padding: 1rem;
+      position: absolute;
     }
+  }
+  .room-tile__icon {
+    height: 4rem;
+    width: 4rem;
+  }
+  .investors-icon {
+    height: 6rem;
+    width: 6rem;
+  }
+  #hero_title {
+    margin-top: 2rem;
+  }
+  .ext-link-tile {
+    padding: 1rem;
+    flex-direction: column;
+    align-items: flex-start;
+  }
+  .link-container {
+    margin-top: 1.5rem;
+  }
 }
 @media only screen and (min-width: 640px) {
-    #home_page,.page,
-    .page-layout{
-        grid-template-columns: 1fr 90vw 1fr;
+  #home_page,
+  .page,
+  .page-layout {
+    grid-template-columns: 1fr 90vw 1fr;
+  }
+  .h1 {
+    font-size: 4rem;
+  }
+  .h2 {
+    font-size: 2.5rem;
+  }
+  .h3 {
+    font-size: 1.5rem;
+  }
+  .h4 {
+    font-size: 1.1rem;
+  }
+  #main_header {
+    padding: 1.2rem 2rem;
+  }
+  #floor_list {
+    gap: 8vw;
+    padding: 0 8vw 4rem 8vw;
+  }
+  .floor_list__item {
+    position: relative;
+    grid-template-columns: 1fr 1fr;
+    align-items: center;
+    justify-content: center;
+    .floor_list__header {
+      display: grid;
     }
-    .h1{
-        font-size: 4rem;
-    }
-    .h2{
-        font-size: 2.5rem;
-    }
-    .h3{
-        font-size: 1.5rem;
-    }
-    .h4{
-        font-size: 1.1rem;
-    }
-    #main_header{
-        padding: 1.2rem 2rem;
-    }
-    #floor_list{
-        gap: 8vw;
-        padding: 0 8vw 4rem 8vw;
-    }
-    .floor_list__item{
-        position: relative;
-        grid-template-columns: 1fr 1fr;
-        align-items: center;
-        justify-content: center;
-        .floor_list__header{
-            display: grid;
-        }
-        &:not(:last-of-type){
-            padding-bottom: 8vw;
-            &::after{
-                content: '';
-                position: absolute;
-                width: 24rem;
-                height: 0.2rem;
-                bottom: 0;
-                background-color: var(--accent-color);
-                justify-self: center;
-            }
-        }
-        &:nth-of-type(odd){
-            .floor_list__header{
-                text-align: right;
-                grid-column: 2/3;
-                grid-row: 1/2;
-            }
-            .outlet-list{
-                grid-row: 1/2;
-                grid-column: 1/2;
-            }
-        }
-    }
-    .floor__header{
-        &::before{
-            left: -10%;
-            width: 10%;
-        }
-        &::after{
-            right: -10%;
-            width: 10%;
-        }
-    }
-    .outlets-container{
-        gap: 1.5rem;
-    }
-    .outlet-preview{
-        gap: 1rem;
-        padding: 5rem 4rem;
-        grid-template-columns: 1.2fr 1fr;
-        border: 1px solid rgba(0, 0, 0, 0.2);
-        box-shadow: 0 4rem 3rem -2rem rgba(0, 0, 0, 0.06);
-        &:nth-of-type(even){
-            grid-template-columns: 1fr 2fr;
-            .outlet-preview__info{
-                grid-column: 2/3;
-            } 
-            .outlet-preview__number-container{
-                grid-column: 1/2;
-                grid-row: 1/2;
-            } 
-            .outlet-preview__number::after{
-                left: 0;
-            }
-        }
-        &:nth-of-type(odd){ 
-            .outlet-preview__number-container{
-                margin-left: auto;
-                text-align: right;
-            } 
-            .outlet-preview__number::after{
-                right: 0;
-            }
-        }
-    }
-    .outlet__title{
-        font-size: 2.5rem;
-    }
-    #outlet_switcher{
-        padding: 1rem 1.5rem;
-    }
-    .outlet-label{
-        grid-column: 2/3;
-        justify-self: right;
-    }
-    .outlet-label__no{
-        justify-content: flex-end;
-    }
-    .outlet-hero-section{
-        position: relative;
-        grid-template-columns: 1fr auto;
-        gap: 1.5rem;
-        margin-top: 4rem;
-    }
-    .auto-grid-layout{
-        grid-template-columns: auto 1fr;
-    }
-    .rooms-layout{
-        grid-template-rows: 1fr 1fr;
-    }
-    .room-container__header{
-        padding: 1.5rem 0;
-    }
-    .people-grid{
-        gap: 5rem 3rem;
-    }
-    #hero_title{
-        font-size: 3rem;
-    }
-    .feature__title{
-        font-size: 1.5rem;
-    }
-    .features-grid{
-        grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
-    }
-    .graph-container{
-        width: 80%;
-        min-height: 60vh;
+    &:not(:last-of-type) {
+      padding-bottom: 8vw;
+      &::after {
+        content: "";
+        position: absolute;
+        width: 24rem;
+        height: 0.2rem;
+        bottom: 0;
+        background-color: var(--accent-color);
         justify-self: center;
+      }
     }
+    &:nth-of-type(odd) {
+      .floor_list__header {
+        text-align: right;
+        grid-column: 2/3;
+        grid-row: 1/2;
+      }
+      .outlet-list {
+        grid-row: 1/2;
+        grid-column: 1/2;
+      }
+    }
+  }
+  .floor__header {
+    &::before {
+      left: -10%;
+      width: 10%;
+    }
+    &::after {
+      right: -10%;
+      width: 10%;
+    }
+  }
+  .outlets-container {
+    gap: 1.5rem;
+  }
+  .outlet-preview {
+    gap: 1rem;
+    padding: 5rem 4rem;
+    grid-template-columns: 1.2fr 1fr;
+    border: 1px solid rgba(0, 0, 0, 0.2);
+    box-shadow: 0 4rem 3rem -2rem rgba(0, 0, 0, 0.06);
+    &:nth-of-type(even) {
+      grid-template-columns: 1fr 2fr;
+      .outlet-preview__info {
+        grid-column: 2/3;
+      }
+      .outlet-preview__number-container {
+        grid-column: 1/2;
+        grid-row: 1/2;
+      }
+      .outlet-preview__number::after {
+        left: 0;
+      }
+    }
+    &:nth-of-type(odd) {
+      .outlet-preview__number-container {
+        margin-left: auto;
+        text-align: right;
+      }
+      .outlet-preview__number::after {
+        right: 0;
+      }
+    }
+  }
+  .outlet__title {
+    font-size: 2.5rem;
+  }
+  #outlet_switcher {
+    padding: 1rem 1.5rem;
+  }
+  .outlet-label {
+    grid-column: 2/3;
+    justify-self: right;
+  }
+  .outlet-label__no {
+    justify-content: flex-end;
+  }
+  .outlet-hero-section {
+    position: relative;
+    grid-template-columns: 1fr auto;
+    gap: 1.5rem;
+    margin-top: 4rem;
+  }
+  .auto-grid-layout {
+    grid-template-columns: auto 1fr;
+  }
+  .rooms-layout {
+    grid-template-rows: 1fr 1fr;
+  }
+  .room-container__header {
+    padding: 1.5rem 0;
+  }
+  .people-grid {
+    gap: 5rem 3rem;
+  }
+  #hero_title {
+    font-size: 3rem;
+  }
+  .feature__title {
+    font-size: 1.5rem;
+  }
+  .features-grid {
+    grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
+  }
+  .graph-container {
+    width: 80%;
+    min-height: 60vh;
+    justify-self: center;
+  }
 }
 @media only screen and (min-width: 1280px) {
-    #home_page, .page,
-    .page-layout{
-        grid-template-columns: 1fr 85vw 1fr;
-    }
-    .grid-3{
-        justify-content: center;
-        & > .grid{
-            width: 100%;
-        }
-    }
-    .rooms-layout{
-        grid-template-columns: repeat(3, 1fr);
-        grid-auto-flow: column;
-    }
-    .link-container{
-        grid-template-columns: auto auto;
+  #home_page,
+  .page,
+  .page-layout {
+    grid-template-columns: 1fr 85vw 1fr;
+  }
+  .grid-3 {
+    justify-content: center;
+    & > .grid {
+      width: 100%;
     }
+  }
+  .rooms-layout {
+    grid-template-columns: repeat(3, 1fr);
+    grid-auto-flow: column;
+  }
+  .link-container {
+    grid-template-columns: auto auto;
+  }
 }
-@media (any-hover: hover){
-    ::-webkit-scrollbar{
-        width: 0.5rem;
-        height: 0.5rem;
+@media (any-hover: hover) {
+  ::-webkit-scrollbar {
+    width: 0.5rem;
+    height: 0.5rem;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: rgba(var(--text-color), 0.3);
+    border-radius: 1rem;
+    &:hover {
+      background: rgba(var(--text-color), 0.5);
     }
-    
-    ::-webkit-scrollbar-thumb{
-        background: rgba(var(--text-color), 0.3);
-        border-radius: 1rem;
-        &:hover{
-            background: rgba(var(--text-color), 0.5);
-        }
+  }
+  .page-link {
+    cursor: pointer;
+    transition: color 0.3s;
+    &:hover {
+      color: var(--accent-color);
+      .icon {
+        fill: var(--accent-color);
+      }
     }
-    .page-link{
-        cursor: pointer;
-        transition: color 0.3s;
-        &:hover{
-            color: var(--accent-color);
-            .icon{
-                fill: var(--accent-color);
-            }
-        }
+  }
+  .floor__button:hover {
+    background: var(--background-color);
+  }
+  .outlet-list__item {
+    .icon {
+      fill: var(--accent-color);
+      opacity: 0;
+      transform-origin: left;
+      transform: translateX(-0.5rem);
+      transition: opacity 0.3s, transform 0.3s;
     }
-    .floor__button:hover{
-        background: var(--background-color);
+    &:hover .icon {
+      opacity: 1;
+      transform: translateX(0);
     }
-    .outlet-list__item{
-        .icon{
-            fill: var(--accent-color);
-            opacity: 0;
-            transform-origin: left;
-            transform: translateX(-0.5rem);
-            transition: opacity 0.3s, transform 0.3s;
-        }
-        &:hover .icon{
-            opacity: 1;
-            transform: translateX(0);
-        }
+  }
+  .intern__level {
+    transition: transform 0.3s;
+    &:hover {
+      transform: scale(1.1);
     }
-    .intern__level{
-        transition: transform 0.3s;
-        &:hover{
-            transform: scale(1.1);
-        }
-    }
-}
\ No newline at end of file
+  }
+}
diff --git a/assets/investors/Margot Borden.jpg b/assets/investors/Margot Borden.jpg
index 39e42b4..ce161a0 100644
Binary files a/assets/investors/Margot Borden.jpg and b/assets/investors/Margot Borden.jpg differ
diff --git a/assets/investors/Puneet Sondh.jpg b/assets/investors/Puneet Sondh.jpg
new file mode 100644
index 0000000..5ef7a2c
Binary files /dev/null and b/assets/investors/Puneet Sondh.jpg differ
diff --git a/assets/investors/Vikash Saw.jpg b/assets/investors/Vikash Saw.jpg
new file mode 100644
index 0000000..f73d070
Binary files /dev/null and b/assets/investors/Vikash Saw.jpg differ
diff --git a/assets/js/components.js b/assets/js/components.js
index 2cbf966..8fbd859 100644
--- a/assets/js/components.js
+++ b/assets/js/components.js
@@ -1,3292 +1,3 @@
-//Button
-const smButton = document.createElement('template')
-smButton.innerHTML = `
-<style>     
-*{
-    padding: 0;
-    margin: 0;
-    -webkit-box-sizing: border-box;
-            box-sizing: border-box;
-}       
-:host{
-    display: -webkit-inline-box;
-    display: -ms-inline-flexbox;
-    display: inline-flex;
-    --padding: 0.6rem 1.2rem;
-    --border-radius: 0.3rem;
-    --background: rgba(var(--text-color), 0.1);
-}
-:host([disabled]) .button{
-    cursor: not-allowed;
-    opacity: 0.6;
-    background: rgba(var(--text-color), 0.3) !important;
-    color: rgba(var(--foreground-color), 0.6);
-}
-:host([disabled][variant="primary"]) .button{
-    color: rgba(var(--text-color), 1);
-}
-:host([variant='primary']) .button{
-    background: var(--accent-color);
-    color: rgba(var(--foreground-color), 1);
-}
-:host([variant='outlined']) .button{
-    -webkit-box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset;
-            box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset;
-    background: transparent; 
-    color: var(--accent-color);
-}
-:host([variant='no-outline']) .button{
-    background: rgba(var(--foreground-color), 1); 
-    color: var(--accent-color);
-}
-:host(.small) .button{
-    padding: 0.4rem 0.8rem;
-}
-:host(.round) .button{
-    border-radius: 10rem;
-}
-.button {
-    position: relative;
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    width: 100%;
-    padding: var(--padding);
-    cursor: pointer;
-    -webkit-user-select: none;
-       -moz-user-select: none;
-        -ms-user-select: none;
-            user-select: none;
-    border-radius: var(--border-radius); 
-    -webkit-box-pack: center; 
-        -ms-flex-pack: center; 
-            justify-content: center;
-    -webkit-transition: -webkit-box-shadow 0.3s;
-    transition: -webkit-box-shadow 0.3s;
-    -o-transition: box-shadow 0.3s;
-    transition: box-shadow 0.3s;
-    transition: box-shadow 0.3s, -webkit-box-shadow 0.3s;
-    font-family: inherit;
-    font-size: 0.9rem;
-    font-weight: 500;
-    background: var(--background); 
-    -webkit-tap-highlight-color: transparent;
-    outline: none;
-    overflow: hidden;
-    border: none;
-    color: inherit;
-}
-:host(:not([disabled])) .button:focus-visible{
-    -webkit-box-shadow: 0 0 0 0.1rem var(--accent-color);
-            box-shadow: 0 0 0 0.1rem var(--accent-color);
-}
-:host([variant='outlined']) .button:focus-visible{
-    -webkit-box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0 0 0.1rem var(--accent-color);
-            box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0 0 0.1rem var(--accent-color);
-}
-@media (hover: hover){
-    :host(:not([disabled])) .button:hover{
-        -webkit-box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.2rem 0.8rem rgba(0, 0, 0, 0.12);
-                box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.2rem 0.8rem rgba(0, 0, 0, 0.12);
-    }
-    :host([variant='outlined']) .button:hover{
-        -webkit-box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.4rem 0.8rem rgba(0, 0, 0, 0.12);
-                box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.4rem 0.8rem rgba(0, 0, 0, 0.12);
-    }
-}
-@media (hover: none){
-    :host(:not([disabled])) .button:active{
-        -webkit-box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.2rem 0.8rem rgba(0, 0, 0, 0.2);
-                box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.2rem 0.8rem rgba(0, 0, 0, 0.2);
-    }
-    :host([variant='outlined']) .button:active{
-        -webkit-box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.4rem 0.8rem rgba(0, 0, 0, 0.2);
-                box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.4rem 0.8rem rgba(0, 0, 0, 0.2);
-    }
-}
-</style>
-<button part="button" class="button">
-    <slot></slot>   
-</button>`;
-customElements.define('sm-button',
-    class extends HTMLElement {
-        constructor() {
-            super()
-            this.attachShadow({
-                mode: 'open'
-            }).append(smButton.content.cloneNode(true))
-        }
-
-        get disabled() {
-            return this.isDisabled
-        }
-
-        set disabled(value) {
-            if (value && !this.isDisabled) {
-                this.isDisabled = true
-                this.setAttribute('disabled', '')
-                this.button.removeAttribute('tabindex')
-            } else if (!value && this.isDisabled) {
-                this.isDisabled = false
-                this.removeAttribute('disabled')
-            }
-        }
-
-        dispatch() {
-            if (this.isDisabled) {
-                this.dispatchEvent(new CustomEvent('disabled', {
-                    bubbles: true,
-                    composed: true
-                }))
-            } else {
-                this.dispatchEvent(new CustomEvent('clicked', {
-                    bubbles: true,
-                    composed: true
-                }))
-            }
-        }
-
-        connectedCallback() {
-            this.isDisabled = false
-            this.button = this.shadowRoot.querySelector('.button')
-            if (this.hasAttribute('disabled') && !this.isDisabled)
-                this.isDisabled = true
-            this.addEventListener('click', (e) => {
-                this.dispatch()
-            })
-        }
-    })
-
-//Input
-const smInput = document.createElement('template')
-smInput.innerHTML = `
-<style>
-*{
-    padding: 0;
-    margin: 0;
-    -webkit-box-sizing: border-box;
-            box-sizing: border-box;
-} 
-input[type="search"]::-webkit-search-decoration,
-input[type="search"]::-webkit-search-cancel-button,
-input[type="search"]::-webkit-search-results-button,
-input[type="search"]::-webkit-search-results-decoration { display: none; }
-input[type=number] {
--moz-appearance:textfield;
-}
-input[type=number]::-webkit-inner-spin-button, 
-input[type=number]::-webkit-outer-spin-button { 
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    appearance: none;
-    margin: 0; 
-}
-input::-ms-reveal,
-input::-ms-clear {
-  display: none;
-}
-input:invalid{
-    outline: none;
-    -webkit-box-shadow: none;
-            box-shadow: none;
-}
-::-moz-focus-inner{
-border: none;
-}
-:host{
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    --font-size: 1rem;
-    --border-radius: 0.3rem;
-    --padding: 0.7rem 1rem;
-    --background: rgba(var(--text-color), 0.06);
-}
-.hide{
-   opacity: 0 !important;
-   pointer-events: none !important;
-}
-.hide-completely{
-    display: none;
-}
-.icon {
-    fill: rgba(var(--text-color), 0.6);
-    height: 1.4rem;
-    width: 1.4rem;
-    border-radius: 1rem;
-    cursor: pointer;
-    min-width: 0;
-}
-
-:host(.round) .input{
-    border-radius: 10rem;
-}
-.input {
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    cursor: text;
-    min-width: 0;
-    text-align: left;
-    -webkit-box-align: center;
-        -ms-flex-align: center;
-            align-items: center;
-    position: relative;
-    gap: 0.5rem;
-    padding: var(--padding);
-    border-radius: var(--border-radius);
-    -webkit-transition: opacity 0.3s;
-    -o-transition: opacity 0.3s;
-    transition: opacity 0.3s;
-    background: var(--background);
-    width: 100%;
-    outline: none;
-}
-.input.readonly .clear{
-    opacity: 0 !important;
-    margin-right: -2rem;
-    pointer-events: none !important;
-}
-.readonly{
-    pointer-events: none;
-}
-.input:focus-within:not(.readonly){
-    box-shadow: 0 0 0 0.1rem var(--accent-color) inset !important;
-}
-.disabled{
-    pointer-events: none;
-    opacity: 0.6;
-}
-.label {
-    opacity: .7;
-    font-weight: 400;
-    font-size: var(--font-size);
-    position: absolute;
-    top: 0;
-    -webkit-transition: -webkit-transform 0.3s;
-    transition: -webkit-transform 0.3s;
-    -o-transition: transform 0.3s;
-    transition: transform 0.3s;
-    transition: transform 0.3s, -webkit-transform 0.3s;
-    -webkit-transform-origin: left;
-    -ms-transform-origin: left;
-        transform-origin: left;
-    pointer-events: none;
-    white-space: nowrap;
-    overflow: hidden;
-    -o-text-overflow: ellipsis;
-       text-overflow: ellipsis;
-    width: 100%;
-    user-select: none;
-    will-change: transform;
-}
-.outer-container{
-    position: relative;
-    width: 100%;
-}
-.container{
-    width: 100%;
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    position: relative;
-    -webkit-box-align: center;
-        -ms-flex-align: center;
-            align-items: center;
-    -webkit-box-flex: 1;
-        -ms-flex: 1;
-            flex: 1;
-}    
-input{
-    font-size: var(--font-size);
-    border: none;
-    background: transparent;
-    outline: none;
-    color: rgba(var(--text-color), 1);
-    width: 100%;
-}
-:host(:not(.outlined)) .animate-label .container input {
-    -webkit-transform: translateY(0.6rem);
-            -ms-transform: translateY(0.6rem);
-        transform: translateY(0.6rem);
-    }
-  
-:host(:not(.outlined)) .animate-label .label {
-    -webkit-transform: translateY(-0.7em) scale(0.8);
-            -ms-transform: translateY(-0.7em) scale(0.8);
-        transform: translateY(-0.7em) scale(0.8);
-    opacity: 1;
-    color: var(--accent-color)
-}
-:host(.outlined) .input {
-    box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 0.4) inset;
-    background: rgba(var(--foreground-color), 1);
-}
-:host(.outlined) .label {
-    width: max-content;
-    margin-left: -0.5rem;
-    padding: 0 0.5rem;
-}
-:host(.outlined) .animate-label .label {
-    -webkit-transform: translate(0.1rem, -1.5rem) scale(0.8);
-            -ms-transform: translate(0.1rem, -1.5rem) scale(0.8);
-        transform: translate(0.1rem, -1.5rem) scale(0.8);
-    opacity: 1;
-    background: rgba(var(--foreground-color), 1);
-}
-.animate-label:focus-within:not(.readonly) .label{
-    color: var(--accent-color)
-}
-.feedback-text{
-    font-size: 0.9rem;
-    width: 100%;
-    color: var(--error-color);
-    padding: 0.6rem 1rem;
-    text-align: left;
-}
-.feedback-text:empty{
-    padding: 0;
-}
-@media (any-hover: hover){
-    .icon:hover{
-        background: rgba(var(--text-color), 0.1);
-    }
-}
-</style>
-<div class="outer-container">
-    <label part="input" class="input">
-        <slot name="icon"></slot>
-        <div class="container">
-            <input/>
-            <div part="placeholder" class="label"></div>
-        </div>
-        <svg class="icon clear hide" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-11.414L9.172 7.757 7.757 9.172 10.586 12l-2.829 2.828 1.415 1.415L12 13.414l2.828 2.829 1.415-1.415L13.414 12l2.829-2.828-1.415-1.415L12 10.586z"/></svg>
-    </label>
-    <div class="feedback-text"></div>
-</div>
-`;
-customElements.define('sm-input',
-    class extends HTMLElement {
-
-        static formAssociated = true;
-        
-        constructor() {
-            super()
-            this.attachShadow({
-                mode: 'open'
-            }).append(smInput.content.cloneNode(true))
-        }
-
-        static get observedAttributes() {
-            return ['placeholder']
-        }
-
-        get value() {
-            return this.shadowRoot.querySelector('input').value
-        }
-
-        set value(val) {
-            this.shadowRoot.querySelector('input').value = val;
-            this.checkInput()
-            this.fireEvent()
-        }
-
-        get placeholder() {
-            return this.getAttribute('placeholder')
-        }
-
-        set placeholder(val) {
-            this.setAttribute('placeholder', val)
-        }
-
-        get type() {
-            return this.getAttribute('type')
-        }
-
-        get isValid() {
-            return this.shadowRoot.querySelector('input').checkValidity()
-        }
-
-        get validity() {
-            return this.shadowRoot.querySelector('input').validity
-        }
-
-        set disabled(value) {
-            if (value)
-                this.shadowRoot.querySelector('.input').classList.add('disabled')
-            else
-                this.shadowRoot.querySelector('.input').classList.remove('disabled')
-        }
-        set readOnly(value) {
-            if (value) {
-                this.shadowRoot.querySelector('input').setAttribute('readonly', '')
-                this.shadowRoot.querySelector('.input').classList.add('readonly')
-            } else {
-                this.shadowRoot.querySelector('input').removeAttribute('readonly')
-                this.shadowRoot.querySelector('.input').classList.remove('readonly')
-            }
-        }
-
-        setValidity = (message) => {
-            this.feedbackText.textContent = message
-        }
-
-        showValidity = () => {
-            this.feedbackText.classList.remove('hide-completely')
-        }
-        
-        hideValidity = () => {
-            this.feedbackText.classList.add('hide-completely')
-        }
-
-        focusIn = () => {
-            this.input.focus()
-        }
-
-        focusOut = () => {
-            this.input.blur()
-        }
-
-        fireEvent = () => {
-            let event = new Event('input', {
-                bubbles: true,
-                cancelable: true,
-                composed: true
-            });
-            this.dispatchEvent(event);
-        }
-
-        checkInput = (e) => {
-            if (!this.readonly) {                
-                if (this.input.value !== '') {
-                    this.clearBtn.classList.remove('hide')
-                } else {
-                    this.clearBtn.classList.add('hide')
-                }
-            }
-            if (!this.hasAttribute('placeholder') || this.getAttribute('placeholder') === '') return;
-            if (this.input.value !== '') {
-                if (this.animate)
-                    this.inputParent.classList.add('animate-label')
-                else
-                    this.label.classList.add('hide')
-            } else {
-                if (this.animate)
-                    this.inputParent.classList.remove('animate-label')
-                else
-                    this.label.classList.remove('hide')
-            }
-        }
-
-
-        connectedCallback() {
-            this.inputParent = this.shadowRoot.querySelector('.input')
-            this.clearBtn = this.shadowRoot.querySelector('.clear')
-            this.label = this.shadowRoot.querySelector('.label')
-            this.feedbackText = this.shadowRoot.querySelector('.feedback-text')
-            this.valueChanged = false;
-            this.readonly = false
-            this.isNumeric = false
-            this.min
-            this.max
-            this.animate = this.hasAttribute('animate')
-            this.input = this.shadowRoot.querySelector('input')
-            this.shadowRoot.querySelector('.label').textContent = this.getAttribute('placeholder')
-            if (this.hasAttribute('value')) {
-                this.input.value = this.getAttribute('value')
-                this.checkInput()
-            }
-            if (this.hasAttribute('required')) {
-                this.input.setAttribute('required', '')
-            }
-            if (this.hasAttribute('min')) {
-                let minValue = this.getAttribute('min')
-                this.input.setAttribute('min', minValue)
-                this.min = parseInt(minValue)
-            }
-            if (this.hasAttribute('max')) {
-                let maxValue = this.getAttribute('max')
-                this.input.setAttribute('max', maxValue)
-                this.max = parseInt(maxValue)
-            }
-            if (this.hasAttribute('minlength')) {
-                const minValue = this.getAttribute('minlength')
-                this.input.setAttribute('minlength', minValue)
-            }
-            if (this.hasAttribute('maxlength')) {
-                const maxValue = this.getAttribute('maxlength')
-                this.input.setAttribute('maxlength', maxValue)
-            }
-            if (this.hasAttribute('step')) {
-                const steps = this.getAttribute('step')
-                this.input.setAttribute('step', steps)
-            }
-            if (this.hasAttribute('pattern')) {
-                this.input.setAttribute('pattern', this.getAttribute('pattern'))
-            }
-            if (this.hasAttribute('readonly')) {
-                this.input.setAttribute('readonly', '')
-                this.readonly = true
-            }
-            if (this.hasAttribute('disabled')) {
-                this.inputParent.classList.add('disabled')
-            }
-            if (this.hasAttribute('error-text')) {
-                this.feedbackText.textContent = this.getAttribute('error-text')
-            }
-            if (this.hasAttribute('type')) {
-                if (this.getAttribute('type') === 'number') {
-                    this.input.setAttribute('inputmode', 'numeric')
-                    this.input.setAttribute('type', 'number')
-                    this.isNumeric = true
-                } else
-                    this.input.setAttribute('type', this.getAttribute('type'))
-            } else
-                this.input.setAttribute('type', 'text')
-            this.input.addEventListener('input', e => {
-                this.checkInput(e)
-            })
-            this.clearBtn.addEventListener('click', e => {
-                this.value = ''
-            })
-        }
-
-        attributeChangedCallback(name, oldValue, newValue) {
-            if (oldValue !== newValue) {
-                if (name === 'placeholder') {
-                    this.shadowRoot.querySelector('.label').textContent = newValue;
-                    this.setAttribute('aria-label', newValue);
-                }
-            }
-        }
-    })
-
-//textarea
-const smTextarea = document.createElement('template')
-smTextarea.innerHTML = `
-<style>
-*,
-*::before,
-*::after { 
-    padding: 0;
-    margin: 0;
-    -webkit-box-sizing: border-box;
-            box-sizing: border-box;
-} 
-::-moz-focus-inner{
-    border: none;
-}
-.hide{
-    opacity: 0 !important;
-}
-:host{
-    display: grid;
-    --border-radius: 0.3s;
-    --background: rgba(var(--text-color), 0.06);
-    --padding-right: initial;
-    --padding-left: initial;
-    --max-height: 8rem;
-}
-:host(.outlined) .textarea {
-    box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 0.4) inset;
-    background: rgba(var(--foreground-color), 1);
-}
-.textarea{
-    display: grid;
-    position: relative;
-    cursor: text;
-    min-width: 0;
-    text-align: left;
-    overflow: hidden auto;
-    grid-template-columns: 1fr;
-    align-items: stretch;
-    max-height: var(--max-height);
-    background: var(--background);
-    border-radius: var(--border-radius);
-    padding-left: var(--padding-left);
-    padding-right: var(--padding-right);
-}
-.textarea::after,
-textarea{
-    padding: 0.7rem 1rem;
-    width: 100%;
-    min-width: 1em;
-    font: inherit;
-    color: inherit;
-    resize: none;
-    grid-area: 2/1;
-    justify-self: stretch;
-    background: none;
-    appearance: none;
-    border: none;
-    outline: none;
-    line-height: 1.5;
-    overflow: hidden;
-}
-.textarea::after{
-    content: attr(data-value) ' ';
-    visibility: hidden;
-    white-space: pre-wrap;
-    overflow-wrap: break-word;
-    word-wrap: break-word;
-    hyphens: auto;
-}
-.readonly{
-    pointer-events: none;
-}
-.textarea:focus-within:not(.readonly){
-    box-shadow: 0 0 0 0.1rem var(--accent-color) inset;
-}
-.disabled{
-    pointer-events: none;
-    opacity: 0.6;
-}
-.placeholder{
-    position: absolute;
-    margin: 0.7rem 1rem;
-    opacity: .7;
-    font-weight: 400;
-    font-size: 1rem;
-    line-height: 1.5;
-    pointer-events: none;
-    user-select: none;
-}
-</style>
-<label class="textarea" part="textarea">
-    <span class="placeholder"></span>
-    <textarea rows="1"></textarea>
-</label>
-`;
-customElements.define('sm-textarea',
-    class extends HTMLElement {
-        constructor() {
-            super()
-            this.attachShadow({
-                mode: 'open'
-            }).append(smTextarea.content.cloneNode(true))
-            this.textarea = this.shadowRoot.querySelector('textarea')
-        }
-        get value() {
-            return this.textarea.value
-        }
-        set value(val) {
-            this.textarea.value = val;
-            this.textareaBox.dataset.value = val
-            this.checkInput()
-            this.fireEvent()
-        }
-        focusIn = () => {
-            this.textarea.focus()
-        }
-        fireEvent() {
-            let event = new Event('input', {
-                bubbles: true,
-                cancelable: true,
-                composed: true
-            });
-            this.dispatchEvent(event);
-        }
-        checkInput = () => {
-            if (!this.hasAttribute('placeholder') || this.getAttribute('placeholder') === '')
-                return;
-            if (this.textarea.value !== '') {
-                this.placeholder.classList.add('hide')
-            } else {
-                this.placeholder.classList.remove('hide')
-            }
-        }
-        connectedCallback() {
-            this.textareaBox = this.shadowRoot.querySelector('.textarea')
-            this.placeholder = this.shadowRoot.querySelector('.placeholder')
-
-            if(this.hasAttribute('placeholder'))
-                this.placeholder.textContent = this.getAttribute('placeholder')
-
-            if (this.hasAttribute('value')) {
-                this.textarea.value = this.getAttribute('value')
-                this.checkInput()
-            }
-            if (this.hasAttribute('required')) {
-                this.textarea.setAttribute('required', '')
-            }
-            if (this.hasAttribute('readonly')) {
-                this.textarea.setAttribute('readonly', '')
-            }
-            if (this.hasAttribute('rows')) {
-                this.textarea.setAttribute('rows', this.getAttribute('rows'))
-            }
-            this.textarea.addEventListener('input', e => {
-                this.textareaBox.dataset.value = this.textarea.value
-                this.checkInput()
-            })
-        }
-    })
-
-// tab
-const smTab = document.createElement('template')
-smTab.innerHTML = `
-<style>
-    *{
-        padding: 0;
-        margin: 0;
-        -webkit-box-sizing: border-box;
-                box-sizing: border-box;
-    } 
-    :host{
-        position: relative;
-        display: -webkit-inline-box;
-        display: -ms-inline-flexbox;
-        display: inline-flex;
-        z-index: 1;
-    }
-    .tab{
-        position: relative;
-        -webkit-user-select: none;
-        -moz-user-select: none;
-            -ms-user-select: none;
-                user-select: none;
-        -webkit-box-pack: center;
-            -ms-flex-pack: center;
-                justify-content: center;
-        cursor: pointer;
-        -webkit-tap-highlight-color: transparent;
-        white-space: nowrap;
-        padding: 0.4rem 0.8rem;
-        font-weight: 500;
-        word-spacing: 0.1rem;
-        text-align: center;
-        -webkit-transition: color 0.3s;
-        -o-transition: color 0.3s;
-        transition: color 0.3s;
-        text-transform: capitalize;
-        height: 100%;
-    }
-    @media (hover: hover){
-        :host(.active) .tab{
-            opacity: 1;
-        }
-        .tab{
-            opacity: 0.7
-        }
-        .tab:hover{
-            opacity: 1
-        }
-    }
-</style>
-<div part="tab" class="tab">
-<slot></slot>
-</div>
-`;
-
-customElements.define('sm-tab', class extends HTMLElement {
-    constructor() {
-        super()
-        this.shadow = this.attachShadow({
-            mode: 'open'
-        }).append(smTab.content.cloneNode(true))
-    }
-})
-
-//chcekbox
-
-const smCheckbox = document.createElement('template')
-smCheckbox.innerHTML = `
-<style>
-    *{
-        padding: 0;
-        margin: 0;
-        -webkit-box-sizing: border-box;
-                box-sizing: border-box;
-    } 
-    :host{
-        display: -webkit-inline-box;
-        display: -ms-inline-flexbox;
-        display: inline-flex;
-        --height: 1.6rem;
-        --width: 1.6rem;
-        --border-radius: 0.2rem;
-        --border-color: rgba(var(--text-color), 0.7);
-    }
-    :host([disabled]) {
-        opacity: 0.6;
-        pointer-events: none;
-    }
-    .checkbox {
-        position: relative;
-        display:-webkit-box;
-        display:-ms-flexbox;
-        display:flex;
-        -webkit-box-align: center;
-            -ms-flex-align: center;
-                align-items: center;
-        cursor: pointer;
-        height: 1.5rem;
-        outline: none;
-        -webkit-tap-highlight-color: transparent;
-    }
-    
-    .checkbox:active .icon,
-    .checkbox:focus-within .icon{
-        box-shadow: 0 0 0 0.3rem var(--accent-color) inset;
-    }
-    
-    .checkbox input {
-        display: none;
-    }
-    
-    .checkbox .checkmark {
-        stroke-dashoffset: -65;
-        stroke-dasharray: 65;
-        -webkit-transition: stroke-dashoffset 0.3s; 
-        -o-transition: stroke-dashoffset 0.3s; 
-        transition: stroke-dashoffset 0.3s;
-    }
-    
-    .checkbox input:checked ~ svg .checkmark {
-        stroke-dashoffset: 0;
-        stroke: rgba(var(--foreground-color), 1);
-    }
-    .checkbox input:checked ~ .icon {
-        stroke-width: 8; 
-        stroke: var(--accent-color);
-        background: var(--accent-color);
-    }
-    .checkbox input:not(:checked) ~ .icon {
-        box-shadow: 0 0 0 0.2rem var(--border-color) inset;
-    }
-    
-    .icon {
-        fill: none;
-        height: var(--height);
-        width: var(--width);
-        padding: 0.2rem;
-        stroke: rgba(var(--text-color), 0.7);
-        stroke-width: 6;
-        overflow: visible;
-        stroke-linecap: round;
-        stroke-linejoin: round;
-        -webkit-transition: background 0.3s;
-        -o-transition: background 0.3s;
-        transition: background 0.3s;
-        border-radius: var(--border-radius);
-    }
-</style>
-<label class="checkbox" tabindex="0">
-    <input type="checkbox">
-    <svg class="icon" viewBox="0 0 64 64">
-        <title>checkbox</title>
-        <path class="checkmark" d="M50.52,19.56,26,44.08,13.48,31.56" />
-    </svg>
-    <slot></slot>
-</label>`
-customElements.define('sm-checkbox', class extends HTMLElement {
-    constructor() {
-        super()
-        this.attachShadow({
-            mode: 'open'
-        }).append(smCheckbox.content.cloneNode(true))
-
-        this.checkbox = this.shadowRoot.querySelector('.checkbox');
-        this.input = this.shadowRoot.querySelector('input')
-
-        this.isChecked = false
-        this.isDisabled = false
-    }
-
-    static get observedAttributes() {
-        return ['disabled', 'checked']
-    }
-
-    get disabled() {
-        return this.isDisabled
-    }
-
-    set disabled(val) {
-        if (val) {
-            this.setAttribute('disabled', '')
-        } else {
-            this.removeAttribute('disabled')
-        }
-    }
-
-    get checked() {
-        return this.isChecked
-    }
-
-    set checked(value) {
-        if (value) {
-            this.setAttribute('checked', '')
-        }
-        else {
-            this.removeAttribute('checked')
-        }
-    }
-
-    set value(val) {
-        this.val = val
-        this.setAttribute('value', value)
-    }
-
-    get value() {
-        return getAttribute('value')
-    }
-
-    dispatch = () => {
-        this.dispatchEvent(new CustomEvent('change', {
-            bubbles: true,
-            composed: true
-        }))
-    }
-    handleKeyup = e => {
-        if ((e.code === "Enter" || e.code === "Space") && this.isDisabled == false) {
-            if (this.hasAttribute('checked')) {
-                this.input.checked = false
-                this.removeAttribute('checked')
-            }
-            else {
-                this.input.checked = true
-                this.setAttribute('checked', '')
-            }
-        }
-    }
-    handleChange = e => {
-        if (this.input.checked) {
-            this.setAttribute('checked', '')
-        }
-        else {
-            this.removeAttribute('checked')
-        }
-    }
-    
-    connectedCallback() {
-        this.val = ''
-        this.addEventListener('keyup', this.handleKeyup)
-        this.input.addEventListener('change', this.handleChange)
-    }
-    attributeChangedCallback(name, oldValue, newValue) {
-        if (oldValue !== newValue) {
-            if (name === 'disabled') {
-                if (newValue === 'true') {
-                    this.isDisabled = true
-                } else {
-                    this.isDisabled = false
-                }
-            }
-            else if (name === 'checked') {
-                if (this.hasAttribute('checked')) {
-                    this.isChecked = true
-                    this.input.checked = true
-                }
-                else {
-                    this.input.checked = false
-                    this.isChecked = false
-                }
-                this.dispatch()
-            }
-        }
-    }
-    disconnectedCallback() {
-        this.removeEventListener('keyup', this.handleKeyup)
-        this.removeEventListener('change', this.handleChange)
-    }
-})
-
-//switch
-
-const smSwitch = document.createElement('template')
-smSwitch.innerHTML = `	
-<style>
-    *{
-        -webkit-box-sizing: border-box;
-                box-sizing: border-box;
-        padding: 0;
-        margin: 0;
-    }
-    
-    :host{
-        display: -webkit-inline-box;
-        display: -ms-inline-flexbox;
-        display: inline-flex;
-    }
-    label{
-        display: -webkit-box;
-        display: -ms-flexbox;
-        display: flex;
-        -webkit-box-align: center;
-            -ms-flex-align: center;
-                align-items: center;
-        width: 100%;
-        outline: none;
-        cursor: pointer;
-        -webkit-tap-highlight-color: transparent;
-    }
-    :host(:not([disabled])) label:focus-visible{
-        -webkit-box-shadow: 0 0 0 0.1rem var(--accent-color);
-            box-shadow: 0 0 0 0.1rem var(--accent-color);
-    }
-    :host([disabled]) {
-        cursor: not-allowed;
-        opacity: 0.6;
-        pointer-events: none;
-    }
-    .switch {
-        position: relative;
-        display: -webkit-box;
-        display: -ms-flexbox;
-        display: flex;
-        -webkit-box-align: center;
-            -ms-flex-align: center;
-                align-items: center;
-        width: 2.4rem;
-        flex-shrink: 0;
-        margin-left: auto;
-        padding: 0.2rem;
-        cursor: pointer;
-        border-radius: 2rem;
-    }
-    
-    input {
-        display: none;
-    }
-    
-    .track {
-        position: absolute;
-        left: 0;
-        right: 0;
-        height: 1.4rem;
-        -webkit-transition: background 0.3s;
-        -o-transition: background 0.3s;
-        transition: background 0.3s;
-        background: rgba(var(--text-color), 0.4);
-        -webkit-box-shadow: 0 0.1rem 0.3rem #00000040 inset;
-                box-shadow: 0 0.1rem 0.3rem #00000040 inset;
-        border-radius: 1rem;
-    }
-    
-    .switch:active .button::after,
-    .switch:focus .button::after{
-        opacity: 1
-    }
-    .switch:focus-visible .button::after{
-        opacity: 1
-    }
-    
-    .button::after{
-        content: '';
-        display: -webkit-box;
-        display: -ms-flexbox;
-        display: flex;
-        position: absolute;
-        height: 2.6rem;
-        width: 2.6rem;
-        background: rgba(var(--text-color), 0.2);
-        border-radius: 2rem;
-        opacity: 0;
-        -webkit-transition: opacity 0.3s;
-        -o-transition: opacity 0.3s;
-        transition: opacity 0.3s;
-    }
-    
-    .button {
-        position: relative;
-        display: -webkit-inline-box;
-        display: -ms-inline-flexbox;
-        display: inline-flex;
-        height: 1rem;
-        width: 1rem;
-        -webkit-box-pack: center;
-            -ms-flex-pack: center;
-                justify-content: center;
-        -webkit-box-align: center;
-            -ms-flex-align: center;
-                align-items: center;
-        border-radius: 1rem;
-        -webkit-box-shadow: 0 0.1rem 0.4rem #00000060;
-                box-shadow: 0 0.1rem 0.4rem #00000060;
-        -webkit-transition: -webkit-transform 0.3s;
-        transition: -webkit-transform 0.3s;
-        -o-transition: transform 0.3s;
-        transition: transform 0.3s;
-        transition: transform 0.3s, -webkit-transform 0.3s;
-        border: solid 0.3rem white;
-    }
-    
-    input:checked ~ .button {
-        -webkit-transform: translateX(100%);
-            -ms-transform: translateX(100%);
-                transform: translateX(100%);
-    }
-    
-    input:checked ~ .track {
-        background: var(--accent-color);
-    }
-</style>
-<label tabindex="0">
-    <slot name="left"></slot>
-    <div part="switch" class="switch">
-        <input type="checkbox">
-        <div class="track"></div>
-        <div class="button"></div>
-    </div>
-</label>`
-
-customElements.define('sm-switch', class extends HTMLElement {
-    constructor() {
-        super()
-        this.attachShadow({
-            mode: 'open'
-        }).append(smSwitch.content.cloneNode(true))
-        this.switch = this.shadowRoot.querySelector('.switch');
-        this.input = this.shadowRoot.querySelector('input')
-        this.isChecked = false
-        this.isDisabled = false
-    }
-
-    static get observedAttributes() {
-        return ['disabled', 'checked']
-    }
-
-    get disabled() {
-        return this.isDisabled
-    }
-
-    set disabled(val) {
-        if (val) {
-            this.setAttribute('disabled', '')
-        } else {
-            this.removeAttribute('disabled')
-        }
-    }
-
-    get checked() {
-        return this.isChecked
-    }
-
-    set checked(value) {
-        if (value) {
-            this.setAttribute('checked', '')
-        } else {
-            this.removeAttribute('checked')
-        }
-    }
-
-    dispatch = () => {
-        this.dispatchEvent(new CustomEvent('change', {
-            bubbles: true,
-            composed: true
-        }))
-    }
-
-    connectedCallback() {
-        this.addEventListener('keyup', e => {
-            if ((e.code === "Enter" || e.code === "Space") && !this.isDisabled) {
-                this.input.click()
-            }
-        })
-        this.input.addEventListener('click', e => {
-            if (this.input.checked)
-                this.checked = true
-            else
-                this.checked = false
-            this.dispatch()
-        })
-    }
-    attributeChangedCallback(name, oldValue, newValue) {
-        if (oldValue !== newValue) {
-            if (name === 'disabled') {
-                if (this.hasAttribute('disabled')) {
-                    this.disabled = true                
-                }
-                else {
-                    this.disabled = false                
-                }
-            }
-            else if (name === 'checked') {
-                if (this.hasAttribute('checked')) {
-                    this.isChecked = true
-                    this.input.checked = true            
-                }
-                else {
-                    this.isChecked = false
-                    this.input.checked = false               
-                } 
-            }
-        }
-    }
-
-})
-
-// select
-const smSelect = document.createElement('template')
-smSelect.innerHTML = `
-<style>     
-*{
-    padding: 0;
-    margin: 0;
-    -webkit-box-sizing: border-box;
-            box-sizing: border-box;
-} 
-.icon {
-    fill: none;
-    height: 0.8rem;
-    width: 0.8rem;
-    stroke: rgba(var(--text-color), 0.7);
-    stroke-width: 6;
-    overflow: visible;
-    stroke-linecap: round;
-    stroke-linejoin: round;
-}      
-:host{
-    display: -webkit-inline-box;
-    display: -ms-inline-flexbox;
-    display: inline-flex;
-    --max-height: auto;
-}
-.hide{
-    opacity: 0;
-    pointer-events: none;
-}
-.select{
-    position: relative;
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    -webkit-box-orient: vertical;
-    -webkit-box-direction: normal;
-        -ms-flex-direction: column;
-            flex-direction: column;
-    cursor: pointer;
-    width: 100%;
-    -webkit-tap-highlight-color: transparent;
-}
-.option-text{
-    overflow: hidden;
-    -o-text-overflow: ellipsis;
-       text-overflow: ellipsis;
-    white-space: nowrap;
-}
-.selection{
-    border-radius: 0.3rem;
-    display: -ms-grid;
-    display: grid;
-    -ms-grid-columns: 1fr auto;
-    grid-template-columns: 1fr auto;
-        grid-template-areas: 'heading heading' '. .';
-    padding: 0.4rem 1rem;
-    background: rgba(var(--text-color), 0.06);
-    border: solid 1px rgba(var(--text-color), 0.2);
-    -webkit-box-align: center;
-        -ms-flex-align: center;
-            align-items: center;
-    outline: none;
-}
-.selection:focus{
-    -webkit-box-shadow: 0 0 0 0.1rem var(--accent-color);
-            box-shadow: 0 0 0 0.1rem var(--accent-color) 
-}
-.icon{
-    margin-left: 1rem;
-}
-:host([align-select="left"]) .options{
-    left: 0;
-}
-:host([align-select="right"]) .options{
-    right: 0;
-}
-.options{
-    top: 100%;
-    margin-top: 0.5rem; 
-    overflow: hidden auto;
-    position: absolute;
-    grid-area: options;
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    -webkit-box-orient: vertical;
-    -webkit-box-direction: normal;
-        -ms-flex-direction: column;
-            flex-direction: column;
-    min-width: 100%;
-    max-height: var(--max-height);
-    background: rgba(var(--foreground-color), 1);
-    -webkit-transition: opacity 0.3s, top 0.3s;
-    -o-transition: opacity 0.3s, top 0.3s;
-    transition: opacity 0.3s, top 0.3s;
-    border: solid 1px rgba(var(--text-color), 0.2);
-    border-radius: 0.3rem;
-    z-index: 2;
-    -webkit-box-shadow: 0.4rem 0.8rem 1.2rem #00000030;
-            box-shadow: 0.4rem 0.8rem 1.2rem #00000030;
-}
-.rotate{
-    -webkit-transform: rotate(180deg);
-        -ms-transform: rotate(180deg);
-            transform: rotate(180deg)
-}
-</style>
-<div class="select" >
-    <div class="selection" tabindex="0">
-        <div class="option-text"></div>
-        <svg class="icon toggle" viewBox="0 0 64 64">
-            <polyline points="63.65 15.99 32 47.66 0.35 15.99"/>
-        </svg>
-    </div>
-    <div part="options" class="options hide">
-        <slot></slot> 
-    </div>
-</div>`;
-customElements.define('sm-select', class extends HTMLElement {
-    constructor() {
-        super()
-        this.attachShadow({
-            mode: 'open'
-        }).append(smSelect.content.cloneNode(true))
-    }
-    static get observedAttributes() {
-        return ['value']
-    }
-    get value() {
-        return this.getAttribute('value')
-    }
-    set value(val) {
-        this.setAttribute('value', val)
-    }
-
-    collapse() {
-        this.optionList.animate(this.slideUp, this.animationOptions)
-        this.optionList.classList.add('hide')
-        this.chevron.classList.remove('rotate')
-        this.open = false
-    }
-    connectedCallback() {
-        this.availableOptions
-        this.optionList = this.shadowRoot.querySelector('.options')
-        this.chevron = this.shadowRoot.querySelector('.toggle')
-        let slot = this.shadowRoot.querySelector('.options slot'),
-            selection = this.shadowRoot.querySelector('.selection'),
-            previousOption
-        this.open = false;
-        this.slideDown = [{
-                    transform: `translateY(-0.5rem)`
-                },
-                {
-                    transform: `translateY(0)`
-                }
-            ],
-            this.slideUp = [{
-                    transform: `translateY(0)`
-                },
-                {
-                    transform: `translateY(-0.5rem)`
-                }
-            ],
-            this.animationOptions = {
-                duration: 300,
-                fill: "forwards",
-                easing: 'ease'
-            }
-        selection.addEventListener('click', e => {
-            if (!this.open) {
-                this.optionList.classList.remove('hide')
-                this.optionList.animate(this.slideDown, this.animationOptions)
-                this.chevron.classList.add('rotate')
-                this.open = true
-            } else {
-                this.collapse()
-            }
-        })
-        selection.addEventListener('keydown', e => {
-            if (e.code === 'ArrowDown' || e.code === 'ArrowRight') {
-                e.preventDefault()
-                this.availableOptions[0].focus()
-            }
-            if (e.code === 'Enter' || e.code === 'Space')
-                if (!this.open) {
-                    this.optionList.classList.remove('hide')
-                    this.optionList.animate(this.slideDown, this.animationOptions)
-                    this.chevron.classList.add('rotate')
-                    this.open = true
-                } else {
-                    this.collapse()
-                }
-        })
-        this.optionList.addEventListener('keydown', e => {
-            if (e.code === 'ArrowUp' || e.code === 'ArrowRight') {
-                e.preventDefault()
-                if (document.activeElement.previousElementSibling) {
-                    document.activeElement.previousElementSibling.focus()
-                }
-            }
-            if (e.code === 'ArrowDown' || e.code === 'ArrowLeft') {
-                e.preventDefault()
-                if (document.activeElement.nextElementSibling)
-                    document.activeElement.nextElementSibling.focus()
-            }
-        })
-        this.addEventListener('optionSelected', e => {
-            if (previousOption !== e.target) {
-                this.setAttribute('value', e.detail.value)
-                this.shadowRoot.querySelector('.option-text').textContent = e.detail.text;
-                this.dispatchEvent(new CustomEvent('change', {
-                    bubbles: true,
-                    composed: true,
-                    detail: {
-                        value: e.detail.value
-                    }
-                }))
-                if (previousOption) {
-                    previousOption.classList.remove('check-selected')
-                }
-                previousOption = e.target;
-            }
-            if (!e.detail.switching)
-                this.collapse()
-
-            e.target.classList.add('check-selected')
-        })
-        slot.addEventListener('slotchange', e => {
-            this.availableOptions = slot.assignedElements()
-            if (this.availableOptions[0]) {
-                let firstElement = this.availableOptions[0];
-                previousOption = firstElement;
-                firstElement.classList.add('check-selected')
-                this.setAttribute('value', firstElement.getAttribute('value'))
-                this.shadowRoot.querySelector('.option-text').textContent = firstElement.textContent
-                this.availableOptions.forEach((element, index) => {
-                    element.setAttribute('data-rank', index + 1);
-                    element.setAttribute('tabindex', "0");
-                })
-            }
-        });
-        document.addEventListener('mousedown', e => {
-            if (!this.contains(e.target) && this.open) {
-                this.collapse()
-            }
-        })
-    }
-})
-
-// option
-const smOption = document.createElement('template')
-smOption.innerHTML = `
-<style>     
-*{
-    padding: 0;
-    margin: 0;
-    -webkit-box-sizing: border-box;
-            box-sizing: border-box;
-}     
-:host{
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-}
-.option{
-    min-width: 100%;
-    padding: 0.8rem 1.2rem;
-    cursor: pointer;
-    overflow-wrap: break-word;
-    outline: none;
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    -webkit-box-align: center;
-        -ms-flex-align: center;
-            align-items: center;
-}
-:host(:focus){
-    outline: none;
-    background: rgba(var(--text-color), 0.1);
-}
-:host(:focus) .option .icon{
-    opacity: 0.4
-}
-:host(.check-selected) .icon{
-    opacity: 1 !important
-}
-.icon {
-    margin-right: 0.8rem;
-    fill: none;
-    height: 0.8rem;
-    width: 0.8rem;
-    stroke: rgba(var(--text-color), 0.7);
-    stroke-width: 10;
-    overflow: visible;
-    stroke-linecap: round;
-    border-radius: 1rem;
-    stroke-linejoin: round;
-    opacity: 0;
-}
-@media (hover: hover){
-    .option:hover{
-        background: rgba(var(--text-color), 0.1);
-    }
-    .option:hover .icon{
-        opacity: 0.4
-    }
-}
-</style>
-<div class="option">
-    <svg class="icon" viewBox="0 0 64 64">
-        <polyline points="0.35 31.82 21.45 52.98 63.65 10.66"/>
-    </svg>
-    <slot></slot> 
-</div>`;
-customElements.define('sm-option', class extends HTMLElement {
-    constructor() {
-        super()
-        this.attachShadow({
-            mode: 'open'
-        }).append(smOption.content.cloneNode(true))
-    }
-
-    sendDetails(switching) {
-        let optionSelected = new CustomEvent('optionSelected', {
-            bubbles: true,
-            composed: true,
-            detail: {
-                text: this.textContent,
-                value: this.getAttribute('value'),
-                switching: switching
-            }
-        })
-        this.dispatchEvent(optionSelected)
-    }
-
-    connectedCallback() {
-        let validKey = [
-            'ArrowUp',
-            'ArrowDown',
-            'ArrowLeft',
-            'ArrowRight'
-        ]
-        this.addEventListener('click', e => {
-            this.sendDetails()
-        })
-        this.addEventListener('keyup', e => {
-            if (e.code === 'Enter' || e.code === 'Space') {
-                e.preventDefault()
-                this.sendDetails(false)
-            }
-            if (validKey.includes(e.code)) {
-                e.preventDefault()
-                this.sendDetails(true)
-            }
-        })
-        if (this.hasAttribute('default')) {
-            setTimeout(() => {
-                this.sendDetails()
-            }, 0);
-        }
-    }
-})
-
-// select
-const smStripSelect = document.createElement('template')
-smStripSelect.innerHTML = `
-<style>     
-*{
-    padding: 0;
-    margin: 0;
-    -webkit-box-sizing: border-box;
-            box-sizing: border-box;
-}    
-:host{
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-}
-.icon {
-    position: absolute;
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    fill: none;
-    height: 2.6rem;
-    width: 2.6rem;
-    padding: 0.9rem;
-    stroke: rgba(var(--text-color), 0.7);
-    stroke-width: 10;
-    overflow: visible;
-    stroke-linecap: round;
-    stroke-linejoin: round;
-    cursor: pointer;
-    min-width: 0;
-    z-index: 1;
-    background: rgba(var(--foreground-color), 1);
-    -webkit-tap-highlight-color: transparent;
-    -webkit-transition: opacity 0.3s;
-    -o-transition: opacity 0.3s;
-    transition: opacity 0.3s; 
-}
-.hide{
-    pointer-events: none;
-    opacity: 0;
-}
-.select-container{
-    position: relative;
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    width: 100%;
-    -webkit-box-align: center;
-        -ms-flex-align: center;
-            align-items: center;
-}
-.select{
-    position: relative;
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    gap: 0.5rem;
-    max-width: 100%;
-    overflow: auto hidden;
-}
-.previous-item{
-    left: 0;
-}
-.next-item{
-    right: 0;
-}
-.left,.right{
-    position: absolute;
-    width: 1rem;
-    height: 100%; 
-    -webkit-transition: opacity 0.3s; 
-    -o-transition: opacity 0.3s; 
-    transition: opacity 0.3s;
-    z-index: 1;
-}
-.left{
-    background: -webkit-gradient(linear, right top, left top, from(transparent), to(rgba(var(--foreground-color), 1)));
-    background: -o-linear-gradient(right, transparent, rgba(var(--foreground-color), 1));
-    background: linear-gradient(to left, transparent, rgba(var(--foreground-color), 1))
-}
-.right{
-    right: 0;
-    background: -webkit-gradient(linear, left top, right top, from(transparent), to(rgba(var(--foreground-color), 1)));
-    background: -o-linear-gradient(left, transparent, rgba(var(--foreground-color), 1));
-    background: linear-gradient(to right, transparent, rgba(var(--foreground-color), 1))
-}
-slot::slotted(.active){
-    border-radius: 2rem;
-    opacity: 1;
-    background-color: rgba(var(--text-color), .6);  
-    color: rgba(var(--foreground-color), 1);
-}
-@media (hover: none){
-    ::-webkit-scrollbar-track {
-        -webkit-box-shadow: none !important;
-        background-color: transparent !important;
-    }
-    ::-webkit-scrollbar {
-        height: 0;
-        background-color: transparent;
-    }
-    .icon{
-        display: none;
-    }
-    .left,.right{
-        display: block;
-    }
-}
-@media (hover: hover){
-    .select{
-        overflow: hidden;
-    }
-    .left,.right{
-        display: none;
-    }
-}
-</style>
-<div class="select-container">
-    <div class="left hide"></div>
-    <svg class="icon previous-item hide" viewBox="4 0 64 64">
-        <title>Previous</title>
-        <polyline points="48.01 0.35 16.35 32 48.01 63.65"/>
-    </svg>
-    <div class="select">
-        <slot></slot> 
-    </div>
-    <svg class="icon next-item hide" viewBox="-6 0 64 64">
-        <title>Next</title>
-        <polyline points="15.99 0.35 47.65 32 15.99 63.65"/>
-    </svg>
-    <div class="right hide"></div>
-</div>`;
-customElements.define('sm-strip-select', class extends HTMLElement {
-    constructor() {
-        super()
-        this.attachShadow({
-            mode: 'open'
-        }).append(smStripSelect.content.cloneNode(true))
-    }
-    static get observedAttributes() {
-        return ['value']
-    }
-    get value() {
-        return this.getAttribute('value')
-    }
-    set value(val) {
-        this.setAttribute('value', val)
-    }
-    scrollLeft = () => {
-        this.select.scrollBy({
-            top: 0,
-            left: -this.scrollDistance,
-            behavior: 'smooth'
-        })
-    }
-
-    scrollRight = () => {
-        this.select.scrollBy({
-            top: 0,
-            left: this.scrollDistance,
-            behavior: 'smooth'
-        })
-    }
-    connectedCallback() {
-        let previousOption,
-            slot = this.shadowRoot.querySelector('slot');
-        this.selectContainer = this.shadowRoot.querySelector('.select-container')
-        this.select = this.shadowRoot.querySelector('.select')
-        this.nextArrow = this.shadowRoot.querySelector('.next-item')
-        this.previousArrow = this.shadowRoot.querySelector('.previous-item')
-        this.nextGradient = this.shadowRoot.querySelector('.right')
-        this.previousGradient = this.shadowRoot.querySelector('.left')
-        this.selectOptions
-        this.scrollDistance = this.selectContainer.getBoundingClientRect().width
-        const firstElementObserver = new IntersectionObserver(entries => {
-            if (entries[0].isIntersecting) {
-                this.previousArrow.classList.add('hide')
-                this.previousGradient.classList.add('hide')
-            } else {
-                this.previousArrow.classList.remove('hide')
-                this.previousGradient.classList.remove('hide')
-            }
-        }, {
-            root: this.selectContainer,
-            threshold: 0.95
-        })
-        const lastElementObserver = new IntersectionObserver(entries => {
-            if (entries[0].isIntersecting) {
-                this.nextArrow.classList.add('hide')
-                this.nextGradient.classList.add('hide')
-            } else {
-                this.nextArrow.classList.remove('hide')
-                this.nextGradient.classList.remove('hide')
-            }
-        }, {
-            root: this.selectContainer,
-            threshold: 0.95
-        })
-
-        const selectObserver = new IntersectionObserver(entries => {
-            if (entries[0].isIntersecting) {
-                this.scrollDistance = this.selectContainer.getBoundingClientRect().width
-            }
-        })
-
-        selectObserver.observe(this.selectContainer)
-        this.addEventListener('optionSelected', e => {
-            if (previousOption === e.target) return;
-            if (previousOption)
-                previousOption.classList.remove('active')
-            e.target.classList.add('active')
-            e.target.scrollIntoView({
-                behavior: 'smooth',
-                inline: 'center',
-                block: 'nearest'
-            })
-            this.setAttribute('value', e.detail.value)
-            this.dispatchEvent(new CustomEvent('change', {
-                bubbles: true,
-                composed: true
-            }))
-            previousOption = e.target;
-        })
-        slot.addEventListener('slotchange', e => {
-            this.selectOptions = slot.assignedElements()
-            firstElementObserver.observe(this.selectOptions[0])
-            lastElementObserver.observe(this.selectOptions[this.selectOptions.length - 1])
-            if (this.selectOptions[0]) {
-                let firstElement = this.selectOptions[0];
-                this.setAttribute('value', firstElement.getAttribute('value'))
-                firstElement.classList.add('active')
-                previousOption = firstElement;
-            }
-        });
-        this.nextArrow.addEventListener('click', this.scrollRight)
-        this.previousArrow.addEventListener('click', this.scrollLeft)
-    }
-
-    disconnectedCallback() {
-        this.nextArrow.removeEventListener('click', this.scrollRight)
-        this.previousArrow.removeEventListener('click', this.scrollLeft)
-    }
-})
-
-// option
-const smStripOption = document.createElement('template')
-smStripOption.innerHTML = `
-<style>     
-*{
-    padding: 0;
-    margin: 0;
-    -webkit-box-sizing: border-box;
-            box-sizing: border-box;
-}     
-:host{
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-}
-.option{
-    padding: 0.4rem 0.8rem;
-    cursor: pointer;
-    overflow-wrap: break-word;
-    white-space: nowrap;
-    outline: none;
-    border-radius: 2rem;
-    text-transform: capitalize;
-    border: solid 1px rgba(var(--text-color), .3);
-    opacity: 0.9;
-}
-.option:focus{
-    background: rgba(var(--text-color), 0.1);
-}
-
-@media (hover: hover){
-    .option{
-        -webkit-transition: background 0.3s;
-        -o-transition: background 0.3s;
-        transition: background 0.3s;
-    }
-    .option:hover{
-        background: rgba(var(--text-color), 0.1);
-    }
-}
-</style>
-<div class="option" tabindex="0">
-    <slot></slot> 
-</div>`;
-customElements.define('sm-strip-option', class extends HTMLElement {
-    constructor() {
-        super()
-        this.attachShadow({
-            mode: 'open'
-        }).append(smStripOption.content.cloneNode(true))
-    }
-    sendDetails() {
-        let optionSelected = new CustomEvent('optionSelected', {
-            bubbles: true,
-            composed: true,
-            detail: {
-                text: this.textContent,
-                value: this.getAttribute('value')
-            }
-        })
-        this.dispatchEvent(optionSelected)
-    }
-
-    connectedCallback() {
-        this.addEventListener('click', e => {
-            this.sendDetails()
-        })
-        this.addEventListener('keyup', e => {
-            if (e.code === 'Enter' || e.code === 'Space') {
-                e.preventDefault()
-                this.sendDetails(false)
-            }
-        })
-        if (this.hasAttribute('default')) {
-            setTimeout(() => {
-                this.sendDetails()
-            }, 0);
-        }
-    }
-})
-
-//popup
-const smPopup = document.createElement('template')
-smPopup.innerHTML = `
-<style>
-*{
-    padding: 0;
-    margin: 0;
-    -webkit-box-sizing: border-box;
-            box-sizing: border-box;
-} 
-:host{
-    position: fixed;
-    display: -ms-grid;
-    display: grid;
-    z-index: 10;
-    --width: 100%;
-    --height: auto;
-    --min-width: auto;
-    --min-height: auto;
-    --body-padding: 1.5rem;
-    --backdrop: rgba(0, 0, 0, 0.6);
-    --border-radius: 0.8rem 0.8rem 0 0;
-}
-.popup-container{
-    display: -ms-grid;
-    display: grid;
-    position: fixed;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    place-items: center;
-    background: var(--backdrop);
-    -webkit-transition: opacity 0.3s;
-    -o-transition: opacity 0.3s;
-    transition: opacity 0.3s;
-    z-index: 10;
-    touch-action: none;
-}
-:host(.stacked) .popup{
-    -webkit-transform: scale(0.9) translateY(-2rem) !important;
-            transform: scale(0.9) translateY(-2rem) !important;
-}
-.popup{
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    -webkit-box-orient: vertical;
-    -webkit-box-direction: normal;
-            flex-direction: column;
-    position: relative;
-    -ms-flex-item-align: end;
-        align-self: flex-end;
-    -webkit-box-align: start;
-        -ms-flex-align: start;
-            align-items: flex-start;
-    width: var(--width);
-    min-width: var(--min-width);
-    height: var(--height);
-    min-height: var(--min-height);
-    max-height: 90vh;
-    border-radius: var(--border-radius);
-    -webkit-transform: scale(1) translateY(100%);
-            transform: scale(1) translateY(100%);
-    -webkit-transition: -webkit-transform 0.3s;
-    transition: -webkit-transform 0.3s;
-    -o-transition: transform 0.3s;
-    transition: transform 0.3s, -webkit-transform 0.3s;
-    transition: transform 0.3s;
-    background: rgba(var(--foreground-color), 1);
-    -webkit-box-shadow: 0 -1rem 2rem #00000020;
-            box-shadow: 0 -1rem 2rem #00000020;
-    content-visibility: auto;
-}
-.container-header{
-    display: -webkit-box;
-    display: flex;
-    width: 100%;
-    touch-action: none;
-    -webkit-box-align: center;
-        -ms-flex-align: center;
-            align-items: center;
-}
-.popup-top{
-    display: -webkit-box;
-    display: flex;
-    width: 100%;
-}
-.popup-body{
-    display: -webkit-box;
-    display: flex;
-    -webkit-box-orient: vertical;
-    -webkit-box-direction: normal;
-        -ms-flex-direction: column;
-            flex-direction: column;
-    -webkit-box-flex: 1;
-        -ms-flex: 1;
-            flex: 1;
-    width: 100%;
-    padding: var(--body-padding);
-    overflow-y: auto;
-}
-.hide{
-    opacity: 0;
-    pointer-events: none;
-    visiblity: none;
-}
-@media screen and (min-width: 640px){
-    :host{
-        --border-radius: 0.4rem;
-    }
-    .popup{
-        -ms-flex-item-align: center;
-            -ms-grid-row-align: center;
-            align-self: center;
-        border-radius: var(--border-radius);
-        height: var(--height);
-        -webkit-transform: scale(1) translateY(3rem);
-                transform: scale(1) translateY(3rem);
-        -webkit-box-shadow: 0 3rem 2rem -0.5rem #00000040;
-                box-shadow: 0 3rem 2rem -0.5rem #00000040;
-    }
-}
-@media screen and (max-width: 640px){
-    .popup-top{
-        -webkit-box-orient: vertical;
-        -webkit-box-direction: normal;
-                flex-direction: column;
-        -webkit-box-align: center;
-                align-items: center;
-    }
-    .handle{
-        height: 0.3rem;
-        width: 2rem;
-        background: rgba(var(--text-color), .4);
-        border-radius: 1rem;
-        margin: 0.5rem 0;
-    }
-}
-@media (any-hover: hover){
-    ::-webkit-scrollbar{
-        width: 0.5rem;
-    }
-    
-    ::-webkit-scrollbar-thumb{
-        background: rgba(var(--text-color), 0.3);
-        border-radius: 1rem;
-        &:hover{
-            background: rgba(var(--text-color), 0.5);
-        }
-    }
-}
-</style>
-<div part="background" class="popup-container hide" role="dialog">
-    <div part="popup" class="popup">
-        <div part="popup-header" class="popup-top">
-            <div class="handle"></div>
-            <slot name="header"></slot>
-        </div>
-        <div part="popup-body" class="popup-body">
-            <slot></slot>
-        </div>
-    </div>
-</div>
-`;
-customElements.define('sm-popup', class extends HTMLElement {
-    constructor() {
-        super()
-        this.attachShadow({
-            mode: 'open'
-        }).append(smPopup.content.cloneNode(true))
-
-        this.allowClosing = false
-        this.isOpen = false
-    }
-
-    get open() {
-        return this.isOpen
-    }
-
-    resumeScrolling = () => {
-        const scrollY = document.body.style.top;
-        window.scrollTo(0, parseInt(scrollY || '0') * -1);
-        setTimeout(() => {
-            document.body.style.overflow = 'auto';
-            document.body.style.top= 'initial'
-        }, 300);
-    }
-
-    show = (pinned, popupStack) => {
-        if (popupStack)
-            this.popupStack = popupStack
-        if (this.popupStack && !this.hasAttribute('open')) {
-            this.popupStack.push({
-                popup: this,
-                permission: pinned
-            })
-            if (this.popupStack.items.length > 1) {
-                this.popupStack.items[this.popupStack.items.length - 2].popup.classList.add('stacked')
-            }
-            this.dispatchEvent(
-                new CustomEvent("popupopened", {
-                    bubbles: true,
-                    detail: {
-                        popup: this,
-                        popupStack: this.popupStack
-                    }
-                })
-            )
-            this.setAttribute('open', '')
-            this.pinned = pinned
-            this.isOpen = true
-        }
-        this.popupContainer.classList.remove('hide')
-        this.popup.style.transform = 'none';
-        document.body.style.overflow = 'hidden';
-        document.body.style.top= `-${window.scrollY}px`
-        return this.popupStack
-    }
-    hide = () => {
-        if (window.innerWidth < 640)
-            this.popup.style.transform = 'translateY(100%)';
-        else
-            this.popup.style.transform = 'translateY(3rem)';
-        this.popupContainer.classList.add('hide')
-        this.removeAttribute('open')
-        if (typeof this.popupStack !== 'undefined') {
-            this.popupStack.pop()
-            if (this.popupStack.items.length) {
-                this.popupStack.items[this.popupStack.items.length - 1].popup.classList.remove('stacked')
-            } else {
-                this.resumeScrolling()
-            }
-        } else {
-            this.resumeScrolling()
-        }
-
-        if (this.inputFields.length) {
-            setTimeout(() => {
-                this.inputFields.forEach(field => {
-                    if (field.type === 'radio' || field.tagName === 'SM-CHECKBOX')
-                        field.checked = false
-                    if (field.tagName === 'SM-INPUT' || field.tagName === 'TEXTAREA'|| field.tagName === 'SM-TEXTAREA')
-                        field.value = ''
-                })
-            }, 300);
-        }
-        setTimeout(() => {            
-            this.dispatchEvent(
-                new CustomEvent("popupclosed", {
-                    bubbles: true,
-                    detail: {
-                        popup: this,
-                        popupStack: this.popupStack
-                    }
-                })
-            )
-            this.isOpen = false
-        }, 300);
-    }
-
-    handleTouchStart = (e) => {
-        this.touchStartY = e.changedTouches[0].clientY
-        this.popup.style.transition = 'transform 0.1s'
-        this.touchStartTime = e.timeStamp
-    }
-
-    handleTouchMove = (e) => {
-        if (this.touchStartY < e.changedTouches[0].clientY) {
-            this.offset = e.changedTouches[0].clientY - this.touchStartY;
-            this.touchEndAnimataion = window.requestAnimationFrame(() => this.movePopup())
-        }
-        /*else {
-            this.offset = this.touchStartY - e.changedTouches[0].clientY;
-            this.popup.style.transform = `translateY(-${this.offset}px)`
-        }*/
-    }
-
-    handleTouchEnd = (e) => {
-        this.touchEndTime = e.timeStamp
-        cancelAnimationFrame(this.touchEndAnimataion)
-        this.touchEndY = e.changedTouches[0].clientY
-        this.popup.style.transition = 'transform 0.3s'
-        this.threshold = this.popup.getBoundingClientRect().height * 0.3
-        if (this.touchEndTime - this.touchStartTime > 200) {
-            if (this.touchEndY - this.touchStartY > this.threshold) {
-                if (this.pinned) {
-                    this.show()
-                    return
-                } else
-                    this.hide()
-            } else {
-                this.show()
-            }
-        } else {
-            if (this.touchEndY > this.touchStartY)
-                if (this.pinned) {
-                    this.show()
-                    return
-                }
-            else
-                this.hide()
-        }
-    }
-
-    movePopup = () => {
-        this.popup.style.transform = `translateY(${this.offset}px)`
-    }
-
-    connectedCallback() {
-        this.pinned = false
-        this.popupStack
-        this.popupContainer = this.shadowRoot.querySelector('.popup-container')
-        this.popup = this.shadowRoot.querySelector('.popup')
-        this.popupBodySlot = this.shadowRoot.querySelector('.popup-body slot')
-        this.offset
-        this.popupHeader = this.shadowRoot.querySelector('.popup-top')
-        this.touchStartY = 0
-        this.touchEndY = 0
-        this.touchStartTime = 0
-        this.touchEndTime = 0
-        this.touchEndAnimataion;
-        this.threshold = this.popup.getBoundingClientRect().height * 0.3
-
-        if (this.hasAttribute('open'))
-            this.show()
-        this.popupContainer.addEventListener('mousedown', e => {
-            if (e.target === this.popupContainer && !this.pinned) {
-                if (this.pinned) {
-                    this.show()
-                    return
-                } else
-                    this.hide()
-            }
-        })
-
-        this.popupBodySlot.addEventListener('slotchange', () => {
-            setTimeout(() => {
-                this.threshold = this.popup.getBoundingClientRect().height * 0.3
-            }, 200);
-            this.inputFields = this.querySelectorAll('sm-input', 'sm-checkbox', 'textarea', 'sm-textarea', 'radio')
-        })
-
-        this.popupHeader.addEventListener('touchstart', (e) => { this.handleTouchStart(e) }, {passive: true})
-        this.popupHeader.addEventListener('touchmove', (e) => {this.handleTouchMove(e)}, {passive: true})
-        this.popupHeader.addEventListener('touchend', (e) => {this.handleTouchEnd(e)}, {passive: true})
-    }
-    disconnectedCallback() {
-        this.popupHeader.removeEventListener('touchstart', this.handleTouchStart, {passive: true})
-        this.popupHeader.removeEventListener('touchmove', this.handleTouchMove, {passive: true})
-        this.popupHeader.removeEventListener('touchend', this.handleTouchEnd, {passive: true})
-    }
-})
-
-//carousel
-
-const smCarousel = document.createElement('template')
-smCarousel.innerHTML = `
-<style>
-*{
-    padding: 0;
-    margin: 0;
-    -webkit-box-sizing: border-box;
-            box-sizing: border-box;
-} 
-:host{
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    --arrow-left: 1rem;
-    --arrow-right: 1rem;
-    --arrow-top: auto;
-    --arrow-bottom: auto;
-    --arrow-fill: rgba(var(--foreground-color), 1);
-    --arrow-background: rgba(var(--text-color), 1);
-    --arrow-box-shadow: 0 0.2rem 0.2rem #00000020, 0 0.5rem 1rem #00000040;
-    --indicator-top: auto;
-    --indicator-bottom: -1rem;
-    --active-indicator-color: var(--accent-color);
-}
-.carousel__button{
-    position: absolute;
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    cursor: pointer;
-    min-width: 0;
-    top:  var(--arrow-top);
-    bottom:  var(--arrow-bottom);
-    border: none;
-    background: var(--arrow-background);
-    -webkit-box-shadow: var(--arrow-box-shadow);
-            box-shadow:  var(--arrow-box-shadow); 
-    -webkit-tap-highlight-color: transparent;
-    -webkit-transform: scale(0);
-        -ms-transform: scale(0);
-            transform: scale(0);
-    z-index: 1;
-    border-radius: 3rem;
-    padding: 0.5rem;
-}
-.carousel__button:active{
-    background: rgba(var(--text-color), 0.1);
-}
-button:focus{
-    outline: none;
-}
-button:focus-visible{
-    outline: rgba(var(--text-color), 1) 0.1rem solid;
-}
-.carousel__button--left{
-    left: var(--arrow-left);
-}
-.carousel__button--right{
-    right: var(--arrow-right);
-}
-.icon {
-    height: 1.5rem;
-    width: 1.5rem;
-    fill: var(--arrow-fill);
-}
-.hide{
-    pointer-events: none;
-    opacity: 0;
-}
-.expand{
-    -webkit-transform: scale(1);
-        -ms-transform: scale(1);
-            transform: scale(1)
-}
-.carousel-container{
-    position: relative;
-    display: grid;
-    width: 100%;
-    -webkit-box-align: center;
-        -ms-flex-align: center;
-            align-items: center;
-}
-.carousel{
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    max-width: 100%;
-    width: 100%;
-    overflow: auto hidden;
-    -ms-scroll-snap-type: x mandatory;
-        scroll-snap-type: x mandatory;
-}
-.indicators{
-    display: -ms-grid;
-    display: grid;
-    grid-auto-flow: column;
-    -webkit-box-pack: center;
-        -ms-flex-pack: center;
-            justify-content: center;
-    position: absolute;
-    top: var(--indicator-top);
-    bottom: var(--indicator-bottom);
-    gap: 0.5rem;
-    width: 100%;
-}
-.dot{
-    position: relative;
-    padding: 0.2rem;
-    background: rgba(var(--text-color), 0.3);
-    border-radius: 1rem;
-    -webkit-transition: 0.2s;
-    -o-transition: 0.2s;
-    transition: 0.2s;
-    cursor: pointer;
-}
-.dot.active{
-    -webkit-transform: scale(1.5);
-        -ms-transform: scale(1.5);
-            transform: scale(1.5);
-    background: var(--active-indicator-color);
-}
-slot::slotted(*){
-    scroll-snap-align: center;
-}
-:host([align-items="start"]) slot::slotted(*){
-    scroll-snap-align: start;
-}
-:host([align-items="center"]) slot::slotted(*){
-    scroll-snap-align: center;
-}
-:host([align-items="end"]) slot::slotted(*){
-    scroll-snap-align: end;
-}
-@media (hover: hover){
-    .carousel{
-        overflow: hidden;
-    }
-    .left,.right{
-        display: none;
-    }
-    .carousel__button:hover{
-        background: rgba(var(--text-color), 0.06);
-    }
-}
-@media (hover: none){
-    ::-webkit-scrollbar-track {
-        -webkit-box-shadow: none !important;
-        background-color: transparent !important;
-    }
-    ::-webkit-scrollbar {
-        height: 0;
-        background-color: transparent;
-    }
-    .carousel{
-        overflow: auto none;
-    }
-    .carousel__button{
-        display: none;
-    }
-    .left,.right{
-        display: block;
-    }
-}
-</style>
-<div class="carousel-container">
-    <button class="carousel__button carousel__button--left">
-        <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M10.828 12l4.95 4.95-1.414 1.414L8 12l6.364-6.364 1.414 1.414z"/></svg>
-    </button>
-    <div part="carousel" class="carousel">
-        <slot></slot>
-    </div>
-    <button class="carousel__button carousel__button--right">
-        <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M13.172 12l-4.95-4.95 1.414-1.414L16 12l-6.364 6.364-1.414-1.414z"/></svg>
-    </button>
-    <div class="indicators"></div>
-</div>
-`;
-
-customElements.define('sm-carousel', class extends HTMLElement {
-    constructor() {
-        super()
-        this.attachShadow({
-            mode: 'open'
-        }).append(smCarousel.content.cloneNode(true))
-
-        this.isAutoPlaying = false
-        this.autoPlayInterval = 5000
-        this.autoPlayTimeout
-        this.initialTimeout
-        this.activeSlideNum = 0
-        this.carouselItems
-        this.indicators
-        this.showIndicator = false
-        this.carousel = this.shadowRoot.querySelector('.carousel')
-        this.carouselContainer = this.shadowRoot.querySelector('.carousel-container')
-        this.carouselSlot = this.shadowRoot.querySelector('slot')
-        this.nextArrow = this.shadowRoot.querySelector('.carousel__button--right')
-        this.previousArrow = this.shadowRoot.querySelector('.carousel__button--left')
-        this.indicatorsContainer = this.shadowRoot.querySelector('.indicators')
-    }
-
-    static get observedAttributes() {
-        return ['indicator', 'autoplay', 'interval']
-    }
-
-    scrollLeft = () => {
-        this.carousel.scrollBy({
-            left: -this.scrollDistance,
-            behavior: 'smooth'
-        })
-    }
-
-    scrollRight = () => {
-        this.carousel.scrollBy({
-            left: this.scrollDistance,
-            behavior: 'smooth'
-        })
-    }
-
-    handleIndicatorClick = (e) => {
-        if (e.target.closest('.dot')) {
-            const slideNum = parseInt(e.target.closest('.dot').dataset.rank)
-            if (this.activeSlideNum !== slideNum) {
-                this.showSlide(slideNum)
-            }
-        }
-    }
-
-    showSlide = (slideNum) => {
-        this.carousel.scrollTo({
-            left: (this.carouselItems[slideNum].getBoundingClientRect().left - this.carousel.getBoundingClientRect().left + this.carousel.scrollLeft),
-            behavior: 'smooth'
-        })
-    }
-
-    nextSlide = () => {
-        if (!this.carouselItems) return
-        let showSlideNo = (this.activeSlideNum + 1) < this.carouselItems.length ? this.activeSlideNum + 1 : 0
-        this.showSlide(showSlideNo)
-    }
-    
-    autoPlay = () => {
-        this.nextSlide()
-        if (this.isAutoPlaying) {
-            this.autoPlayTimeout = setTimeout(() => {
-                this.autoPlay()
-            }, this.autoPlayInterval);
-        }
-    }
-
-    startAutoPlay = () => {
-        this.setAttribute('autoplay', '')
-    }
-
-    stopAutoPlay = () => {
-        this.removeAttribute('autoplay')
-    }
-
-    connectedCallback() {
-        this.scrollDistance = this.carouselContainer.getBoundingClientRect().width / 3
-        let frag = document.createDocumentFragment();
-        if (this.hasAttribute('indicator'))
-            this.showIndicator = true
-
-
-        let firstVisible = false,
-            lastVisible = false
-        const allElementsObserver = new IntersectionObserver(entries => {
-            entries.forEach(entry => {
-                if (this.showIndicator) {                    
-                    const activeRank = parseInt(entry.target.dataset.rank)
-                    if (entry.isIntersecting) {
-                        this.indicators[activeRank].classList.add('active')
-                        this.activeSlideNum = activeRank
-                    }
-                    else
-                        this.indicators[activeRank].classList.remove('active')
-                }
-                if (!entry.target.previousElementSibling)
-                    if (entry.isIntersecting) {
-                        this.previousArrow.classList.remove('expand')
-                        firstVisible = true
-                    }
-                else {
-                    this.previousArrow.classList.add('expand')
-                    firstVisible = false
-                }
-                if (!entry.target.nextElementSibling)
-                    if (entry.isIntersecting) {
-                        this.nextArrow.classList.remove('expand')
-                        lastVisible = true
-                    }
-                else {
-                    this.nextArrow.classList.add('expand')
-                    lastVisible = false
-                }
-                if (firstVisible && lastVisible)
-                    this.indicatorsContainer.classList.add('hide')
-                else
-                    this.indicatorsContainer.classList.remove('hide')
-            })
-        }, {
-            root: this.carouselContainer,
-            threshold: 0.9
-        })
-
-        const carouselObserver = new IntersectionObserver(entries => {
-            if (entries[0].isIntersecting) {
-                this.scrollDistance = this.carouselContainer.getBoundingClientRect().width / 3
-            }
-        })
-
-        carouselObserver.observe(this.carouselContainer)
-
-        this.carouselSlot.addEventListener('slotchange', e => {
-            this.carouselItems = this.carouselSlot.assignedElements()
-            this.carouselItems.forEach(item => allElementsObserver.observe(item))
-            if (this.showIndicator) {
-                this.indicatorsContainer.innerHTML = ``
-                this.carouselItems.forEach((item, index) => {
-                    let dot = document.createElement('div')
-                    dot.classList.add('dot')
-                    dot.dataset.rank = index
-                    frag.append(dot)
-                    item.dataset.rank = index
-                })
-                this.indicatorsContainer.append(frag)
-                this.indicators = this.indicatorsContainer.children
-            }
-        })
-
-        this.addEventListener('keyup', e => {
-            if (e.code === 'ArrowLeft')
-                this.scrollRight()
-            else if (e.code === 'ArrowRight')
-                this.scrollRight()
-        })
-
-        this.nextArrow.addEventListener('click', this.scrollRight)
-        this.previousArrow.addEventListener('click', this.scrollLeft)
-        this.indicatorsContainer.addEventListener('click', this.handleIndicatorClick)
-    }
-
-    async attributeChangedCallback(name, oldValue, newValue) {
-        if (oldValue !== newValue) {            
-            if (name === 'indicator') {
-                if (this.hasAttribute('indicator'))
-                    this.showIndicator = true
-                else
-                    this.showIndicator = false
-                }
-            if (name === 'autoplay') {
-                if (this.hasAttribute('autoplay')) {
-                    this.initialTimeout = setTimeout(() => {
-                        this.isAutoPlaying = true
-                        this.autoPlay()
-                    }, this.autoPlayInterval);
-                }
-                else {
-                    this.isAutoPlaying = false
-                    clearTimeout(this.autoPlayTimeout)
-                    clearTimeout(this.initialTimeout)
-                }
-                
-            }
-            if (name === 'interval') {
-                if (this.hasAttribute('interval') && this.getAttribute('interval').trim() !== '') {
-                    this.autoPlayInterval = Math.abs(parseInt(this.getAttribute('interval').trim()))
-                }
-                else {
-                    this.autoPlayInterval = 5000
-                }
-            }
-        }
-    }
-
-    disconnectedCallback() {
-        this.nextArrow.removeEventListener('click', this.scrollRight)
-        this.previousArrow.removeEventListener('click', this.scrollLeft)
-        this.indicatorsContainer.removeEventListener('click', this.handleIndicatorClick)
-    }
-})
-
-//notifications
-
-const smNotifications = document.createElement('template')
-smNotifications.innerHTML = `
-<style>
-    *{
-        padding: 0;
-        margin: 0;
-        -webkit-box-sizing: border-box;
-                box-sizing: border-box;
-    } 
-    :host{
-        display: -webkit-box;
-        display: -ms-flexbox;
-        display: flex;
-    }
-    .hide{
-        opacity: 0 !important;
-        pointer-events: none !important;
-    }
-    .notification-panel{
-        display: -ms-grid;
-        display: grid;
-        width: 100%;
-        position: fixed;
-        top: 0;
-        right: 0;
-        z-index: 100;
-        max-height: 100%;
-        overflow: hidden auto;
-        -ms-scroll-chaining: none;
-            overscroll-behavior: contain;
-        }
-        .no-transformations{
-        -webkit-transform: none;
-            -ms-transform: none;
-                transform: none;
-        opacity: 1;
-    }
-    .notification-panel:empty{
-        display:none;
-    }
-    .notification{
-        display: -webkit-box;
-        display: -ms-flexbox;
-        display: flex;
-        opacity: 0;
-        padding: 1rem 1.5rem;
-        margin-bottom: 0.5rem;
-        -webkit-transform: translateY(-1rem);
-            -ms-transform: translateY(-1rem);
-                transform: translateY(-1rem);
-        position: relative;
-        border-radius: 0.3rem;
-        -webkit-box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.1),
-                    0.5rem 1rem 2rem rgba(0, 0, 0, 0.1);
-                box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.1),
-                    0.5rem 1rem 2rem rgba(0, 0, 0, 0.1);
-        background: rgba(var(--foreground-color), 1);
-        -webkit-transition: height 0.3s, opacity 0.3s, -webkit-transform 0.3s;
-        transition: height 0.3s, opacity 0.3s, -webkit-transform 0.3s;
-        -o-transition: height 0.3s, transform 0.3s, opacity 0.3s;
-        transition: height 0.3s, transform 0.3s, opacity 0.3s;
-        transition: height 0.3s, transform 0.3s, opacity 0.3s, -webkit-transform 0.3s;
-        overflow: hidden;
-        overflow-wrap: break-word;
-        word-wrap: break-word;
-        -ms-word-break: break-all;
-        word-break: break-all;
-        word-break: break-word;
-        -ms-hyphens: auto;
-        -webkit-hyphens: auto;
-        hyphens: auto;
-        max-width: 100%;
-        touch-action: none;
-    }
-    h4:first-letter,
-    p:first-letter{
-        text-transform: uppercase;
-    }
-    h4{
-        font-weight: 400;
-    }
-    p{
-        line-height: 1.6;
-        -webkit-box-flex: 1;
-            -ms-flex: 1;
-                flex: 1;
-        color: rgba(var(--text-color), 0.9);
-        overflow-wrap: break-word;
-        overflow-wrap: break-word;
-        word-wrap: break-word;
-        -ms-word-break: break-all;
-        word-break: break-all;
-        word-break: break-word;
-        -ms-hyphens: auto;
-        -webkit-hyphens: auto;
-        hyphens: auto;
-        max-width: 100%;
-    }
-    .notification:last-of-type{
-        margin-bottom: 0;
-    }
-    .icon {
-        fill: none;
-        height: 1.6rem;
-        width: 1.6rem;
-        stroke: rgba(var(--text-color), 0.7);
-        overflow: visible;
-        stroke-linecap: round;
-        border-radius: 1rem;
-        stroke-linejoin: round;
-        cursor: pointer;
-    }
-    .error-icon{
-        stroke: #E53935;
-    }
-    .success-icon{
-        stroke: #00C853;
-    }
-    .close{
-        margin-left: 1rem;
-        padding: 0.5rem;
-        stroke-width: 10;
-    }
-    .notification-icon{
-        height: 1.4rem;
-        width: 1.4rem;
-        margin: 0.3em 1rem 0 0;
-        stroke-width: 6;
-    }
-    @media screen and (min-width: 640px){
-        .notification-panel{
-            max-width: 28rem;
-            width: max-content;
-            -webkit-box-pack: end;
-                -ms-flex-pack: end;
-            justify-content: flex-end;
-        }
-        .notification{
-            -ms-grid-column-align: end;
-                justify-self: end;
-            width: auto;
-            margin-right: 1.5rem;
-            margin-bottom: 1rem;
-            border-bottom: none;
-            border: solid 1px rgba(var(--text-color), 0.2);
-            -webkit-transform: translateX(1rem);
-                -ms-transform: translateX(1rem);
-                    transform: translateX(1rem);
-        }
-    }
-    @media screen and (any-hover: none){
-        .close{
-            display: none
-        }
-    }
-</style>
-<div class="notification-panel"></div>
-`
-
-customElements.define('sm-notifications', class extends HTMLElement {
-    constructor() {
-        super()
-        this.shadow = this.attachShadow({
-            mode: 'open'
-        }).append(smNotifications.content.cloneNode(true))
-    }
-
-    handleTouchStart = (e) => {
-        this.notification = e.target.closest('.notification')
-        this.touchStartX = e.changedTouches[0].clientX
-        this.notification.style.transition = 'initial'
-        this.touchStartTime = e.timeStamp
-    }
-
-    handleTouchMove = (e) => {
-        e.preventDefault()
-        if (this.touchStartX < e.changedTouches[0].clientX) {
-            this.offset = e.changedTouches[0].clientX - this.touchStartX;
-            this.touchEndAnimataion = requestAnimationFrame(this.movePopup)
-        } else {
-            this.offset = -(this.touchStartX - e.changedTouches[0].clientX);
-            this.touchEndAnimataion = requestAnimationFrame(this.movePopup)
-        }
-    }
-
-    handleTouchEnd = (e) => {
-        this.notification.style.transition = 'transform 0.3s, opacity 0.3s'
-        this.touchEndTime = e.timeStamp
-        cancelAnimationFrame(this.touchEndAnimataion)
-        this.touchEndX = e.changedTouches[0].clientX
-        if (this.touchEndTime - this.touchStartTime > 200) {
-            if (this.touchEndX - this.touchStartX > this.threshold) {
-                this.removeNotification(this.notification)
-            } else if (this.touchStartX - this.touchEndX > this.threshold) {
-                this.removeNotification(this.notification, true)
-            } else {
-                this.resetPosition()
-            }
-        } else {
-            if (this.touchEndX > this.touchStartX) {
-                this.removeNotification(this.notification)
-            } else {
-                this.removeNotification(this.notification, true)
-            }
-        }
-    }
-
-    movePopup = () => {
-        this.notification.style.transform = `translateX(${this.offset}px)`
-    }
-
-    resetPosition = () => {
-        this.notification.style.transform = `translateX(0)`
-    }
-
-    push = (messageBody, type, pinned) => {
-        let notification = document.createElement('div'),
-            composition = ``
-        notification.classList.add('notification')
-        if (pinned)
-            notification.classList.add('pinned')
-        if (type === 'error') {
-            composition += `
-    <svg class="notification-icon icon error-icon" viewBox="0 0 64 64">
-            <path d="M32,4.73a3.17,3.17,0,0,1,2.76,1.59l13.9,24.09L62.57,54.49a3.19,3.19,0,0,1-2.76,4.78H4.19a3.19,3.19,0,0,1-2.76-4.78L15.34,30.41,29.24,6.32A3.17,3.17,0,0,1,32,4.73m0-1a4.14,4.14,0,0,0-3.62,2.09L14.47,29.91.57,54a4.19,4.19,0,0,0,3.62,6.28H59.81A4.19,4.19,0,0,0,63.43,54L49.53,29.91,35.62,5.82A4.14,4.14,0,0,0,32,3.73Z"/>
-            <line x1="32" y1="24" x2="32" y2="36"/>
-            <line x1="32" y1="46" x2="32" y2="48"/>
-    </svg>`
-        } else if (type === 'success') {
-            composition += `
-        <svg class="notification-icon icon success-icon" viewBox="0 0 64 64">
-            <polyline points="0.35 31.82 21.45 52.98 63.65 10.66"/>
-        </svg>`
-        }
-        composition += `
-                    <p>${messageBody}</p>
-                    <svg class="icon close" viewBox="0 0 64 64">
-                        <title>Close</title>
-                        <line x1="64" y1="0" x2="0" y2="64"/>
-                        <line x1="64" y1="64" x2="0" y2="0"/>
-                    </svg>`
-        notification.innerHTML = composition
-        this.notificationPanel.prepend(notification)
-        if (window.innerWidth > 640) {
-            notification.animate([{
-                    transform: `translateX(1rem)`,
-                    opacity: '0'
-                },
-                {
-                    transform: 'translateX(0)',
-                    opacity: '1'
-                }
-            ], this.animationOptions).onfinish = () => {
-                notification.setAttribute('style', `transform: none;`);
-            }
-        } else {
-            notification.setAttribute('style', `transform: translateY(0); opacity: 1`)
-        }
-        notification.addEventListener('touchstart', this.handleTouchStart)
-        notification.addEventListener('touchmove', this.handleTouchMove)
-        notification.addEventListener('touchend', this.handleTouchEnd)
-    }
-
-    removeNotification = (notification, toLeft) => {
-        if (!this.offset)
-            this.offset = 0;
-
-        if (toLeft)
-            notification.animate([{
-                    transform: `translateX(${this.offset}px)`,
-                    opacity: '1'
-                },
-                {
-                    transform: `translateX(-100%)`,
-                    opacity: '0'
-                }
-            ], this.animationOptions).onfinish = () => {
-                notification.remove()
-            }
-        else {
-            notification.animate([{
-                    transform: `translateX(${this.offset}px)`,
-                    opacity: '1'
-                },
-                {
-                    transform: `translateX(100%)`,
-                    opacity: '0'
-                }
-            ], this.animationOptions).onfinish = () => {
-                notification.remove()
-            }
-        }
-    }
-
-    clearAll = () => {
-        Array.from(this.notificationPanel.children).forEach(child => {
-            this.removeNotification(child)
-        })
-    }
-
-    connectedCallback() {
-        this.notificationPanel = this.shadowRoot.querySelector('.notification-panel')
-        this.animationOptions = {
-            duration: 300,
-            fill: "forwards",
-            easing: "ease"
-        }
-        this.fontSize = Number(window.getComputedStyle(document.body).getPropertyValue('font-size').match(/\d+/)[0])
-        this.notification
-        this.offset
-        this.touchStartX = 0
-        this.touchEndX = 0
-        this.touchStartTime = 0
-        this.touchEndTime = 0
-        this.threshold = this.notificationPanel.getBoundingClientRect().width * 0.3
-        this.touchEndAnimataion;
-
-        this.notificationPanel.addEventListener('click', e => {
-            if (e.target.closest('.close'))(
-                this.removeNotification(e.target.closest('.notification'))
-            )
-        })
-
-        const observer = new MutationObserver(mutationList => {
-            mutationList.forEach(mutation => {
-                if (mutation.type === 'childList') {
-                    if (mutation.addedNodes.length) {
-                        if (!mutation.addedNodes[0].classList.contains('pinned'))
-                            setTimeout(() => {
-                                this.removeNotification(mutation.addedNodes[0])
-                            }, 5000);
-                        if (window.innerWidth > 640)
-                            this.notificationPanel.style.padding = '1.5rem 0 3rem 1.5rem';
-                        else
-                            this.notificationPanel.style.padding = '1rem 1rem 2rem 1rem';
-                    } else if (mutation.removedNodes.length && !this.notificationPanel.children.length) {
-                        this.notificationPanel.style.padding = 0;
-                    }
-                }
-            })
-        })
-        observer.observe(this.notificationPanel, {
-            attributes: true,
-            childList: true,
-            subtree: true
-        })
-    }
-})
-
-
-
-// sm-menu
-const smMenu = document.createElement('template')
-smMenu.innerHTML = `
-<style>     
-*{
-    padding: 0;
-    margin: 0;
-    -webkit-box-sizing: border-box;
-            box-sizing: border-box;
-} 
-.menu{
-    display: -ms-grid;
-    display: grid;
-    place-items: center;
-    position: relative;
-    height: 2rem;
-    width: 2rem;
-    outline: none;
-}
-.icon {
-    position: absolute;
-    fill: rgba(var(--text-color), 0.7);
-    height: 2.4rem;
-    width: 2.4rem;
-    padding: 0.7rem;
-    stroke: rgba(var(--text-color), 0.7);
-    stroke-width: 6;
-    overflow: visible;
-    stroke-linecap: round;
-    stroke-linejoin: round;
-    border-radius: 2rem;
-    -webkit-transition: background 0.3s;
-    -o-transition: background 0.3s;
-    transition: background 0.3s;
-}      
-:host{
-    display: -webkit-inline-box;
-    display: -ms-inline-flexbox;
-    display: inline-flex;
-}
-.hide{
-    opacity: 0;
-    pointer-events: none;
-    user-select: none;
-}
-.select{
-    position: relative;
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    -webkit-box-orient: vertical;
-    -webkit-box-direction: normal;
-        -ms-flex-direction: column;
-            flex-direction: column;
-    cursor: pointer;
-    width: 100%;
-    -webkit-tap-highlight-color: transparent;
-}
-.menu:focus .icon,
-.focused{
-    background: rgba(var(--text-color), 0.1); 
-}
-:host([align-options="left"]) .options{
-    left: 0;
-}
-:host([align-options="right"]) .options{
-    right: 0;
-}
-.options{
-    padding: 0.5rem 0;
-    overflow: hidden auto;
-    position: absolute;
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    min-width: -webkit-max-content;
-    min-width: -moz-max-content;
-    min-width: max-content;
-    -webkit-transform: translateY(-1rem);
-        -ms-transform: translateY(-1rem);
-            transform: translateY(-1rem);
-    -webkit-box-orient: vertical;
-    -webkit-box-direction: normal;
-        -ms-flex-direction: column;
-            flex-direction: column;
-    background: rgba(var(--foreground-color), 1);
-    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
-    transition: opacity 0.3s, -webkit-transform 0.3s;
-    -o-transition: opacity 0.3s, transform 0.3s;
-    transition: opacity 0.3s, transform 0.3s;
-    transition: opacity 0.3s, transform 0.3s, -webkit-transform 0.3s;
-    border: solid 1px rgba(var(--text-color), 0.2);
-    border-radius: 0.3rem;
-    z-index: 2;
-    -webkit-box-shadow: 0.4rem 0.8rem 1.2rem #00000030;
-            box-shadow: 0.4rem 0.8rem 1.2rem #00000030;
-    top: 100%;
-    bottom: auto;
-}
-.moveUp{
-    top: auto;
-    bottom: 100%;
-    -webkit-transform: translateY(3rem);
-        -ms-transform: translateY(3rem);
-            transform: translateY(3rem);
-}
-.moveLeft{
-    left: auto;
-    right: 0;
-}
-.no-transformations{
-    -webkit-transform: none !important;
-        -ms-transform: none !important;
-            transform: none !important;
-}
-@media (hover: hover){
-    .menu:hover .icon{
-        background: rgba(var(--text-color), 0.1); 
-    }
-}
-</style>
-<div class="select">
-    <div class="menu" tabindex="0">
-        <svg class="icon" viewBox="0 0 64 64">
-            <title>options</title>
-            <circle cx="32" cy="6" r="5.5"/>
-            <circle cx="32" cy="58" r="5.5"/>
-            <circle cx="32" cy="31.89" r="5.5"/>
-        </svg>
-    </div>
-    <div class="options hide">
-        <slot></slot> 
-    </div>
-</div>`;
-customElements.define('sm-menu', class extends HTMLElement {
-    constructor() {
-        super()
-        this.attachShadow({
-            mode: 'open'
-        }).append(smMenu.content.cloneNode(true))
-    }
-    static get observedAttributes() {
-        return ['value']
-    }
-    get value() {
-        return this.getAttribute('value')
-    }
-    set value(val) {
-        this.setAttribute('value', val)
-    }
-    expand = () => {
-        if (!this.open) {
-            this.optionList.classList.remove('hide')
-            this.optionList.classList.add('no-transformations')
-            this.open = true
-            this.icon.classList.add('focused')
-            this.availableOptions.forEach(option => {
-                option.setAttribute('tabindex', '0')
-            })
-        }
-    }
-    collapse() {
-        if (this.open) {
-            this.open = false
-            this.icon.classList.remove('focused')
-            this.optionList.classList.add('hide')
-            this.optionList.classList.remove('no-transformations')
-            this.availableOptions.forEach(option => {
-                option.removeAttribute('tabindex')
-            })
-        }
-    }
-    connectedCallback() {
-        this.availableOptions
-        this.containerDimensions
-        this.optionList = this.shadowRoot.querySelector('.options')
-        let slot = this.shadowRoot.querySelector('.options slot'),
-            menu = this.shadowRoot.querySelector('.menu')
-        this.icon = this.shadowRoot.querySelector('.icon')
-        this.open = false;
-        menu.addEventListener('click', e => {
-            if (!this.open) {
-                this.expand()
-            } else {
-                this.collapse()
-            }
-        })
-        menu.addEventListener('keydown', e => {
-            if (e.code === 'ArrowDown' || e.code === 'ArrowRight') {
-                e.preventDefault()
-                this.availableOptions[0].focus()
-            }
-            if (e.code === 'Enter' || e.code === 'Space') {
-                e.preventDefault()
-                if (!this.open) {
-                    this.expand()
-                } else {
-                    this.collapse()
-                }
-            }
-        })
-        this.optionList.addEventListener('keydown', e => {
-            if (e.code === 'ArrowUp' || e.code === 'ArrowRight') {
-                e.preventDefault()
-                if (document.activeElement.previousElementSibling) {
-                    document.activeElement.previousElementSibling.focus()
-                }
-            }
-            if (e.code === 'ArrowDown' || e.code === 'ArrowLeft') {
-                e.preventDefault()
-                if (document.activeElement.nextElementSibling)
-                    document.activeElement.nextElementSibling.focus()
-            }
-        })
-        this.optionList.addEventListener('click', e => {
-            this.collapse()
-        })
-        slot.addEventListener('slotchange', e => {
-            this.availableOptions = slot.assignedElements()
-            this.containerDimensions = this.optionList.getBoundingClientRect()
-        });
-        window.addEventListener('mousedown', e => {
-            if (!this.contains(e.target) && e.button !== 2) {
-                this.collapse()
-            }
-        })
-    }
-})
-
-// option
-const smMenuOption = document.createElement('template')
-smMenuOption.innerHTML = `
-<style>     
-*{
-    padding: 0;
-    margin: 0;
-    -webkit-box-sizing: border-box;
-            box-sizing: border-box;
-}     
-:host{
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-}
-.option{
-    opacity: 0.9;
-    min-width: 100%;
-    padding: 0.6rem 2rem;
-    cursor: pointer;
-    overflow-wrap: break-word;
-    white-space: nowrap;
-    outline: none;
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    user-select: none;
-    -webkit-box-align: center;
-        -ms-flex-align: center;
-            align-items: center;
-}
-:host(:focus){
-    outline: none;
-    background: rgba(var(--text-color), 0.1);
-}
-@media (hover: hover){
-    .option:hover{
-        opacity: 1;
-        background: rgba(var(--text-color), 0.1);
-    }
-}
-</style>
-<div class="option">
-    <slot></slot> 
-</div>`;
-customElements.define('sm-menu-option', class extends HTMLElement {
-    constructor() {
-        super()
-        this.attachShadow({
-            mode: 'open'
-        }).append(smMenuOption.content.cloneNode(true))
-    }
-
-    connectedCallback() {
-        this.addEventListener('keyup', e => {
-            if (e.code === 'Enter' || e.code === 'Space') {
-                e.preventDefault()
-                this.click()
-            }
-        })
-    }
-})
\ No newline at end of file
+const smButton = document.createElement("template"); smButton.innerHTML = "\n<style>     \n*{\n    padding: 0;\n    margin: 0;\n    -webkit-box-sizing: border-box;\n            box-sizing: border-box;\n}       \n:host{\n    display: inline-flex;\n    width: auto;\n    --padding: 0.6rem 1.2rem;\n    --border-radius: 0.3rem;\n    --background: rgba(var(--text-color, (17,17,17)), 0.1);\n}\n:host([variant='primary']) .button{\n    background: var(--accent-color,teal);\n    color: rgba(var(--background-color, (255,255,255)), 1);\n}\n:host([variant='outlined']) .button{\n            box-shadow: 0 0 0 1px rgba(var(--text-color, (17,17,17)), 0.2) inset;\n    background: transparent; \n    color: var(--accent-color,teal);\n}\n:host([variant='no-outline']) .button{\n    background: inherit; \n    color: var(--accent-color,teal);\n}\n:host([disabled]){\n    pointer-events: none;\n    cursor: not-allowed;\n}\n.button {\n    position: relative;\n    display: flex;\n    width: 100%;\n    padding: var(--padding);\n    cursor: pointer;\n            user-select: none;\n    border-radius: var(--border-radius); \n            justify-content: center;\n    transition: box-shadow 0.3s, background-color 0.3s;\n    font-family: inherit;\n    font-size: 0.9rem;\n    font-weight: 500;\n    background-color: var(--background); \n    -webkit-tap-highlight-color: transparent;\n    outline: none;\n    overflow: hidden;\n    border: none;\n    color: inherit;\n    align-items: center;\n}\n:host([disabled]) .button{\n    pointer-events: none;\n    cursor: not-allowed;\n    opacity: 0.6;\n    color: rgba(var(--text-color, (17,17,17)), 1);\n    background-color: rgba(var(--text-color, (17,17,17)), 0.3);\n}\n@media (hover: hover){\n    :host(:not([disabled])) .button:hover,\n    :host(:focus-within:not([disabled])) .button{\n        -webkit-box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.2rem 0.8rem rgba(0, 0, 0, 0.12);\n        box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.2rem 0.8rem rgba(0, 0, 0, 0.12);\n    }\n    :host([variant='outlined']:not([disabled])) .button:hover,\n    :host(:focus-within[variant='outlined']:not([disabled])) .button:hover{\n        -webkit-box-shadow: 0 0 0 1px rgba(var(--text-color, (17,17,17)), 0.2) inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.4rem 0.8rem rgba(0, 0, 0, 0.12);\n                box-shadow: 0 0 0 1px rgba(var(--text-color, (17,17,17)), 0.2) inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.4rem 0.8rem rgba(0, 0, 0, 0.12);\n    }\n}\n@media (hover: none){\n    :host(:not([disabled])) .button:active{\n        -webkit-box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.2rem 0.8rem rgba(0, 0, 0, 0.2);\n                box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.2rem 0.8rem rgba(0, 0, 0, 0.2);\n    }\n    :host([variant='outlined']) .button:active{\n        -webkit-box-shadow: 0 0 0 1px rgba(var(--text-color, (17,17,17)), 0.2) inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.4rem 0.8rem rgba(0, 0, 0, 0.2);\n                box-shadow: 0 0 0 1px rgba(var(--text-color, (17,17,17)), 0.2) inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.4rem 0.8rem rgba(0, 0, 0, 0.2);\n    }\n}\n</style>\n<div part=\"button\" class=\"button\">\n    <slot></slot>   \n</div>", customElements.define("sm-button", class extends HTMLElement { constructor() { super(), this.attachShadow({ mode: "open" }).append(smButton.content.cloneNode(!0)) } static get observedAttributes() { return ["disabled"] } get disabled() { return this.hasAttribute("disabled") } set disabled(t) { t ? this.setAttribute("disabled", "") : this.removeAttribute("disabled") } focusIn() { this.focus() } handleKeyDown(t) { this.hasAttribute("disabled") || "Enter" !== t.key && " " !== t.key || (t.preventDefault(), this.click()) } connectedCallback() { this.hasAttribute("disabled") || this.setAttribute("tabindex", "0"), this.setAttribute("role", "button"), this.addEventListener("keydown", this.handleKeyDown) } attributeChangedCallback(t) { "disabled" === t && (this.hasAttribute("disabled") ? this.removeAttribute("tabindex") : this.setAttribute("tabindex", "0"), this.setAttribute("aria-disabled", this.hasAttribute("disabled"))) } });
+const smNotifications = document.createElement("template"); smNotifications.innerHTML = '\n        <style>\n            *{\n                padding: 0;\n                margin: 0;\n                -webkit-box-sizing: border-box;\n                        box-sizing: border-box;\n            } \n            :host{\n                display: flex;\n                --icon-height: 1.5rem;\n                --icon-width: 1.5rem;\n            }\n            .hide{\n                opacity: 0 !important;\n                pointer-events: none !important;\n            }\n            .notification-panel{\n                display: grid;\n                width: 100%;\n                gap: 0.5rem;\n                position: fixed;\n                left: 0;\n                top: 0;\n                z-index: 100;\n                max-height: 100%;\n                padding: 1rem;\n                overflow: hidden auto;\n                -ms-scroll-chaining: none;\n                    overscroll-behavior: contain;\n                touch-action: none;\n            }\n            .notification-panel:empty{\n                display:none;\n            }\n            .notification{\n                display: -webkit-box;\n                display: -ms-flexbox;\n                display: flex;\n                position: relative;\n                border-radius: 0.3rem;\n                background: rgba(var(--foreground-color, (255,255,255)), 1);\n                overflow: hidden;\n                overflow-wrap: break-word;\n                word-wrap: break-word;\n                -ms-word-break: break-all;\n                word-break: break-all;\n                word-break: break-word;\n                -ms-hyphens: auto;\n                -webkit-hyphens: auto;\n                hyphens: auto;\n                max-width: 100%;\n                padding: 1rem;\n                align-items: center;\n                box-shadow: 0 0.5rem 1rem 0 rgba(0,0,0,0.14);\n                touch-action: none;\n            }\n            .icon-container:not(:empty){\n                margin-right: 0.5rem;\n                height: var(--icon-height);\n                width: var(--icon-width);\n            }\n            h4:first-letter,\n            p:first-letter{\n                text-transform: uppercase;\n            }\n            h4{\n                font-weight: 400;\n            }\n            p{\n                line-height: 1.6;\n                -webkit-box-flex: 1;\n                    -ms-flex: 1;\n                        flex: 1;\n                color: rgba(var(--text-color, (17,17,17)), 0.9);\n                overflow-wrap: break-word;\n                overflow-wrap: break-word;\n                word-wrap: break-word;\n                -ms-word-break: break-all;\n                word-break: break-all;\n                word-break: break-word;\n                -ms-hyphens: auto;\n                -webkit-hyphens: auto;\n                hyphens: auto;\n                max-width: 100%;\n            }\n            .notification:last-of-type{\n                margin-bottom: 0;\n            }\n            .icon {\n                height: 100%;\n                width: 100%;\n                fill: rgba(var(--text-color, (17,17,17)), 0.7);\n            }\n            .icon--success {\n                fill: var(--green);\n              }\n              .icon--failure,\n              .icon--error {\n                fill: var(--danger-color);\n              }\n            .close{\n                height: 2rem;\n                width: 2rem;\n                border: none;\n                cursor: pointer;\n                margin-left: 1rem;\n                border-radius: 50%;\n                padding: 0.3rem;\n                transition: background-color 0.3s, transform 0.3s;\n                background-color: transparent;\n                flex-shrink: 0;\n            }\n            .close:active{\n                transform: scale(0.9);\n            }\n            .action{\n                display: flex;\n                align-items: center;\n                justify-content: center;\n                padding: 0.5rem 0.8rem;\n                border-radius: 0.2rem;\n                border: none;\n                background-color: rgba(var(--text-color, (17,17,17)), 0.03);\n                font-family: inherit;\n                font-size: inherit;\n                color: var(--accent-color, teal);\n                font-weight: 500;\n                cursor: pointer;\n            }\n            @media screen and (max-width: 640px){\n                .notification-panel:not(:empty){\n                    padding-bottom: 3rem;\n                }\n            }\n            @media screen and (min-width: 640px){\n                .notification-panel{\n                    max-width: 28rem;\n                    width: max-content;\n                    top: auto;\n                    bottom: 0;\n                }\n                .notification{\n                    width: auto;\n                    border: solid 1px rgba(var(--text-color, (17,17,17)), 0.2);\n                }\n            }\n            @media (any-hover: hover){\n                ::-webkit-scrollbar{\n                    width: 0.5rem;\n                }\n                \n                ::-webkit-scrollbar-thumb{\n                    background: rgba(var(--text-color, (17,17,17)), 0.3);\n                    border-radius: 1rem;\n                    &:hover{\n                        background: rgba(var(--text-color, (17,17,17)), 0.5);\n                    }\n                }\n                .close:hover{\n                    background-color: rgba(var(--text-color, (17,17,17)), 0.1);\n                }\n            }\n        </style>\n        <div class="notification-panel"></div>\n        ', customElements.define("sm-notifications", class extends HTMLElement { constructor() { super(), this.shadow = this.attachShadow({ mode: "open" }).append(smNotifications.content.cloneNode(!0)), this.notificationPanel = this.shadowRoot.querySelector(".notification-panel"), this.animationOptions = { duration: 300, fill: "forwards", easing: "cubic-bezier(0.175, 0.885, 0.32, 1.275)" }, this.push = this.push.bind(this), this.createNotification = this.createNotification.bind(this), this.removeNotification = this.removeNotification.bind(this), this.clearAll = this.clearAll.bind(this), this.remove = this.remove.bind(this), this.handlePointerMove = this.handlePointerMove.bind(this), this.startX = 0, this.currentX = 0, this.endX = 0, this.swipeDistance = 0, this.swipeDirection = "", this.swipeThreshold = 0, this.startTime = 0, this.swipeTime = 0, this.swipeTimeThreshold = 200, this.currentTarget = null, this.mediaQuery = window.matchMedia("(min-width: 640px)"), this.handleOrientationChange = this.handleOrientationChange.bind(this), this.isLandscape = !1 } randString(n) { let t = ""; const i = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz"; for (let e = 0; e < n; e++)t += i.charAt(Math.floor(Math.random() * i.length)); return t } createNotification(n, t = {}) { const { pinned: i = !1, icon: e = "", action: o } = t, r = document.createElement("div"); r.id = this.randString(8), r.classList.add("notification"); let a = ""; return a += `\n                    <div class="icon-container">${e}</div>\n                    <output>${n}</output>\n                    `, o && (a += `\n                            <button class="action">${o.label}</button>\n                        `), i && (r.classList.add("pinned"), a += '\n                        <button class="close">\n                            <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z"/></svg>\n                        </button>\n                    '), r.innerHTML = a, r } push(n, t = {}) { const i = this.createNotification(n, t); return this.isLandscape ? this.notificationPanel.append(i) : this.notificationPanel.prepend(i), this.notificationPanel.animate([{ transform: `translateY(${this.isLandscape ? "" : "-"}${i.clientHeight}px)` }, { transform: "none" }], this.animationOptions), i.animate([{ transform: "translateY(-1rem)", opacity: "0" }, { transform: "none", opacity: "1" }], this.animationOptions).onfinish = (n => { n.target.commitStyles(), n.target.cancel() }), i.querySelector(".action") && i.querySelector(".action").addEventListener("click", t.action.callback), i.id } removeNotification(n, t = "left") { if (!n) return; const i = "left" === t ? "-" : "+"; n.animate([{ transform: this.currentX ? `translateX(${this.currentX}px)` : "none", opacity: "1" }, { transform: `translateX(calc(${i}${Math.abs(this.currentX)}px ${i} 1rem))`, opacity: "0" }], this.animationOptions).onfinish = (() => { n.remove() }) } remove(n) { const t = this.notificationPanel.querySelector(`#${n}`); t && this.removeNotification(t) } clearAll() { Array.from(this.notificationPanel.children).forEach(n => { this.removeNotification(n) }) } handlePointerMove(n) { this.currentX = n.clientX - this.startX, this.currentTarget.style.transform = `translateX(${this.currentX}px)` } handleOrientationChange(n) { this.isLandscape = n.matches, n.matches } connectedCallback() { this.handleOrientationChange(this.mediaQuery), this.mediaQuery.addEventListener("change", this.handleOrientationChange), this.notificationPanel.addEventListener("pointerdown", n => { n.target.closest(".close") ? this.removeNotification(n.target.closest(".notification")) : n.target.closest(".notification") && (this.swipeThreshold = n.target.closest(".notification").getBoundingClientRect().width / 2, this.currentTarget = n.target.closest(".notification"), this.currentTarget.setPointerCapture(n.pointerId), this.startTime = Date.now(), this.startX = n.clientX, this.startY = n.clientY, this.notificationPanel.addEventListener("pointermove", this.handlePointerMove)) }), this.notificationPanel.addEventListener("pointerup", n => { this.endX = n.clientX, this.endY = n.clientY, this.swipeDistance = Math.abs(this.endX - this.startX), this.swipeTime = Date.now() - this.startTime, this.endX > this.startX ? this.swipeDirection = "right" : this.swipeDirection = "left", this.swipeTime < this.swipeTimeThreshold ? this.swipeDistance > 50 && this.removeNotification(this.currentTarget, this.swipeDirection) : this.swipeDistance > this.swipeThreshold ? this.removeNotification(this.currentTarget, this.swipeDirection) : this.currentTarget.animate([{ transform: `translateX(${this.currentX}px)` }, { transform: "none" }], this.animationOptions).onfinish = (n => { n.target.commitStyles(), n.target.cancel() }), this.notificationPanel.removeEventListener("pointermove", this.handlePointerMove), this.notificationPanel.releasePointerCapture(n.pointerId), this.currentX = 0 }); const n = new MutationObserver(n => { n.forEach(n => { "childList" === n.type && n.addedNodes.length && !n.addedNodes[0].classList.contains("pinned") && setTimeout(() => { this.removeNotification(n.addedNodes[0]) }, 5e3) }) }); n.observe(this.notificationPanel, { childList: !0 }) } disconnectedCallback() { mediaQueryList.removeEventListener("change", handleOrientationChange) } });
+const themeToggle = document.createElement("template"); themeToggle.innerHTML = '\n    <style>\n    *{\n        padding: 0;\n        margin: 0;\n        box-sizing: border-box;\n    }\n    :host{\n        cursor: pointer;\n        --height: 2.5rem;\n        --width: 2.5rem;\n    }\n    .theme-toggle {\n        display: flex;\n        position: relative;\n        width: 1.2rem;\n        height: 1.2rem;\n        cursor: pointer;\n        -webkit-tap-highlight-color: transparent;\n    }\n    .theme-toggle::after{\n        content: \'\';\n        position: absolute;\n        height: var(--height);\n        width: var(--width);\n        top: 50%;\n        left: 50%;\n        opacity: 0;\n        border-radius: 50%;\n        pointer-events: none;\n        transition: transform 0.3s, opacity 0.3s;\n        transform: translate(-50%, -50%) scale(1.2);\n        background-color: rgba(var(--text-color,inherit), 0.12);\n    }\n    :host(:focus-within) .theme-toggle{\n        outline: none;\n    }\n    :host(:focus-within) .theme-toggle::after{\n        opacity: 1;\n        transform: translate(-50%, -50%) scale(1);\n    }\n    .icon {\n        position: absolute;\n        height: 100%;\n        width: 100%;\n        fill: rgba(var(--text-color,inherit), 1);\n        transition: transform 0.3s, opacity 0.1s;\n    }\n    \n    .theme-switcher__checkbox {\n        display: none;\n    }\n    :host([checked]) .moon-icon {\n        transform: translateY(50%);\n        opacity: 0;\n    }\n    :host(:not([checked])) .sun-icon {\n        transform: translateY(50%);\n        opacity: 0;\n    }\n    </style>\n    <label class="theme-toggle" title="Change theme" tabindex="0">\n        <slot name="light-mode-icon">\n        <svg xmlns="http://www.w3.org/2000/svg" class="icon moon-icon" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><rect fill="none" height="24" width="24"/><path d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"/></svg>\n        </slot>\n        <slot name="dark-mode-icon">\n        <svg xmlns="http://www.w3.org/2000/svg" class="icon sun-icon" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><rect fill="none" height="24" width="24"/><path d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"/></svg>\n        </slot>\n    </label>\n'; class ThemeToggle extends HTMLElement { constructor() { super(), this.attachShadow({ mode: "open" }).append(themeToggle.content.cloneNode(!0)), this.isChecked = !1, this.hasTheme = "light", this.toggleState = this.toggleState.bind(this), this.fireEvent = this.fireEvent.bind(this), this.handleThemeChange = this.handleThemeChange.bind(this) } static get observedAttributes() { return ["checked"] } daylight() { this.hasTheme = "light", document.body.dataset.theme = "light", this.setAttribute("aria-checked", "false") } nightlight() { this.hasTheme = "dark", document.body.dataset.theme = "dark", this.setAttribute("aria-checked", "true") } toggleState() { this.toggleAttribute("checked"), this.fireEvent() } handleKeyDown(e) { " " === e.key && this.toggleState() } handleThemeChange(e) { e.detail.theme !== this.hasTheme && ("dark" === e.detail.theme ? this.setAttribute("checked", "") : this.removeAttribute("checked")) } fireEvent() { this.dispatchEvent(new CustomEvent("themechange", { bubbles: !0, composed: !0, detail: { theme: this.hasTheme } })) } connectedCallback() { this.setAttribute("role", "switch"), this.setAttribute("aria-label", "theme toggle"), "dark" === localStorage.getItem(`${window.location.hostname}-theme`) ? (this.nightlight(), this.setAttribute("checked", "")) : "light" === localStorage.getItem(`${window.location.hostname}-theme`) ? (this.daylight(), this.removeAttribute("checked")) : window.matchMedia("(prefers-color-scheme: dark)").matches ? (this.nightlight(), this.setAttribute("checked", "")) : (this.daylight(), this.removeAttribute("checked")), this.addEventListener("click", this.toggleState), this.addEventListener("keydown", this.handleKeyDown), document.addEventListener("themechange", this.handleThemeChange) } disconnectedCallback() { this.removeEventListener("click", this.toggleState), this.removeEventListener("keydown", this.handleKeyDown), document.removeEventListener("themechange", this.handleThemeChange) } attributeChangedCallback(e, t, n) { "checked" === e && (this.hasAttribute("checked") ? (this.nightlight(), localStorage.setItem(`${window.location.hostname}-theme`, "dark")) : (this.daylight(), localStorage.setItem(`${window.location.hostname}-theme`, "light"))) } } window.customElements.define("theme-toggle", ThemeToggle);
\ No newline at end of file
diff --git a/assets/js/index.js b/assets/js/index.js
index 64a031d..92e3b7a 100644
--- a/assets/js/index.js
+++ b/assets/js/index.js
@@ -1,5 +1,18 @@
-const domRefs = {};
 
+"use strict";
+// Global variables
+const { html, render: renderElem } = uhtml;
+//Checks for internet connection status
+if (!navigator.onLine)
+  floGlobals.connectionErrorNotification = notify('There seems to be a problem connecting to the internet, Please check you internet connection.', 'error')
+window.addEventListener('offline', () => {
+  floGlobals.connectionErrorNotification = notify('There seems to be a problem connecting to the internet, Please check you internet connection.', 'error')
+})
+window.addEventListener('online', () => {
+  getRef('notification_drawer').remove(floGlobals.connectionErrorNotification)
+  notify('We are back online.', 'success')
+})
+const domRefs = {};
 function getRef(elementId) {
   if (!domRefs.hasOwnProperty(elementId)) {
     domRefs[elementId] = {
@@ -20,70 +33,13 @@ function getRef(elementId) {
 }
 
 function create(tagName, obj) {
-  const {className, text} = obj
+  const { className, text } = obj
   const elem = document.createElement(tagName)
   elem.className = className
   elem.textContent = text
   return elem
 }
 
-//Checks for internet connection status
-if (!navigator.onLine)
-  notify(
-    "There seems to be a problem connecting to the internet, Please check you internet connection.",
-    "error",
-    "",
-    true
-  );
-window.addEventListener("offline", () => {
-  notify(
-    "There seems to be a problem connecting to the internet, Please check you internet connection.",
-    "error",
-    true,
-    true
-  );
-});
-window.addEventListener("online", () => {
-  getRef("notification_drawer").clearAll();
-  notify("We are back online.", "success");
-});
-
-if (getRef("theme_switcher")) {
-  if (localStorage.theme === "dark") {
-    nightlight();
-    getRef("theme_switcher").checked = true;
-  } else if (localStorage.theme === "light"){
-    daylight();
-    getRef("theme_switcher").checked = false;
-  }
-  else {
-    if (window.matchMedia(`(prefers-color-scheme: dark)`).matches) {
-      nightlight();
-      getRef("theme_switcher").checked = true;
-    } else {
-      daylight();
-      getRef("theme_switcher").checked = false;
-    }
-  }
-
-  function daylight() {
-    document.body.setAttribute("data-theme", "light");
-  }
-
-  function nightlight() {
-    document.body.setAttribute("data-theme", "dark");
-  }
-  getRef("theme_switcher").addEventListener("change", function (e) {
-    if (this.checked) {
-      nightlight();
-      localStorage.setItem("theme", "dark");
-    } else {
-      daylight();
-      localStorage.setItem("theme", "light");
-    }
-  });
-}
-
 function setAttributes(el, attrs) {
   for (key in attrs) {
     el.setAttribute(key, attrs[key]);
@@ -121,14 +77,21 @@ function randomColor() {
 }
 
 //Function for displaying toast notifications. pass in error for mode param if you want to show an error.
-function notify(message, mode, pinned, sound) {
-  if (mode === "error") console.error(message);
-  else console.log(message);
-  getRef("notification_drawer").push(message, mode, pinned);
-  if (navigator.onLine && sound) {
-    getRef("notification_sound").currentTime = 0;
-    getRef("notification_sound").play();
+function notify(message, mode, options = {}) {
+  let icon
+  switch (mode) {
+    case 'success':
+      icon = `<svg class="icon icon--success" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M10 15.172l9.192-9.193 1.415 1.414L10 18l-6.364-6.364 1.414-1.414z"/></svg>`
+      break;
+    case 'error':
+      icon = `<svg class="icon icon--error" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm-1-7v2h2v-2h-2zm0-8v6h2V7h-2z"/></svg>`
+      options.pinned = true
+      break;
   }
+  if (mode === 'error') {
+    console.error(message)
+  }
+  return getRef("notification_drawer").push(message, { icon, ...options });
 }
 
 const currentYear = new Date().getFullYear();
@@ -249,27 +212,40 @@ const siteMap = [
     outlets: [
       {
         name: "Bitcoin Bonds",
-        url: "bitcoinbonds.html",
+        outletLinks: [
+          {
+            label: "Explore",
+            url: "bitcoinbonds.html",
+          }
+        ],
         brief: `Bondholders get a minimum guarantee of 13% interest per annum during the lock-in period or 50% of all Bitcoin price gains whichever is higher. It offers full capital protection if
         Bitcoin prices fall below acquisition price.`,
-        // isSold: true,
-        buyUrl: `purchase_room`,
         status: `We are servicing current customers only. A new Blockchain-based version of Bitcoin Bonds will be available soon.`
       },
       {
         name: `Bob's Fund`,
-        url: `bob'sfund.html`,
+        outletLinks: [
+          {
+            label: "Explore",
+            url: "bob'sfund.html",
+          }
+        ],
         brief: `Bobs Fund is a 20 year long term Bitcoin price linked product. Investors are entitled to 100% of Bitcoin price gains, but they must hold for 20 years.`,
-        // isSold: true,
-        buyUrl: `purchase_room`,
         status: `We are servicing current customers only. A new Blockchain-based version of Bob's Fund will be available soon.`
       },
       {
         name: "Initial Coin Offering",
-        url: "ico.html",
+        outletLinks: [
+          {
+            label: "Explore",
+            url: "ico.html",
+          },
+          {
+            label: "Buy",
+            url: "ico.html#purchase_room",
+          },
+        ],
         brief: `The Initial Coin Offering (ICO) of RanchiMall was launched in 2017. It was envisioned to sell 21 million tokens over 14 phases over 3 years.`,
-        isSold: true,
-        buyUrl: `purchase_room`
       },
     ],
   },
@@ -357,191 +333,190 @@ const siteMap = [
         }
       ],
     }, */
+  {
+    floor: 'Internship',
+    brief: ``,
+    outlets: [
+      {
+        name: "RanchiMall Internship Blockchain contract",
+        brief: `This outlet has the list of all active projects being executed through our internship program. Interns can apply or they can join active projects here.`,
+        outletLinks: [
+          {
+            label: "Explore",
+            url: "https://ranchimall.github.io/RIBC/",
+            outbound: true,
+          }
+        ],
+      },
+      {
+        name: `Certificates`,
+        brief: `This outlet has access to blockchain verification to all of RanchiMall issued Internship & Employment  certificates`,
+        outletLinks: [
+            {
+                label: "See Intern Payments",
+                url: "https://ranchimall.github.io/ribcpayments/",
+                outbound: true,
+            },
+            {
+                label: "Verify Certificate",
+                url: "verify.html",
+            },
+            {
+                label: "Check issued certificates",
+                url: "https://www.ranchimall.net/certify/",
+                outbound: true,
+          }
+        ],
+      }
+    ],
+  },
 ];
-// templates
-
-const bitBondRowTemplate = document.createElement('template')
-bitBondRowTemplate.innerHTML = `
-<div class="bit-bond-series__row grid">
-    <div class="grid">
-        <h5 class="label color-0-8 weight-500">Series</h5>
-        <h3 class="value original-value"></h3>
-    </div>
-    <div class="flex align-center space-between">
-        <div class="grid">
-            <h5 class="label color-0-8 weight-500">Invested</h5>
-            <h3 class="value">$100</h3>
-        </div>
-        <div class="grid justify-right text-align-right">
-            <h5 class="label color-0-8 weight-500">Current value</h5>
-            <h3 class="value current-value" style="color: var(--green)"></h3>
-            <div class="flex align-center">
-                <svg class="icon up-arrow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M13 7.828V20h-2V7.828l-5.364 5.364-1.414-1.414L12 4l7.778 7.778-1.414 1.414L13 7.828z"/></svg>
-                <span class="percent-gain"></span>
-                <span class="time-elapsed"></span>
-            </div>
-        </div>
-    </div>
-
-</div>
-`
-
-const bobsFundRowTemplate = document.createElement('template')
-bobsFundRowTemplate.innerHTML = `
-<div class="bob-fund__row grid">
-    <div class="grid">
-        <h5 class="label color-0-8 weight-500">FLO ID</h5>
-        <h3 class="person__name breakable"></h3>
-    </div>
-    <div class="flex">
-        <div class="grid">
-            <h5 class="label color-0-8 weight-500">Invested</h5>
-            <h3 class="value original-value"></h3>
-        </div>
-        <div class="grid justify-right text-align-right">
-            <h4 class="label color-0-8 weight-500">Current value</h4>
-            <h3 class="value current-value" style="color: var(--green)"></h3>
-            <div class="flex align-center">
-              <svg class="icon up-arrow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M13 7.828V20h-2V7.828l-5.364 5.364-1.414-1.414L12 4l7.778 7.778-1.414 1.414L13 7.828z"/></svg>
-              <span class="percent-gain"></span>
-              <span class="time-elapsed"></span>
-            </div>
-        </div>
-    </div>
-</div>
-`
-
-
-const floorListitemTemplate = document.createElement('template')
-floorListitemTemplate.innerHTML = `
-<li class="floor_list__item">
-  <button class="floor_list__header floor__button">
-      <h2 class="h2 floor-num">Floor</h2>
-      <h3 class="h3 accent-color"></h3>
-  </button>
-  <ul class="outlet-list grid"></ul>
-</li>
-`
-
-const outletListitemTemplate = document.createElement('template')
-outletListitemTemplate.innerHTML = `
-  <li class="outlet-list__item interact">
-    <a class="grid align-center flow-column gap-1 justify-start">
-      <div>
-        <h4 class="outlet-title"></h4>
-        <p class="outlet-brief"></p>
-      </div>
-      <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M16.172 11l-5.364-5.364 1.414-1.414L20 12l-7.778 7.778-1.414-1.414L16.172 13H4v-2z"/></svg>
-    </a>
-  </li>
-`
-
 
+function formatAmount(amount, currency = 'USD') {
+  return amount.toLocaleString(currency === 'USD'? 'en-US': 'en-IN', { style: 'currency', currency: currency });
+} 
 
 
 const render = {
-  bitBondRow(obj) {
-    const { series, currentValue, timeElapsed, percentGain } = obj;
-    const row = bitBondRowTemplate.content.cloneNode(true);
-    row.querySelector(".original-value").textContent = series.toLocaleString(`en-US`, { style: 'currency', currency: 'USD' });
-    row.querySelector(".current-value").textContent = currentValue.toLocaleString(`en-US`, { style: 'currency', currency: 'USD' });
-    row.querySelector(".time-elapsed").textContent = `In last ${timeElapsed} years`;
-    row.querySelector(".percent-gain").textContent = `${percentGain}%`;
-    return row;
-  },
-  bobFundRow(obj) {
-    const { investorName, invested, floId, currentValue, timeElapsed, gain } = obj;
-    const row = bobsFundRowTemplate.content.cloneNode(true);
-    row.querySelector(".person__name").textContent = floId;
-    row.querySelector(".original-value").textContent = `${invested.toLocaleString(`en-IN`, { style: 'currency', currency: 'INR' })}`;
-    row.querySelector(".current-value").textContent = `${currentValue.toLocaleString(`en-IN`, { style: 'currency', currency: 'INR' })}`;
-    row.querySelector(".percent-gain").textContent = `${gain}%`;
-    row.querySelector(".time-elapsed").textContent = `In last ${timeElapsed} years`;
-    return row;
-  },
-  icoInvestorRow(obj, options) {
-    const { extension, investorName, bio, contribution } = obj;
-    const { thumbnail } = options;
-    const row = getRef("ico_investor_row").content.cloneNode(true);
-    const card = row.querySelector(".person-card");
-    const folder = thumbnail ? "investors-thumbnail" : "investors";
-    const investorImage = row.querySelector(".person__image");
-    if (thumbnail) card.classList.add("person-card--small");
-    else card.classList.add("person-card--big");
-    investorImage.src = `assets/${folder}/${investorName}.${extension}`;
-    investorImage.setAttribute("alt", `${investorName} profile picture`);
-    row.querySelector(".person__name").textContent = investorName;
-    row.querySelector(".investor__bio").textContent = bio;
-    row.querySelector(".investor__contribution").textContent = contribution;
-    return row;
-  },
-  internCard(obj) {
-    const { extension, internName, level, floId, project } = obj;
-    const card = getRef("intern_card_template").content.cloneNode(true).firstElementChild;
-    const investorImage = card.querySelector(".person__image");
-    investorImage.src = `assets/interns/${internName}.${extension}`;
-    investorImage.setAttribute("alt", `${internName} profile picture`);
-    card.querySelector(".intern__level").classList.add(level.toLowerCase())
-    card.querySelector(".intern__level").textContent = level;
-    card.querySelector(".person__name").textContent = internName;
-    card.querySelector(".intern-flo-id").textContent = floId;
-    card.querySelector(".intern__project").textContent = project;
-    return card;
+    bitBondRow(obj) {
+        const { series, currentValue, timeElapsed, percentGain } = obj;
+        return html`
+            <div class="bit-bond-series__row grid">
+                <div class="grid">
+                    <h5 class="label color-0-8 weight-500">Series</h5>
+                    <h3 class="value original-value">${formatAmount(series)}</h3>
+                </div>
+                <div class="flex align-center space-between">
+                    <div class="grid">
+                        <h5 class="label color-0-8 weight-500">Invested</h5>
+                        <h3 class="value">$100</h3>
+                    </div>
+                    <div class="grid justify-right text-align-right">
+                        <h5 class="label color-0-8 weight-500">Current value</h5>
+                        <h3 class="value current-value" style="color: var(--green)">${formatAmount(currentValue)}</h3>
+                        <div class="flex align-center">
+                            <svg class="icon up-arrow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M13 7.828V20h-2V7.828l-5.364 5.364-1.414-1.414L12 4l7.778 7.778-1.414 1.414L13 7.828z"/></svg>
+                            <span class="percent-gain">${ `${percentGain}%`}</span>
+                            <span class="time-elapsed">${`In last ${timeElapsed} years`}</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        `;
+    },
+    bobFundRow(obj) {
+        const { invested, floId, currentValue, timeElapsed, gain } = obj;
+        return html`
+            <div class="bob-fund__row grid">
+                <div class="grid">
+                    <h5 class="label color-0-8 weight-500">FLO ID</h5>
+                    <h3 class="person__name breakable">${floId}</h3>
+                </div>
+                <div class="flex">
+                    <div class="grid">
+                        <h5 class="label color-0-8 weight-500">Invested</h5>
+                        <h3 class="value original-value">${formatAmount(invested, 'INR')}</h3>
+                    </div>
+                    <div class="grid justify-right text-align-right">
+                        <h4 class="label color-0-8 weight-500">Current value</h4>
+                        <h3 class="value current-value" style="color: var(--green)">${formatAmount(currentValue)}</h3>
+                        <div class="flex align-center">
+                            <svg class="icon up-arrow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M13 7.828V20h-2V7.828l-5.364 5.364-1.414-1.414L12 4l7.778 7.778-1.414 1.414L13 7.828z"/></svg>
+                            <span class="percent-gain">${`${gain}%`}</span>
+                            <span class="time-elapsed">${`In last ${timeElapsed} years`}</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        `;
+    },
+    icoInvestorRow(obj, options) {
+        const { extension, investorName, bio, contribution } = obj;
+        const { thumbnail } = options;
+        const folder = thumbnail ? "investors-thumbnail" : "investors";
+        return html`
+        <div class=${`person-card investor-card grid gap-1-5 ${thumbnail? 'person-card--small': 'person-card--big'}`} >
+            <img class="person__image" src=${`assets/${folder}/${investorName}.${extension}`} alt=${`${investorName} profile picture`} loading="lazy">
+            <div class="grid">
+                <h3 class="person__name value capitalize">${investorName}</h3>
+                <p class="investor__bio color-0-8">${bio}</p>
+            </div>
+            <div class="grid investor__contribution-container">
+                <p class="investor__contribution weight-700">${contribution}</p>
+            </div>
+        </div>
+    `;
   },
+//   internCard(obj) {
+//     const { extension, internName, level, floId, project } = obj;
+//     const card = getRef("intern_card_template").content.cloneNode(true).firstElementChild;
+//     const investorImage = card.querySelector(".person__image");
+//     investorImage.src = `assets/interns/${internName}.${extension}`;
+//     investorImage.setAttribute("alt", `${internName} profile picture`);
+//     card.querySelector(".intern__level").classList.add(level.toLowerCase())
+//     card.querySelector(".intern__level").textContent = level;
+//     card.querySelector(".person__name").textContent = internName;
+//     card.querySelector(".intern-flo-id").textContent = floId;
+//     card.querySelector(".intern__project").textContent = project;
+//     return card;
+//   },
   floorLabel(floorNumber, offsetTop) {
-    const floorLabel = getRef("floor_indicator_template").content.cloneNode(
-      true
-    ).firstElementChild;
-    floorLabel.setAttribute("style", `top: ${offsetTop}px`);
-    floorLabel.dataset.target = `floor_${floorNumber}`;
-    return floorLabel;
+    return html`
+        <div class="floor-label interact" style=${`top: ${offsetTop}px`} data-target=${`floor_${floorNumber}`}>
+            <span class="floor-circle"></span>
+        </div>
+    `;
   },
   outletListItem(outletObj) {
-    const { name, brief, url } = outletObj
-    const li = outletListitemTemplate.content.cloneNode(true).firstElementChild
-    li.querySelector('a').href = `${url}`
-    li.querySelector('.outlet-title').textContent = name
-    // li.querySelector('.outlet-brief').textContent = brief ? brief : ''
-    return li
+    const { name, brief, outletLinks } = outletObj
+    return html`
+      <li class="outlet-list__item interact">
+        <a href=${outletLinks[0].url} class="grid align-center flow-column gap-1 justify-start">
+          <div>
+            <h4 class="outlet-title">${name}</h4>
+            ${brief ? html`<p class="outlet-brief">${brief}</p>` : ''}
+          </div>
+          <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M16.172 11l-5.364-5.364 1.414-1.414L20 12l-7.778 7.778-1.414-1.414L16.172 13H4v-2z"/></svg>
+        </a>
+      </li>
+    `;
   },
-  floorListitem(floorObj, index) {
+  floorListItem(floorObj, index) {
     const { floor, outlets } = floorObj
-    const li = floorListitemTemplate.content.cloneNode(true).firstElementChild
-    li.firstElementChild.dataset.target = `floor_${index + 1}`;
-    li.querySelector('.h3').textContent = floor
-    li.querySelector('.floor-num').textContent = `floor ${index + 1}`
-
-    const h3 = document.createElement('h3')
-    h3.classList.add('h3', 'weight-900', 'floor-list__outlet')
-    h3.textContent = 'Outlets'
-
-    const frag = document.createDocumentFragment()
-    outlets.forEach(outlet => frag.append(render.outletListItem(outlet)))
-
-    li.querySelector('.outlet-list').append(h3, frag)
+    const li = html`
+    <li class="floor_list__item">
+      <button class="floor_list__header floor__button" data-target=${`floor_${index + 1}`}>
+          <h2 class="h2 floor-num">${`floor ${index + 1}`}</h2>
+          <h3 class="h3 accent-color">${floor}</h3>
+      </button>
+      <ul class="outlet-list grid">
+        <h3 class="h3 weight-900 floor-list__outlet">Outlets</h3>
+        ${outlets.map(outlet => render.outletListItem(outlet))}
+      </ul>
+    </li>
+    `;
     return li
   },
   outletSwitcherButton(outletObj, activeOutlet) {
-    const { name, url } = outletObj
+    const { name, outletLinks } = outletObj
     const button = document.createElement('a')
     button.classList.add('outlet_switcher__button')
-    if (activeOutlet === url) {
+    if (activeOutlet === outletLinks[0].url) {
       button.classList.add('outlet_switcher__button--active')
     }
-    button.href = url
+    button.href = outletLinks[0].url
     button.textContent = name
     return button;
   },
-  statusBanner(bannerMsg) {
-    const banner = document.createElement('section')
-    banner.classList.add('banner')
-    banner.innerHTML = `
-      <p class="banner__text">${bannerMsg}</p>
-      <button class="close-button" onclick="this.parentNode.remove()">
-          <svg class="icon icon-only close-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z"/></svg>
-      </button>
+  statusBanner(bannerMsg) {    
+      return html.node`
+        <section class="banner">
+            <p class="banner__text">${bannerMsg}</p>
+            <button class="close-button" onclick="this.parentNode.remove()">
+                <svg class="icon icon-only close-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z"/></svg>
+            </button>
+        </section>
     `
-    return banner
   }
 };
 
@@ -739,44 +714,23 @@ function hideOutletSwitcher() {
 
 let currentPage
 function renderSiteMap() {
-  const frag = document.createDocumentFragment()
-  siteMap.forEach((floor, index) => frag.append(render.floorListitem(floor, index)))
-  getRef('floor_list').append(frag)
+  getRef('floor_list').append(html.node`${siteMap.map((floor, index) =>render.floorListItem(floor, index))}`)
   const pathArray = location.pathname.split('/')
-  for (floor of siteMap) {
-    for (outlet of floor.outlets) {
-      currentPage = pathArray[pathArray.length - 1]
-      if (pathArray[pathArray.length - 1].includes(outlet.url)) {
-        renderFloorOutlets(floor, outlet.url)
-        break;
-      }
-    }
-  }
+  siteMap.forEach((floor) => {
+    const matchedOutlet = floor.outlets.find(outlet => pathArray[pathArray.length - 1].includes(outlet.outletLinks[0].url))
+    if (matchedOutlet) 
+      renderFloorOutlets(floor, matchedOutlet.outletLinks[0].url)
+  })
 }
 renderSiteMap()
 
 function renderFloorOutlets(floorObj, activeOutlet) {
   const { floor, outlets } = floorObj
-  console.log(floor)
   const frag = document.createDocumentFragment()
   outlets.forEach(outlet => frag.append(render.outletSwitcherButton(outlet, activeOutlet)))
   getRef('outlet_switcher__outlet_container').append(frag)
   getRef('outlet_switcher__floor_num').textContent = floor
-  let floorNum = -1
-  let outletNum = -1
-  for (let i = 0; i < siteMap.length; i++) {
-    if (siteMap[i].floor === floor) {
-      floorNum = i
-      break
-    }
-  }
-  for (let i = 0; i < outlets.length; i++) {
-    if (outlets[i].url === activeOutlet) {
-      outletNum = i
-      break
-    }
-  }
-  // document.querySelector('.outlet-label__name').textContent = floorNum > -1 ? `Floor ${floorNum + 1} outlet ${outletNum + 1}` : ''
+  const outletNum = outlets.findIndex(o => o.outletLinks[0].url === activeOutlet)
   document.querySelector('.outlet-label__no').textContent = outletNum + 1
   document.querySelector('.outlet-label__no').dataset.number = outletNum + 1
   if (outlets[outletNum].hasOwnProperty('status')) {
@@ -900,10 +854,10 @@ function showRoom(roomId, animate = false) {
     roomContainer.classList.remove('hide-completely')
     if (animate && !isRoomOpen) {
       roomContainer.animate(slideInDown, animeInOptions)
-      .onfinish = () => {
-        getRef('expanding_tile').classList.add('hide-completely')
-        isRoomOpen = true
-      }
+        .onfinish = () => {
+          getRef('expanding_tile').classList.add('hide-completely')
+          isRoomOpen = true
+        }
     }
     else {
       isRoomOpen = true
@@ -947,7 +901,7 @@ function renderRoomShorcuts() {
     if (room.href.split('#').pop() !== window.location.hash.split('#').pop()) {
       const clone = room.cloneNode(true)
       clone.classList.remove('room-tile', 'room-tile--main')
-      if(clone.querySelector('img, svg, #performance_preview'))
+      if (clone.querySelector('img, svg, #performance_preview'))
         clone.querySelectorAll('img, svg, #performance_preview').forEach(elem => elem.remove())
       clone.classList.add('room-shortcut')
       frag.append(clone)
@@ -964,19 +918,19 @@ const heroTitleObserver = new IntersectionObserver(entries => {
   entries.forEach(entry => {
     if (entry.isIntersecting) {
       getRef('room_title').animate(slideOutDown, animeInOptions)
-      .onfinish = () => {
-        getRef('room_title').classList.add('hide-completely')
-      }
+        .onfinish = () => {
+          getRef('room_title').classList.add('hide-completely')
+        }
     }
     else {
-        if (isRoomOpen)
-      getRef('room_title').classList.remove('hide-completely')
+      if (isRoomOpen)
+        getRef('room_title').classList.remove('hide-completely')
       getRef('room_title').animate(slideInUp, animeInOptions)
     }
   })
 },
   {
-  threshold: 1
+    threshold: 1
   }
 )
 
@@ -984,6 +938,6 @@ if (getRef('hero_title')) {
   heroTitleObserver.observe(getRef('hero_title'))
 }
 
-function getRandom(min, max){
+function getRandom(min, max) {
   return Math.floor(Math.random() * (max - min + 1) + min);
 }
\ No newline at end of file
diff --git a/bitcoinbonds.html b/bitcoinbonds.html
index e29c97e..2b3a6cd 100644
--- a/bitcoinbonds.html
+++ b/bitcoinbonds.html
@@ -30,20 +30,22 @@
     </section>
     <header id="main_header" class="grid align-center full-bleed">
         <button id="elevator_button" class="button" onclick="showSiteMap()">
-            <svg class="icon button__icon--left" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 3L16.3301 10.5H7.66987L12 3Z"/><path d="M12 21L7.66987 13.5L16.3301 13.5L12 21Z"/></svg>
+            <svg class="icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M12 3L16.3301 10.5H7.66987L12 3Z" />
+                <path d="M12 21L7.66987 13.5L16.3301 13.5L12 21Z" />
+            </svg>
             <span class="button__label">
                 Elevator
             </span>
         </button>
         <a href="index.html" class="main-logo flex align-center page-link justify-self-center" data-target="home_page">
-            <svg id="main_header__logo" class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20.46,21.32C20,19.78,18.6,18.59,15.3,17a12.67,12.67,0,0,1-2.64-1.56,4.27,4.27,0,0,1-.79-1,2.6,2.6,0,0,1,0-1.41c.24-.68.49-1,2.43-2.85a7.18,7.18,0,0,0,2.09-2.92,4.25,4.25,0,0,0,0-1.77,6.52,6.52,0,0,0-2.85-3.11c-.56-.36-.81-.4-.81-.15a2.33,2.33,0,0,1-.18.45L12.4,3l-.53-.36c-.28-.21-.64-.41-.77-.49s-.46-.11-.46,0a6.21,6.21,0,0,1-.37.83s-.08,0-.17-.08c-1.15-.83-1.64-1-1.64-.73A7.33,7.33,0,0,1,7.7,3.65C6.48,5.68,5.24,6.7,4,6.7c-.56,0-.54,0-.37.64s.2.58.68.43a3.37,3.37,0,0,0,1.09-.54.86.86,0,0,1,.3-.17,1.34,1.34,0,0,1,.13.39.79.79,0,0,0,.17.4A3.5,3.5,0,0,0,7.37,7.3L7.8,7l.09.34c.12.45.19.51.62.39a4.25,4.25,0,0,0,2.17-1.54l.38-.45,0,.39A5.92,5.92,0,0,1,8.89,9.54L7.67,10.71c-2,1.93-1.89,3.51.37,5a27.41,27.41,0,0,0,2.89,1.51c.17.07.62.32,1,.54C14,19,15,20.23,15,21.48a2,2,0,0,0,0,.49h0c0,.05,0,.05.56-.1a1.89,1.89,0,0,0,.53-.21,2.41,2.41,0,0,0-.34-1.15,7.05,7.05,0,0,0-1.68-1.77,21.91,21.91,0,0,0-3.2-1.83A9.53,9.53,0,0,1,8.16,15.2a2.18,2.18,0,0,1-.74-1.55C7.42,12.79,7.86,12,9,11c1.77-1.64,2.45-2.45,2.92-3.55a2.28,2.28,0,0,0,.26-1.26A2,2,0,0,0,12,5.06l-.2-.45L12,4.3l.28-.49.09-.18L12.6,4a3.69,3.69,0,0,1,.61,1.76A3.47,3.47,0,0,1,12.94,7l-.09.25s-.21.37-.41.69A17.78,17.78,0,0,1,9.91,10.6c-1.07,1-1.43,1.62-1.47,2.47a2.05,2.05,0,0,0,.7,1.73,10.47,10.47,0,0,0,3.28,2.08c2.28,1.13,3.26,1.81,4,2.73a2.94,2.94,0,0,1,.74,1.75,1.26,1.26,0,0,0,.09.57.48.48,0,0,0,.26,0l.51-.13.29-.08,0-.28c-.13-1-1-2-2.47-3a25.52,25.52,0,0,0-3.26-1.77,8.59,8.59,0,0,1-2.23-1.43,2.09,2.09,0,0,1-.5-2.62c.26-.53.5-.83,2.35-2.6,1.51-1.45,2.15-2.58,2.15-3.79A3.67,3.67,0,0,0,13,3.48a3,3,0,0,1-.4-.42A1.85,1.85,0,0,1,13,2.33a6.74,6.74,0,0,1,1.83,1.73,2.62,2.62,0,0,1,.47,1.68,3,3,0,0,1-.55,1.84c-.45.78-.79,1.14-2.67,2.93a5.56,5.56,0,0,0-1.3,1.64,1.77,1.77,0,0,0-.21,1,1.76,1.76,0,0,0,.19.92,6.28,6.28,0,0,0,2.9,2.34,21.6,21.6,0,0,1,3.66,2c1.35,1,2,2,2,3a1.06,1.06,0,0,0,.05.47,2.83,2.83,0,0,0,1-.24C20.56,21.68,20.56,21.66,20.46,21.32ZM7.29,6.4h0a2.23,2.23,0,0,1-.9.28L6,6.72l.43-.53a15.22,15.22,0,0,0,1.89-3,3.52,3.52,0,0,1,.38-.67c.07-.08.49.2,1,.64l.39.35L9.66,4A6.7,6.7,0,0,1,7.29,6.4Zm3.58-1.11A5.8,5.8,0,0,1,9.25,6.51h0a3.3,3.3,0,0,1-.74.17l-.35,0,.39-.49a15.64,15.64,0,0,0,1.32-2,4.63,4.63,0,0,1,.28-.49c.06-.08.33.26.57.77l.28.57Zm1-1.4a1.63,1.63,0,0,1-.28.4A6.63,6.63,0,0,1,11,3.72l-.53-.56.12-.29c.2-.49.24-.51.64-.19a5.57,5.57,0,0,1,.85.78A2.78,2.78,0,0,1,11.87,3.89Z"/></svg>
+            <svg id="main_header__logo" class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                <path
+                    d="M20.46,21.32C20,19.78,18.6,18.59,15.3,17a12.67,12.67,0,0,1-2.64-1.56,4.27,4.27,0,0,1-.79-1,2.6,2.6,0,0,1,0-1.41c.24-.68.49-1,2.43-2.85a7.18,7.18,0,0,0,2.09-2.92,4.25,4.25,0,0,0,0-1.77,6.52,6.52,0,0,0-2.85-3.11c-.56-.36-.81-.4-.81-.15a2.33,2.33,0,0,1-.18.45L12.4,3l-.53-.36c-.28-.21-.64-.41-.77-.49s-.46-.11-.46,0a6.21,6.21,0,0,1-.37.83s-.08,0-.17-.08c-1.15-.83-1.64-1-1.64-.73A7.33,7.33,0,0,1,7.7,3.65C6.48,5.68,5.24,6.7,4,6.7c-.56,0-.54,0-.37.64s.2.58.68.43a3.37,3.37,0,0,0,1.09-.54.86.86,0,0,1,.3-.17,1.34,1.34,0,0,1,.13.39.79.79,0,0,0,.17.4A3.5,3.5,0,0,0,7.37,7.3L7.8,7l.09.34c.12.45.19.51.62.39a4.25,4.25,0,0,0,2.17-1.54l.38-.45,0,.39A5.92,5.92,0,0,1,8.89,9.54L7.67,10.71c-2,1.93-1.89,3.51.37,5a27.41,27.41,0,0,0,2.89,1.51c.17.07.62.32,1,.54C14,19,15,20.23,15,21.48a2,2,0,0,0,0,.49h0c0,.05,0,.05.56-.1a1.89,1.89,0,0,0,.53-.21,2.41,2.41,0,0,0-.34-1.15,7.05,7.05,0,0,0-1.68-1.77,21.91,21.91,0,0,0-3.2-1.83A9.53,9.53,0,0,1,8.16,15.2a2.18,2.18,0,0,1-.74-1.55C7.42,12.79,7.86,12,9,11c1.77-1.64,2.45-2.45,2.92-3.55a2.28,2.28,0,0,0,.26-1.26A2,2,0,0,0,12,5.06l-.2-.45L12,4.3l.28-.49.09-.18L12.6,4a3.69,3.69,0,0,1,.61,1.76A3.47,3.47,0,0,1,12.94,7l-.09.25s-.21.37-.41.69A17.78,17.78,0,0,1,9.91,10.6c-1.07,1-1.43,1.62-1.47,2.47a2.05,2.05,0,0,0,.7,1.73,10.47,10.47,0,0,0,3.28,2.08c2.28,1.13,3.26,1.81,4,2.73a2.94,2.94,0,0,1,.74,1.75,1.26,1.26,0,0,0,.09.57.48.48,0,0,0,.26,0l.51-.13.29-.08,0-.28c-.13-1-1-2-2.47-3a25.52,25.52,0,0,0-3.26-1.77,8.59,8.59,0,0,1-2.23-1.43,2.09,2.09,0,0,1-.5-2.62c.26-.53.5-.83,2.35-2.6,1.51-1.45,2.15-2.58,2.15-3.79A3.67,3.67,0,0,0,13,3.48a3,3,0,0,1-.4-.42A1.85,1.85,0,0,1,13,2.33a6.74,6.74,0,0,1,1.83,1.73,2.62,2.62,0,0,1,.47,1.68,3,3,0,0,1-.55,1.84c-.45.78-.79,1.14-2.67,2.93a5.56,5.56,0,0,0-1.3,1.64,1.77,1.77,0,0,0-.21,1,1.76,1.76,0,0,0,.19.92,6.28,6.28,0,0,0,2.9,2.34,21.6,21.6,0,0,1,3.66,2c1.35,1,2,2,2,3a1.06,1.06,0,0,0,.05.47,2.83,2.83,0,0,0,1-.24C20.56,21.68,20.56,21.66,20.46,21.32ZM7.29,6.4h0a2.23,2.23,0,0,1-.9.28L6,6.72l.43-.53a15.22,15.22,0,0,0,1.89-3,3.52,3.52,0,0,1,.38-.67c.07-.08.49.2,1,.64l.39.35L9.66,4A6.7,6.7,0,0,1,7.29,6.4Zm3.58-1.11A5.8,5.8,0,0,1,9.25,6.51h0a3.3,3.3,0,0,1-.74.17l-.35,0,.39-.49a15.64,15.64,0,0,0,1.32-2,4.63,4.63,0,0,1,.28-.49c.06-.08.33.26.57.77l.28.57Zm1-1.4a1.63,1.63,0,0,1-.28.4A6.63,6.63,0,0,1,11,3.72l-.53-.56.12-.29c.2-.49.24-.51.64-.19a5.57,5.57,0,0,1,.85.78A2.78,2.78,0,0,1,11.87,3.89Z" />
+            </svg>
             <h4 class="h4 header__company-name">RanchiMall</h4>
         </a>
-        <label class="theme-switcher" title="Change theme">
-            <input id="theme_switcher" class="theme-switcher__checkbox" type="checkbox">
-            <svg class="icon moon-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M10 6a8 8 0 0 0 11.955 6.956C21.474 18.03 17.2 22 12 22 6.477 22 2 17.523 2 12c0-5.2 3.97-9.474 9.044-9.955A7.963 7.963 0 0 0 10 6zm-6 6a8 8 0 0 0 8 8 8.006 8.006 0 0 0 6.957-4.045c-.316.03-.636.045-.957.045-5.523 0-10-4.477-10-10 0-.321.015-.64.045-.957A8.006 8.006 0 0 0 4 12zm14.164-9.709L19 2.5v1l-.836.209a2 2 0 0 0-1.455 1.455L16.5 6h-1l-.209-.836a2 2 0 0 0-1.455-1.455L13 3.5v-1l.836-.209A2 2 0 0 0 15.29.836L15.5 0h1l.209.836a2 2 0 0 0 1.455 1.455zm5 5L24 7.5v1l-.836.209a2 2 0 0 0-1.455 1.455L21.5 11h-1l-.209-.836a2 2 0 0 0-1.455-1.455L18 8.5v-1l.836-.209a2 2 0 0 0 1.455-1.455L20.5 5h1l.209.836a2 2 0 0 0 1.455 1.455z"/></svg>
-            <svg class="icon sun-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 18a6 6 0 1 1 0-12 6 6 0 0 1 0 12zm0-2a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM11 1h2v3h-2V1zm0 19h2v3h-2v-3zM3.515 4.929l1.414-1.414L7.05 5.636 5.636 7.05 3.515 4.93zM16.95 18.364l1.414-1.414 2.121 2.121-1.414 1.414-2.121-2.121zm2.121-14.85l1.414 1.415-2.121 2.121-1.414-1.414 2.121-2.121zM5.636 16.95l1.414 1.414-2.121 2.121-1.414-1.414 2.121-2.121zM23 11v2h-3v-2h3zM4 11v2H1v-2h3z"/></svg>
-        </label>
+        <theme-toggle></theme-toggle>
     </header>
     <div id="outlet_switcher" class="grid gap-1-5 hide-completely">
         <span id="outlet_switcher__floor_num" class="weight-500 color-0-8"></span>
@@ -55,12 +57,13 @@
                 <h2 class="h2 weight-700 margin-bottom-2r">Bitcoin Bonds</h2>
                 <h4 class="margin-bottom-1r">How does it work?</h4>
                 <p class="margin-bottom-3r">
-                    Bondholders get a minimum guarantee of 13% interest per annum during the lock-in period or 50% of all Bitcoin price gains whichever is higher.
+                    Bondholders get a minimum guarantee of 13% interest per annum during the lock-in period or 50% of
+                    all Bitcoin price gains whichever is higher.
                     It offers full capital protection if Bitcoin prices fall below acquisition price.
                 </p>
             </div>
             <button class="outlet-label">
-<!--                 <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
+                <!--                 <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
                     <path fill="none" d="M0 0h24v24H0z" />
                     <path
                         d="M21 13.242V20h1v2H2v-2h1v-6.758A4.496 4.496 0 0 1 1 9.5c0-.827.224-1.624.633-2.303L4.345 2.5a1 1 0 0 1 .866-.5H18.79a1 1 0 0 1 .866.5l2.702 4.682A4.496 4.496 0 0 1 21 13.242zm-2 .73a4.496 4.496 0 0 1-3.75-1.36A4.496 4.496 0 0 1 12 14.001a4.496 4.496 0 0 1-3.25-1.387A4.496 4.496 0 0 1 5 13.973V20h14v-6.027zM5.789 4L3.356 8.213a2.5 2.5 0 0 0 4.466 2.216c.335-.837 1.52-.837 1.856 0a2.5 2.5 0 0 0 4.644 0c.335-.837 1.52-.837 1.856 0a2.5 2.5 0 1 0 4.457-2.232L18.21 4H5.79z" />
@@ -81,23 +84,38 @@
             <a class="room-tile room-tile--main" href="#performance_room">
                 <div class="tile-content">
                     <div class="grid flow-column gap-1 justify-start align-center">
-                        <svg class="room-tile__icon" id="b23be00b-0d64-4bed-9d99-6f7aaf421af4" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M44.53,26.6a7.17,7.17,0,1,1,5.07-2.1h0A7.16,7.16,0,0,1,44.53,26.6Zm0-11.47a4.31,4.31,0,1,0,3,1.26A4.31,4.31,0,0,0,44.53,15.13Z"/><path d="M62.58,1.38A4.7,4.7,0,0,0,58.35.09L45.09,2.66a14.61,14.61,0,0,0-7.56,4L19.92,24.29l-9,2.23a8.75,8.75,0,0,0-4.1,2.31L.46,35.2a1.43,1.43,0,0,0,1,2.44h.08L10,37.2l1.67,1.68L6.85,41.23a1.43,1.43,0,0,0-.38,2.3l14,14a1.44,1.44,0,0,0,1,.42l.24,0a1.47,1.47,0,0,0,1.05-.78l2.35-4.79,1.61,1.6-.45,8.58a1.43,1.43,0,0,0,.85,1.38,1.51,1.51,0,0,0,.58.12,1.44,1.44,0,0,0,1-.42l6.37-6.36a8.75,8.75,0,0,0,2.31-4.1l2.23-9,17.7-17.7a14.5,14.5,0,0,0,4-7.56L63.87,5.61A4.7,4.7,0,0,0,62.58,1.38ZM21,54.05,9.91,42.92,13.78,41,23,50.18ZM8.85,30.86a5.82,5.82,0,0,1,2.76-1.56L16,28.21,10.23,34l-.37.37-4.74.25ZM34.58,52.43A5.89,5.89,0,0,1,33,55.19l-3.74,3.73.25-4.74,6.13-6.13Zm20.68-28-18,18h0l-9,9-7.85-7.86-5.31-5.3h0l-2.55-2.54,27-27a11.72,11.72,0,0,1,5.38-3L58.3,19A11.64,11.64,0,0,1,55.26,24.41Zm5.8-19.34L59,15.68,48.28,5,58.89,2.9a1.85,1.85,0,0,1,2.17,2.17Z"/><path d="M2.63,62.76a1.41,1.41,0,0,1-1-.41,1.44,1.44,0,0,1,0-2l8.12-8.13a1.44,1.44,0,0,1,2,2L3.64,62.35A1.42,1.42,0,0,1,2.63,62.76Z"/><path d="M10.75,62.76a1.43,1.43,0,0,1-1-2.44l4.06-4.07a1.43,1.43,0,0,1,2,2l-4.06,4.06A1.43,1.43,0,0,1,10.75,62.76Z"/><path d="M2.63,54.64a1.43,1.43,0,0,1-1-2.44l4.07-4.06a1.43,1.43,0,0,1,2,2L3.65,54.22A1.44,1.44,0,0,1,2.63,54.64Z"/></svg>
+                        <svg class="room-tile__icon" id="b23be00b-0d64-4bed-9d99-6f7aaf421af4" data-name="Layer 1"
+                            xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+                            <path
+                                d="M44.53,26.6a7.17,7.17,0,1,1,5.07-2.1h0A7.16,7.16,0,0,1,44.53,26.6Zm0-11.47a4.31,4.31,0,1,0,3,1.26A4.31,4.31,0,0,0,44.53,15.13Z" />
+                            <path
+                                d="M62.58,1.38A4.7,4.7,0,0,0,58.35.09L45.09,2.66a14.61,14.61,0,0,0-7.56,4L19.92,24.29l-9,2.23a8.75,8.75,0,0,0-4.1,2.31L.46,35.2a1.43,1.43,0,0,0,1,2.44h.08L10,37.2l1.67,1.68L6.85,41.23a1.43,1.43,0,0,0-.38,2.3l14,14a1.44,1.44,0,0,0,1,.42l.24,0a1.47,1.47,0,0,0,1.05-.78l2.35-4.79,1.61,1.6-.45,8.58a1.43,1.43,0,0,0,.85,1.38,1.51,1.51,0,0,0,.58.12,1.44,1.44,0,0,0,1-.42l6.37-6.36a8.75,8.75,0,0,0,2.31-4.1l2.23-9,17.7-17.7a14.5,14.5,0,0,0,4-7.56L63.87,5.61A4.7,4.7,0,0,0,62.58,1.38ZM21,54.05,9.91,42.92,13.78,41,23,50.18ZM8.85,30.86a5.82,5.82,0,0,1,2.76-1.56L16,28.21,10.23,34l-.37.37-4.74.25ZM34.58,52.43A5.89,5.89,0,0,1,33,55.19l-3.74,3.73.25-4.74,6.13-6.13Zm20.68-28-18,18h0l-9,9-7.85-7.86-5.31-5.3h0l-2.55-2.54,27-27a11.72,11.72,0,0,1,5.38-3L58.3,19A11.64,11.64,0,0,1,55.26,24.41Zm5.8-19.34L59,15.68,48.28,5,58.89,2.9a1.85,1.85,0,0,1,2.17,2.17Z" />
+                            <path
+                                d="M2.63,62.76a1.41,1.41,0,0,1-1-.41,1.44,1.44,0,0,1,0-2l8.12-8.13a1.44,1.44,0,0,1,2,2L3.64,62.35A1.42,1.42,0,0,1,2.63,62.76Z" />
+                            <path
+                                d="M10.75,62.76a1.43,1.43,0,0,1-1-2.44l4.06-4.07a1.43,1.43,0,0,1,2,2l-4.06,4.06A1.43,1.43,0,0,1,10.75,62.76Z" />
+                            <path
+                                d="M2.63,54.64a1.43,1.43,0,0,1-1-2.44l4.07-4.06a1.43,1.43,0,0,1,2,2L3.65,54.22A1.44,1.44,0,0,1,2.63,54.64Z" />
+                        </svg>
                         <h4 class="room-tile__title">Performance</h4>
                     </div>
-
                     <div id="performance_preview"></div>
                 </div>
             </a>
             <a class="room-tile" href="#product_room">
                 <div class="tile-content">
                     <div class="grid flow-column gap-1 justify-start align-center">
-                        <svg class="room-tile__icon" id="b76bf456-6b89-4220-8b44-f4f7d833bad6" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M61.28,22.11c0-.05,0-.09,0-.14L58.62,6A1.68,1.68,0,0,0,57,4.6H7A1.68,1.68,0,0,0,5.38,6L2.72,22c0,.05,0,.09,0,.14s0,.09,0,.14V57.72A1.68,1.68,0,0,0,4.38,59.4H59.62a1.68,1.68,0,0,0,1.68-1.68V22.25C61.3,22.2,61.28,22.16,61.28,22.11Zm-3.64-1.54H39.34L38.51,8h17ZM27.92,23.93h8.16v6.64L33,28.41a1.7,1.7,0,0,0-1.9,0l-3.13,2.16ZM35.15,8,36,20.57H28L28.91,8ZM8.46,8H25.55l-.88,12.61H6.36ZM57.94,56H6.06V23.93h18.5v9.84a1.67,1.67,0,0,0,2.63,1.38L32,31.84l4.81,3.31a1.65,1.65,0,0,0,.95.3,1.76,1.76,0,0,0,.78-.19,1.68,1.68,0,0,0,.9-1.49V23.93h18.5Z"/></svg>
+                        <svg class="room-tile__icon" id="b76bf456-6b89-4220-8b44-f4f7d833bad6" data-name="Layer 1"
+                            xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+                            <path
+                                d="M61.28,22.11c0-.05,0-.09,0-.14L58.62,6A1.68,1.68,0,0,0,57,4.6H7A1.68,1.68,0,0,0,5.38,6L2.72,22c0,.05,0,.09,0,.14s0,.09,0,.14V57.72A1.68,1.68,0,0,0,4.38,59.4H59.62a1.68,1.68,0,0,0,1.68-1.68V22.25C61.3,22.2,61.28,22.16,61.28,22.11Zm-3.64-1.54H39.34L38.51,8h17ZM27.92,23.93h8.16v6.64L33,28.41a1.7,1.7,0,0,0-1.9,0l-3.13,2.16ZM35.15,8,36,20.57H28L28.91,8ZM8.46,8H25.55l-.88,12.61H6.36ZM57.94,56H6.06V23.93h18.5v9.84a1.67,1.67,0,0,0,2.63,1.38L32,31.84l4.81,3.31a1.65,1.65,0,0,0,.95.3,1.76,1.76,0,0,0,.78-.19,1.68,1.68,0,0,0,.9-1.49V23.93h18.5Z" />
+                        </svg>
                         <h4 class="room-tile__title">Product</h4>
                     </div>
 
                 </div>
             </a>
-<!--             <a class="room-tile" href="#purchase_room">
+            <!--             <a class="room-tile" href="#purchase_room">
                 <div class="tile-content">
                     <svg class="room-tile__icon" id="bb329e59-3d30-49a7-ac0d-b164d3b3b631" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M42.74,64a14,14,0,1,1,14-14A14,14,0,0,1,42.74,64Zm0-24.73A10.7,10.7,0,1,0,53.44,50,10.71,10.71,0,0,0,42.74,39.27Z"/><path d="M28.7,50H14.08a3.43,3.43,0,0,1-3.42-3.58l1.4-31.51h4.85V17.8a1.71,1.71,0,1,0,3.42,0V14.88H33V17.8a1.71,1.71,0,1,0,3.42,0V14.88h4.84L42.2,36c.18,0,.35,0,.54,0a13.92,13.92,0,0,1,2.9.31l-1.1-24.8H36.42V9.76a9.76,9.76,0,1,0-19.51,0v1.69H8.79L7.24,46.24a6.85,6.85,0,0,0,6.84,7.15H29.14A14.24,14.24,0,0,1,28.7,50ZM20.33,9.76A6.34,6.34,0,1,1,33,9.76v1.69H20.33Z"/><path d="M41.23,54.65a1.69,1.69,0,0,1-1.18-.49l-3-3a1.67,1.67,0,0,1,2.35-2.36l1.84,1.84,4.85-4.85a1.66,1.66,0,0,1,2.35,2.35l-6,6A1.67,1.67,0,0,1,41.23,54.65Z"/></svg>
                     <h4 class="room-tile__title">Buy</h4>
@@ -107,7 +125,10 @@
         <section class="room-container hide-completely page-layout">
             <header class="room-container__header">
                 <button class="grid flow-column gap-1 align-center" onclick="hideRoom()">
-                    <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M7.828 11H20v2H7.828l5.364 5.364-1.414 1.414L4 12l7.778-7.778 1.414 1.414z"/></svg>
+                    <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
+                        <path fill="none" d="M0 0h24v24H0z" />
+                        <path d="M7.828 11H20v2H7.828l5.364 5.364-1.414 1.414L4 12l7.778-7.778 1.414 1.414z" />
+                    </svg>
                     <h3 id="room_title" class="section-header hide-completely"></h3>
                 </button>
             </header>
@@ -128,85 +149,129 @@
                     <section class="features-grid">
                         <div class="feature">
                             <div class="feature__icon">
-                                <svg class="icon" id="f47905c4-be19-4535-912c-ac0a41d5362d" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M55.59,38a10.43,10.43,0,0,0-3.09-4.19,12.61,12.61,0,0,0-5.4-2.46,11.57,11.57,0,0,0,5.75-4.7,13.39,13.39,0,0,0,1.86-7q0-7.62-5.86-11.46c-3.64-2.39-8.62-3.65-14.91-3.82V0H25.38V4.28H21.7V0H13.14V4.28H7.42v7.84l5.75,1.22V50.7L7.42,51.91v7.81h6.69V64h8.56V59.72h3.68V64h8.56V59.72h.42q10.37,0,15.8-4.15t5.45-12.3A14.09,14.09,0,0,0,55.59,38ZM41.35,21.11A5.14,5.14,0,0,1,39,25.77q-2.34,1.52-7.07,1.51h-5.4V14.48h6q4.45,0,6.65,1.58A5.81,5.81,0,0,1,41.35,21.11ZM41.29,48q-2,1.56-6,1.56H26.54V36.11H36a9.61,9.61,0,0,1,4.19.78,5,5,0,0,1,2.36,2.36,9.14,9.14,0,0,1,.76,4A5.66,5.66,0,0,1,41.29,48Z"/></svg>
+                                <svg class="icon" id="f47905c4-be19-4535-912c-ac0a41d5362d" data-name="Layer 1"
+                                    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+                                    <path
+                                        d="M55.59,38a10.43,10.43,0,0,0-3.09-4.19,12.61,12.61,0,0,0-5.4-2.46,11.57,11.57,0,0,0,5.75-4.7,13.39,13.39,0,0,0,1.86-7q0-7.62-5.86-11.46c-3.64-2.39-8.62-3.65-14.91-3.82V0H25.38V4.28H21.7V0H13.14V4.28H7.42v7.84l5.75,1.22V50.7L7.42,51.91v7.81h6.69V64h8.56V59.72h3.68V64h8.56V59.72h.42q10.37,0,15.8-4.15t5.45-12.3A14.09,14.09,0,0,0,55.59,38ZM41.35,21.11A5.14,5.14,0,0,1,39,25.77q-2.34,1.52-7.07,1.51h-5.4V14.48h6q4.45,0,6.65,1.58A5.81,5.81,0,0,1,41.35,21.11ZM41.29,48q-2,1.56-6,1.56H26.54V36.11H36a9.61,9.61,0,0,1,4.19.78,5,5,0,0,1,2.36,2.36,9.14,9.14,0,0,1,.76,4A5.66,5.66,0,0,1,41.29,48Z" />
+                                </svg>
                             </div>
                             <h4 class="feature__title">Bitcoin linked</h4>
                             <p class="feature__brief">Bitcoin Bonds is a Bitcoin price linked product of RanchiMall</p>
                         </div>
                         <div class="feature feature--wide">
                             <div class="feature__icon">
-                                <svg class="icon" id="a9cf0968-17a3-4e2e-8dcf-10d366d12d28" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M17.28,29a16.35,16.35,0,0,1-7.63-1.64,11.32,11.32,0,0,1-4.77-4.54,13.17,13.17,0,0,1-1.63-6.61V12.88A13.3,13.3,0,0,1,4.88,6.25,11.52,11.52,0,0,1,9.6,1.67,15.9,15.9,0,0,1,17.2,0a15.94,15.94,0,0,1,7.63,1.67,11.43,11.43,0,0,1,4.71,4.55,13.5,13.5,0,0,1,1.6,6.66v3.29a13.36,13.36,0,0,1-1.6,6.61,11.33,11.33,0,0,1-4.68,4.54A16,16,0,0,1,17.28,29Zm0-8a3.94,3.94,0,0,0,3.21-1.39,5.13,5.13,0,0,0,1.16-3.4V12.88a5.31,5.31,0,0,0-1.16-3.47A4,4,0,0,0,17.2,8a3.94,3.94,0,0,0-3.27,1.41,5.35,5.35,0,0,0-1.14,3.47v3.29A5.11,5.11,0,0,0,14,19.59,4.09,4.09,0,0,0,17.28,21Zm3,37.61-6.93-3.43L43.76,6.46,50.7,9.88ZM46.89,64a16.15,16.15,0,0,1-7.64-1.67,11.75,11.75,0,0,1-4.81-4.58,13,13,0,0,1-1.67-6.58V47.91a13.19,13.19,0,0,1,1.63-6.58,11.41,11.41,0,0,1,4.77-4.58,16.11,16.11,0,0,1,7.63-1.67,16,16,0,0,1,7.6,1.65,11.39,11.39,0,0,1,4.72,4.55,13.3,13.3,0,0,1,1.63,6.63v3.26a13.5,13.5,0,0,1-1.61,6.63,11.29,11.29,0,0,1-4.68,4.55A15.87,15.87,0,0,1,46.89,64Zm0-8c1.68,0,2.81-.42,3.4-1.26a6.33,6.33,0,0,0,.88-3.61V47.91a5.31,5.31,0,0,0-1.12-3.42,3.88,3.88,0,0,0-3.25-1.41,4,4,0,0,0-3.33,1.41,5.31,5.31,0,0,0-1.12,3.42v3.26a4.93,4.93,0,0,0,1.33,3.42A4.17,4.17,0,0,0,46.89,56Z"/></svg>
+                                <svg class="icon" id="a9cf0968-17a3-4e2e-8dcf-10d366d12d28" data-name="Layer 1"
+                                    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+                                    <path
+                                        d="M17.28,29a16.35,16.35,0,0,1-7.63-1.64,11.32,11.32,0,0,1-4.77-4.54,13.17,13.17,0,0,1-1.63-6.61V12.88A13.3,13.3,0,0,1,4.88,6.25,11.52,11.52,0,0,1,9.6,1.67,15.9,15.9,0,0,1,17.2,0a15.94,15.94,0,0,1,7.63,1.67,11.43,11.43,0,0,1,4.71,4.55,13.5,13.5,0,0,1,1.6,6.66v3.29a13.36,13.36,0,0,1-1.6,6.61,11.33,11.33,0,0,1-4.68,4.54A16,16,0,0,1,17.28,29Zm0-8a3.94,3.94,0,0,0,3.21-1.39,5.13,5.13,0,0,0,1.16-3.4V12.88a5.31,5.31,0,0,0-1.16-3.47A4,4,0,0,0,17.2,8a3.94,3.94,0,0,0-3.27,1.41,5.35,5.35,0,0,0-1.14,3.47v3.29A5.11,5.11,0,0,0,14,19.59,4.09,4.09,0,0,0,17.28,21Zm3,37.61-6.93-3.43L43.76,6.46,50.7,9.88ZM46.89,64a16.15,16.15,0,0,1-7.64-1.67,11.75,11.75,0,0,1-4.81-4.58,13,13,0,0,1-1.67-6.58V47.91a13.19,13.19,0,0,1,1.63-6.58,11.41,11.41,0,0,1,4.77-4.58,16.11,16.11,0,0,1,7.63-1.67,16,16,0,0,1,7.6,1.65,11.39,11.39,0,0,1,4.72,4.55,13.3,13.3,0,0,1,1.63,6.63v3.26a13.5,13.5,0,0,1-1.61,6.63,11.29,11.29,0,0,1-4.68,4.55A15.87,15.87,0,0,1,46.89,64Zm0-8c1.68,0,2.81-.42,3.4-1.26a6.33,6.33,0,0,0,.88-3.61V47.91a5.31,5.31,0,0,0-1.12-3.42,3.88,3.88,0,0,0-3.25-1.41,4,4,0,0,0-3.33,1.41,5.31,5.31,0,0,0-1.12,3.42v3.26a4.93,4.93,0,0,0,1.33,3.42A4.17,4.17,0,0,0,46.89,56Z" />
+                                </svg>
                             </div>
                             <h4 class="feature__title">Guaranteed interest</h4>
-                            <p class="feature__brief">Get a minimum guarantee of 13% interest per annum during the lock-in period or 50% of all Bitcoin price gains whichever is higher.</p>
+                            <p class="feature__brief">Get a minimum guarantee of 13% interest per annum during the
+                                lock-in period or 50% of all Bitcoin price gains whichever is higher.</p>
                         </div>
                         <div class="feature">
                             <div class="feature__icon">
-                                <svg class="icon" id="b08df049-bfa0-4c18-bc06-ef2129dc9a6e" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M32,0,5.42,5.93v31A55.62,55.62,0,0,0,32,64,55.62,55.62,0,0,0,58.58,36.94v-31ZM42.5,24.9,30.76,36.64a2.53,2.53,0,0,1-1.77.73,2.49,2.49,0,0,1-1.76-.73L21.5,30.91A2.5,2.5,0,1,1,25,27.38L29,31.33l10-10A2.5,2.5,0,1,1,42.5,24.9Z"/></svg>
+                                <svg class="icon" id="b08df049-bfa0-4c18-bc06-ef2129dc9a6e" data-name="Layer 1"
+                                    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+                                    <path
+                                        d="M32,0,5.42,5.93v31A55.62,55.62,0,0,0,32,64,55.62,55.62,0,0,0,58.58,36.94v-31ZM42.5,24.9,30.76,36.64a2.53,2.53,0,0,1-1.77.73,2.49,2.49,0,0,1-1.76-.73L21.5,30.91A2.5,2.5,0,1,1,25,27.38L29,31.33l10-10A2.5,2.5,0,1,1,42.5,24.9Z" />
+                                </svg>
                             </div>
                             <h4 class="feature__title">Full capital protection</h4>
-                            <p class="feature__brief"> It offers full capital protection if Bitcoin prices fall below acquisition price</p>
+                            <p class="feature__brief"> It offers full capital protection if Bitcoin prices fall below
+                                acquisition price</p>
                         </div>
                     </section>
                     <h4 class="h4 margin-bottom-1r">Description of different bonds</h4>
                     <ol type="1" class="margin-bottom-3r">
                         <li>
                             <p>
-                                Bitcoin Bonds is a Bitcoin price linked product of RanchiMall in which the customer will never
-                                see value of his asset go down even if the prices of Bitcoin falls. Its been targeted to first time
-                                Bitcoin enthusiasts who are afraid of losing money with Bitcoins. RanchiMall absorbs all the potential
-                                losses of the customer. It also guarantees the customer a minimum rate of annual appreciation. If the
+                                Bitcoin Bonds is a Bitcoin price linked product of RanchiMall in which the customer will
+                                never
+                                see value of his asset go down even if the prices of Bitcoin falls. Its been targeted to
+                                first time
+                                Bitcoin enthusiasts who are afraid of losing money with Bitcoins. RanchiMall absorbs all
+                                the potential
+                                losses of the customer. It also guarantees the customer a minimum rate of annual
+                                appreciation. If the
                                 price of Bitcoin appreciates, the customer is entitled to 50% of all the gains.
                             </p>
                         </li>
                         <li>
                             <p>
-                                RanchiMall has released two types of Bitcoin Bonds as per the price of Bitcoin as on issue date. In the
-                                first type, the customer is guaranteed first 12% per gains per annum for 3 years, and 50% of all gains
-                                there after. Customer must hold the bond for 3 years since bond issue date. In second type, the
-                                customer is guaranteed 13% per annum for 5 years, and the customer is entitled to 50% of all gains.
+                                RanchiMall has released two types of Bitcoin Bonds as per the price of Bitcoin as on
+                                issue date. In the
+                                first type, the customer is guaranteed first 12% per gains per annum for 3 years, and
+                                50% of all gains
+                                there after. Customer must hold the bond for 3 years since bond issue date. In second
+                                type, the
+                                customer is guaranteed 13% per annum for 5 years, and the customer is entitled to 50% of
+                                all gains.
                                 Customer must hold the bond for at least 3 years since date of issue.
                             </p>
                         </li>
                         <li>
                             <p>
-                                Example of Type 1 Bitcoin Bond is Bitcoin Bonds USD 975 Series issued on 2nd February 2017.
-                                Customer funds are invested at Bitcoin prices of 975 USD as on 2nd February 2017. If the prices of
-                                Bitcoins fall below 975 USD, the customer bond value will continue to be 975 USD, and will get an
-                                increment of 12% per annum. If the prices of Bitcoin go beyond 975 USD, the customer will getat
-                                least 12% per annum, and 50% of all price gains beyond it. The customer must hold thebond for 3
+                                Example of Type 1 Bitcoin Bond is Bitcoin Bonds USD 975 Series issued on 2nd February
+                                2017.
+                                Customer funds are invested at Bitcoin prices of 975 USD as on 2nd February 2017. If the
+                                prices of
+                                Bitcoins fall below 975 USD, the customer bond value will continue to be 975 USD, and
+                                will get an
+                                increment of 12% per annum. If the prices of Bitcoin go beyond 975 USD, the customer
+                                will getat
+                                least 12% per annum, and 50% of all price gains beyond it. The customer must hold
+                                thebond for 3
                                 years.
                             </p>
                         </li>
                         <li>
                             <p>
-                                Example of Type 2 Bitcoin Bond is Bitcoin Bonds USD 1205 Series issued on 2nd March 2017.
-                                Customer funds are invested at Bitcoin prices of 1205 USD as on 2nd March 2017. If the prices of
-                                Bitcoins fall below 1205 USD, the customer bond value will continue to be 1205 USD will full loss
-                                protection, and will get an increment of 13% per annum for 5 years on top. If the price gains is more
-                                than 13% in any year for first 5 years, the customer will be entitled to 50% of the gains. The customer
+                                Example of Type 2 Bitcoin Bond is Bitcoin Bonds USD 1205 Series issued on 2nd March
+                                2017.
+                                Customer funds are invested at Bitcoin prices of 1205 USD as on 2nd March 2017. If the
+                                prices of
+                                Bitcoins fall below 1205 USD, the customer bond value will continue to be 1205 USD will
+                                full loss
+                                protection, and will get an increment of 13% per annum for 5 years on top. If the price
+                                gains is more
+                                than 13% in any year for first 5 years, the customer will be entitled to 50% of the
+                                gains. The customer
                                 must hold the bond for 3 years.
                             </p>
                         </li>
                         <li>
                             <p>
-                                Bond 1 Bondholders entitlement for Bitcoin Bonds ($975, $1057 and $1064 series) - Bondholders have a
-                                3 year lock-in period. In the lockin period they are guaranteed 12 percent per annum. If the price
-                                appreciates more than 12 percent, they will be paid 50 percent of additional return over and above
-                                12 percent. After 3 years, bondholders can cash out anytime they like. Bond 2 Bondholder entitlement
-                                ($1205 series)Bondholders are entitled to 50% of Bitcoin and Bitcoin Cash price gains at all times with
-                                a minimum guarantee of 13 percent per annum for 5 years from date of issue. There is a 3 year lockin
+                                Bond 1 Bondholders entitlement for Bitcoin Bonds ($975, $1057 and $1064 series) -
+                                Bondholders have a
+                                3 year lock-in period. In the lockin period they are guaranteed 12 percent per annum. If
+                                the price
+                                appreciates more than 12 percent, they will be paid 50 percent of additional return over
+                                and above
+                                12 percent. After 3 years, bondholders can cash out anytime they like. Bond 2 Bondholder
+                                entitlement
+                                ($1205 series)Bondholders are entitled to 50% of Bitcoin and Bitcoin Cash price gains at
+                                all times with
+                                a minimum guarantee of 13 percent per annum for 5 years from date of issue. There is a 3
+                                year lockin
                                 period. After 3 years, bondholders can cash out anytime they like.
                             </p>
                         </li>
                         <li>
                             <p>
-                                Bond 3 Bondholders Entitlement ($1285 series) - Bondholders are entitled to 50% of Bitcoinand Bitcoin
-                                Cash price gains at all times with a minimum guarantee of 13 percent per annum for 5 years from
-                                date of issue. There is a 3 year lockin period. After 3 years, bondholders can cash out anytime they
-                                like.Bond 4Bondholder Entitlement ($2513 series)Bondholders are entitled to 50% of Bitcoin and
-                                Bitcoin Cash price gains at all times with a minimum guarantee of 13 percent per annum for 5 years
-                                from date of issue. There is a 3 year lockin period. After 3 years, bondholders can cash out anytime
+                                Bond 3 Bondholders Entitlement ($1285 series) - Bondholders are entitled to 50% of
+                                Bitcoinand Bitcoin
+                                Cash price gains at all times with a minimum guarantee of 13 percent per annum for 5
+                                years from
+                                date of issue. There is a 3 year lockin period. After 3 years, bondholders can cash out
+                                anytime they
+                                like.Bond 4Bondholder Entitlement ($2513 series)Bondholders are entitled to 50% of
+                                Bitcoin and
+                                Bitcoin Cash price gains at all times with a minimum guarantee of 13 percent per annum
+                                for 5 years
+                                from date of issue. There is a 3 year lockin period. After 3 years, bondholders can cash
+                                out anytime
                                 they like.
                             </p>
                         </li>
@@ -214,38 +279,49 @@
                     <h4 class="h4 margin-bottom-1r section-header">Risk Management</h4>
                     <p class="margin-bottom-3r">
                         This is a high risk product for RanchiMall. We guarantee protection from losses
-                        and a minimum rate of return.To control our risks, we limit the total aggregate amount of guarantee
+                        and a minimum rate of return.To control our risks, we limit the total aggregate amount of
+                        guarantee
                         we give to a comfortable level. We also limit maximum amount of Bitcoin Bonds aperson can buy so
                         that we do not have sudden redemption pressure.RanchiMall needs to have long term confidence
-                        in asset price growth, which we do have for Bitcoin scurrently. We cannot offer these guarantees on
-                        any other crypto or non-crypto asset other than Bitcoin as we cannot make definite predictions on
+                        in asset price growth, which we do have for Bitcoin scurrently. We cannot offer these guarantees
+                        on
+                        any other crypto or non-crypto asset other than Bitcoin as we cannot make definite predictions
+                        on
                         their long term prices.The maximum amount of aggregate guarantee amount for this product should
-                        be lower than 20 percent of RanchiMall assets to protect against catastrophic Bitcoin price fall.
+                        be lower than 20 percent of RanchiMall assets to protect against catastrophic Bitcoin price
+                        fall.
                     </p>
                     <h4 class="h4 margin-bottom-1r section-header">Founder Notes</h4>
                     <ol type="1">
                         <li>
                             <p>
-                                RanchiMall Bitcoin Bonds was the first product that met our 2 fundamental criteria that we have for
-                                RanchiMall products. First every product must beinnovative and absolutely new. Secondly it should
+                                RanchiMall Bitcoin Bonds was the first product that met our 2 fundamental criteria that
+                                we have for
+                                RanchiMall products. First every product must beinnovative and absolutely new. Secondly
+                                it should
                                 be created, marketedand delivered purely on Internet withoutany physical elements.
                             </p>
                         </li>
                         <li>
                             <p>
-                                This product also reflects our philosophy that we should have impactful products,fewer number of customers, and very deep relationship with those customers.
+                                This product also reflects our philosophy that we should have impactful products,fewer
+                                number of customers, and very deep relationship with those customers.
                             </p>
                         </li>
                         <li>
                             <p>
-                                This product is a compounding product which means both our customers and us will see higher returns as wheels of time move forward.
+                                This product is a compounding product which means both our customers and us will see
+                                higher returns as wheels of time move forward.
                             </p>
                         </li>
                         <li>
                             <p>
-                                Since RanchiMall gets roughly 50 percent of price gains and our costs of operations are very low on
-                                this product, RanchiMall Bitcoin Bonds has helped RanchiMall to become self sufficient without
-                                needing large capital investment. Doing good risk management is a very important dimension here.
+                                Since RanchiMall gets roughly 50 percent of price gains and our costs of operations are
+                                very low on
+                                this product, RanchiMall Bitcoin Bonds has helped RanchiMall to become self sufficient
+                                without
+                                needing large capital investment. Doing good risk management is a very important
+                                dimension here.
                                 And that will be our challenge in the continued offerings of this product.
                             </p>
                         </li>
@@ -254,9 +330,13 @@
                 <section id="purchase_room" class="grid room">
                     <p>
                         The purchase of this product is open only during specified time when we are confident we can
-                        give guarantees. It was last open from February 2017 to June 2017.Currently we are doing blockchain
-                        version of the product in test mode.If you are interested, please generate your FLO ID while keeping
-                        your private key very safe.FLO ID can be generated <a href="https://ranchimall.github.io/flo-webwallet/" target="_blank">here</a> in a single click.We can message
+                        give guarantees. It was last open from February 2017 to June 2017.Currently we are doing
+                        blockchain
+                        version of the product in test mode.If you are interested, please generate your FLO ID while
+                        keeping
+                        your private key very safe.FLO ID can be generated <a
+                            href="https://ranchimall.github.io/flo-webwallet/" target="_blank">here</a> in a single
+                        click.We can message
                         directly on that FLO ID. Please drop your name and phone number along with FLO ID.
                     </p>
                 </section>
@@ -274,17 +354,19 @@
                 </div>
                 <div class="link-container">
                     <a class="round" href="https://www.ranchimall.net/BitBonds/" target="_blank">2017 release</a>
-                    <a class="round" href="https://ranchimall.github.io/blockchain-bonds/" target="_blank">Blockchain version</a>
+                    <a class="round" href="https://ranchimall.github.io/blockchain-bonds/" target="_blank">Blockchain
+                        version</a>
                 </div>
             </div>
         </section>
     </main>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/chart.js@3.3.2/dist/chart.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js"></script>
     <script src="assets/js/components.js"></script>
+    <script src="https://unpkg.com/uhtml@3.0.1/es.js"></script>
     <script src="assets/js/index.js"></script>
     <script>
-        const bitBondSerieses = [
+        const bitBondSeries = [
             {
                 series: 975,
                 startDate: 1485993600000
@@ -310,7 +392,7 @@
                 startDate: 1496880000000
             },
         ]
-                
+
         function getCurrentRates() {
             let fetchData = api => new Promise((resolve, reject) => {
                 fetch(api).then(response => {
@@ -341,7 +423,7 @@
             BTC_current = rates.BTC_USD;
             renderAllSeries()
         }).catch(error => console.error(error))
-        
+
         function yrDiff(d1 = null, d2 = null) {
             d1 = d1 ? new Date(d1) : new Date();
             d2 = d2 ? new Date(d2) : new Date();
@@ -351,35 +433,33 @@
             //need to implement leap yr
             return tmp
         }
-        
+
         function calcNetValue(obj) {
-            let {isHistorical = false, BTC_base, startDate, minIpa, maxPeriod, cut, amount, USD_base, histBtc, histUsd} = obj
+            let { isHistorical = false, BTC_base, startDate, minIpa, maxPeriod, cut, amount, USD_base, histBtc, histUsd } = obj
             let gain, interest, net;
-            if(isHistorical){
+            if (isHistorical) {
                 gain = (histBtc - BTC_base) / BTC_base;
             }
-            else{
+            else {
                 gain = (BTC_current - BTC_base) / BTC_base;
             }
             interest = Math.max(cut * gain, minIpa * Math.min(yrDiff(startDate), maxPeriod));
             net = amount / USD_base;
             net += net * interest;
-            if(isHistorical){
+            if (isHistorical) {
                 currentValue = net * histUsd
             }
-            else{
+            else {
                 currentValue = net * USD_current
             }
             const percentGain = ((currentValue - amount) / amount) * 100
-            //console.info(gain, interest, net)
             return [currentValue, percentGain];
         }
 
-        function renderAllSeries(){
-            const frag = document.createDocumentFragment()
-            getRef('bit_bond_series__container').innerHTML = ''
-            const randIndex = getRandom(0, bitBondSerieses.length - 1)
-            bitBondSerieses.forEach((series, index) => {
+        function renderAllSeries() {
+            const allSeries = []
+            const randIndex = getRandom(0, bitBondSeries.length - 1)
+            bitBondSeries.forEach((series, index) => {
                 let obj = {
                     BTC_base: series.series,
                     startDate: series.startDate,
@@ -397,21 +477,19 @@
                     currentValue,
                     percentGain: percentGain.toFixed(0)
                 }
-                const timelineItem = create('li', {className: 'timeline-item'})
-                
-                const tilelineItemHeader = create('header', {
-                    className: 'timeline-item__header',
-                    text: getFormatedTime(series.startDate, true)
-                })
-                if(randIndex === index){
+                const timelineItem = html`
+                    <li class="timeline-item">
+                        <h4 class="timeline-item__header">${getFormatedTime(series.startDate, true)}</h4>
+                        ${render.bitBondRow(bondObj)}
+                    </li>
+                `;
+                if (randIndex === index) {
                     renderGraph(obj)
-                    getRef('performance_preview').append(render.bitBondRow(bondObj))
+                    renderElem(getRef('performance_preview'), render.bitBondRow(bondObj))
                 }
-
-                timelineItem.append(tilelineItemHeader, render.bitBondRow(bondObj))
-                frag.append(timelineItem)
+                allSeries.push(timelineItem)
             })
-            getRef('bit_bond_series__container').append(frag)
+            renderElem(getRef('bit_bond_series__container'), html`${allSeries}`)
 
         }
         async function getPrices() {
@@ -424,7 +502,7 @@
         let dates = []
         let historicalData = []
         let tableOfData = []
-            
+
         async function getData(obj) {
             let [btcPrices, inrPrices] = await getPrices()
             btcPrices = btcPrices['Time Series (Digital Currency Monthly)']
@@ -448,7 +526,7 @@
                     let histBtc = parseFloat(allBtcPrices[index])
                     let histUsd = parseFloat(inrPrices[dataPoint]['1. open'])
                     obj.isHistorical = true
-                    let [currentValue, gain] = calcNetValue({...obj, histBtc, histUsd})
+                    let [currentValue, gain] = calcNetValue({ ...obj, histBtc, histUsd })
                     // console.log(currentValue)
                     historicalData.push(currentValue)
                     index++
@@ -464,14 +542,14 @@
         let lineColor
         let myChart
 
-        function selectGraphColors(){
+        function selectGraphColors() {
             gradientFill = ctx.createLinearGradient(200, 0, 200, 400);
             let cssTextColor = getComputedStyle(document.body).getPropertyValue('--text-color')
             gradientFill.addColorStop(0, `rgba(${cssTextColor}, 0.2)`);
             gradientFill.addColorStop(1, "transparent");
-            if(myChart){
+            if (myChart) {
                 lineColor = ctx.createLinearGradient(0, 0, myChart.chartArea.width, 0)
-            }else{
+            } else {
                 lineColor = ctx.createLinearGradient(0, 0, 500, 0)
             }
             lineColor.addColorStop(0, "#f49080");
@@ -479,13 +557,13 @@
             // lineColor = getComputedStyle(document.body).getPropertyValue('--secondary-text-color');
             textColor = `rgba(${cssTextColor}, 0.7)`
         }
-        
+
         async function renderGraph(obj) {
             await getData(obj)
             selectGraphColors()
             getRef('line_sample').classList.remove('hide-completely')
             getRef('graph_legend').textContent = `Growth of $100 in $${obj.BTC_base} series`
-            
+
             myChart = new Chart(ctx, {
                 type: 'line',
                 data: {
@@ -534,7 +612,7 @@
                 }
             });
         }
-        getRef("theme_switcher").addEventListener("change", function (e) {
+        document.addEventListener("themechange", function (e) {
             selectGraphColors()
             myChart.data.datasets[0].borderColor = lineColor
             myChart.data.datasets[0].backgroundColor = gradientFill
@@ -545,4 +623,5 @@
         });
     </script>
 </body>
+
 </html>
\ No newline at end of file
diff --git a/bob'sfund.html b/bob'sfund.html
index c59b667..4b73b87 100644
--- a/bob'sfund.html
+++ b/bob'sfund.html
@@ -28,22 +28,25 @@
         </header>
         <ul id="floor_list" class="grid"></ul>
     </section>
-    <header id="main_header" class="grid align-center full-bleed">
+    <header id="main_header" class="full-bleed">
         <button id="elevator_button" class="button" onclick="showSiteMap()">
-            <svg class="icon button__icon--left" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 3L16.3301 10.5H7.66987L12 3Z"/><path d="M12 21L7.66987 13.5L16.3301 13.5L12 21Z"/></svg>
+            <svg class="icon button__icon--left" width="24" height="24" viewBox="0 0 24 24" fill="none"
+                xmlns="http://www.w3.org/2000/svg">
+                <path d="M12 3L16.3301 10.5H7.66987L12 3Z" />
+                <path d="M12 21L7.66987 13.5L16.3301 13.5L12 21Z" />
+            </svg>
             <span class="button__label">
                 Elevator
             </span>
         </button>
         <a href="index.html" class="main-logo flex align-center page-link justify-self-center" data-target="home_page">
-            <svg id="main_header__logo" class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20.46,21.32C20,19.78,18.6,18.59,15.3,17a12.67,12.67,0,0,1-2.64-1.56,4.27,4.27,0,0,1-.79-1,2.6,2.6,0,0,1,0-1.41c.24-.68.49-1,2.43-2.85a7.18,7.18,0,0,0,2.09-2.92,4.25,4.25,0,0,0,0-1.77,6.52,6.52,0,0,0-2.85-3.11c-.56-.36-.81-.4-.81-.15a2.33,2.33,0,0,1-.18.45L12.4,3l-.53-.36c-.28-.21-.64-.41-.77-.49s-.46-.11-.46,0a6.21,6.21,0,0,1-.37.83s-.08,0-.17-.08c-1.15-.83-1.64-1-1.64-.73A7.33,7.33,0,0,1,7.7,3.65C6.48,5.68,5.24,6.7,4,6.7c-.56,0-.54,0-.37.64s.2.58.68.43a3.37,3.37,0,0,0,1.09-.54.86.86,0,0,1,.3-.17,1.34,1.34,0,0,1,.13.39.79.79,0,0,0,.17.4A3.5,3.5,0,0,0,7.37,7.3L7.8,7l.09.34c.12.45.19.51.62.39a4.25,4.25,0,0,0,2.17-1.54l.38-.45,0,.39A5.92,5.92,0,0,1,8.89,9.54L7.67,10.71c-2,1.93-1.89,3.51.37,5a27.41,27.41,0,0,0,2.89,1.51c.17.07.62.32,1,.54C14,19,15,20.23,15,21.48a2,2,0,0,0,0,.49h0c0,.05,0,.05.56-.1a1.89,1.89,0,0,0,.53-.21,2.41,2.41,0,0,0-.34-1.15,7.05,7.05,0,0,0-1.68-1.77,21.91,21.91,0,0,0-3.2-1.83A9.53,9.53,0,0,1,8.16,15.2a2.18,2.18,0,0,1-.74-1.55C7.42,12.79,7.86,12,9,11c1.77-1.64,2.45-2.45,2.92-3.55a2.28,2.28,0,0,0,.26-1.26A2,2,0,0,0,12,5.06l-.2-.45L12,4.3l.28-.49.09-.18L12.6,4a3.69,3.69,0,0,1,.61,1.76A3.47,3.47,0,0,1,12.94,7l-.09.25s-.21.37-.41.69A17.78,17.78,0,0,1,9.91,10.6c-1.07,1-1.43,1.62-1.47,2.47a2.05,2.05,0,0,0,.7,1.73,10.47,10.47,0,0,0,3.28,2.08c2.28,1.13,3.26,1.81,4,2.73a2.94,2.94,0,0,1,.74,1.75,1.26,1.26,0,0,0,.09.57.48.48,0,0,0,.26,0l.51-.13.29-.08,0-.28c-.13-1-1-2-2.47-3a25.52,25.52,0,0,0-3.26-1.77,8.59,8.59,0,0,1-2.23-1.43,2.09,2.09,0,0,1-.5-2.62c.26-.53.5-.83,2.35-2.6,1.51-1.45,2.15-2.58,2.15-3.79A3.67,3.67,0,0,0,13,3.48a3,3,0,0,1-.4-.42A1.85,1.85,0,0,1,13,2.33a6.74,6.74,0,0,1,1.83,1.73,2.62,2.62,0,0,1,.47,1.68,3,3,0,0,1-.55,1.84c-.45.78-.79,1.14-2.67,2.93a5.56,5.56,0,0,0-1.3,1.64,1.77,1.77,0,0,0-.21,1,1.76,1.76,0,0,0,.19.92,6.28,6.28,0,0,0,2.9,2.34,21.6,21.6,0,0,1,3.66,2c1.35,1,2,2,2,3a1.06,1.06,0,0,0,.05.47,2.83,2.83,0,0,0,1-.24C20.56,21.68,20.56,21.66,20.46,21.32ZM7.29,6.4h0a2.23,2.23,0,0,1-.9.28L6,6.72l.43-.53a15.22,15.22,0,0,0,1.89-3,3.52,3.52,0,0,1,.38-.67c.07-.08.49.2,1,.64l.39.35L9.66,4A6.7,6.7,0,0,1,7.29,6.4Zm3.58-1.11A5.8,5.8,0,0,1,9.25,6.51h0a3.3,3.3,0,0,1-.74.17l-.35,0,.39-.49a15.64,15.64,0,0,0,1.32-2,4.63,4.63,0,0,1,.28-.49c.06-.08.33.26.57.77l.28.57Zm1-1.4a1.63,1.63,0,0,1-.28.4A6.63,6.63,0,0,1,11,3.72l-.53-.56.12-.29c.2-.49.24-.51.64-.19a5.57,5.57,0,0,1,.85.78A2.78,2.78,0,0,1,11.87,3.89Z"/></svg>
+            <svg id="main_header__logo" class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                <path
+                    d="M20.46,21.32C20,19.78,18.6,18.59,15.3,17a12.67,12.67,0,0,1-2.64-1.56,4.27,4.27,0,0,1-.79-1,2.6,2.6,0,0,1,0-1.41c.24-.68.49-1,2.43-2.85a7.18,7.18,0,0,0,2.09-2.92,4.25,4.25,0,0,0,0-1.77,6.52,6.52,0,0,0-2.85-3.11c-.56-.36-.81-.4-.81-.15a2.33,2.33,0,0,1-.18.45L12.4,3l-.53-.36c-.28-.21-.64-.41-.77-.49s-.46-.11-.46,0a6.21,6.21,0,0,1-.37.83s-.08,0-.17-.08c-1.15-.83-1.64-1-1.64-.73A7.33,7.33,0,0,1,7.7,3.65C6.48,5.68,5.24,6.7,4,6.7c-.56,0-.54,0-.37.64s.2.58.68.43a3.37,3.37,0,0,0,1.09-.54.86.86,0,0,1,.3-.17,1.34,1.34,0,0,1,.13.39.79.79,0,0,0,.17.4A3.5,3.5,0,0,0,7.37,7.3L7.8,7l.09.34c.12.45.19.51.62.39a4.25,4.25,0,0,0,2.17-1.54l.38-.45,0,.39A5.92,5.92,0,0,1,8.89,9.54L7.67,10.71c-2,1.93-1.89,3.51.37,5a27.41,27.41,0,0,0,2.89,1.51c.17.07.62.32,1,.54C14,19,15,20.23,15,21.48a2,2,0,0,0,0,.49h0c0,.05,0,.05.56-.1a1.89,1.89,0,0,0,.53-.21,2.41,2.41,0,0,0-.34-1.15,7.05,7.05,0,0,0-1.68-1.77,21.91,21.91,0,0,0-3.2-1.83A9.53,9.53,0,0,1,8.16,15.2a2.18,2.18,0,0,1-.74-1.55C7.42,12.79,7.86,12,9,11c1.77-1.64,2.45-2.45,2.92-3.55a2.28,2.28,0,0,0,.26-1.26A2,2,0,0,0,12,5.06l-.2-.45L12,4.3l.28-.49.09-.18L12.6,4a3.69,3.69,0,0,1,.61,1.76A3.47,3.47,0,0,1,12.94,7l-.09.25s-.21.37-.41.69A17.78,17.78,0,0,1,9.91,10.6c-1.07,1-1.43,1.62-1.47,2.47a2.05,2.05,0,0,0,.7,1.73,10.47,10.47,0,0,0,3.28,2.08c2.28,1.13,3.26,1.81,4,2.73a2.94,2.94,0,0,1,.74,1.75,1.26,1.26,0,0,0,.09.57.48.48,0,0,0,.26,0l.51-.13.29-.08,0-.28c-.13-1-1-2-2.47-3a25.52,25.52,0,0,0-3.26-1.77,8.59,8.59,0,0,1-2.23-1.43,2.09,2.09,0,0,1-.5-2.62c.26-.53.5-.83,2.35-2.6,1.51-1.45,2.15-2.58,2.15-3.79A3.67,3.67,0,0,0,13,3.48a3,3,0,0,1-.4-.42A1.85,1.85,0,0,1,13,2.33a6.74,6.74,0,0,1,1.83,1.73,2.62,2.62,0,0,1,.47,1.68,3,3,0,0,1-.55,1.84c-.45.78-.79,1.14-2.67,2.93a5.56,5.56,0,0,0-1.3,1.64,1.77,1.77,0,0,0-.21,1,1.76,1.76,0,0,0,.19.92,6.28,6.28,0,0,0,2.9,2.34,21.6,21.6,0,0,1,3.66,2c1.35,1,2,2,2,3a1.06,1.06,0,0,0,.05.47,2.83,2.83,0,0,0,1-.24C20.56,21.68,20.56,21.66,20.46,21.32ZM7.29,6.4h0a2.23,2.23,0,0,1-.9.28L6,6.72l.43-.53a15.22,15.22,0,0,0,1.89-3,3.52,3.52,0,0,1,.38-.67c.07-.08.49.2,1,.64l.39.35L9.66,4A6.7,6.7,0,0,1,7.29,6.4Zm3.58-1.11A5.8,5.8,0,0,1,9.25,6.51h0a3.3,3.3,0,0,1-.74.17l-.35,0,.39-.49a15.64,15.64,0,0,0,1.32-2,4.63,4.63,0,0,1,.28-.49c.06-.08.33.26.57.77l.28.57Zm1-1.4a1.63,1.63,0,0,1-.28.4A6.63,6.63,0,0,1,11,3.72l-.53-.56.12-.29c.2-.49.24-.51.64-.19a5.57,5.57,0,0,1,.85.78A2.78,2.78,0,0,1,11.87,3.89Z" />
+            </svg>
             <h4 class="h4 header__company-name">RanchiMall</h4>
         </a>
-        <label class="theme-switcher" title="Change theme">
-            <input id="theme_switcher" class="theme-switcher__checkbox" type="checkbox">
-            <svg class="icon moon-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M10 6a8 8 0 0 0 11.955 6.956C21.474 18.03 17.2 22 12 22 6.477 22 2 17.523 2 12c0-5.2 3.97-9.474 9.044-9.955A7.963 7.963 0 0 0 10 6zm-6 6a8 8 0 0 0 8 8 8.006 8.006 0 0 0 6.957-4.045c-.316.03-.636.045-.957.045-5.523 0-10-4.477-10-10 0-.321.015-.64.045-.957A8.006 8.006 0 0 0 4 12zm14.164-9.709L19 2.5v1l-.836.209a2 2 0 0 0-1.455 1.455L16.5 6h-1l-.209-.836a2 2 0 0 0-1.455-1.455L13 3.5v-1l.836-.209A2 2 0 0 0 15.29.836L15.5 0h1l.209.836a2 2 0 0 0 1.455 1.455zm5 5L24 7.5v1l-.836.209a2 2 0 0 0-1.455 1.455L21.5 11h-1l-.209-.836a2 2 0 0 0-1.455-1.455L18 8.5v-1l.836-.209a2 2 0 0 0 1.455-1.455L20.5 5h1l.209.836a2 2 0 0 0 1.455 1.455z"/></svg>
-            <svg class="icon sun-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 18a6 6 0 1 1 0-12 6 6 0 0 1 0 12zm0-2a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM11 1h2v3h-2V1zm0 19h2v3h-2v-3zM3.515 4.929l1.414-1.414L7.05 5.636 5.636 7.05 3.515 4.93zM16.95 18.364l1.414-1.414 2.121 2.121-1.414 1.414-2.121-2.121zm2.121-14.85l1.414 1.415-2.121 2.121-1.414-1.414 2.121-2.121zM5.636 16.95l1.414 1.414-2.121 2.121-1.414-1.414 2.121-2.121zM23 11v2h-3v-2h3zM4 11v2H1v-2h3z"/></svg>
-        </label>
+        <theme-toggle></theme-toggle>
     </header>
     <div id="outlet_switcher" class="grid gap-1-5 hide-completely">
         <span id="outlet_switcher__floor_num" class="weight-500 color-0-8"></span>
@@ -55,8 +58,10 @@
                 <h2 class="h2 weight-700 margin-bottom-1r">Bob's Fund</h2>
                 <p>
                     Bobs Fund is a 20 year long term Bitcoin price linked product. Investors are entitled to 100 percent
-                    of Bitcoin price gains, but they must hold for 20 years. Over a very long time period, investor returns
-                    on an asset like Bitcoin should outstrip returns on conventional assets like real estate and stocks. The
+                    of Bitcoin price gains, but they must hold for 20 years. Over a very long time period, investor
+                    returns
+                    on an asset like Bitcoin should outstrip returns on conventional assets like real estate and stocks.
+                    The
                     management fees on this product is zero. RanchiMall earns by having invested an equal amount as
                     every investor, thus the interests of fund manager, and fund investors are totally aligned.
                 </p>
@@ -64,7 +69,10 @@
             <button class="outlet-label">
                 <span class="outlet-label__name">Outlet</span>
                 <span class="outlet-label__no"></span>
-                <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 13.172l4.95-4.95 1.414 1.414L12 16 5.636 9.636 7.05 8.222z"/></svg>
+                <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
+                    <path fill="none" d="M0 0h24v24H0z" />
+                    <path d="M12 13.172l4.95-4.95 1.414 1.414L12 16 5.636 9.636 7.05 8.222z" />
+                </svg>
             </button>
         </section>
         <div class="rooms__header">
@@ -75,7 +83,19 @@
             <a class="room-tile room-tile--main" href="#performance_room">
                 <div class="tile-content">
                     <div class="grid flow-column gap-1 justify-start align-center">
-                        <svg class="room-tile__icon" id="b23be00b-0d64-4bed-9d99-6f7aaf421af4" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M44.53,26.6a7.17,7.17,0,1,1,5.07-2.1h0A7.16,7.16,0,0,1,44.53,26.6Zm0-11.47a4.31,4.31,0,1,0,3,1.26A4.31,4.31,0,0,0,44.53,15.13Z"/><path d="M62.58,1.38A4.7,4.7,0,0,0,58.35.09L45.09,2.66a14.61,14.61,0,0,0-7.56,4L19.92,24.29l-9,2.23a8.75,8.75,0,0,0-4.1,2.31L.46,35.2a1.43,1.43,0,0,0,1,2.44h.08L10,37.2l1.67,1.68L6.85,41.23a1.43,1.43,0,0,0-.38,2.3l14,14a1.44,1.44,0,0,0,1,.42l.24,0a1.47,1.47,0,0,0,1.05-.78l2.35-4.79,1.61,1.6-.45,8.58a1.43,1.43,0,0,0,.85,1.38,1.51,1.51,0,0,0,.58.12,1.44,1.44,0,0,0,1-.42l6.37-6.36a8.75,8.75,0,0,0,2.31-4.1l2.23-9,17.7-17.7a14.5,14.5,0,0,0,4-7.56L63.87,5.61A4.7,4.7,0,0,0,62.58,1.38ZM21,54.05,9.91,42.92,13.78,41,23,50.18ZM8.85,30.86a5.82,5.82,0,0,1,2.76-1.56L16,28.21,10.23,34l-.37.37-4.74.25ZM34.58,52.43A5.89,5.89,0,0,1,33,55.19l-3.74,3.73.25-4.74,6.13-6.13Zm20.68-28-18,18h0l-9,9-7.85-7.86-5.31-5.3h0l-2.55-2.54,27-27a11.72,11.72,0,0,1,5.38-3L58.3,19A11.64,11.64,0,0,1,55.26,24.41Zm5.8-19.34L59,15.68,48.28,5,58.89,2.9a1.85,1.85,0,0,1,2.17,2.17Z"/><path d="M2.63,62.76a1.41,1.41,0,0,1-1-.41,1.44,1.44,0,0,1,0-2l8.12-8.13a1.44,1.44,0,0,1,2,2L3.64,62.35A1.42,1.42,0,0,1,2.63,62.76Z"/><path d="M10.75,62.76a1.43,1.43,0,0,1-1-2.44l4.06-4.07a1.43,1.43,0,0,1,2,2l-4.06,4.06A1.43,1.43,0,0,1,10.75,62.76Z"/><path d="M2.63,54.64a1.43,1.43,0,0,1-1-2.44l4.07-4.06a1.43,1.43,0,0,1,2,2L3.65,54.22A1.44,1.44,0,0,1,2.63,54.64Z"/></svg>
+                        <svg class="room-tile__icon" id="b23be00b-0d64-4bed-9d99-6f7aaf421af4" data-name="Layer 1"
+                            xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+                            <path
+                                d="M44.53,26.6a7.17,7.17,0,1,1,5.07-2.1h0A7.16,7.16,0,0,1,44.53,26.6Zm0-11.47a4.31,4.31,0,1,0,3,1.26A4.31,4.31,0,0,0,44.53,15.13Z" />
+                            <path
+                                d="M62.58,1.38A4.7,4.7,0,0,0,58.35.09L45.09,2.66a14.61,14.61,0,0,0-7.56,4L19.92,24.29l-9,2.23a8.75,8.75,0,0,0-4.1,2.31L.46,35.2a1.43,1.43,0,0,0,1,2.44h.08L10,37.2l1.67,1.68L6.85,41.23a1.43,1.43,0,0,0-.38,2.3l14,14a1.44,1.44,0,0,0,1,.42l.24,0a1.47,1.47,0,0,0,1.05-.78l2.35-4.79,1.61,1.6-.45,8.58a1.43,1.43,0,0,0,.85,1.38,1.51,1.51,0,0,0,.58.12,1.44,1.44,0,0,0,1-.42l6.37-6.36a8.75,8.75,0,0,0,2.31-4.1l2.23-9,17.7-17.7a14.5,14.5,0,0,0,4-7.56L63.87,5.61A4.7,4.7,0,0,0,62.58,1.38ZM21,54.05,9.91,42.92,13.78,41,23,50.18ZM8.85,30.86a5.82,5.82,0,0,1,2.76-1.56L16,28.21,10.23,34l-.37.37-4.74.25ZM34.58,52.43A5.89,5.89,0,0,1,33,55.19l-3.74,3.73.25-4.74,6.13-6.13Zm20.68-28-18,18h0l-9,9-7.85-7.86-5.31-5.3h0l-2.55-2.54,27-27a11.72,11.72,0,0,1,5.38-3L58.3,19A11.64,11.64,0,0,1,55.26,24.41Zm5.8-19.34L59,15.68,48.28,5,58.89,2.9a1.85,1.85,0,0,1,2.17,2.17Z" />
+                            <path
+                                d="M2.63,62.76a1.41,1.41,0,0,1-1-.41,1.44,1.44,0,0,1,0-2l8.12-8.13a1.44,1.44,0,0,1,2,2L3.64,62.35A1.42,1.42,0,0,1,2.63,62.76Z" />
+                            <path
+                                d="M10.75,62.76a1.43,1.43,0,0,1-1-2.44l4.06-4.07a1.43,1.43,0,0,1,2,2l-4.06,4.06A1.43,1.43,0,0,1,10.75,62.76Z" />
+                            <path
+                                d="M2.63,54.64a1.43,1.43,0,0,1-1-2.44l4.07-4.06a1.43,1.43,0,0,1,2,2L3.65,54.22A1.44,1.44,0,0,1,2.63,54.64Z" />
+                        </svg>
                         <h4 class="room-tile__title">Performance</h4>
                     </div>
                     <div id="performance_preview"></div>
@@ -84,13 +104,17 @@
             <a class="room-tile" href="#product_room">
                 <div class="tile-content">
                     <div class="grid flow-column gap-1 justify-start align-center">
-                        <svg class="room-tile__icon" id="b76bf456-6b89-4220-8b44-f4f7d833bad6" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M61.28,22.11c0-.05,0-.09,0-.14L58.62,6A1.68,1.68,0,0,0,57,4.6H7A1.68,1.68,0,0,0,5.38,6L2.72,22c0,.05,0,.09,0,.14s0,.09,0,.14V57.72A1.68,1.68,0,0,0,4.38,59.4H59.62a1.68,1.68,0,0,0,1.68-1.68V22.25C61.3,22.2,61.28,22.16,61.28,22.11Zm-3.64-1.54H39.34L38.51,8h17ZM27.92,23.93h8.16v6.64L33,28.41a1.7,1.7,0,0,0-1.9,0l-3.13,2.16ZM35.15,8,36,20.57H28L28.91,8ZM8.46,8H25.55l-.88,12.61H6.36ZM57.94,56H6.06V23.93h18.5v9.84a1.67,1.67,0,0,0,2.63,1.38L32,31.84l4.81,3.31a1.65,1.65,0,0,0,.95.3,1.76,1.76,0,0,0,.78-.19,1.68,1.68,0,0,0,.9-1.49V23.93h18.5Z"/></svg>
+                        <svg class="room-tile__icon" id="b76bf456-6b89-4220-8b44-f4f7d833bad6" data-name="Layer 1"
+                            xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+                            <path
+                                d="M61.28,22.11c0-.05,0-.09,0-.14L58.62,6A1.68,1.68,0,0,0,57,4.6H7A1.68,1.68,0,0,0,5.38,6L2.72,22c0,.05,0,.09,0,.14s0,.09,0,.14V57.72A1.68,1.68,0,0,0,4.38,59.4H59.62a1.68,1.68,0,0,0,1.68-1.68V22.25C61.3,22.2,61.28,22.16,61.28,22.11Zm-3.64-1.54H39.34L38.51,8h17ZM27.92,23.93h8.16v6.64L33,28.41a1.7,1.7,0,0,0-1.9,0l-3.13,2.16ZM35.15,8,36,20.57H28L28.91,8ZM8.46,8H25.55l-.88,12.61H6.36ZM57.94,56H6.06V23.93h18.5v9.84a1.67,1.67,0,0,0,2.63,1.38L32,31.84l4.81,3.31a1.65,1.65,0,0,0,.95.3,1.76,1.76,0,0,0,.78-.19,1.68,1.68,0,0,0,.9-1.49V23.93h18.5Z" />
+                        </svg>
                         <h4 class="room-tile__title">Product</h4>
                     </div>
 
                 </div>
             </a>
-<!--             <a class="room-tile" href="#purchase_room">
+            <!--             <a class="room-tile" href="#purchase_room">
                 <div class="tile-content">
                     <svg class="room-tile__icon" id="bb329e59-3d30-49a7-ac0d-b164d3b3b631" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M42.74,64a14,14,0,1,1,14-14A14,14,0,0,1,42.74,64Zm0-24.73A10.7,10.7,0,1,0,53.44,50,10.71,10.71,0,0,0,42.74,39.27Z"/><path d="M28.7,50H14.08a3.43,3.43,0,0,1-3.42-3.58l1.4-31.51h4.85V17.8a1.71,1.71,0,1,0,3.42,0V14.88H33V17.8a1.71,1.71,0,1,0,3.42,0V14.88h4.84L42.2,36c.18,0,.35,0,.54,0a13.92,13.92,0,0,1,2.9.31l-1.1-24.8H36.42V9.76a9.76,9.76,0,1,0-19.51,0v1.69H8.79L7.24,46.24a6.85,6.85,0,0,0,6.84,7.15H29.14A14.24,14.24,0,0,1,28.7,50ZM20.33,9.76A6.34,6.34,0,1,1,33,9.76v1.69H20.33Z"/><path d="M41.23,54.65a1.69,1.69,0,0,1-1.18-.49l-3-3a1.67,1.67,0,0,1,2.35-2.36l1.84,1.84,4.85-4.85a1.66,1.66,0,0,1,2.35,2.35l-6,6A1.67,1.67,0,0,1,41.23,54.65Z"/></svg>
                     <h4 class="room-tile__title">Buy</h4>
@@ -100,7 +124,10 @@
         <section class="room-container hide-completely page-layout">
             <header class="room-container__header">
                 <button class="grid flow-column gap-1 align-center" onclick="hideRoom()">
-                    <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M7.828 11H20v2H7.828l5.364 5.364-1.414 1.414L4 12l7.778-7.778 1.414 1.414z"/></svg>
+                    <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
+                        <path fill="none" d="M0 0h24v24H0z" />
+                        <path d="M7.828 11H20v2H7.828l5.364 5.364-1.414 1.414L4 12l7.778-7.778 1.414 1.414z" />
+                    </svg>
                     <h3 id="room_title" class="hide-completely"></h3>
                 </button>
             </header>
@@ -121,51 +148,79 @@
                     <section class="features-grid">
                         <div class="feature">
                             <div class="feature__icon">
-                                <svg class="icon" id="f47905c4-be19-4535-912c-ac0a41d5362d" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M55.59,38a10.43,10.43,0,0,0-3.09-4.19,12.61,12.61,0,0,0-5.4-2.46,11.57,11.57,0,0,0,5.75-4.7,13.39,13.39,0,0,0,1.86-7q0-7.62-5.86-11.46c-3.64-2.39-8.62-3.65-14.91-3.82V0H25.38V4.28H21.7V0H13.14V4.28H7.42v7.84l5.75,1.22V50.7L7.42,51.91v7.81h6.69V64h8.56V59.72h3.68V64h8.56V59.72h.42q10.37,0,15.8-4.15t5.45-12.3A14.09,14.09,0,0,0,55.59,38ZM41.35,21.11A5.14,5.14,0,0,1,39,25.77q-2.34,1.52-7.07,1.51h-5.4V14.48h6q4.45,0,6.65,1.58A5.81,5.81,0,0,1,41.35,21.11ZM41.29,48q-2,1.56-6,1.56H26.54V36.11H36a9.61,9.61,0,0,1,4.19.78,5,5,0,0,1,2.36,2.36,9.14,9.14,0,0,1,.76,4A5.66,5.66,0,0,1,41.29,48Z"/></svg>
+                                <svg class="icon" id="f47905c4-be19-4535-912c-ac0a41d5362d" data-name="Layer 1"
+                                    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+                                    <path
+                                        d="M55.59,38a10.43,10.43,0,0,0-3.09-4.19,12.61,12.61,0,0,0-5.4-2.46,11.57,11.57,0,0,0,5.75-4.7,13.39,13.39,0,0,0,1.86-7q0-7.62-5.86-11.46c-3.64-2.39-8.62-3.65-14.91-3.82V0H25.38V4.28H21.7V0H13.14V4.28H7.42v7.84l5.75,1.22V50.7L7.42,51.91v7.81h6.69V64h8.56V59.72h3.68V64h8.56V59.72h.42q10.37,0,15.8-4.15t5.45-12.3A14.09,14.09,0,0,0,55.59,38ZM41.35,21.11A5.14,5.14,0,0,1,39,25.77q-2.34,1.52-7.07,1.51h-5.4V14.48h6q4.45,0,6.65,1.58A5.81,5.81,0,0,1,41.35,21.11ZM41.29,48q-2,1.56-6,1.56H26.54V36.11H36a9.61,9.61,0,0,1,4.19.78,5,5,0,0,1,2.36,2.36,9.14,9.14,0,0,1,.76,4A5.66,5.66,0,0,1,41.29,48Z" />
+                                </svg>
                             </div>
                             <h4 class="feature__title">Bitcoin linked</h4>
                             <p class="feature__brief">Bob's Fund is a 20 year long term Bitcoin price linked product</p>
                         </div>
                         <div class="feature feature--wide">
                             <div class="feature__icon">
-                                <svg class="icon" id="a0972e55-309b-4721-ab64-f0e363b1245c" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M32,11.86a18.06,18.06,0,1,0,18,18.06A18.08,18.08,0,0,0,32,11.86Zm8.45,14.45-9.57,9.57a1.65,1.65,0,0,1-1.17.48,1.67,1.67,0,0,1-1.18-.48l-5-5a1.66,1.66,0,0,1,2.35-2.35l3.81,3.8L38.1,24a1.66,1.66,0,1,1,2.35,2.35Z"/><path d="M59.42,26.2a5.89,5.89,0,0,0-3.05-9.4h0a5.89,5.89,0,0,1-4.37-6A5.89,5.89,0,0,0,44,5a5.89,5.89,0,0,1-7.07-2.29h0a5.88,5.88,0,0,0-9.88,0A5.89,5.89,0,0,1,20,5a5.89,5.89,0,0,0-8,5.81h0a5.89,5.89,0,0,1-4.37,6,5.89,5.89,0,0,0-3,9.4h0a5.91,5.91,0,0,1,0,7.43A5.89,5.89,0,0,0,7.63,43,5.88,5.88,0,0,1,12,48.94L6.37,58.68a.34.34,0,0,0,.29.51l5.14.05a.34.34,0,0,1,.29.17l2.61,4.42a.33.33,0,0,0,.58,0l5.28-9.14a5.87,5.87,0,0,1,6.5,2.45h0a5.88,5.88,0,0,0,9.88,0h0a5.87,5.87,0,0,1,6.5-2.45l5.28,9.14a.33.33,0,0,0,.58,0l2.61-4.42a.34.34,0,0,1,.29-.17l5.14-.05a.34.34,0,0,0,.29-.51L52,48.94A5.88,5.88,0,0,1,56.37,43a5.89,5.89,0,0,0,3.05-9.4A5.91,5.91,0,0,1,59.42,26.2ZM32,50A20.06,20.06,0,1,1,52.06,29.92,20.08,20.08,0,0,1,32,50Z"/></svg>
+                                <svg class="icon" id="a0972e55-309b-4721-ab64-f0e363b1245c" data-name="Layer 1"
+                                    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+                                    <path
+                                        d="M32,11.86a18.06,18.06,0,1,0,18,18.06A18.08,18.08,0,0,0,32,11.86Zm8.45,14.45-9.57,9.57a1.65,1.65,0,0,1-1.17.48,1.67,1.67,0,0,1-1.18-.48l-5-5a1.66,1.66,0,0,1,2.35-2.35l3.81,3.8L38.1,24a1.66,1.66,0,1,1,2.35,2.35Z" />
+                                    <path
+                                        d="M59.42,26.2a5.89,5.89,0,0,0-3.05-9.4h0a5.89,5.89,0,0,1-4.37-6A5.89,5.89,0,0,0,44,5a5.89,5.89,0,0,1-7.07-2.29h0a5.88,5.88,0,0,0-9.88,0A5.89,5.89,0,0,1,20,5a5.89,5.89,0,0,0-8,5.81h0a5.89,5.89,0,0,1-4.37,6,5.89,5.89,0,0,0-3,9.4h0a5.91,5.91,0,0,1,0,7.43A5.89,5.89,0,0,0,7.63,43,5.88,5.88,0,0,1,12,48.94L6.37,58.68a.34.34,0,0,0,.29.51l5.14.05a.34.34,0,0,1,.29.17l2.61,4.42a.33.33,0,0,0,.58,0l5.28-9.14a5.87,5.87,0,0,1,6.5,2.45h0a5.88,5.88,0,0,0,9.88,0h0a5.87,5.87,0,0,1,6.5-2.45l5.28,9.14a.33.33,0,0,0,.58,0l2.61-4.42a.34.34,0,0,1,.29-.17l5.14-.05a.34.34,0,0,0,.29-.51L52,48.94A5.88,5.88,0,0,1,56.37,43a5.89,5.89,0,0,0,3.05-9.4A5.91,5.91,0,0,1,59.42,26.2ZM32,50A20.06,20.06,0,1,1,52.06,29.92,20.08,20.08,0,0,1,32,50Z" />
+                                </svg>
                             </div>
                             <h4 class="feature__title">Better returns than conventional assets</h4>
-                            <p class="feature__brief">Over a very long time period, Bitcoin returns should outstrip returns on conventional assets like real estate and stocks</p>
+                            <p class="feature__brief">Over a very long time period, Bitcoin returns should outstrip
+                                returns on conventional assets like real estate and stocks</p>
                         </div>
                         <div class="feature feature--wide">
                             <div class="feature__icon">
-                                <svg class="icon" id="a9cf0968-17a3-4e2e-8dcf-10d366d12d28" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M17.28,29a16.35,16.35,0,0,1-7.63-1.64,11.32,11.32,0,0,1-4.77-4.54,13.17,13.17,0,0,1-1.63-6.61V12.88A13.3,13.3,0,0,1,4.88,6.25,11.52,11.52,0,0,1,9.6,1.67,15.9,15.9,0,0,1,17.2,0a15.94,15.94,0,0,1,7.63,1.67,11.43,11.43,0,0,1,4.71,4.55,13.5,13.5,0,0,1,1.6,6.66v3.29a13.36,13.36,0,0,1-1.6,6.61,11.33,11.33,0,0,1-4.68,4.54A16,16,0,0,1,17.28,29Zm0-8a3.94,3.94,0,0,0,3.21-1.39,5.13,5.13,0,0,0,1.16-3.4V12.88a5.31,5.31,0,0,0-1.16-3.47A4,4,0,0,0,17.2,8a3.94,3.94,0,0,0-3.27,1.41,5.35,5.35,0,0,0-1.14,3.47v3.29A5.11,5.11,0,0,0,14,19.59,4.09,4.09,0,0,0,17.28,21Zm3,37.61-6.93-3.43L43.76,6.46,50.7,9.88ZM46.89,64a16.15,16.15,0,0,1-7.64-1.67,11.75,11.75,0,0,1-4.81-4.58,13,13,0,0,1-1.67-6.58V47.91a13.19,13.19,0,0,1,1.63-6.58,11.41,11.41,0,0,1,4.77-4.58,16.11,16.11,0,0,1,7.63-1.67,16,16,0,0,1,7.6,1.65,11.39,11.39,0,0,1,4.72,4.55,13.3,13.3,0,0,1,1.63,6.63v3.26a13.5,13.5,0,0,1-1.61,6.63,11.29,11.29,0,0,1-4.68,4.55A15.87,15.87,0,0,1,46.89,64Zm0-8c1.68,0,2.81-.42,3.4-1.26a6.33,6.33,0,0,0,.88-3.61V47.91a5.31,5.31,0,0,0-1.12-3.42,3.88,3.88,0,0,0-3.25-1.41,4,4,0,0,0-3.33,1.41,5.31,5.31,0,0,0-1.12,3.42v3.26a4.93,4.93,0,0,0,1.33,3.42A4.17,4.17,0,0,0,46.89,56Z"/></svg>
+                                <svg class="icon" id="a9cf0968-17a3-4e2e-8dcf-10d366d12d28" data-name="Layer 1"
+                                    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+                                    <path
+                                        d="M17.28,29a16.35,16.35,0,0,1-7.63-1.64,11.32,11.32,0,0,1-4.77-4.54,13.17,13.17,0,0,1-1.63-6.61V12.88A13.3,13.3,0,0,1,4.88,6.25,11.52,11.52,0,0,1,9.6,1.67,15.9,15.9,0,0,1,17.2,0a15.94,15.94,0,0,1,7.63,1.67,11.43,11.43,0,0,1,4.71,4.55,13.5,13.5,0,0,1,1.6,6.66v3.29a13.36,13.36,0,0,1-1.6,6.61,11.33,11.33,0,0,1-4.68,4.54A16,16,0,0,1,17.28,29Zm0-8a3.94,3.94,0,0,0,3.21-1.39,5.13,5.13,0,0,0,1.16-3.4V12.88a5.31,5.31,0,0,0-1.16-3.47A4,4,0,0,0,17.2,8a3.94,3.94,0,0,0-3.27,1.41,5.35,5.35,0,0,0-1.14,3.47v3.29A5.11,5.11,0,0,0,14,19.59,4.09,4.09,0,0,0,17.28,21Zm3,37.61-6.93-3.43L43.76,6.46,50.7,9.88ZM46.89,64a16.15,16.15,0,0,1-7.64-1.67,11.75,11.75,0,0,1-4.81-4.58,13,13,0,0,1-1.67-6.58V47.91a13.19,13.19,0,0,1,1.63-6.58,11.41,11.41,0,0,1,4.77-4.58,16.11,16.11,0,0,1,7.63-1.67,16,16,0,0,1,7.6,1.65,11.39,11.39,0,0,1,4.72,4.55,13.3,13.3,0,0,1,1.63,6.63v3.26a13.5,13.5,0,0,1-1.61,6.63,11.29,11.29,0,0,1-4.68,4.55A15.87,15.87,0,0,1,46.89,64Zm0-8c1.68,0,2.81-.42,3.4-1.26a6.33,6.33,0,0,0,.88-3.61V47.91a5.31,5.31,0,0,0-1.12-3.42,3.88,3.88,0,0,0-3.25-1.41,4,4,0,0,0-3.33,1.41,5.31,5.31,0,0,0-1.12,3.42v3.26a4.93,4.93,0,0,0,1.33,3.42A4.17,4.17,0,0,0,46.89,56Z" />
+                                </svg>
                             </div>
                             <h4 class="feature__title">Get 100% of gains</h4>
                             <p class="feature__brief">Investors are entitled to 100% of Bitcoin price gains</p>
                         </div>
                         <div class="feature">
                             <div class="feature__icon">
-                                <svg class="icon" id="b25d5f7d-dd5a-4cc1-a2c9-37dbecdeaff1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M32.11,64q-10.12,0-16-6.41t-5.9-19V25.46q0-12.56,5.9-19T32,0Q42,0,47.89,6.45t5.92,19V38.58q0,12.6-5.87,19T32.11,64Zm0-11.41a5.53,5.53,0,0,0,5-3q1.76-3,1.75-10.15V24.52c0-4.67-.6-8-1.79-10a5.87,5.87,0,0,0-10.26,0q-1.76,3-1.75,10.06V39.43q0,7.18,1.75,10.17A5.7,5.7,0,0,0,32.11,52.59Z"/></svg>
+                                <svg class="icon" id="b25d5f7d-dd5a-4cc1-a2c9-37dbecdeaff1" data-name="Layer 1"
+                                    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+                                    <path
+                                        d="M32.11,64q-10.12,0-16-6.41t-5.9-19V25.46q0-12.56,5.9-19T32,0Q42,0,47.89,6.45t5.92,19V38.58q0,12.6-5.87,19T32.11,64Zm0-11.41a5.53,5.53,0,0,0,5-3q1.76-3,1.75-10.15V24.52c0-4.67-.6-8-1.79-10a5.87,5.87,0,0,0-10.26,0q-1.76,3-1.75,10.06V39.43q0,7.18,1.75,10.17A5.7,5.7,0,0,0,32.11,52.59Z" />
+                                </svg>
                             </div>
                             <h4 class="feature__title">No management fee</h4>
                             <p class="feature__brief">The management fees on this product is zero</p>
                         </div>
                         <div class="feature">
                             <div class="feature__icon">
-                                <svg class="icon" id="e0287cba-7cef-4217-aee4-c8ac3e32d7a5" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M49.52,20.65a1,1,0,0,1,0-1.16L56.94,9a1,1,0,0,0-.83-1.58H18.32V2.52a2.52,2.52,0,1,0-5,0V59H9.4a2.52,2.52,0,1,0,0,5H22.21a2.52,2.52,0,0,0,0-5H18.32V32.73H56.11a1,1,0,0,0,.83-1.59Z"/></svg>
+                                <svg class="icon" id="e0287cba-7cef-4217-aee4-c8ac3e32d7a5" data-name="Layer 1"
+                                    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+                                    <path
+                                        d="M49.52,20.65a1,1,0,0,1,0-1.16L56.94,9a1,1,0,0,0-.83-1.58H18.32V2.52a2.52,2.52,0,1,0-5,0V59H9.4a2.52,2.52,0,1,0,0,5H22.21a2.52,2.52,0,0,0,0-5H18.32V32.73H56.11a1,1,0,0,0,.83-1.59Z" />
+                                </svg>
                             </div>
                             <h4 class="feature__title">Aligned goals</h4>
-                            <p class="feature__brief">RanchiMall earns by having invested an equal amount as every investor, thus the interests of fund manager, and fund investors are totally aligned</p>
+                            <p class="feature__brief">RanchiMall earns by having invested an equal amount as every
+                                investor, thus the interests of fund manager, and fund investors are totally aligned</p>
                         </div>
                     </section>
                     <p class="margin-bottom-3r">
-                        Bobs Fund allows customers to take a direct share in Bitcoin and they are automatically guided into a
+                        Bobs Fund allows customers to take a direct share in Bitcoin and they are automatically guided
+                        into a
                         long term investment plan. Bitcoin is a long term investors paradise with supply artificially
-                        constrained, and demand only growing. There are no price guarantees in this product. But the long
-                        duration of the investment ensures that customers will get an outsized rate of return. RanchiMall as
+                        constrained, and demand only growing. There are no price guarantees in this product. But the
+                        long
+                        duration of the investment ensures that customers will get an outsized rate of return.
+                        RanchiMall as
                         Fund Manager does not charge management fees.
                     </p>
                     <h4 class="h4 margin-bottom-1r">Risk Management</h4>
                     <p class="margin-bottom-3r">
                         There is no price risk for RanchiMall in Bobs Fund. But since this is a long term
-                        product, information security risks are high to maintain Bitcoins safely. Bitcoin keys must be split
+                        product, information security risks are high to maintain Bitcoins safely. Bitcoin keys must be
+                        split
                         using Shamir Secret Key Share algorithm, and should be recombined at the time of redemption. The
                         number of shares should have enough redundancy so that if some holders are not around, the keys
                         must still be recovered.
@@ -173,12 +228,15 @@
                     <h4 class="h4 margin-bottom-1r">Founder Notes</h4>
                     <p class="margin-bottom-3r">
                         Bobs Fund was first issued in my MBA classmates WhatsApp group, and restricted only to my
-                        classmates in June 2017. The product had a long term duration of 20 years, and it needed lot of trust
+                        classmates in June 2017. The product had a long term duration of 20 years, and it needed lot of
+                        trust
                         which my classamtes had in me. We kept this product concept under observation and testing for 4
-                        years, before exploring options to make it public. Another objective was to try out an idea where
+                        years, before exploring options to make it public. Another objective was to try out an idea
+                        where
                         fund management expenses are nil, as fund management fees eats up a lot of customer returns over
                         long term. Instead we made an equal investment as every contributing member did, and we hope to
-                        earn over the long life time of this product. Over time we realized, we could also use the Bitcoin as
+                        earn over the long life time of this product. Over time we realized, we could also use the
+                        Bitcoin as
                         collateral for DeFi products, and that gives us an additional earning stream.
                     </p>
                 </section>
@@ -192,7 +250,7 @@
             </footer>
         </section>
         <section>
-            <a class="ext-link-tile" href="https://ranchimall.github.io/bobs-fund/" target="_blank" >
+            <a class="ext-link-tile" href="https://ranchimall.github.io/bobs-fund/" target="_blank">
                 <div class="grid">
                     <h4 class="tile__title">See Bob's Fund in action</h4>
                     <p class="tile__brief">Visit the website to see investors and asset performance</p>
@@ -202,9 +260,10 @@
         </section>
     </main>
 
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/chart.js@3.3.2/dist/chart.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js"></script>
     <script src="assets/js/components.js"></script>
+    <script src="https://unpkg.com/uhtml@3.0.1/es.js"></script>
     <script src="assets/js/index.js"></script>
     <script>
         const bobFund = [
@@ -466,43 +525,33 @@
         }).catch(error => console.error(error))
 
         function calcNetValue(obj) {
-            let {isHistorical = false, BTC_base, USD_base, amount, fee, histBtc, histUsd} = obj
+            let { isHistorical = false, BTC_base, USD_base, amount, fee, histBtc, histUsd } = obj
             let gain, interest, net = 0, currentValue = 0;
-            console.info(obj)
-            if(isHistorical){
+            if (isHistorical) {
                 gain = (histBtc - BTC_base) / BTC_base;
             }
-            else{
+            else {
                 gain = (BTC_current - BTC_base) / BTC_base;
             }
             interest = gain * (1 - fee)
             net = amount / USD_base;
             net += net * interest;
-            if(isHistorical){
+            if (isHistorical) {
                 currentValue = net * histUsd
             }
-            else{
+            else {
                 currentValue = net * USD_current
             }
             percentGain = ((currentValue - amount) / amount) * 100
             return [currentValue, percentGain.toFixed(0)];
         }
-        function renderAllFundInvestors(){
-            const frag = document.createDocumentFragment()
-            const timelineItemsFrag = document.createDocumentFragment()
+        function renderAllFundInvestors() {
             const randIndex = getRandom(0, bobFund.length - 1)
-            getRef('bobs_fund_timeline').innerHTML = ''
-            bobFund.forEach((fund, index) => {
-                const {release, invested, investors, href, USD_base, BTC_base} = fund
-                const timelineItem = create('li', {className: 'timeline-item'})
-
-                const tilelineItemHeader = create('header', {
-                    className: 'timeline-item__header',
-                    text: getFormatedTime(release, true)
-                })
-
-                if(fund.hasOwnProperty('investors')){
-                    investors.forEach(investor => {
+            const timelineItems = bobFund.map((fund, index) => {
+                const { release, invested, investors, href, USD_base, BTC_base } = fund
+                let timelineContents
+                if (fund.hasOwnProperty('investors')) {
+                    const fundRows = investors.map(investor => {
                         let obj = {
                             BTC_base,
                             USD_base,
@@ -512,51 +561,35 @@
                         let [currentValue, gain] = calcNetValue(obj)
                         currentValue = parseFloat(currentValue.toFixed(2))
                         timeElapsed = (new Date().getFullYear() - 2017)
-                        frag.append(render.bobFundRow({...investor, currentValue, gain, timeElapsed}))
-                    })
-                    const fundContainer = create('div', {
-                        className: 'grid series-container series-container--bobs-fund'
-                    })
-
-                    const heading = create('h4', {
-                        className: 'margin-bottom-1r margin-top-1-5',
-                        text: 'Fund investors'
-                    })
-
-                    fundContainer.append(frag)
-                    timelineItem.append(heading, fundContainer)
-                }
-                else{
-                    const fundCard = create('div', {
-                        className: 'grid card'
+                        return render.bobFundRow({ ...investor, currentValue, gain, timeElapsed })
                     })
+                    timelineContents = html`<div class="grid series-container series-container--bobs-fund"> ${fundRows} </div>`;
+                } else {
                     let obj = {
-                            BTC_base,
-                            USD_base,
-                            amount: invested,
-                            fee: 0
-                        }
+                        BTC_base,
+                        USD_base,
+                        amount: invested,
+                        fee: 0
+                    }
                     let [currentValue, gain] = calcNetValue(obj)
-                        currentValue = parseFloat(currentValue.toFixed(2))
-                    fundCard.innerHTML = `
-                        <div class="flex space-between">
-                            <div class="grid">
-                                <h5 class="label color-0-8 weight-500">Total fund investment</h5>
-                                <h3 class="value original-value">${invested.toLocaleString('en-IN', {style: 'currency', currency: 'INR'})}</h3>
-                            </div>
-                            <div class="grid justify-right text-align-right">
-                                <h4 class="label color-0-8 weight-500">Current value</h4>
-                                <h3 class="value current-value" style="color: var(--green)">${currentValue.toLocaleString('en-IN', {style: 'currency', currency: 'INR'})}</h3>
+                    currentValue = parseFloat(currentValue.toFixed(2))
+                    timelineContents = html`
+                        <div class="grid card">
+                            <div class="flex space-between">
+                                <div class="grid">
+                                    <h5 class="label color-0-8 weight-500">Total fund investment</h5>
+                                    <h3 class="value original-value">${formatAmount(invested, 'INR')}</h3>
+                                </div>
+                                <div class="grid justify-right text-align-right">
+                                    <h4 class="label color-0-8 weight-500">Current value</h4>
+                                    <h3 class="value current-value" style="color: var(--green)">${formatAmount(currentValue, 'INR')}</h3>
+                                </div>
                             </div>
+                            <a class="button button--filled justify-right" href='${href}' target="_blank">See investors</a>
                         </div>
-                        <a class="button button--filled justify-right" href='${href}' target="_blank">See investors</a>
                     `
-                    timelineItem.append(fundCard)
                 }
-                timelineItem.prepend(tilelineItemHeader)
-                timelineItemsFrag.append(timelineItem)
-                
-                if(index === 0){
+                if (index === 0) {
                     let obj = {
                         BTC_base,
                         USD_base,
@@ -565,31 +598,37 @@
                         release
                     }
                     renderGraph(obj)
-                    const fundCard = create('div', {
-                        className: 'grid card'
-                    })
                     let [currentValue, gain] = calcNetValue(obj)
-                        currentValue = parseFloat(currentValue.toFixed(2))
-                    fundCard.innerHTML = `
-                        <div class="grid">
-                            <h5 class="label color-0-8 weight-500">Fund start date</h5>
-                            <h3 class="value">${getFormatedTime(release, true)}</h3>
-                        </div>
-                        <div class="flex space-between">
+                    currentValue = parseFloat(currentValue.toFixed(2))
+                    const fundCard = html`
+                        <div class="grid card">
                             <div class="grid">
-                                <h5 class="label color-0-8 weight-500">Total fund investment</h5>
-                                <h3 class="value original-value">${invested.toLocaleString('en-IN', {style: 'currency', currency: 'INR'})}</h3>
+                                <h5 class="label color-0-8 weight-500">Fund start date</h5>
+                                <h3 class="value">${getFormatedTime(release, true)}</h3>
                             </div>
-                            <div class="grid justify-right text-align-right">
-                                <h4 class="label color-0-8 weight-500">Current value</h4>
-                                <h3 class="value current-value" style="color: var(--green)">${currentValue.toLocaleString('en-IN', {style: 'currency', currency: 'INR'})}</h3>
+                            <div class="flex space-between">
+                                <div class="grid">
+                                    <h5 class="label color-0-8 weight-500">Total fund investment</h5>
+                                    <h3 class="value original-value">${formatAmount(invested, 'INR')}</h3>
+                                </div>
+                                <div class="grid justify-right text-align-right">
+                                    <h4 class="label color-0-8 weight-500">Current value</h4>
+                                    <h3 class="value current-value" style="color: var(--green)">${formatAmount(currentValue, 'INR')}</h3>
+                                </div>
                             </div>
                         </div>
                     `
-                    getRef('performance_preview').append(fundCard)
+                    renderElem(getRef('performance_preview'), fundCard)
                 }
+                return html`
+                    <li class="timeline-item">
+                        <h4 class="timeline-item__header">${getFormatedTime(release, true)}</h4>
+                        <h4 class="margin-bottom-1r margin-top-1-5">Fund investors</h4>
+                        ${timelineContents}
+                    </li>
+                `;
             })
-            getRef('bobs_fund_timeline').append(timelineItemsFrag)
+            renderElem(getRef('bobs_fund_timeline'), html`${timelineItems}`)
         }
 
         async function getPrices() {
@@ -602,7 +641,7 @@
         let dates = []
         let historicalData = []
         let tableOfData = []
-            
+
         async function getData(obj) {
             let [btcPrices, inrPrices] = await getPrices()
             btcPrices = btcPrices['Time Series (Digital Currency Monthly)']
@@ -626,7 +665,7 @@
                     let histBtc = parseFloat(allBtcPrices[index])
                     let histUsd = parseFloat(inrPrices[dataPoint]['1. open'])
                     obj.isHistorical = true
-                    let [currentValue, gain] = calcNetValue({...obj, histBtc, histUsd})
+                    let [currentValue, gain] = calcNetValue({ ...obj, histBtc, histUsd })
                     // console.log(currentValue)
                     historicalData.push(currentValue)
                     index++
@@ -644,14 +683,14 @@
         let textColor
         let myChart
 
-        function selectGraphColors(){
+        function selectGraphColors() {
             gradientFill = ctx.createLinearGradient(200, 0, 200, 400);
             let cssTextColor = getComputedStyle(document.body).getPropertyValue('--text-color')
             gradientFill.addColorStop(0, `rgba(${cssTextColor}, 0.2)`);
             gradientFill.addColorStop(1, "transparent");
-            if(myChart){
+            if (myChart) {
                 lineColor = ctx.createLinearGradient(0, 0, myChart.chartArea.width, 0)
-            }else{
+            } else {
                 lineColor = ctx.createLinearGradient(0, 0, 500, 0)
             }
             lineColor.addColorStop(0, "#f49080");
@@ -659,13 +698,13 @@
             // lineColor = getComputedStyle(document.body).getPropertyValue('--secondary-text-color');
             textColor = `rgba(${cssTextColor}, 0.8)`
         }
-        
+
         async function renderGraph(obj) {
             await getData(obj)
             selectGraphColors()
             getRef('line_sample').classList.remove('hide-completely')
             getRef('graph_legend').textContent = `${getFormatedTime(obj.release, true)} fund performace`
-            
+
             myChart = new Chart(ctx, {
                 type: 'line',
                 data: {
@@ -715,7 +754,7 @@
             });
         }
 
-        getRef("theme_switcher").addEventListener("change", function (e) {
+        document.addEventListener("themechange", function (e) {
             selectGraphColors()
             myChart.data.datasets[0].borderColor = lineColor
             myChart.data.datasets[0].backgroundColor = gradientFill
@@ -726,4 +765,5 @@
         });
     </script>
 </body>
+
 </html>
\ No newline at end of file
diff --git a/floblockchaincontract.html b/floblockchaincontract.html
index 0c4ceed..71f8e2f 100644
--- a/floblockchaincontract.html
+++ b/floblockchaincontract.html
@@ -24,7 +24,8 @@
             <div class="grid">
                 <h4 class="h4 phase__title"></h4>
                 <h5 class="h5 phase__date weight-500 color-0-8"></h5>
-                <p class="phase__description color-0-8">Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime nihil doloremque, mollitia dolor minima et.</p>
+                <p class="phase__description color-0-8">Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime
+                    nihil doloremque, mollitia dolor minima et.</p>
             </div>
         </li>
     </template>
@@ -56,22 +57,24 @@
         </header>
         <ul id="floor_list" class="grid"></ul>
     </section>
-    <header id="main_header" class="grid align-center full-bleed">
+    <header id="main_header" class="full-bleed">
         <button id="elevator_button" class="button" onclick="showSiteMap()">
-            <svg class="icon button__icon--left" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 3L16.3301 10.5H7.66987L12 3Z"/><path d="M12 21L7.66987 13.5L16.3301 13.5L12 21Z"/></svg>
+            <svg class="icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M12 3L16.3301 10.5H7.66987L12 3Z" />
+                <path d="M12 21L7.66987 13.5L16.3301 13.5L12 21Z" />
+            </svg>
             <span class="button__label">
                 Elevator
             </span>
         </button>
         <a href="index.html" class="main-logo flex align-center page-link justify-self-center" data-target="home_page">
-            <svg id="main_header__logo" class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20.46,21.32C20,19.78,18.6,18.59,15.3,17a12.67,12.67,0,0,1-2.64-1.56,4.27,4.27,0,0,1-.79-1,2.6,2.6,0,0,1,0-1.41c.24-.68.49-1,2.43-2.85a7.18,7.18,0,0,0,2.09-2.92,4.25,4.25,0,0,0,0-1.77,6.52,6.52,0,0,0-2.85-3.11c-.56-.36-.81-.4-.81-.15a2.33,2.33,0,0,1-.18.45L12.4,3l-.53-.36c-.28-.21-.64-.41-.77-.49s-.46-.11-.46,0a6.21,6.21,0,0,1-.37.83s-.08,0-.17-.08c-1.15-.83-1.64-1-1.64-.73A7.33,7.33,0,0,1,7.7,3.65C6.48,5.68,5.24,6.7,4,6.7c-.56,0-.54,0-.37.64s.2.58.68.43a3.37,3.37,0,0,0,1.09-.54.86.86,0,0,1,.3-.17,1.34,1.34,0,0,1,.13.39.79.79,0,0,0,.17.4A3.5,3.5,0,0,0,7.37,7.3L7.8,7l.09.34c.12.45.19.51.62.39a4.25,4.25,0,0,0,2.17-1.54l.38-.45,0,.39A5.92,5.92,0,0,1,8.89,9.54L7.67,10.71c-2,1.93-1.89,3.51.37,5a27.41,27.41,0,0,0,2.89,1.51c.17.07.62.32,1,.54C14,19,15,20.23,15,21.48a2,2,0,0,0,0,.49h0c0,.05,0,.05.56-.1a1.89,1.89,0,0,0,.53-.21,2.41,2.41,0,0,0-.34-1.15,7.05,7.05,0,0,0-1.68-1.77,21.91,21.91,0,0,0-3.2-1.83A9.53,9.53,0,0,1,8.16,15.2a2.18,2.18,0,0,1-.74-1.55C7.42,12.79,7.86,12,9,11c1.77-1.64,2.45-2.45,2.92-3.55a2.28,2.28,0,0,0,.26-1.26A2,2,0,0,0,12,5.06l-.2-.45L12,4.3l.28-.49.09-.18L12.6,4a3.69,3.69,0,0,1,.61,1.76A3.47,3.47,0,0,1,12.94,7l-.09.25s-.21.37-.41.69A17.78,17.78,0,0,1,9.91,10.6c-1.07,1-1.43,1.62-1.47,2.47a2.05,2.05,0,0,0,.7,1.73,10.47,10.47,0,0,0,3.28,2.08c2.28,1.13,3.26,1.81,4,2.73a2.94,2.94,0,0,1,.74,1.75,1.26,1.26,0,0,0,.09.57.48.48,0,0,0,.26,0l.51-.13.29-.08,0-.28c-.13-1-1-2-2.47-3a25.52,25.52,0,0,0-3.26-1.77,8.59,8.59,0,0,1-2.23-1.43,2.09,2.09,0,0,1-.5-2.62c.26-.53.5-.83,2.35-2.6,1.51-1.45,2.15-2.58,2.15-3.79A3.67,3.67,0,0,0,13,3.48a3,3,0,0,1-.4-.42A1.85,1.85,0,0,1,13,2.33a6.74,6.74,0,0,1,1.83,1.73,2.62,2.62,0,0,1,.47,1.68,3,3,0,0,1-.55,1.84c-.45.78-.79,1.14-2.67,2.93a5.56,5.56,0,0,0-1.3,1.64,1.77,1.77,0,0,0-.21,1,1.76,1.76,0,0,0,.19.92,6.28,6.28,0,0,0,2.9,2.34,21.6,21.6,0,0,1,3.66,2c1.35,1,2,2,2,3a1.06,1.06,0,0,0,.05.47,2.83,2.83,0,0,0,1-.24C20.56,21.68,20.56,21.66,20.46,21.32ZM7.29,6.4h0a2.23,2.23,0,0,1-.9.28L6,6.72l.43-.53a15.22,15.22,0,0,0,1.89-3,3.52,3.52,0,0,1,.38-.67c.07-.08.49.2,1,.64l.39.35L9.66,4A6.7,6.7,0,0,1,7.29,6.4Zm3.58-1.11A5.8,5.8,0,0,1,9.25,6.51h0a3.3,3.3,0,0,1-.74.17l-.35,0,.39-.49a15.64,15.64,0,0,0,1.32-2,4.63,4.63,0,0,1,.28-.49c.06-.08.33.26.57.77l.28.57Zm1-1.4a1.63,1.63,0,0,1-.28.4A6.63,6.63,0,0,1,11,3.72l-.53-.56.12-.29c.2-.49.24-.51.64-.19a5.57,5.57,0,0,1,.85.78A2.78,2.78,0,0,1,11.87,3.89Z"/></svg>
+            <svg id="main_header__logo" class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                <path
+                    d="M20.46,21.32C20,19.78,18.6,18.59,15.3,17a12.67,12.67,0,0,1-2.64-1.56,4.27,4.27,0,0,1-.79-1,2.6,2.6,0,0,1,0-1.41c.24-.68.49-1,2.43-2.85a7.18,7.18,0,0,0,2.09-2.92,4.25,4.25,0,0,0,0-1.77,6.52,6.52,0,0,0-2.85-3.11c-.56-.36-.81-.4-.81-.15a2.33,2.33,0,0,1-.18.45L12.4,3l-.53-.36c-.28-.21-.64-.41-.77-.49s-.46-.11-.46,0a6.21,6.21,0,0,1-.37.83s-.08,0-.17-.08c-1.15-.83-1.64-1-1.64-.73A7.33,7.33,0,0,1,7.7,3.65C6.48,5.68,5.24,6.7,4,6.7c-.56,0-.54,0-.37.64s.2.58.68.43a3.37,3.37,0,0,0,1.09-.54.86.86,0,0,1,.3-.17,1.34,1.34,0,0,1,.13.39.79.79,0,0,0,.17.4A3.5,3.5,0,0,0,7.37,7.3L7.8,7l.09.34c.12.45.19.51.62.39a4.25,4.25,0,0,0,2.17-1.54l.38-.45,0,.39A5.92,5.92,0,0,1,8.89,9.54L7.67,10.71c-2,1.93-1.89,3.51.37,5a27.41,27.41,0,0,0,2.89,1.51c.17.07.62.32,1,.54C14,19,15,20.23,15,21.48a2,2,0,0,0,0,.49h0c0,.05,0,.05.56-.1a1.89,1.89,0,0,0,.53-.21,2.41,2.41,0,0,0-.34-1.15,7.05,7.05,0,0,0-1.68-1.77,21.91,21.91,0,0,0-3.2-1.83A9.53,9.53,0,0,1,8.16,15.2a2.18,2.18,0,0,1-.74-1.55C7.42,12.79,7.86,12,9,11c1.77-1.64,2.45-2.45,2.92-3.55a2.28,2.28,0,0,0,.26-1.26A2,2,0,0,0,12,5.06l-.2-.45L12,4.3l.28-.49.09-.18L12.6,4a3.69,3.69,0,0,1,.61,1.76A3.47,3.47,0,0,1,12.94,7l-.09.25s-.21.37-.41.69A17.78,17.78,0,0,1,9.91,10.6c-1.07,1-1.43,1.62-1.47,2.47a2.05,2.05,0,0,0,.7,1.73,10.47,10.47,0,0,0,3.28,2.08c2.28,1.13,3.26,1.81,4,2.73a2.94,2.94,0,0,1,.74,1.75,1.26,1.26,0,0,0,.09.57.48.48,0,0,0,.26,0l.51-.13.29-.08,0-.28c-.13-1-1-2-2.47-3a25.52,25.52,0,0,0-3.26-1.77,8.59,8.59,0,0,1-2.23-1.43,2.09,2.09,0,0,1-.5-2.62c.26-.53.5-.83,2.35-2.6,1.51-1.45,2.15-2.58,2.15-3.79A3.67,3.67,0,0,0,13,3.48a3,3,0,0,1-.4-.42A1.85,1.85,0,0,1,13,2.33a6.74,6.74,0,0,1,1.83,1.73,2.62,2.62,0,0,1,.47,1.68,3,3,0,0,1-.55,1.84c-.45.78-.79,1.14-2.67,2.93a5.56,5.56,0,0,0-1.3,1.64,1.77,1.77,0,0,0-.21,1,1.76,1.76,0,0,0,.19.92,6.28,6.28,0,0,0,2.9,2.34,21.6,21.6,0,0,1,3.66,2c1.35,1,2,2,2,3a1.06,1.06,0,0,0,.05.47,2.83,2.83,0,0,0,1-.24C20.56,21.68,20.56,21.66,20.46,21.32ZM7.29,6.4h0a2.23,2.23,0,0,1-.9.28L6,6.72l.43-.53a15.22,15.22,0,0,0,1.89-3,3.52,3.52,0,0,1,.38-.67c.07-.08.49.2,1,.64l.39.35L9.66,4A6.7,6.7,0,0,1,7.29,6.4Zm3.58-1.11A5.8,5.8,0,0,1,9.25,6.51h0a3.3,3.3,0,0,1-.74.17l-.35,0,.39-.49a15.64,15.64,0,0,0,1.32-2,4.63,4.63,0,0,1,.28-.49c.06-.08.33.26.57.77l.28.57Zm1-1.4a1.63,1.63,0,0,1-.28.4A6.63,6.63,0,0,1,11,3.72l-.53-.56.12-.29c.2-.49.24-.51.64-.19a5.57,5.57,0,0,1,.85.78A2.78,2.78,0,0,1,11.87,3.89Z" />
+            </svg>
             <h4 class="h4 header__company-name">RanchiMall</h4>
         </a>
-        <label class="theme-switcher" title="Change theme">
-            <input id="theme_switcher" class="theme-switcher__checkbox" type="checkbox">
-            <svg class="icon moon-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M10 6a8 8 0 0 0 11.955 6.956C21.474 18.03 17.2 22 12 22 6.477 22 2 17.523 2 12c0-5.2 3.97-9.474 9.044-9.955A7.963 7.963 0 0 0 10 6zm-6 6a8 8 0 0 0 8 8 8.006 8.006 0 0 0 6.957-4.045c-.316.03-.636.045-.957.045-5.523 0-10-4.477-10-10 0-.321.015-.64.045-.957A8.006 8.006 0 0 0 4 12zm14.164-9.709L19 2.5v1l-.836.209a2 2 0 0 0-1.455 1.455L16.5 6h-1l-.209-.836a2 2 0 0 0-1.455-1.455L13 3.5v-1l.836-.209A2 2 0 0 0 15.29.836L15.5 0h1l.209.836a2 2 0 0 0 1.455 1.455zm5 5L24 7.5v1l-.836.209a2 2 0 0 0-1.455 1.455L21.5 11h-1l-.209-.836a2 2 0 0 0-1.455-1.455L18 8.5v-1l.836-.209a2 2 0 0 0 1.455-1.455L20.5 5h1l.209.836a2 2 0 0 0 1.455 1.455z"/></svg>
-            <svg class="icon sun-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 18a6 6 0 1 1 0-12 6 6 0 0 1 0 12zm0-2a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM11 1h2v3h-2V1zm0 19h2v3h-2v-3zM3.515 4.929l1.414-1.414L7.05 5.636 5.636 7.05 3.515 4.93zM16.95 18.364l1.414-1.414 2.121 2.121-1.414 1.414-2.121-2.121zm2.121-14.85l1.414 1.415-2.121 2.121-1.414-1.414 2.121-2.121zM5.636 16.95l1.414 1.414-2.121 2.121-1.414-1.414 2.121-2.121zM23 11v2h-3v-2h3zM4 11v2H1v-2h3z"/></svg>
-        </label>
+        <theme-toggle></theme-toggle>
     </header>
     <div id="outlet_switcher" class="grid gap-1-5 hide">
         <div class="flex align-center">
@@ -95,9 +98,16 @@
     <main class="page">
         <section class="outlet-hero-section grid margin-bottom-3r">
             <button class="outlet-label">
-                <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M21 13.242V20h1v2H2v-2h1v-6.758A4.496 4.496 0 0 1 1 9.5c0-.827.224-1.624.633-2.303L4.345 2.5a1 1 0 0 1 .866-.5H18.79a1 1 0 0 1 .866.5l2.702 4.682A4.496 4.496 0 0 1 21 13.242zm-2 .73a4.496 4.496 0 0 1-3.75-1.36A4.496 4.496 0 0 1 12 14.001a4.496 4.496 0 0 1-3.25-1.387A4.496 4.496 0 0 1 5 13.973V20h14v-6.027zM5.789 4L3.356 8.213a2.5 2.5 0 0 0 4.466 2.216c.335-.837 1.52-.837 1.856 0a2.5 2.5 0 0 0 4.644 0c.335-.837 1.52-.837 1.856 0a2.5 2.5 0 1 0 4.457-2.232L18.21 4H5.79z"/></svg>
+                <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
+                    <path fill="none" d="M0 0h24v24H0z" />
+                    <path
+                        d="M21 13.242V20h1v2H2v-2h1v-6.758A4.496 4.496 0 0 1 1 9.5c0-.827.224-1.624.633-2.303L4.345 2.5a1 1 0 0 1 .866-.5H18.79a1 1 0 0 1 .866.5l2.702 4.682A4.496 4.496 0 0 1 21 13.242zm-2 .73a4.496 4.496 0 0 1-3.75-1.36A4.496 4.496 0 0 1 12 14.001a4.496 4.496 0 0 1-3.25-1.387A4.496 4.496 0 0 1 5 13.973V20h14v-6.027zM5.789 4L3.356 8.213a2.5 2.5 0 0 0 4.466 2.216c.335-.837 1.52-.837 1.856 0a2.5 2.5 0 0 0 4.644 0c.335-.837 1.52-.837 1.856 0a2.5 2.5 0 1 0 4.457-2.232L18.21 4H5.79z" />
+                </svg>
                 <span class="outlet-label__name">Outlet</span>
-                <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 13.172l4.95-4.95 1.414 1.414L12 16 5.636 9.636 7.05 8.222z"/></svg>
+                <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
+                    <path fill="none" d="M0 0h24v24H0z" />
+                    <path d="M12 13.172l4.95-4.95 1.414 1.414L12 16 5.636 9.636 7.05 8.222z" />
+                </svg>
             </button>
             <h2 class="h2 weight-700 margin-bottom-1r">FLO Blockchain Contract</h2>
             <p>
@@ -109,13 +119,36 @@
             <h4 class="room__label">Rooms</h4>
             <scroll-tab-header data-target="ico_page_group">
                 <button class="room-button" title="Investors">
-                    <svg class="icon button__icon--left" xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'><title>People</title><path d='M402 168c-2.93 40.67-33.1 72-66 72s-63.12-31.32-66-72c-3-42.31 26.37-72 66-72s69 30.46 66 72z' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='32'/><path d='M336 304c-65.17 0-127.84 32.37-143.54 95.41-2.08 8.34 3.15 16.59 11.72 16.59h263.65c8.57 0 13.77-8.25 11.72-16.59C463.85 335.36 401.18 304 336 304z' fill='none' stroke='currentColor' stroke-miterlimit='10' stroke-width='32'/><path d='M200 185.94c-2.34 32.48-26.72 58.06-53 58.06s-50.7-25.57-53-58.06C91.61 152.15 115.34 128 147 128s55.39 24.77 53 57.94z' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='32'/><path d='M206 306c-18.05-8.27-37.93-11.45-59-11.45-52 0-102.1 25.85-114.65 76.2-1.65 6.66 2.53 13.25 9.37 13.25H154' fill='none' stroke='currentColor' stroke-linecap='round' stroke-miterlimit='10' stroke-width='32'/></svg>
+                    <svg class="icon button__icon--left" xmlns='http://www.w3.org/2000/svg' class='ionicon'
+                        viewBox='0 0 512 512'>
+                        <title>People</title>
+                        <path
+                            d='M402 168c-2.93 40.67-33.1 72-66 72s-63.12-31.32-66-72c-3-42.31 26.37-72 66-72s69 30.46 66 72z'
+                            fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round'
+                            stroke-width='32' />
+                        <path
+                            d='M336 304c-65.17 0-127.84 32.37-143.54 95.41-2.08 8.34 3.15 16.59 11.72 16.59h263.65c8.57 0 13.77-8.25 11.72-16.59C463.85 335.36 401.18 304 336 304z'
+                            fill='none' stroke='currentColor' stroke-miterlimit='10' stroke-width='32' />
+                        <path
+                            d='M200 185.94c-2.34 32.48-26.72 58.06-53 58.06s-50.7-25.57-53-58.06C91.61 152.15 115.34 128 147 128s55.39 24.77 53 57.94z'
+                            fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round'
+                            stroke-width='32' />
+                        <path
+                            d='M206 306c-18.05-8.27-37.93-11.45-59-11.45-52 0-102.1 25.85-114.65 76.2-1.65 6.66 2.53 13.25 9.37 13.25H154'
+                            fill='none' stroke='currentColor' stroke-linecap='round' stroke-miterlimit='10'
+                            stroke-width='32' />
+                    </svg>
                     <span class="button__label">
                         Product
                     </span>
                 </button>
                 <button class="room-button" title="Phases">
-                    <svg class="icon button__icon--left" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M4 10.5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm0-6c-.83 0-1.5.67-1.5 1.5S3.17 7.5 4 7.5 5.5 6.83 5.5 6 4.83 4.5 4 4.5zm0 12c-.83 0-1.5.68-1.5 1.5s.68 1.5 1.5 1.5 1.5-.68 1.5-1.5-.67-1.5-1.5-1.5zM7 19h14v-2H7v2zm0-6h14v-2H7v2zm0-8v2h14V5H7z"/></svg>
+                    <svg class="icon button__icon--left" xmlns="http://www.w3.org/2000/svg" height="24px"
+                        viewBox="0 0 24 24" width="24px" fill="#000000">
+                        <path d="M0 0h24v24H0V0z" fill="none" />
+                        <path
+                            d="M4 10.5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm0-6c-.83 0-1.5.67-1.5 1.5S3.17 7.5 4 7.5 5.5 6.83 5.5 6 4.83 4.5 4 4.5zm0 12c-.83 0-1.5.68-1.5 1.5s.68 1.5 1.5 1.5 1.5-.68 1.5-1.5-.67-1.5-1.5-1.5zM7 19h14v-2H7v2zm0-6h14v-2H7v2zm0-8v2h14V5H7z" />
+                    </svg>
                     <span class="button__label">
                         Projects
                     </span>
@@ -130,8 +163,10 @@
                 <h3 class="h3 margin-bottom-1-5r">Projects</h3>
         </scroll-tab-panels>
     </main>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script>
-    <script src="js/components.js"></script>
-    <script src="js/index.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js"></script>
+    <script src="assets/js/components.js"></script>
+    <script src="https://unpkg.com/uhtml@3.0.1/es.js"></script>
+    <script src="assets/js/index.js"></script>
 </body>
+
 </html>
\ No newline at end of file
diff --git a/ico.html b/ico.html
index 0a04935..6764baf 100644
--- a/ico.html
+++ b/ico.html
@@ -24,27 +24,12 @@
             <div class="grid">
                 <h4 class="h4 phase__title"></h4>
                 <h5 class="h5 phase__date weight-500 color-0-8"></h5>
-                <p class="phase__description color-0-8">Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime nihil doloremque, mollitia dolor minima et.</p>
+                <p class="phase__description color-0-8">Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime
+                    nihil doloremque, mollitia dolor minima et.</p>
             </div>
         </li>
     </template>
 
-    <template id="ico_investor_row">
-        <div class="person-card grid">
-            <img class="person__image" src="" alt="" loading="lazy">
-            <div class="investor-card__overlay grid gap-1-5">
-                <div class="grid investor__bio-container">
-                    <h4 class="person__name capitalize"></h4>
-                    <p class="investor__bio color-0-8"></p>
-                </div>
-                <div class="grid investor__contribution-container">
-                    <!-- <h4 class="label color-0-8 weight-500">Contribution</h4> -->
-                    <p class="investor__contribution"></p>
-                </div>
-            </div>
-        </div>
-    </template>
-
     <section id="elevator_popup" class="grid hide-completely">
         <header class="elevator__header">
             <button class="close-button justify-self-start" onclick="hideSiteMap()">
@@ -58,22 +43,24 @@
         </header>
         <ul id="floor_list" class="grid"></ul>
     </section>
-    <header id="main_header" class="grid align-center full-bleed">
+    <header id="main_header" class="full-bleed">
         <button id="elevator_button" class="button" onclick="showSiteMap()">
-            <svg class="icon button__icon--left" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 3L16.3301 10.5H7.66987L12 3Z"/><path d="M12 21L7.66987 13.5L16.3301 13.5L12 21Z"/></svg>
+            <svg class="icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M12 3L16.3301 10.5H7.66987L12 3Z" />
+                <path d="M12 21L7.66987 13.5L16.3301 13.5L12 21Z" />
+            </svg>
             <span class="button__label">
                 Elevator
             </span>
         </button>
         <a href="index.html" class="main-logo flex align-center page-link justify-self-center" data-target="home_page">
-            <svg id="main_header__logo" class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20.46,21.32C20,19.78,18.6,18.59,15.3,17a12.67,12.67,0,0,1-2.64-1.56,4.27,4.27,0,0,1-.79-1,2.6,2.6,0,0,1,0-1.41c.24-.68.49-1,2.43-2.85a7.18,7.18,0,0,0,2.09-2.92,4.25,4.25,0,0,0,0-1.77,6.52,6.52,0,0,0-2.85-3.11c-.56-.36-.81-.4-.81-.15a2.33,2.33,0,0,1-.18.45L12.4,3l-.53-.36c-.28-.21-.64-.41-.77-.49s-.46-.11-.46,0a6.21,6.21,0,0,1-.37.83s-.08,0-.17-.08c-1.15-.83-1.64-1-1.64-.73A7.33,7.33,0,0,1,7.7,3.65C6.48,5.68,5.24,6.7,4,6.7c-.56,0-.54,0-.37.64s.2.58.68.43a3.37,3.37,0,0,0,1.09-.54.86.86,0,0,1,.3-.17,1.34,1.34,0,0,1,.13.39.79.79,0,0,0,.17.4A3.5,3.5,0,0,0,7.37,7.3L7.8,7l.09.34c.12.45.19.51.62.39a4.25,4.25,0,0,0,2.17-1.54l.38-.45,0,.39A5.92,5.92,0,0,1,8.89,9.54L7.67,10.71c-2,1.93-1.89,3.51.37,5a27.41,27.41,0,0,0,2.89,1.51c.17.07.62.32,1,.54C14,19,15,20.23,15,21.48a2,2,0,0,0,0,.49h0c0,.05,0,.05.56-.1a1.89,1.89,0,0,0,.53-.21,2.41,2.41,0,0,0-.34-1.15,7.05,7.05,0,0,0-1.68-1.77,21.91,21.91,0,0,0-3.2-1.83A9.53,9.53,0,0,1,8.16,15.2a2.18,2.18,0,0,1-.74-1.55C7.42,12.79,7.86,12,9,11c1.77-1.64,2.45-2.45,2.92-3.55a2.28,2.28,0,0,0,.26-1.26A2,2,0,0,0,12,5.06l-.2-.45L12,4.3l.28-.49.09-.18L12.6,4a3.69,3.69,0,0,1,.61,1.76A3.47,3.47,0,0,1,12.94,7l-.09.25s-.21.37-.41.69A17.78,17.78,0,0,1,9.91,10.6c-1.07,1-1.43,1.62-1.47,2.47a2.05,2.05,0,0,0,.7,1.73,10.47,10.47,0,0,0,3.28,2.08c2.28,1.13,3.26,1.81,4,2.73a2.94,2.94,0,0,1,.74,1.75,1.26,1.26,0,0,0,.09.57.48.48,0,0,0,.26,0l.51-.13.29-.08,0-.28c-.13-1-1-2-2.47-3a25.52,25.52,0,0,0-3.26-1.77,8.59,8.59,0,0,1-2.23-1.43,2.09,2.09,0,0,1-.5-2.62c.26-.53.5-.83,2.35-2.6,1.51-1.45,2.15-2.58,2.15-3.79A3.67,3.67,0,0,0,13,3.48a3,3,0,0,1-.4-.42A1.85,1.85,0,0,1,13,2.33a6.74,6.74,0,0,1,1.83,1.73,2.62,2.62,0,0,1,.47,1.68,3,3,0,0,1-.55,1.84c-.45.78-.79,1.14-2.67,2.93a5.56,5.56,0,0,0-1.3,1.64,1.77,1.77,0,0,0-.21,1,1.76,1.76,0,0,0,.19.92,6.28,6.28,0,0,0,2.9,2.34,21.6,21.6,0,0,1,3.66,2c1.35,1,2,2,2,3a1.06,1.06,0,0,0,.05.47,2.83,2.83,0,0,0,1-.24C20.56,21.68,20.56,21.66,20.46,21.32ZM7.29,6.4h0a2.23,2.23,0,0,1-.9.28L6,6.72l.43-.53a15.22,15.22,0,0,0,1.89-3,3.52,3.52,0,0,1,.38-.67c.07-.08.49.2,1,.64l.39.35L9.66,4A6.7,6.7,0,0,1,7.29,6.4Zm3.58-1.11A5.8,5.8,0,0,1,9.25,6.51h0a3.3,3.3,0,0,1-.74.17l-.35,0,.39-.49a15.64,15.64,0,0,0,1.32-2,4.63,4.63,0,0,1,.28-.49c.06-.08.33.26.57.77l.28.57Zm1-1.4a1.63,1.63,0,0,1-.28.4A6.63,6.63,0,0,1,11,3.72l-.53-.56.12-.29c.2-.49.24-.51.64-.19a5.57,5.57,0,0,1,.85.78A2.78,2.78,0,0,1,11.87,3.89Z"/></svg>
+            <svg id="main_header__logo" class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                <path
+                    d="M20.46,21.32C20,19.78,18.6,18.59,15.3,17a12.67,12.67,0,0,1-2.64-1.56,4.27,4.27,0,0,1-.79-1,2.6,2.6,0,0,1,0-1.41c.24-.68.49-1,2.43-2.85a7.18,7.18,0,0,0,2.09-2.92,4.25,4.25,0,0,0,0-1.77,6.52,6.52,0,0,0-2.85-3.11c-.56-.36-.81-.4-.81-.15a2.33,2.33,0,0,1-.18.45L12.4,3l-.53-.36c-.28-.21-.64-.41-.77-.49s-.46-.11-.46,0a6.21,6.21,0,0,1-.37.83s-.08,0-.17-.08c-1.15-.83-1.64-1-1.64-.73A7.33,7.33,0,0,1,7.7,3.65C6.48,5.68,5.24,6.7,4,6.7c-.56,0-.54,0-.37.64s.2.58.68.43a3.37,3.37,0,0,0,1.09-.54.86.86,0,0,1,.3-.17,1.34,1.34,0,0,1,.13.39.79.79,0,0,0,.17.4A3.5,3.5,0,0,0,7.37,7.3L7.8,7l.09.34c.12.45.19.51.62.39a4.25,4.25,0,0,0,2.17-1.54l.38-.45,0,.39A5.92,5.92,0,0,1,8.89,9.54L7.67,10.71c-2,1.93-1.89,3.51.37,5a27.41,27.41,0,0,0,2.89,1.51c.17.07.62.32,1,.54C14,19,15,20.23,15,21.48a2,2,0,0,0,0,.49h0c0,.05,0,.05.56-.1a1.89,1.89,0,0,0,.53-.21,2.41,2.41,0,0,0-.34-1.15,7.05,7.05,0,0,0-1.68-1.77,21.91,21.91,0,0,0-3.2-1.83A9.53,9.53,0,0,1,8.16,15.2a2.18,2.18,0,0,1-.74-1.55C7.42,12.79,7.86,12,9,11c1.77-1.64,2.45-2.45,2.92-3.55a2.28,2.28,0,0,0,.26-1.26A2,2,0,0,0,12,5.06l-.2-.45L12,4.3l.28-.49.09-.18L12.6,4a3.69,3.69,0,0,1,.61,1.76A3.47,3.47,0,0,1,12.94,7l-.09.25s-.21.37-.41.69A17.78,17.78,0,0,1,9.91,10.6c-1.07,1-1.43,1.62-1.47,2.47a2.05,2.05,0,0,0,.7,1.73,10.47,10.47,0,0,0,3.28,2.08c2.28,1.13,3.26,1.81,4,2.73a2.94,2.94,0,0,1,.74,1.75,1.26,1.26,0,0,0,.09.57.48.48,0,0,0,.26,0l.51-.13.29-.08,0-.28c-.13-1-1-2-2.47-3a25.52,25.52,0,0,0-3.26-1.77,8.59,8.59,0,0,1-2.23-1.43,2.09,2.09,0,0,1-.5-2.62c.26-.53.5-.83,2.35-2.6,1.51-1.45,2.15-2.58,2.15-3.79A3.67,3.67,0,0,0,13,3.48a3,3,0,0,1-.4-.42A1.85,1.85,0,0,1,13,2.33a6.74,6.74,0,0,1,1.83,1.73,2.62,2.62,0,0,1,.47,1.68,3,3,0,0,1-.55,1.84c-.45.78-.79,1.14-2.67,2.93a5.56,5.56,0,0,0-1.3,1.64,1.77,1.77,0,0,0-.21,1,1.76,1.76,0,0,0,.19.92,6.28,6.28,0,0,0,2.9,2.34,21.6,21.6,0,0,1,3.66,2c1.35,1,2,2,2,3a1.06,1.06,0,0,0,.05.47,2.83,2.83,0,0,0,1-.24C20.56,21.68,20.56,21.66,20.46,21.32ZM7.29,6.4h0a2.23,2.23,0,0,1-.9.28L6,6.72l.43-.53a15.22,15.22,0,0,0,1.89-3,3.52,3.52,0,0,1,.38-.67c.07-.08.49.2,1,.64l.39.35L9.66,4A6.7,6.7,0,0,1,7.29,6.4Zm3.58-1.11A5.8,5.8,0,0,1,9.25,6.51h0a3.3,3.3,0,0,1-.74.17l-.35,0,.39-.49a15.64,15.64,0,0,0,1.32-2,4.63,4.63,0,0,1,.28-.49c.06-.08.33.26.57.77l.28.57Zm1-1.4a1.63,1.63,0,0,1-.28.4A6.63,6.63,0,0,1,11,3.72l-.53-.56.12-.29c.2-.49.24-.51.64-.19a5.57,5.57,0,0,1,.85.78A2.78,2.78,0,0,1,11.87,3.89Z" />
+            </svg>
             <h4 class="h4 header__company-name">RanchiMall</h4>
         </a>
-        <label class="theme-switcher" title="Change theme">
-            <input id="theme_switcher" class="theme-switcher__checkbox" type="checkbox">
-            <svg class="icon moon-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M10 6a8 8 0 0 0 11.955 6.956C21.474 18.03 17.2 22 12 22 6.477 22 2 17.523 2 12c0-5.2 3.97-9.474 9.044-9.955A7.963 7.963 0 0 0 10 6zm-6 6a8 8 0 0 0 8 8 8.006 8.006 0 0 0 6.957-4.045c-.316.03-.636.045-.957.045-5.523 0-10-4.477-10-10 0-.321.015-.64.045-.957A8.006 8.006 0 0 0 4 12zm14.164-9.709L19 2.5v1l-.836.209a2 2 0 0 0-1.455 1.455L16.5 6h-1l-.209-.836a2 2 0 0 0-1.455-1.455L13 3.5v-1l.836-.209A2 2 0 0 0 15.29.836L15.5 0h1l.209.836a2 2 0 0 0 1.455 1.455zm5 5L24 7.5v1l-.836.209a2 2 0 0 0-1.455 1.455L21.5 11h-1l-.209-.836a2 2 0 0 0-1.455-1.455L18 8.5v-1l.836-.209a2 2 0 0 0 1.455-1.455L20.5 5h1l.209.836a2 2 0 0 0 1.455 1.455z"/></svg>
-            <svg class="icon sun-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 18a6 6 0 1 1 0-12 6 6 0 0 1 0 12zm0-2a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM11 1h2v3h-2V1zm0 19h2v3h-2v-3zM3.515 4.929l1.414-1.414L7.05 5.636 5.636 7.05 3.515 4.93zM16.95 18.364l1.414-1.414 2.121 2.121-1.414 1.414-2.121-2.121zm2.121-14.85l1.414 1.415-2.121 2.121-1.414-1.414 2.121-2.121zM5.636 16.95l1.414 1.414-2.121 2.121-1.414-1.414 2.121-2.121zM23 11v2h-3v-2h3zM4 11v2H1v-2h3z"/></svg>
-        </label>
+        <theme-toggle></theme-toggle>
     </header>
     <div id="outlet_switcher" class="grid gap-1-5 hide-completely">
         <span id="outlet_switcher__floor_num" class="weight-500 color-0-8"></span>
@@ -93,7 +80,10 @@
             <button class="outlet-label">
                 <span class="outlet-label__name">Outlet</span>
                 <span class="outlet-label__no"></span>
-                <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 13.172l4.95-4.95 1.414 1.414L12 16 5.636 9.636 7.05 8.222z"/></svg>
+                <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
+                    <path fill="none" d="M0 0h24v24H0z" />
+                    <path d="M12 13.172l4.95-4.95 1.414 1.414L12 16 5.636 9.636 7.05 8.222z" />
+                </svg>
             </button>
         </section>
         <section class="rooms-layout">
@@ -101,7 +91,21 @@
             <a class="room-tile room-tile--main" href="#investor_room">
                 <div class="tile-content">
                     <div class="grid flow-column gap-1 justify-start align-center">
-                        <svg class="room-tile__icon investors-icon" id="f4f25b2f-c031-4b25-9376-2f5094dcb7eb" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M14,14.23h0a4.36,4.36,0,0,1,4.36,4.12,19.55,19.55,0,0,1-1.12,6.43,8.16,8.16,0,0,1-3.55,2.42,8.16,8.16,0,0,1-3.52-2.42A19.5,19.5,0,0,1,9,18.24,4.31,4.31,0,0,1,10,15.42a4.86,4.86,0,0,1,3.61-1.19H14m0-2h-.32C6.69,12.23,7,18.3,7,18.3A21.51,21.51,0,0,0,8.3,25.62c.61,1.23,3.7,3.58,5.33,3.58h0c1.63,0,4.71-2.35,5.33-3.58a21.51,21.51,0,0,0,1.3-7.32h0A6.38,6.38,0,0,0,14,12.23Z"/><path d="M50.71,14.23h0a4.36,4.36,0,0,1,4.36,4.11,19.62,19.62,0,0,1-1.18,6.44A8.19,8.19,0,0,1,50.4,27.2a8.25,8.25,0,0,1-3.53-2.42,20,20,0,0,1-1.17-6.5v-.06a4.35,4.35,0,0,1,1-2.78,4.87,4.87,0,0,1,3.64-1.21h.32m0-2h-.32c-7,0-6.69,6.07-6.69,6.07a22.05,22.05,0,0,0,1.35,7.32c.62,1.23,3.7,3.58,5.34,3.58s4.72-2.35,5.33-3.58a21.76,21.76,0,0,0,1.35-7.32v0a6.36,6.36,0,0,0-6.35-6.05Z"/><path d="M32,11.9a6.51,6.51,0,0,1,7,6.25,27.22,27.22,0,0,1-1.66,9c-.67,1.19-4.1,3.65-5.36,3.65h-.19a11.61,11.61,0,0,1-5.15-3.62A27.19,27.19,0,0,1,25,18.1V18a6.62,6.62,0,0,1,1.64-4.32A7.18,7.18,0,0,1,32,11.9m0-2c-9.35,0-9,8.2-9,8.2A29.19,29.19,0,0,0,24.81,28c.83,1.66,5,4.82,7.2,4.82l0,0c2.2,0,6.37-3.16,7.19-4.82A29.05,29.05,0,0,0,41,18.11s-.32-8.2-9-8.2Z"/><path d="M37.72,36.28c2,2,4.82,3.18,7.58,4.31l2,.82a14.53,14.53,0,0,1,1.1,6.47A31.12,31.12,0,0,1,32.78,52.1H31.24a31.13,31.13,0,0,1-15.62-4.23,14.49,14.49,0,0,1,1.1-6.46l1.94-.82c2.77-1.13,5.6-2.3,7.58-4.3a14,14,0,0,0,5.2,2.65A1.81,1.81,0,0,0,32,39a2.22,2.22,0,0,0,.51-.06,14,14,0,0,0,5.25-2.67m.23-3A11.93,11.93,0,0,1,32,37,12,12,0,0,1,26,33.28c-1.77,3.32-6.18,4.57-10.34,6.4-1.69.71-3.1,9.88-1.12,9.88a33.06,33.06,0,0,0,16.69,4.53h1.54a33,33,0,0,0,16.64-4.52c2,0,.58-9.18-1.13-9.89-4.16-1.83-8.57-3.08-10.34-6.4Z"/><path d="M17.82,32.42a10,10,0,0,0,1.53,1.12c-1,.49-2.06.92-3,1.28l-.05,0,0,0c-.5.23-1,.44-1.5.65l-.74.32c-2.5,1-3.65,4.22-4.17,6.86A22.54,22.54,0,0,1,2,40a11,11,0,0,1,.7-4.06L4,35.4a18.53,18.53,0,0,0,5.43-3,10.89,10.89,0,0,0,3.67,1.78l.51.13.52-.13a10.87,10.87,0,0,0,3.7-1.79m.19-2.9a8.77,8.77,0,0,1-4.4,2.75,8.73,8.73,0,0,1-4.4-2.75C7.9,32,4.63,32.89,1.55,34.25c-1.26.52-2.3,7.31-.84,7.31a24.5,24.5,0,0,0,10.86,3.31c.34-3,1.31-6.38,3.27-7.2.75-.33,1.53-.65,2.29-1,2.49-1,4.85-2,6.22-3.44-2.27-.9-4.34-1.87-5.34-3.71Z"/><path d="M54.58,32.43a18.28,18.28,0,0,0,5.43,3l1.29.53a11.32,11.32,0,0,1,.7,4.12,22.58,22.58,0,0,1-7.85,2.68C53.67,40.28,52.56,37,50,35.9c-.8-.4-1.62-.74-2.35-1-1-.43-2-.85-3-1.31a9.45,9.45,0,0,0,1.53-1.13,10.93,10.93,0,0,0,3.66,1.78l.52.13.52-.13a11,11,0,0,0,3.67-1.78m.21-2.91a8.77,8.77,0,0,1-4.4,2.75A8.77,8.77,0,0,1,46,29.52c-1,1.84-3,2.81-5.32,3.75,1.37,1.43,3.73,2.41,6.22,3.44.76.31,1.54.63,2.26,1,2,.83,3,4.25,3.29,7.21A24.5,24.5,0,0,0,63.3,41.61c1.44,0,.4-6.84-.86-7.36-3.08-1.36-6.34-2.27-7.65-4.73Z"/></svg>
+                        <svg class="room-tile__icon investors-icon" id="f4f25b2f-c031-4b25-9376-2f5094dcb7eb"
+                            data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+                            <path
+                                d="M14,14.23h0a4.36,4.36,0,0,1,4.36,4.12,19.55,19.55,0,0,1-1.12,6.43,8.16,8.16,0,0,1-3.55,2.42,8.16,8.16,0,0,1-3.52-2.42A19.5,19.5,0,0,1,9,18.24,4.31,4.31,0,0,1,10,15.42a4.86,4.86,0,0,1,3.61-1.19H14m0-2h-.32C6.69,12.23,7,18.3,7,18.3A21.51,21.51,0,0,0,8.3,25.62c.61,1.23,3.7,3.58,5.33,3.58h0c1.63,0,4.71-2.35,5.33-3.58a21.51,21.51,0,0,0,1.3-7.32h0A6.38,6.38,0,0,0,14,12.23Z" />
+                            <path
+                                d="M50.71,14.23h0a4.36,4.36,0,0,1,4.36,4.11,19.62,19.62,0,0,1-1.18,6.44A8.19,8.19,0,0,1,50.4,27.2a8.25,8.25,0,0,1-3.53-2.42,20,20,0,0,1-1.17-6.5v-.06a4.35,4.35,0,0,1,1-2.78,4.87,4.87,0,0,1,3.64-1.21h.32m0-2h-.32c-7,0-6.69,6.07-6.69,6.07a22.05,22.05,0,0,0,1.35,7.32c.62,1.23,3.7,3.58,5.34,3.58s4.72-2.35,5.33-3.58a21.76,21.76,0,0,0,1.35-7.32v0a6.36,6.36,0,0,0-6.35-6.05Z" />
+                            <path
+                                d="M32,11.9a6.51,6.51,0,0,1,7,6.25,27.22,27.22,0,0,1-1.66,9c-.67,1.19-4.1,3.65-5.36,3.65h-.19a11.61,11.61,0,0,1-5.15-3.62A27.19,27.19,0,0,1,25,18.1V18a6.62,6.62,0,0,1,1.64-4.32A7.18,7.18,0,0,1,32,11.9m0-2c-9.35,0-9,8.2-9,8.2A29.19,29.19,0,0,0,24.81,28c.83,1.66,5,4.82,7.2,4.82l0,0c2.2,0,6.37-3.16,7.19-4.82A29.05,29.05,0,0,0,41,18.11s-.32-8.2-9-8.2Z" />
+                            <path
+                                d="M37.72,36.28c2,2,4.82,3.18,7.58,4.31l2,.82a14.53,14.53,0,0,1,1.1,6.47A31.12,31.12,0,0,1,32.78,52.1H31.24a31.13,31.13,0,0,1-15.62-4.23,14.49,14.49,0,0,1,1.1-6.46l1.94-.82c2.77-1.13,5.6-2.3,7.58-4.3a14,14,0,0,0,5.2,2.65A1.81,1.81,0,0,0,32,39a2.22,2.22,0,0,0,.51-.06,14,14,0,0,0,5.25-2.67m.23-3A11.93,11.93,0,0,1,32,37,12,12,0,0,1,26,33.28c-1.77,3.32-6.18,4.57-10.34,6.4-1.69.71-3.1,9.88-1.12,9.88a33.06,33.06,0,0,0,16.69,4.53h1.54a33,33,0,0,0,16.64-4.52c2,0,.58-9.18-1.13-9.89-4.16-1.83-8.57-3.08-10.34-6.4Z" />
+                            <path
+                                d="M17.82,32.42a10,10,0,0,0,1.53,1.12c-1,.49-2.06.92-3,1.28l-.05,0,0,0c-.5.23-1,.44-1.5.65l-.74.32c-2.5,1-3.65,4.22-4.17,6.86A22.54,22.54,0,0,1,2,40a11,11,0,0,1,.7-4.06L4,35.4a18.53,18.53,0,0,0,5.43-3,10.89,10.89,0,0,0,3.67,1.78l.51.13.52-.13a10.87,10.87,0,0,0,3.7-1.79m.19-2.9a8.77,8.77,0,0,1-4.4,2.75,8.73,8.73,0,0,1-4.4-2.75C7.9,32,4.63,32.89,1.55,34.25c-1.26.52-2.3,7.31-.84,7.31a24.5,24.5,0,0,0,10.86,3.31c.34-3,1.31-6.38,3.27-7.2.75-.33,1.53-.65,2.29-1,2.49-1,4.85-2,6.22-3.44-2.27-.9-4.34-1.87-5.34-3.71Z" />
+                            <path
+                                d="M54.58,32.43a18.28,18.28,0,0,0,5.43,3l1.29.53a11.32,11.32,0,0,1,.7,4.12,22.58,22.58,0,0,1-7.85,2.68C53.67,40.28,52.56,37,50,35.9c-.8-.4-1.62-.74-2.35-1-1-.43-2-.85-3-1.31a9.45,9.45,0,0,0,1.53-1.13,10.93,10.93,0,0,0,3.66,1.78l.52.13.52-.13a11,11,0,0,0,3.67-1.78m.21-2.91a8.77,8.77,0,0,1-4.4,2.75A8.77,8.77,0,0,1,46,29.52c-1,1.84-3,2.81-5.32,3.75,1.37,1.43,3.73,2.41,6.22,3.44.76.31,1.54.63,2.26,1,2,.83,3,4.25,3.29,7.21A24.5,24.5,0,0,0,63.3,41.61c1.44,0,.4-6.84-.86-7.36-3.08-1.36-6.34-2.27-7.65-4.73Z" />
+                        </svg>
                         <h4 class="room-tile__title">Investors</h4>
                     </div>
                 </div>
@@ -109,7 +113,11 @@
             <a class="room-tile" href="#product_room">
                 <div class="tile-content">
                     <div class="grid flow-column gap-1 justify-start align-center">
-                        <svg class="room-tile__icon" id="b76bf456-6b89-4220-8b44-f4f7d833bad6" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M61.28,22.11c0-.05,0-.09,0-.14L58.62,6A1.68,1.68,0,0,0,57,4.6H7A1.68,1.68,0,0,0,5.38,6L2.72,22c0,.05,0,.09,0,.14s0,.09,0,.14V57.72A1.68,1.68,0,0,0,4.38,59.4H59.62a1.68,1.68,0,0,0,1.68-1.68V22.25C61.3,22.2,61.28,22.16,61.28,22.11Zm-3.64-1.54H39.34L38.51,8h17ZM27.92,23.93h8.16v6.64L33,28.41a1.7,1.7,0,0,0-1.9,0l-3.13,2.16ZM35.15,8,36,20.57H28L28.91,8ZM8.46,8H25.55l-.88,12.61H6.36ZM57.94,56H6.06V23.93h18.5v9.84a1.67,1.67,0,0,0,2.63,1.38L32,31.84l4.81,3.31a1.65,1.65,0,0,0,.95.3,1.76,1.76,0,0,0,.78-.19,1.68,1.68,0,0,0,.9-1.49V23.93h18.5Z"/></svg>
+                        <svg class="room-tile__icon" id="b76bf456-6b89-4220-8b44-f4f7d833bad6" data-name="Layer 1"
+                            xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+                            <path
+                                d="M61.28,22.11c0-.05,0-.09,0-.14L58.62,6A1.68,1.68,0,0,0,57,4.6H7A1.68,1.68,0,0,0,5.38,6L2.72,22c0,.05,0,.09,0,.14s0,.09,0,.14V57.72A1.68,1.68,0,0,0,4.38,59.4H59.62a1.68,1.68,0,0,0,1.68-1.68V22.25C61.3,22.2,61.28,22.16,61.28,22.11Zm-3.64-1.54H39.34L38.51,8h17ZM27.92,23.93h8.16v6.64L33,28.41a1.7,1.7,0,0,0-1.9,0l-3.13,2.16ZM35.15,8,36,20.57H28L28.91,8ZM8.46,8H25.55l-.88,12.61H6.36ZM57.94,56H6.06V23.93h18.5v9.84a1.67,1.67,0,0,0,2.63,1.38L32,31.84l4.81,3.31a1.65,1.65,0,0,0,.95.3,1.76,1.76,0,0,0,.78-.19,1.68,1.68,0,0,0,.9-1.49V23.93h18.5Z" />
+                        </svg>
                         <h4 class="room-tile__title">Product</h4>
                     </div>
 
@@ -118,7 +126,15 @@
             <a class="room-tile" href="#purchase_room">
                 <div class="tile-content">
                     <div class="grid flow-column gap-1 justify-start align-center">
-                        <svg class="room-tile__icon" id="bb329e59-3d30-49a7-ac0d-b164d3b3b631" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M42.74,64a14,14,0,1,1,14-14A14,14,0,0,1,42.74,64Zm0-24.73A10.7,10.7,0,1,0,53.44,50,10.71,10.71,0,0,0,42.74,39.27Z"/><path d="M28.7,50H14.08a3.43,3.43,0,0,1-3.42-3.58l1.4-31.51h4.85V17.8a1.71,1.71,0,1,0,3.42,0V14.88H33V17.8a1.71,1.71,0,1,0,3.42,0V14.88h4.84L42.2,36c.18,0,.35,0,.54,0a13.92,13.92,0,0,1,2.9.31l-1.1-24.8H36.42V9.76a9.76,9.76,0,1,0-19.51,0v1.69H8.79L7.24,46.24a6.85,6.85,0,0,0,6.84,7.15H29.14A14.24,14.24,0,0,1,28.7,50ZM20.33,9.76A6.34,6.34,0,1,1,33,9.76v1.69H20.33Z"/><path d="M41.23,54.65a1.69,1.69,0,0,1-1.18-.49l-3-3a1.67,1.67,0,0,1,2.35-2.36l1.84,1.84,4.85-4.85a1.66,1.66,0,0,1,2.35,2.35l-6,6A1.67,1.67,0,0,1,41.23,54.65Z"/></svg>
+                        <svg class="room-tile__icon" id="bb329e59-3d30-49a7-ac0d-b164d3b3b631" data-name="Layer 1"
+                            xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+                            <path
+                                d="M42.74,64a14,14,0,1,1,14-14A14,14,0,0,1,42.74,64Zm0-24.73A10.7,10.7,0,1,0,53.44,50,10.71,10.71,0,0,0,42.74,39.27Z" />
+                            <path
+                                d="M28.7,50H14.08a3.43,3.43,0,0,1-3.42-3.58l1.4-31.51h4.85V17.8a1.71,1.71,0,1,0,3.42,0V14.88H33V17.8a1.71,1.71,0,1,0,3.42,0V14.88h4.84L42.2,36c.18,0,.35,0,.54,0a13.92,13.92,0,0,1,2.9.31l-1.1-24.8H36.42V9.76a9.76,9.76,0,1,0-19.51,0v1.69H8.79L7.24,46.24a6.85,6.85,0,0,0,6.84,7.15H29.14A14.24,14.24,0,0,1,28.7,50ZM20.33,9.76A6.34,6.34,0,1,1,33,9.76v1.69H20.33Z" />
+                            <path
+                                d="M41.23,54.65a1.69,1.69,0,0,1-1.18-.49l-3-3a1.67,1.67,0,0,1,2.35-2.36l1.84,1.84,4.85-4.85a1.66,1.66,0,0,1,2.35,2.35l-6,6A1.67,1.67,0,0,1,41.23,54.65Z" />
+                        </svg>
                         <h4 class="room-tile__title">Buy</h4>
                     </div>
 
@@ -128,7 +144,10 @@
         <section class="room-container hide-completely page-layout">
             <header class="room-container__header">
                 <button class="grid flow-column gap-1 align-center" onclick="hideRoom()">
-                    <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M7.828 11H20v2H7.828l5.364 5.364-1.414 1.414L4 12l7.778-7.778 1.414 1.414z"/></svg>
+                    <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
+                        <path fill="none" d="M0 0h24v24H0z" />
+                        <path d="M7.828 11H20v2H7.828l5.364 5.364-1.414 1.414L4 12l7.778-7.778 1.414 1.414z" />
+                    </svg>
                     <h3 id="room_title" class="hide-completely"></h3>
                 </button>
             </header>
@@ -139,8 +158,10 @@
                 </section>
                 <section id="product_room" class="grid room">
                     <p class="margin-bottom-3r">
-                        Please refer to the whitepaper <a href="https://www.ranchimall.net/ICO/" target="_blank">here</a> for detailed terms.
-                        RanchiMall Initial Coin Offering (ICO) abides by the terms we offered in our ICO whitepaper available
+                        Please refer to the whitepaper <a href="https://www.ranchimall.net/ICO/"
+                            target="_blank">here</a> for detailed terms.
+                        RanchiMall Initial Coin Offering (ICO) abides by the terms we offered in our ICO whitepaper
+                        available
                         at link above. We have made certain changes in our terms as our learning has improved. All
                         these changes are to support the interests of our long term investors.
                     </p>
@@ -148,7 +169,8 @@
                     <ol type="1">
                         <li>
                             <p>
-                                RanchiMall Tokens (RMT) now own the financial gains emerging from all our blockchain contracts
+                                RanchiMall Tokens (RMT) now own the financial gains emerging from all our blockchain
+                                contracts
                             </p>
                         </li>
                         <li>
@@ -164,14 +186,16 @@
                         <li>
                             <p>
                                 Number of RMTs tokens in circulation has been paused to
-                                10000 instead of a release schedule of 21 million in 3 years. The un-issued tokens will stay vested
+                                10000 instead of a release schedule of 21 million in 3 years. The un-issued tokens will
+                                stay vested
                                 with the Founder of RanchiMall.
                             </p>
                         </li>
                         <li>
                             <p>
                                 The price discovery during active phase has been USD 1500 per
-                                token giving RMTs in circulation a valuation of 150 million USD. Unless this price is realised in open
+                                token giving RMTs in circulation a valuation of 150 million USD. Unless this price is
+                                realised in open
                                 makets on sustainable basis, new tokens will not be put in circulation.
                             </p>
                         </li>
@@ -180,8 +204,10 @@
                 <section id="purchase_room" class="grid room">
                     <p>
                         Currently we are not selling any RanchiMall Tokens (RMT). <br> You can buy tokens at
-                        our last valuation in <a href="https://www.ranchimall.net/exchange/" target="_blank">our exchange</a> to become a
-                        token holder and be part of our community’s learning process. Our products are aimed at long term investors. 
+                        our last valuation in <a href="https://www.ranchimall.net/exchange/" target="_blank">our
+                            exchange</a> to become a
+                        token holder and be part of our community’s learning process. Our products are aimed at long
+                        term investors.
                         <br> Once you become a token holder, please be patient and be prepared to stay the
                         whole course of journey. You will not regret it.
                     </p>
@@ -193,8 +219,9 @@
             </footer>
         </section>
     </main>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js"></script>
     <script src="assets/js/components.js"></script>
+    <script src="https://unpkg.com/uhtml@3.0.1/es.js"></script>
     <script src="assets/js/index.js"></script>
     <script>
         const icoPhases = [
@@ -295,6 +322,12 @@ Social media`,
                 bio: 'Professional Services Consultant at AWS Cybersecurity',
                 contribution: `Long-term believer and supporter, Help in Australia, Assistance in our social media initiatives.`,
             },
+            {
+                extension: 'jpg',
+                investorName: 'Puneet Sondh',
+                bio: 'Financial Services Professional, Double post-graduation in Finance from India and Netherlands, Believer in the power of Transformative Technology',
+                contribution: `Advice on strategic matters, Amplifying the voice on social media, Helps in the UAE region.`,
+            },
             {
                 extension: 'jpg',
                 investorName: 'Rajeev Kumar Gupta',
@@ -334,9 +367,15 @@ Social media`,
                 bio: 'Business Excellence Professional, Sr. Manager at Tata Consultancy Services',
                 contribution: `One of our superstars, and one of the most energetic supporters in every activity,One of our dream investors, Very active help in our projects.`,
             },
+            {
+                extension: 'jpg',
+                investorName: 'Vikash Saw',
+                bio: 'Taxation Head (India & Mauritius) with Times Innovative Media Limited (Times of India Group)',
+                contribution: `A Long-term believer, helps with ideas, supports in social media growth.`,
+            },
         ]
 
-        function renderAllIcoPhases(){
+        function renderAllIcoPhases() {
             getRef('ico_phase_list').innerHTML = ''
             const frag = document.createDocumentFragment()
             icoPhases.forEach(phase => {
@@ -346,15 +385,14 @@ Social media`,
         }
         // renderAllIcoPhases()
 
-        function renderAllIcoInvestors(){
-            const frag = document.createDocumentFragment()
-            getRef('ico_investors').innerHTML = ''
-            icoInvestors.forEach(investor => {
-                frag.append(render.icoInvestorRow(investor, {thumbnail: false}))
+        function renderAllIcoInvestors() {
+            const investors = icoInvestors.map(investor => {
+                return render.icoInvestorRow(investor, { thumbnail: false })
             })
-            getRef('ico_investors').append(frag)
+            renderElem(getRef('ico_investors'), html`${investors}`)
         }
         renderAllIcoInvestors()
     </script>
 </body>
+
 </html>
\ No newline at end of file
diff --git a/incorporationblockchaincontract.html b/incorporationblockchaincontract.html
index e841e39..10f52fb 100644
--- a/incorporationblockchaincontract.html
+++ b/incorporationblockchaincontract.html
@@ -28,22 +28,24 @@
         </header>
         <ul id="floor_list" class="grid"></ul>
     </section>
-    <header id="main_header" class="grid align-center full-bleed">
+    <header id="main_header" class="full-bleed">
         <button id="elevator_button" class="button" onclick="showSiteMap()">
-            <svg class="icon button__icon--left" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 3L16.3301 10.5H7.66987L12 3Z"/><path d="M12 21L7.66987 13.5L16.3301 13.5L12 21Z"/></svg>
+            <svg class="icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M12 3L16.3301 10.5H7.66987L12 3Z" />
+                <path d="M12 21L7.66987 13.5L16.3301 13.5L12 21Z" />
+            </svg>
             <span class="button__label">
                 Elevator
             </span>
         </button>
         <a href="index.html" class="main-logo flex align-center page-link justify-self-center" data-target="home_page">
-            <svg id="main_header__logo" class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20.46,21.32C20,19.78,18.6,18.59,15.3,17a12.67,12.67,0,0,1-2.64-1.56,4.27,4.27,0,0,1-.79-1,2.6,2.6,0,0,1,0-1.41c.24-.68.49-1,2.43-2.85a7.18,7.18,0,0,0,2.09-2.92,4.25,4.25,0,0,0,0-1.77,6.52,6.52,0,0,0-2.85-3.11c-.56-.36-.81-.4-.81-.15a2.33,2.33,0,0,1-.18.45L12.4,3l-.53-.36c-.28-.21-.64-.41-.77-.49s-.46-.11-.46,0a6.21,6.21,0,0,1-.37.83s-.08,0-.17-.08c-1.15-.83-1.64-1-1.64-.73A7.33,7.33,0,0,1,7.7,3.65C6.48,5.68,5.24,6.7,4,6.7c-.56,0-.54,0-.37.64s.2.58.68.43a3.37,3.37,0,0,0,1.09-.54.86.86,0,0,1,.3-.17,1.34,1.34,0,0,1,.13.39.79.79,0,0,0,.17.4A3.5,3.5,0,0,0,7.37,7.3L7.8,7l.09.34c.12.45.19.51.62.39a4.25,4.25,0,0,0,2.17-1.54l.38-.45,0,.39A5.92,5.92,0,0,1,8.89,9.54L7.67,10.71c-2,1.93-1.89,3.51.37,5a27.41,27.41,0,0,0,2.89,1.51c.17.07.62.32,1,.54C14,19,15,20.23,15,21.48a2,2,0,0,0,0,.49h0c0,.05,0,.05.56-.1a1.89,1.89,0,0,0,.53-.21,2.41,2.41,0,0,0-.34-1.15,7.05,7.05,0,0,0-1.68-1.77,21.91,21.91,0,0,0-3.2-1.83A9.53,9.53,0,0,1,8.16,15.2a2.18,2.18,0,0,1-.74-1.55C7.42,12.79,7.86,12,9,11c1.77-1.64,2.45-2.45,2.92-3.55a2.28,2.28,0,0,0,.26-1.26A2,2,0,0,0,12,5.06l-.2-.45L12,4.3l.28-.49.09-.18L12.6,4a3.69,3.69,0,0,1,.61,1.76A3.47,3.47,0,0,1,12.94,7l-.09.25s-.21.37-.41.69A17.78,17.78,0,0,1,9.91,10.6c-1.07,1-1.43,1.62-1.47,2.47a2.05,2.05,0,0,0,.7,1.73,10.47,10.47,0,0,0,3.28,2.08c2.28,1.13,3.26,1.81,4,2.73a2.94,2.94,0,0,1,.74,1.75,1.26,1.26,0,0,0,.09.57.48.48,0,0,0,.26,0l.51-.13.29-.08,0-.28c-.13-1-1-2-2.47-3a25.52,25.52,0,0,0-3.26-1.77,8.59,8.59,0,0,1-2.23-1.43,2.09,2.09,0,0,1-.5-2.62c.26-.53.5-.83,2.35-2.6,1.51-1.45,2.15-2.58,2.15-3.79A3.67,3.67,0,0,0,13,3.48a3,3,0,0,1-.4-.42A1.85,1.85,0,0,1,13,2.33a6.74,6.74,0,0,1,1.83,1.73,2.62,2.62,0,0,1,.47,1.68,3,3,0,0,1-.55,1.84c-.45.78-.79,1.14-2.67,2.93a5.56,5.56,0,0,0-1.3,1.64,1.77,1.77,0,0,0-.21,1,1.76,1.76,0,0,0,.19.92,6.28,6.28,0,0,0,2.9,2.34,21.6,21.6,0,0,1,3.66,2c1.35,1,2,2,2,3a1.06,1.06,0,0,0,.05.47,2.83,2.83,0,0,0,1-.24C20.56,21.68,20.56,21.66,20.46,21.32ZM7.29,6.4h0a2.23,2.23,0,0,1-.9.28L6,6.72l.43-.53a15.22,15.22,0,0,0,1.89-3,3.52,3.52,0,0,1,.38-.67c.07-.08.49.2,1,.64l.39.35L9.66,4A6.7,6.7,0,0,1,7.29,6.4Zm3.58-1.11A5.8,5.8,0,0,1,9.25,6.51h0a3.3,3.3,0,0,1-.74.17l-.35,0,.39-.49a15.64,15.64,0,0,0,1.32-2,4.63,4.63,0,0,1,.28-.49c.06-.08.33.26.57.77l.28.57Zm1-1.4a1.63,1.63,0,0,1-.28.4A6.63,6.63,0,0,1,11,3.72l-.53-.56.12-.29c.2-.49.24-.51.64-.19a5.57,5.57,0,0,1,.85.78A2.78,2.78,0,0,1,11.87,3.89Z"/></svg>
+            <svg id="main_header__logo" class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                <path
+                    d="M20.46,21.32C20,19.78,18.6,18.59,15.3,17a12.67,12.67,0,0,1-2.64-1.56,4.27,4.27,0,0,1-.79-1,2.6,2.6,0,0,1,0-1.41c.24-.68.49-1,2.43-2.85a7.18,7.18,0,0,0,2.09-2.92,4.25,4.25,0,0,0,0-1.77,6.52,6.52,0,0,0-2.85-3.11c-.56-.36-.81-.4-.81-.15a2.33,2.33,0,0,1-.18.45L12.4,3l-.53-.36c-.28-.21-.64-.41-.77-.49s-.46-.11-.46,0a6.21,6.21,0,0,1-.37.83s-.08,0-.17-.08c-1.15-.83-1.64-1-1.64-.73A7.33,7.33,0,0,1,7.7,3.65C6.48,5.68,5.24,6.7,4,6.7c-.56,0-.54,0-.37.64s.2.58.68.43a3.37,3.37,0,0,0,1.09-.54.86.86,0,0,1,.3-.17,1.34,1.34,0,0,1,.13.39.79.79,0,0,0,.17.4A3.5,3.5,0,0,0,7.37,7.3L7.8,7l.09.34c.12.45.19.51.62.39a4.25,4.25,0,0,0,2.17-1.54l.38-.45,0,.39A5.92,5.92,0,0,1,8.89,9.54L7.67,10.71c-2,1.93-1.89,3.51.37,5a27.41,27.41,0,0,0,2.89,1.51c.17.07.62.32,1,.54C14,19,15,20.23,15,21.48a2,2,0,0,0,0,.49h0c0,.05,0,.05.56-.1a1.89,1.89,0,0,0,.53-.21,2.41,2.41,0,0,0-.34-1.15,7.05,7.05,0,0,0-1.68-1.77,21.91,21.91,0,0,0-3.2-1.83A9.53,9.53,0,0,1,8.16,15.2a2.18,2.18,0,0,1-.74-1.55C7.42,12.79,7.86,12,9,11c1.77-1.64,2.45-2.45,2.92-3.55a2.28,2.28,0,0,0,.26-1.26A2,2,0,0,0,12,5.06l-.2-.45L12,4.3l.28-.49.09-.18L12.6,4a3.69,3.69,0,0,1,.61,1.76A3.47,3.47,0,0,1,12.94,7l-.09.25s-.21.37-.41.69A17.78,17.78,0,0,1,9.91,10.6c-1.07,1-1.43,1.62-1.47,2.47a2.05,2.05,0,0,0,.7,1.73,10.47,10.47,0,0,0,3.28,2.08c2.28,1.13,3.26,1.81,4,2.73a2.94,2.94,0,0,1,.74,1.75,1.26,1.26,0,0,0,.09.57.48.48,0,0,0,.26,0l.51-.13.29-.08,0-.28c-.13-1-1-2-2.47-3a25.52,25.52,0,0,0-3.26-1.77,8.59,8.59,0,0,1-2.23-1.43,2.09,2.09,0,0,1-.5-2.62c.26-.53.5-.83,2.35-2.6,1.51-1.45,2.15-2.58,2.15-3.79A3.67,3.67,0,0,0,13,3.48a3,3,0,0,1-.4-.42A1.85,1.85,0,0,1,13,2.33a6.74,6.74,0,0,1,1.83,1.73,2.62,2.62,0,0,1,.47,1.68,3,3,0,0,1-.55,1.84c-.45.78-.79,1.14-2.67,2.93a5.56,5.56,0,0,0-1.3,1.64,1.77,1.77,0,0,0-.21,1,1.76,1.76,0,0,0,.19.92,6.28,6.28,0,0,0,2.9,2.34,21.6,21.6,0,0,1,3.66,2c1.35,1,2,2,2,3a1.06,1.06,0,0,0,.05.47,2.83,2.83,0,0,0,1-.24C20.56,21.68,20.56,21.66,20.46,21.32ZM7.29,6.4h0a2.23,2.23,0,0,1-.9.28L6,6.72l.43-.53a15.22,15.22,0,0,0,1.89-3,3.52,3.52,0,0,1,.38-.67c.07-.08.49.2,1,.64l.39.35L9.66,4A6.7,6.7,0,0,1,7.29,6.4Zm3.58-1.11A5.8,5.8,0,0,1,9.25,6.51h0a3.3,3.3,0,0,1-.74.17l-.35,0,.39-.49a15.64,15.64,0,0,0,1.32-2,4.63,4.63,0,0,1,.28-.49c.06-.08.33.26.57.77l.28.57Zm1-1.4a1.63,1.63,0,0,1-.28.4A6.63,6.63,0,0,1,11,3.72l-.53-.56.12-.29c.2-.49.24-.51.64-.19a5.57,5.57,0,0,1,.85.78A2.78,2.78,0,0,1,11.87,3.89Z" />
+            </svg>
             <h4 class="h4 header__company-name">RanchiMall</h4>
         </a>
-        <label class="theme-switcher" title="Change theme">
-            <input id="theme_switcher" class="theme-switcher__checkbox" type="checkbox">
-            <svg class="icon moon-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M10 6a8 8 0 0 0 11.955 6.956C21.474 18.03 17.2 22 12 22 6.477 22 2 17.523 2 12c0-5.2 3.97-9.474 9.044-9.955A7.963 7.963 0 0 0 10 6zm-6 6a8 8 0 0 0 8 8 8.006 8.006 0 0 0 6.957-4.045c-.316.03-.636.045-.957.045-5.523 0-10-4.477-10-10 0-.321.015-.64.045-.957A8.006 8.006 0 0 0 4 12zm14.164-9.709L19 2.5v1l-.836.209a2 2 0 0 0-1.455 1.455L16.5 6h-1l-.209-.836a2 2 0 0 0-1.455-1.455L13 3.5v-1l.836-.209A2 2 0 0 0 15.29.836L15.5 0h1l.209.836a2 2 0 0 0 1.455 1.455zm5 5L24 7.5v1l-.836.209a2 2 0 0 0-1.455 1.455L21.5 11h-1l-.209-.836a2 2 0 0 0-1.455-1.455L18 8.5v-1l.836-.209a2 2 0 0 0 1.455-1.455L20.5 5h1l.209.836a2 2 0 0 0 1.455 1.455z"/></svg>
-            <svg class="icon sun-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 18a6 6 0 1 1 0-12 6 6 0 0 1 0 12zm0-2a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM11 1h2v3h-2V1zm0 19h2v3h-2v-3zM3.515 4.929l1.414-1.414L7.05 5.636 5.636 7.05 3.515 4.93zM16.95 18.364l1.414-1.414 2.121 2.121-1.414 1.414-2.121-2.121zm2.121-14.85l1.414 1.415-2.121 2.121-1.414-1.414 2.121-2.121zM5.636 16.95l1.414 1.414-2.121 2.121-1.414-1.414 2.121-2.121zM23 11v2h-3v-2h3zM4 11v2H1v-2h3z"/></svg>
-        </label>
+        <theme-toggle></theme-toggle>
     </header>
     <div id="outlet_switcher" class="grid gap-1-5 hide">
         <div class="flex align-center">
@@ -67,9 +69,16 @@
     <main class="page">
         <section class="outlet-hero-section grid margin-bottom-3r">
             <button class="outlet-label">
-                <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M21 13.242V20h1v2H2v-2h1v-6.758A4.496 4.496 0 0 1 1 9.5c0-.827.224-1.624.633-2.303L4.345 2.5a1 1 0 0 1 .866-.5H18.79a1 1 0 0 1 .866.5l2.702 4.682A4.496 4.496 0 0 1 21 13.242zm-2 .73a4.496 4.496 0 0 1-3.75-1.36A4.496 4.496 0 0 1 12 14.001a4.496 4.496 0 0 1-3.25-1.387A4.496 4.496 0 0 1 5 13.973V20h14v-6.027zM5.789 4L3.356 8.213a2.5 2.5 0 0 0 4.466 2.216c.335-.837 1.52-.837 1.856 0a2.5 2.5 0 0 0 4.644 0c.335-.837 1.52-.837 1.856 0a2.5 2.5 0 1 0 4.457-2.232L18.21 4H5.79z"/></svg>
+                <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
+                    <path fill="none" d="M0 0h24v24H0z" />
+                    <path
+                        d="M21 13.242V20h1v2H2v-2h1v-6.758A4.496 4.496 0 0 1 1 9.5c0-.827.224-1.624.633-2.303L4.345 2.5a1 1 0 0 1 .866-.5H18.79a1 1 0 0 1 .866.5l2.702 4.682A4.496 4.496 0 0 1 21 13.242zm-2 .73a4.496 4.496 0 0 1-3.75-1.36A4.496 4.496 0 0 1 12 14.001a4.496 4.496 0 0 1-3.25-1.387A4.496 4.496 0 0 1 5 13.973V20h14v-6.027zM5.789 4L3.356 8.213a2.5 2.5 0 0 0 4.466 2.216c.335-.837 1.52-.837 1.856 0a2.5 2.5 0 0 0 4.644 0c.335-.837 1.52-.837 1.856 0a2.5 2.5 0 1 0 4.457-2.232L18.21 4H5.79z" />
+                </svg>
                 <span class="outlet-label__name">Outlet</span>
-                <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 13.172l4.95-4.95 1.414 1.414L12 16 5.636 9.636 7.05 8.222z"/></svg>
+                <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
+                    <path fill="none" d="M0 0h24v24H0z" />
+                    <path d="M12 13.172l4.95-4.95 1.414 1.414L12 16 5.636 9.636 7.05 8.222z" />
+                </svg>
             </button>
             <h2 class="h2 weight-700 margin-bottom-1r">Incorporation Blockchain Contract</h2>
             <p>
@@ -82,13 +91,23 @@
             <h4 class="room__label">Rooms</h4>
             <scroll-tab-header data-target="ico_page_group">
                 <button class="room-button" title="Phases">
-                    <svg class="icon button__icon--left" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M4 10.5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm0-6c-.83 0-1.5.67-1.5 1.5S3.17 7.5 4 7.5 5.5 6.83 5.5 6 4.83 4.5 4 4.5zm0 12c-.83 0-1.5.68-1.5 1.5s.68 1.5 1.5 1.5 1.5-.68 1.5-1.5-.67-1.5-1.5-1.5zM7 19h14v-2H7v2zm0-6h14v-2H7v2zm0-8v2h14V5H7z"/></svg>
+                    <svg class="icon button__icon--left" xmlns="http://www.w3.org/2000/svg" height="24px"
+                        viewBox="0 0 24 24" width="24px" fill="#000000">
+                        <path d="M0 0h24v24H0V0z" fill="none" />
+                        <path
+                            d="M4 10.5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm0-6c-.83 0-1.5.67-1.5 1.5S3.17 7.5 4 7.5 5.5 6.83 5.5 6 4.83 4.5 4 4.5zm0 12c-.83 0-1.5.68-1.5 1.5s.68 1.5 1.5 1.5 1.5-.68 1.5-1.5-.67-1.5-1.5-1.5zM7 19h14v-2H7v2zm0-6h14v-2H7v2zm0-8v2h14V5H7z" />
+                    </svg>
                     <span class="button__label">
                         Product
                     </span>
                 </button>
                 <button class="room-button" title="Phases">
-                    <svg class="icon button__icon--left" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M4 10.5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm0-6c-.83 0-1.5.67-1.5 1.5S3.17 7.5 4 7.5 5.5 6.83 5.5 6 4.83 4.5 4 4.5zm0 12c-.83 0-1.5.68-1.5 1.5s.68 1.5 1.5 1.5 1.5-.68 1.5-1.5-.67-1.5-1.5-1.5zM7 19h14v-2H7v2zm0-6h14v-2H7v2zm0-8v2h14V5H7z"/></svg>
+                    <svg class="icon button__icon--left" xmlns="http://www.w3.org/2000/svg" height="24px"
+                        viewBox="0 0 24 24" width="24px" fill="#000000">
+                        <path d="M0 0h24v24H0V0z" fill="none" />
+                        <path
+                            d="M4 10.5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm0-6c-.83 0-1.5.67-1.5 1.5S3.17 7.5 4 7.5 5.5 6.83 5.5 6 4.83 4.5 4 4.5zm0 12c-.83 0-1.5.68-1.5 1.5s.68 1.5 1.5 1.5 1.5-.68 1.5-1.5-.67-1.5-1.5-1.5zM7 19h14v-2H7v2zm0-6h14v-2H7v2zm0-8v2h14V5H7z" />
+                    </svg>
                     <span class="button__label">
                         Purchase
                     </span>
@@ -107,13 +126,16 @@
                 <p class="margin-bottom-3r">
                     Incorporation Blockchain Contract has been tokenised as RanchiMall Tokens
                     (RMT)We have sold 100000 such tokens till now. The product being sold here is RanchiMall Tokens
-                    (RMT)These tokens can also be purchased from <a href="ico.html">ICO Outlet on Floor 1</a>. However the tokens purchased
+                    (RMT)These tokens can also be purchased from <a href="ico.html">ICO Outlet on Floor 1</a>. However
+                    the tokens purchased
                     here are on the blockchain unlike ICO Outlet where tokens are held in our own database.
                 </p>
                 <h4 class="h4 margin-bottom-1r">Useful links</h4>
                 <p class="grid gap-1">
-                    <a href="https://ranchimall.github.io/media/introduction/2_Blockchain_Contract.pdf">Blockchain Contract concept presentation</a>
-                    <a href="https://medium.com/@tripathyr/ranchi-mall-incorporation-blockchain-contract-24f256ee31f1">Medium article explaining Incorporation Blockchain Contract</a>
+                    <a href="https://ranchimall.github.io/media/introduction/2_Blockchain_Contract.pdf">Blockchain
+                        Contract concept presentation</a>
+                    <a href="https://medium.com/@tripathyr/ranchi-mall-incorporation-blockchain-contract-24f256ee31f1">Medium
+                        article explaining Incorporation Blockchain Contract</a>
                 </p>
 
             </section>
@@ -126,8 +148,10 @@
             </section>
         </scroll-tab-panels>
     </main>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script>
-    <script src="js/components.js"></script>
-    <script src="js/index.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js"></script>
+    <script src="assets/js/components.js"></script>
+    <script src="https://unpkg.com/uhtml@3.0.1/es.js"></script>
+    <script src="assets/js/index.js"></script>
 </body>
+
 </html>
\ No newline at end of file
diff --git a/index.html b/index.html
index 1c64a64..292543c 100644
--- a/index.html
+++ b/index.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -11,40 +12,20 @@
     <link rel="preconnect" href="https://fonts.gstatic.com">
     <link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@300..900&display=swap" rel="stylesheet">
 </head>
+
 <body data-theme="light">
     <sm-notifications id="notification_drawer"></sm-notifications>
-    <!-- Component templates -->
-
-    <template id="ico_investor_row">
-        <div class="investor-card grid gap-1-5">
-            <img class="investor__image" src="" alt="" loading="lazy">
-            <div class="grid">
-                <h3 class="investor__name value capitalize"></h3>
-                <p class="investor__bio color-0-8"></p>
-            </div>
-            <div class="grid investor__contribution-container">
-                <h4 class="label color-0-8 weight-500">Contribution</h4>
-                <p class="investor__contribution weight-700"></p>
-            </div>
-        </div>
-    </template>
-
-
-    <template id="floor_indicator_template">
-        <div class="floor-label interact">
-            <span class="floor-circle"></span>
-        </div>
-    </template>
-
-    <!--  -->
-
-
     <!-- Popup -->
 
     <section id="elevator_popup" class="grid hide-completely">
         <header class="elevator__header">
             <button class="close-button justify-self-start" onclick="hideSiteMap()">
-                <svg class="icon icon-only close-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z"/></svg>
+                <svg class="icon icon-only close-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24"
+                    height="24">
+                    <path fill="none" d="M0 0h24v24H0z" />
+                    <path
+                        d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z" />
+                </svg>
             </button>
         </header>
         <ul id="floor_list" class="grid"></ul>
@@ -54,36 +35,37 @@
 
     <header id="main_header" class="grid align-center full-bleed">
         <button id="elevator_button" class="button" onclick="showSiteMap()">
-            <svg class="icon button__icon--left" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 3L16.3301 10.5H7.66987L12 3Z"/><path d="M12 21L7.66987 13.5L16.3301 13.5L12 21Z"/></svg>
+            <svg class="icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M12 3L16.3301 10.5H7.66987L12 3Z" />
+                <path d="M12 21L7.66987 13.5L16.3301 13.5L12 21Z" />
+            </svg>
             <span class="button__label">
                 Elevator
             </span>
         </button>
         <a href="index.html" class="main-logo flex align-center page-link justify-self-center" data-target="home_page">
-            <svg id="main_header__logo" class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20.46,21.32C20,19.78,18.6,18.59,15.3,17a12.67,12.67,0,0,1-2.64-1.56,4.27,4.27,0,0,1-.79-1,2.6,2.6,0,0,1,0-1.41c.24-.68.49-1,2.43-2.85a7.18,7.18,0,0,0,2.09-2.92,4.25,4.25,0,0,0,0-1.77,6.52,6.52,0,0,0-2.85-3.11c-.56-.36-.81-.4-.81-.15a2.33,2.33,0,0,1-.18.45L12.4,3l-.53-.36c-.28-.21-.64-.41-.77-.49s-.46-.11-.46,0a6.21,6.21,0,0,1-.37.83s-.08,0-.17-.08c-1.15-.83-1.64-1-1.64-.73A7.33,7.33,0,0,1,7.7,3.65C6.48,5.68,5.24,6.7,4,6.7c-.56,0-.54,0-.37.64s.2.58.68.43a3.37,3.37,0,0,0,1.09-.54.86.86,0,0,1,.3-.17,1.34,1.34,0,0,1,.13.39.79.79,0,0,0,.17.4A3.5,3.5,0,0,0,7.37,7.3L7.8,7l.09.34c.12.45.19.51.62.39a4.25,4.25,0,0,0,2.17-1.54l.38-.45,0,.39A5.92,5.92,0,0,1,8.89,9.54L7.67,10.71c-2,1.93-1.89,3.51.37,5a27.41,27.41,0,0,0,2.89,1.51c.17.07.62.32,1,.54C14,19,15,20.23,15,21.48a2,2,0,0,0,0,.49h0c0,.05,0,.05.56-.1a1.89,1.89,0,0,0,.53-.21,2.41,2.41,0,0,0-.34-1.15,7.05,7.05,0,0,0-1.68-1.77,21.91,21.91,0,0,0-3.2-1.83A9.53,9.53,0,0,1,8.16,15.2a2.18,2.18,0,0,1-.74-1.55C7.42,12.79,7.86,12,9,11c1.77-1.64,2.45-2.45,2.92-3.55a2.28,2.28,0,0,0,.26-1.26A2,2,0,0,0,12,5.06l-.2-.45L12,4.3l.28-.49.09-.18L12.6,4a3.69,3.69,0,0,1,.61,1.76A3.47,3.47,0,0,1,12.94,7l-.09.25s-.21.37-.41.69A17.78,17.78,0,0,1,9.91,10.6c-1.07,1-1.43,1.62-1.47,2.47a2.05,2.05,0,0,0,.7,1.73,10.47,10.47,0,0,0,3.28,2.08c2.28,1.13,3.26,1.81,4,2.73a2.94,2.94,0,0,1,.74,1.75,1.26,1.26,0,0,0,.09.57.48.48,0,0,0,.26,0l.51-.13.29-.08,0-.28c-.13-1-1-2-2.47-3a25.52,25.52,0,0,0-3.26-1.77,8.59,8.59,0,0,1-2.23-1.43,2.09,2.09,0,0,1-.5-2.62c.26-.53.5-.83,2.35-2.6,1.51-1.45,2.15-2.58,2.15-3.79A3.67,3.67,0,0,0,13,3.48a3,3,0,0,1-.4-.42A1.85,1.85,0,0,1,13,2.33a6.74,6.74,0,0,1,1.83,1.73,2.62,2.62,0,0,1,.47,1.68,3,3,0,0,1-.55,1.84c-.45.78-.79,1.14-2.67,2.93a5.56,5.56,0,0,0-1.3,1.64,1.77,1.77,0,0,0-.21,1,1.76,1.76,0,0,0,.19.92,6.28,6.28,0,0,0,2.9,2.34,21.6,21.6,0,0,1,3.66,2c1.35,1,2,2,2,3a1.06,1.06,0,0,0,.05.47,2.83,2.83,0,0,0,1-.24C20.56,21.68,20.56,21.66,20.46,21.32ZM7.29,6.4h0a2.23,2.23,0,0,1-.9.28L6,6.72l.43-.53a15.22,15.22,0,0,0,1.89-3,3.52,3.52,0,0,1,.38-.67c.07-.08.49.2,1,.64l.39.35L9.66,4A6.7,6.7,0,0,1,7.29,6.4Zm3.58-1.11A5.8,5.8,0,0,1,9.25,6.51h0a3.3,3.3,0,0,1-.74.17l-.35,0,.39-.49a15.64,15.64,0,0,0,1.32-2,4.63,4.63,0,0,1,.28-.49c.06-.08.33.26.57.77l.28.57Zm1-1.4a1.63,1.63,0,0,1-.28.4A6.63,6.63,0,0,1,11,3.72l-.53-.56.12-.29c.2-.49.24-.51.64-.19a5.57,5.57,0,0,1,.85.78A2.78,2.78,0,0,1,11.87,3.89Z"/></svg>
+            <svg id="main_header__logo" class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                <path
+                    d="M20.46,21.32C20,19.78,18.6,18.59,15.3,17a12.67,12.67,0,0,1-2.64-1.56,4.27,4.27,0,0,1-.79-1,2.6,2.6,0,0,1,0-1.41c.24-.68.49-1,2.43-2.85a7.18,7.18,0,0,0,2.09-2.92,4.25,4.25,0,0,0,0-1.77,6.52,6.52,0,0,0-2.85-3.11c-.56-.36-.81-.4-.81-.15a2.33,2.33,0,0,1-.18.45L12.4,3l-.53-.36c-.28-.21-.64-.41-.77-.49s-.46-.11-.46,0a6.21,6.21,0,0,1-.37.83s-.08,0-.17-.08c-1.15-.83-1.64-1-1.64-.73A7.33,7.33,0,0,1,7.7,3.65C6.48,5.68,5.24,6.7,4,6.7c-.56,0-.54,0-.37.64s.2.58.68.43a3.37,3.37,0,0,0,1.09-.54.86.86,0,0,1,.3-.17,1.34,1.34,0,0,1,.13.39.79.79,0,0,0,.17.4A3.5,3.5,0,0,0,7.37,7.3L7.8,7l.09.34c.12.45.19.51.62.39a4.25,4.25,0,0,0,2.17-1.54l.38-.45,0,.39A5.92,5.92,0,0,1,8.89,9.54L7.67,10.71c-2,1.93-1.89,3.51.37,5a27.41,27.41,0,0,0,2.89,1.51c.17.07.62.32,1,.54C14,19,15,20.23,15,21.48a2,2,0,0,0,0,.49h0c0,.05,0,.05.56-.1a1.89,1.89,0,0,0,.53-.21,2.41,2.41,0,0,0-.34-1.15,7.05,7.05,0,0,0-1.68-1.77,21.91,21.91,0,0,0-3.2-1.83A9.53,9.53,0,0,1,8.16,15.2a2.18,2.18,0,0,1-.74-1.55C7.42,12.79,7.86,12,9,11c1.77-1.64,2.45-2.45,2.92-3.55a2.28,2.28,0,0,0,.26-1.26A2,2,0,0,0,12,5.06l-.2-.45L12,4.3l.28-.49.09-.18L12.6,4a3.69,3.69,0,0,1,.61,1.76A3.47,3.47,0,0,1,12.94,7l-.09.25s-.21.37-.41.69A17.78,17.78,0,0,1,9.91,10.6c-1.07,1-1.43,1.62-1.47,2.47a2.05,2.05,0,0,0,.7,1.73,10.47,10.47,0,0,0,3.28,2.08c2.28,1.13,3.26,1.81,4,2.73a2.94,2.94,0,0,1,.74,1.75,1.26,1.26,0,0,0,.09.57.48.48,0,0,0,.26,0l.51-.13.29-.08,0-.28c-.13-1-1-2-2.47-3a25.52,25.52,0,0,0-3.26-1.77,8.59,8.59,0,0,1-2.23-1.43,2.09,2.09,0,0,1-.5-2.62c.26-.53.5-.83,2.35-2.6,1.51-1.45,2.15-2.58,2.15-3.79A3.67,3.67,0,0,0,13,3.48a3,3,0,0,1-.4-.42A1.85,1.85,0,0,1,13,2.33a6.74,6.74,0,0,1,1.83,1.73,2.62,2.62,0,0,1,.47,1.68,3,3,0,0,1-.55,1.84c-.45.78-.79,1.14-2.67,2.93a5.56,5.56,0,0,0-1.3,1.64,1.77,1.77,0,0,0-.21,1,1.76,1.76,0,0,0,.19.92,6.28,6.28,0,0,0,2.9,2.34,21.6,21.6,0,0,1,3.66,2c1.35,1,2,2,2,3a1.06,1.06,0,0,0,.05.47,2.83,2.83,0,0,0,1-.24C20.56,21.68,20.56,21.66,20.46,21.32ZM7.29,6.4h0a2.23,2.23,0,0,1-.9.28L6,6.72l.43-.53a15.22,15.22,0,0,0,1.89-3,3.52,3.52,0,0,1,.38-.67c.07-.08.49.2,1,.64l.39.35L9.66,4A6.7,6.7,0,0,1,7.29,6.4Zm3.58-1.11A5.8,5.8,0,0,1,9.25,6.51h0a3.3,3.3,0,0,1-.74.17l-.35,0,.39-.49a15.64,15.64,0,0,0,1.32-2,4.63,4.63,0,0,1,.28-.49c.06-.08.33.26.57.77l.28.57Zm1-1.4a1.63,1.63,0,0,1-.28.4A6.63,6.63,0,0,1,11,3.72l-.53-.56.12-.29c.2-.49.24-.51.64-.19a5.57,5.57,0,0,1,.85.78A2.78,2.78,0,0,1,11.87,3.89Z" />
+            </svg>
             <h4 class="h4 header__company-name">RanchiMall</h4>
         </a>
-        <label class="theme-switcher" title="Change theme">
-            <input id="theme_switcher" class="theme-switcher__checkbox" type="checkbox">
-            <svg class="icon moon-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M10 6a8 8 0 0 0 11.955 6.956C21.474 18.03 17.2 22 12 22 6.477 22 2 17.523 2 12c0-5.2 3.97-9.474 9.044-9.955A7.963 7.963 0 0 0 10 6zm-6 6a8 8 0 0 0 8 8 8.006 8.006 0 0 0 6.957-4.045c-.316.03-.636.045-.957.045-5.523 0-10-4.477-10-10 0-.321.015-.64.045-.957A8.006 8.006 0 0 0 4 12zm14.164-9.709L19 2.5v1l-.836.209a2 2 0 0 0-1.455 1.455L16.5 6h-1l-.209-.836a2 2 0 0 0-1.455-1.455L13 3.5v-1l.836-.209A2 2 0 0 0 15.29.836L15.5 0h1l.209.836a2 2 0 0 0 1.455 1.455zm5 5L24 7.5v1l-.836.209a2 2 0 0 0-1.455 1.455L21.5 11h-1l-.209-.836a2 2 0 0 0-1.455-1.455L18 8.5v-1l.836-.209a2 2 0 0 0 1.455-1.455L20.5 5h1l.209.836a2 2 0 0 0 1.455 1.455z"/></svg>
-            <svg class="icon sun-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 18a6 6 0 1 1 0-12 6 6 0 0 1 0 12zm0-2a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM11 1h2v3h-2V1zm0 19h2v3h-2v-3zM3.515 4.929l1.414-1.414L7.05 5.636 5.636 7.05 3.515 4.93zM16.95 18.364l1.414-1.414 2.121 2.121-1.414 1.414-2.121-2.121zm2.121-14.85l1.414 1.415-2.121 2.121-1.414-1.414 2.121-2.121zM5.636 16.95l1.414 1.414-2.121 2.121-1.414-1.414 2.121-2.121zM23 11v2h-3v-2h3zM4 11v2H1v-2h3z"/></svg>
-        </label>
+        <theme-toggle></theme-toggle>
     </header>
     <article id="home_page" class="page">
-        <aside id="floor_line_map" class="grid">
+        <!-- <aside id="floor_line_map" class="grid">
             <div class="flex line-map justify-center">
                 <div id="floor_line_map__circle" class="line-map__circle"></div>
                 <div class="line-map__bar"></div>
             </div>
             <div id="floor_label_container"></div>
-        </aside>
+        </aside> -->
         <main id="floor_container" class="grid"></main>
     </article>
-
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js"></script>
     <script src="assets/js/components.js"></script>
+    <script src="https://unpkg.com/uhtml@3.0.1/es.js"></script>
     <script src="assets/js/index.js"></script>
-
     <script>
 
         const icoInvestors = [
@@ -179,37 +161,31 @@
             },
         ]
 
-        function renderAllSeries(){
-            const frag = document.createDocumentFragment()
-            getRef('bit_bond_series__container').innerHTML = ''
-            bitBondSerieses.forEach((series, index) => {
-                frag.append(render.bitBondRow(series))
+        function renderAllSeries() {
+            const bonds = bitBondSeries.map((series, index) => {
+                return render.bitBondRow(series)
             })
-            getRef('bit_bond_series__container').append(frag)
+            renderElem(getRef('bit_bond_series__container'), html`${bonds}`)
         }
-        function renderAllFundInvestors(){
-            const frag = document.createDocumentFragment()
-            getRef('bob_fund_investors__container').innerHTML = ''
-            bobFund.forEach(investor => {
-                frag.append(render.bobFundRow(investor))
-            })
-            getRef('bob_fund_investors__container').append(frag)
+        function renderAllFundInvestors() {
+            const funds = bobFund.map(investor => render.bobFundRow(investor))
+            renderElem(getRef('bob_fund_investors__container'), html`${funds}`)
         }
-        function renderAllIcoInvestors(){
+        function renderAllIcoInvestors() {
             const frag = document.createDocumentFragment()
             getRef('ico_investors__container').innerHTML = ''
             icoInvestors.forEach(investor => {
-                frag.append(render.icoInvestorRow(investor, {thumbnail: true}))
+                frag.append(render.icoInvestorRow(investor, { thumbnail: true }))
             })
             getRef('ico_investors__container').append(frag)
         }
-/*         renderAllIcoInvestors()
-        renderAllSeries()
-        renderAllFundInvestors() */
-        
+        /*         renderAllIcoInvestors()
+                renderAllSeries()
+                renderAllFundInvestors() */
 
-        function showOutletSwitcher(button){
-            if(isOutletSwitcherOpen) return
+
+        function showOutletSwitcher(button) {
+            if (isOutletSwitcherOpen) return
             isOutletSwitcherOpen = true
             const buttonDimensions = button.getBoundingClientRect()
             getRef('outlet_switcher').setAttribute('style', `top: ${buttonDimensions.top + document.documentElement.scrollTop}px; left: ${buttonDimensions.left}px;`)
@@ -224,129 +200,116 @@
         const allOutletCarousels = document.querySelectorAll('.outlet-preview sm-carousel')
 
         let homepagePercent = floorLineMapPercent = 0
-        const RO = new ResizeObserver(entries => {
-            entries.forEach(entry => {
-                homepagePercent = getRef('floor_container').scrollHeight / 100
-                floorLineMapPercent = getRef('floor_line_map').getBoundingClientRect().height / 100
-                renderAllFloorLabels()
-                updatePos()
-            });
-        })
-        RO.observe(document.body)
+        // const RO = new ResizeObserver(entries => {
+        //     entries.forEach(entry => {
+        //         homepagePercent = getRef('floor_container').scrollHeight / 100
+        //         floorLineMapPercent = getRef('floor_line_map').getBoundingClientRect().height / 100
+        //         renderAllFloorLabels()
+        //         updatePos()
+        //     });
+        // })
+        // RO.observe(document.body)
         function getScrollPercent() {
             const root = getRef('home_page')
             return (root.scrollTop) / ((root.scrollHeight) - root.clientHeight) * 100;
         }
 
-        getRef('home_page').addEventListener('scroll', e => {
-            throttle(updatePos, 1000 / 30)
-        }, {passive: true})
-        
-        function updatePos(){
+        // getRef('home_page').addEventListener('scroll', e => {
+        //     throttle(updatePos, 1000 / 30)
+        // }, { passive: true })
+
+        function updatePos() {
             window.requestAnimationFrame(() => {
                 getRef('floor_line_map__circle').setAttribute('style', `transform: translateY(${(getScrollPercent()) * (floorLineMapPercent)}px)`)
             })
         }
 
 
-        function renderAllFloorLabels(){
+        function renderAllFloorLabels() {
             const frag = document.createDocumentFragment()
             document.querySelectorAll('.floor').forEach((floor, index) => {
                 getRef('floor_label_container').innerHTML = ''
                 const top = ((floor.getBoundingClientRect().top - getRef('floor_container').getBoundingClientRect().top + getRef('floor_container').offsetTop) / homepagePercent) * floorLineMapPercent
                 const label = render.floorLabel(index + 1, top)
                 frag.append(label)
-                })
+            })
             getRef('floor_label_container').append(frag)
         }
 
-        const floorObserver = new IntersectionObserver( entries => {
+        const floorObserver = new IntersectionObserver(entries => {
             entries.forEach(entry => {
-                if(entry.isIntersecting){
+                if (entry.isIntersecting) {
                     document.querySelector(`.floor-label[data-target="${entry.target.id}"]`).classList.add('floor-label--active')
                 }
-                else{
+                else {
                     document.querySelector(`.floor-label[data-target="${entry.target.id}"]`).classList.remove('floor-label--active')
                 }
             })
         },
-        {
-            threshold: 0.2
-        })
+            {
+                threshold: 0.2
+            })
         document.querySelectorAll('.floor').forEach(floor => floorObserver.observe(floor))
 
 
-        function renderFloor(obj){
-            const {floorNo, floor, brief, outlets} = obj
-            const floorSection = create('section', {className: 'floor'})
-            floorSection.id = `floor_${floorNo + 1}`
-            floorSection.innerHTML = `
-                <header class="floor__header grid align-center">
-                    <h4 class="floor__num">Floor ${floorNo + 1}</h5>
-                    <h4 class="floor__title">${floor}</h3>
-                </header>
-                <main id="floor_${floorNo + 1}__outlets" class="grid outlets-container">
-                    <p>${brief}</p>
-                </main>
-            `
-            floorSection.querySelector(`#floor_${floorNo + 1}__outlets`).append(outlets)
-            return floorSection;
+        function renderFloor(obj) {
+            const { floorNo, floor, brief, outlets } = obj
+            return html`
+                <section id=${`floor_${floorNo + 1}`} class="floor">
+                    <header class="floor__header grid align-center">
+                        <h4 class="floor__num">Floor ${floorNo + 1}</h5>
+                        <h4 class="floor__title">${floor}</h3>
+                    </header>
+                    <main id=${`floor_${floorNo + 1}__outlets`} class="grid outlets-container">
+                        <p>${brief}</p>
+                        ${outlets}
+                    </main>
+                </section>
+            `;
         }
 
-        function renderAllFloors(){
-            const frag = document.createDocumentFragment()
-            siteMap.forEach((floor, floorNo) => {
-                frag.append(renderFloor({...floor, floorNo, outlets: renderFloorOutlets(floor.outlets)}))
+        function renderAllFloors() {
+            const floorOutlets = siteMap.map((floor, floorNo) => {
+                return renderFloor({ ...floor, floorNo, outlets: renderFloorOutlets(floor.outlets) })
             })
-            getRef('floor_container').append(frag)
+            renderElem(getRef('floor_container'), html`${floorOutlets}`)
         }
         renderAllFloors()
 
-        function renderOutletPreview(obj){
-            const {outletNo, name, brief, url, buyUrl, isSold} = obj
-            const preview = create('section', {
-                className: 'outlet-preview carousel-container'
-            })
-            let composed = `
-                <div class="grid outlet-preview__info">
-                    <h3 class="outlet__title">${name}</h3>
-                    <p class="outlet__description margin-bottom-1-5r">${brief}</p>
-                    <div class="grid flow-column gap-1-5 justify-start">
-            `
-            if(isSold){
-                composed += `
-                    <a href="${url}#${buyUrl}" class="button outlet-preview__button">
-                        <span class="button__label">Buy</span>
-                    </a>
-                `
-            }
-            composed += `
-                        <a href="${url}" class="button outlet-preview__button">
-                            <span class="button__label">Explore</span>
-                        </a>
+        function renderOutletPreview(obj) {
+            const { outletNo, name, brief, outletLinks } = obj
+            return html`
+                <section class="outlet-preview">
+                    <div class="grid outlet-preview__info">
+                        <h3 class="outlet__title">${name}</h3>
+                        <p class="outlet__description margin-bottom-1-5r">${brief}</p>
+                        <div class="flex flex-wrap gap-1-5 justify-start">
+                        ${outletLinks.map(link => renderOutletLink(link))}
                     </div>
                 </div>
-            <!--                         <div class="grid carousel-holder carousel-holder--right">
-                            <sm-carousel id="bit_bond_series__container" class="outlet-preview__carousel" indicator></sm-carousel>
-                        </div> -->
                 <div class="grid outlet-preview__number-container">
                     <h1 class="outlet-preview__number-title h2 color-0-3 weight-900">Outlet</h1>
                     <h1 class="outlet-preview__number" data-number="${outletNo + 1}">${outletNo + 1}</h1>
                 </div>
+            `;
+        }
+        function renderOutletLink(linkDetails) {
+            const { label, url, outbound } = linkDetails
+            return html`
+                <a href=${url}  class="button outlet-preview__button" target=${outbound ? '_blank' : ''}>
+                    <span class="button__label">${label}</span>
+                </a>
             `
-            preview.innerHTML = composed
-            return preview;
         }
 
-        function renderFloorOutlets(outlets){
-            const frag = document.createDocumentFragment()
-            outlets.forEach((outlet, outletNo) => {
-                frag.append(renderOutletPreview({...outlet, outletNo}))
+        function renderFloorOutlets(outlets) {
+            return outlets.map((outlet, outletNo) => {
+                return renderOutletPreview({ ...outlet, outletNo })
             })
-            return frag
         }
 
 
     </script>
 </body>
+
 </html>
\ No newline at end of file
diff --git a/internshipblockchaincontract.html b/internshipblockchaincontract.html
index c16df7d..d832b54 100644
--- a/internshipblockchaincontract.html
+++ b/internshipblockchaincontract.html
@@ -30,44 +30,62 @@
     <sm-popup id="intern_level_popup">
         <header class="popup__header" slot="header">
             <button class="close-button" onclick="getRef('intern_level_popup').hide()">
-                <svg class="icon icon-only close-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z"/></svg>
+                <svg class="icon icon-only close-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24"
+                    height="24">
+                    <path fill="none" d="M0 0h24v24H0z" />
+                    <path
+                        d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z" />
+                </svg>
             </button>
             <h4>Intern level information</h4>
         </header>
         <section class="grid">
             <header class="table margin-bottom-1-5r">
                 <h4>Level</h4>
-                <h4 >Details</h4>
+                <h4>Details</h4>
             </header>
             <section class="table">
                 <div>
                     Starter
                 </div>
                 <p>
-                    Starter Level is the qualification level. This is learning stage and will lead to award of certificates to those who clear this level. In general we do not want to pay at this at level because money changes motivations. And we want to identify most passionate interns at their level, who would love their work even if no monetary consideration is involved
+                    Starter Level is the qualification level. This is learning stage and will lead to award of
+                    certificates to those who clear this level. In general we do not want to pay at this at level
+                    because money changes motivations. And we want to identify most passionate interns at their level,
+                    who would love their work even if no monetary consideration is involved
                 </p>
                 <div>
                     Motivated
                 </div>
                 <p>
-                    Motivated is one time rewards stage. The complexity of projects will increase in this stage. If projects are successfully completed, then one time rewards will be given. All this will be known before hand. Project details, acceptance criteria, and amounts will be notified in advance to interns. 
+                    Motivated is one time rewards stage. The complexity of projects will increase in this stage. If
+                    projects are successfully completed, then one time rewards will be given. All this will be known
+                    before hand. Project details, acceptance criteria, and amounts will be notified in advance to
+                    interns.
                 </p>
                 <div>
                     Passionate
                 </div>
                 <p>
-                    Passionate is the first regular fixed stipend stage. The projects complexity will increase still further. This will be full scale commercial grade project. if 3 such projects are completed then one of the criteria to move into self driven stage will be met. Now we are looking for interns who in addition to being passionate are self driven, and can independently take on and complete full projects without day to day supervision.
+                    Passionate is the first regular fixed stipend stage. The projects complexity will increase still
+                    further. This will be full scale commercial grade project. if 3 such projects are completed then one
+                    of the criteria to move into self driven stage will be met. Now we are looking for interns who in
+                    addition to being passionate are self driven, and can independently take on and complete full
+                    projects without day to day supervision.
                 </p>
                 <div>
                     Self Driven
                 </div>
                 <p>
-                    Self Driven interns is the stage where are we are considering interns for permanent employment with Ranchi Mall. The internship stipends will be higher. Some of self driven interns will be guide interns in other levels. The key criteria is ability of complete jobs with high quality, and them taking self initiative. 
+                    Self Driven interns is the stage where are we are considering interns for permanent employment with
+                    Ranchi Mall. The internship stipends will be higher. Some of self driven interns will be guide
+                    interns in other levels. The key criteria is ability of complete jobs with high quality, and them
+                    taking self initiative.
                 </p>
             </section>
         </section>
     </sm-popup>
-    
+
     <section id="elevator_popup" class="grid hide-completely">
         <header class="elevator__header">
             <button class="close-button justify-self-start" onclick="hideSiteMap()">
@@ -81,22 +99,24 @@
         </header>
         <ul id="floor_list" class="grid"></ul>
     </section>
-    <header id="main_header" class="grid align-center full-bleed">
+    <header id="main_header" class="full-bleed">
         <button id="elevator_button" class="button" onclick="showSiteMap()">
-            <svg class="icon button__icon--left" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 3L16.3301 10.5H7.66987L12 3Z"/><path d="M12 21L7.66987 13.5L16.3301 13.5L12 21Z"/></svg>
+            <svg class="icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M12 3L16.3301 10.5H7.66987L12 3Z" />
+                <path d="M12 21L7.66987 13.5L16.3301 13.5L12 21Z" />
+            </svg>
             <span class="button__label">
                 Elevator
             </span>
         </button>
         <a href="index.html" class="main-logo flex align-center page-link justify-self-center" data-target="home_page">
-            <svg id="main_header__logo" class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20.46,21.32C20,19.78,18.6,18.59,15.3,17a12.67,12.67,0,0,1-2.64-1.56,4.27,4.27,0,0,1-.79-1,2.6,2.6,0,0,1,0-1.41c.24-.68.49-1,2.43-2.85a7.18,7.18,0,0,0,2.09-2.92,4.25,4.25,0,0,0,0-1.77,6.52,6.52,0,0,0-2.85-3.11c-.56-.36-.81-.4-.81-.15a2.33,2.33,0,0,1-.18.45L12.4,3l-.53-.36c-.28-.21-.64-.41-.77-.49s-.46-.11-.46,0a6.21,6.21,0,0,1-.37.83s-.08,0-.17-.08c-1.15-.83-1.64-1-1.64-.73A7.33,7.33,0,0,1,7.7,3.65C6.48,5.68,5.24,6.7,4,6.7c-.56,0-.54,0-.37.64s.2.58.68.43a3.37,3.37,0,0,0,1.09-.54.86.86,0,0,1,.3-.17,1.34,1.34,0,0,1,.13.39.79.79,0,0,0,.17.4A3.5,3.5,0,0,0,7.37,7.3L7.8,7l.09.34c.12.45.19.51.62.39a4.25,4.25,0,0,0,2.17-1.54l.38-.45,0,.39A5.92,5.92,0,0,1,8.89,9.54L7.67,10.71c-2,1.93-1.89,3.51.37,5a27.41,27.41,0,0,0,2.89,1.51c.17.07.62.32,1,.54C14,19,15,20.23,15,21.48a2,2,0,0,0,0,.49h0c0,.05,0,.05.56-.1a1.89,1.89,0,0,0,.53-.21,2.41,2.41,0,0,0-.34-1.15,7.05,7.05,0,0,0-1.68-1.77,21.91,21.91,0,0,0-3.2-1.83A9.53,9.53,0,0,1,8.16,15.2a2.18,2.18,0,0,1-.74-1.55C7.42,12.79,7.86,12,9,11c1.77-1.64,2.45-2.45,2.92-3.55a2.28,2.28,0,0,0,.26-1.26A2,2,0,0,0,12,5.06l-.2-.45L12,4.3l.28-.49.09-.18L12.6,4a3.69,3.69,0,0,1,.61,1.76A3.47,3.47,0,0,1,12.94,7l-.09.25s-.21.37-.41.69A17.78,17.78,0,0,1,9.91,10.6c-1.07,1-1.43,1.62-1.47,2.47a2.05,2.05,0,0,0,.7,1.73,10.47,10.47,0,0,0,3.28,2.08c2.28,1.13,3.26,1.81,4,2.73a2.94,2.94,0,0,1,.74,1.75,1.26,1.26,0,0,0,.09.57.48.48,0,0,0,.26,0l.51-.13.29-.08,0-.28c-.13-1-1-2-2.47-3a25.52,25.52,0,0,0-3.26-1.77,8.59,8.59,0,0,1-2.23-1.43,2.09,2.09,0,0,1-.5-2.62c.26-.53.5-.83,2.35-2.6,1.51-1.45,2.15-2.58,2.15-3.79A3.67,3.67,0,0,0,13,3.48a3,3,0,0,1-.4-.42A1.85,1.85,0,0,1,13,2.33a6.74,6.74,0,0,1,1.83,1.73,2.62,2.62,0,0,1,.47,1.68,3,3,0,0,1-.55,1.84c-.45.78-.79,1.14-2.67,2.93a5.56,5.56,0,0,0-1.3,1.64,1.77,1.77,0,0,0-.21,1,1.76,1.76,0,0,0,.19.92,6.28,6.28,0,0,0,2.9,2.34,21.6,21.6,0,0,1,3.66,2c1.35,1,2,2,2,3a1.06,1.06,0,0,0,.05.47,2.83,2.83,0,0,0,1-.24C20.56,21.68,20.56,21.66,20.46,21.32ZM7.29,6.4h0a2.23,2.23,0,0,1-.9.28L6,6.72l.43-.53a15.22,15.22,0,0,0,1.89-3,3.52,3.52,0,0,1,.38-.67c.07-.08.49.2,1,.64l.39.35L9.66,4A6.7,6.7,0,0,1,7.29,6.4Zm3.58-1.11A5.8,5.8,0,0,1,9.25,6.51h0a3.3,3.3,0,0,1-.74.17l-.35,0,.39-.49a15.64,15.64,0,0,0,1.32-2,4.63,4.63,0,0,1,.28-.49c.06-.08.33.26.57.77l.28.57Zm1-1.4a1.63,1.63,0,0,1-.28.4A6.63,6.63,0,0,1,11,3.72l-.53-.56.12-.29c.2-.49.24-.51.64-.19a5.57,5.57,0,0,1,.85.78A2.78,2.78,0,0,1,11.87,3.89Z"/></svg>
+            <svg id="main_header__logo" class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                <path
+                    d="M20.46,21.32C20,19.78,18.6,18.59,15.3,17a12.67,12.67,0,0,1-2.64-1.56,4.27,4.27,0,0,1-.79-1,2.6,2.6,0,0,1,0-1.41c.24-.68.49-1,2.43-2.85a7.18,7.18,0,0,0,2.09-2.92,4.25,4.25,0,0,0,0-1.77,6.52,6.52,0,0,0-2.85-3.11c-.56-.36-.81-.4-.81-.15a2.33,2.33,0,0,1-.18.45L12.4,3l-.53-.36c-.28-.21-.64-.41-.77-.49s-.46-.11-.46,0a6.21,6.21,0,0,1-.37.83s-.08,0-.17-.08c-1.15-.83-1.64-1-1.64-.73A7.33,7.33,0,0,1,7.7,3.65C6.48,5.68,5.24,6.7,4,6.7c-.56,0-.54,0-.37.64s.2.58.68.43a3.37,3.37,0,0,0,1.09-.54.86.86,0,0,1,.3-.17,1.34,1.34,0,0,1,.13.39.79.79,0,0,0,.17.4A3.5,3.5,0,0,0,7.37,7.3L7.8,7l.09.34c.12.45.19.51.62.39a4.25,4.25,0,0,0,2.17-1.54l.38-.45,0,.39A5.92,5.92,0,0,1,8.89,9.54L7.67,10.71c-2,1.93-1.89,3.51.37,5a27.41,27.41,0,0,0,2.89,1.51c.17.07.62.32,1,.54C14,19,15,20.23,15,21.48a2,2,0,0,0,0,.49h0c0,.05,0,.05.56-.1a1.89,1.89,0,0,0,.53-.21,2.41,2.41,0,0,0-.34-1.15,7.05,7.05,0,0,0-1.68-1.77,21.91,21.91,0,0,0-3.2-1.83A9.53,9.53,0,0,1,8.16,15.2a2.18,2.18,0,0,1-.74-1.55C7.42,12.79,7.86,12,9,11c1.77-1.64,2.45-2.45,2.92-3.55a2.28,2.28,0,0,0,.26-1.26A2,2,0,0,0,12,5.06l-.2-.45L12,4.3l.28-.49.09-.18L12.6,4a3.69,3.69,0,0,1,.61,1.76A3.47,3.47,0,0,1,12.94,7l-.09.25s-.21.37-.41.69A17.78,17.78,0,0,1,9.91,10.6c-1.07,1-1.43,1.62-1.47,2.47a2.05,2.05,0,0,0,.7,1.73,10.47,10.47,0,0,0,3.28,2.08c2.28,1.13,3.26,1.81,4,2.73a2.94,2.94,0,0,1,.74,1.75,1.26,1.26,0,0,0,.09.57.48.48,0,0,0,.26,0l.51-.13.29-.08,0-.28c-.13-1-1-2-2.47-3a25.52,25.52,0,0,0-3.26-1.77,8.59,8.59,0,0,1-2.23-1.43,2.09,2.09,0,0,1-.5-2.62c.26-.53.5-.83,2.35-2.6,1.51-1.45,2.15-2.58,2.15-3.79A3.67,3.67,0,0,0,13,3.48a3,3,0,0,1-.4-.42A1.85,1.85,0,0,1,13,2.33a6.74,6.74,0,0,1,1.83,1.73,2.62,2.62,0,0,1,.47,1.68,3,3,0,0,1-.55,1.84c-.45.78-.79,1.14-2.67,2.93a5.56,5.56,0,0,0-1.3,1.64,1.77,1.77,0,0,0-.21,1,1.76,1.76,0,0,0,.19.92,6.28,6.28,0,0,0,2.9,2.34,21.6,21.6,0,0,1,3.66,2c1.35,1,2,2,2,3a1.06,1.06,0,0,0,.05.47,2.83,2.83,0,0,0,1-.24C20.56,21.68,20.56,21.66,20.46,21.32ZM7.29,6.4h0a2.23,2.23,0,0,1-.9.28L6,6.72l.43-.53a15.22,15.22,0,0,0,1.89-3,3.52,3.52,0,0,1,.38-.67c.07-.08.49.2,1,.64l.39.35L9.66,4A6.7,6.7,0,0,1,7.29,6.4Zm3.58-1.11A5.8,5.8,0,0,1,9.25,6.51h0a3.3,3.3,0,0,1-.74.17l-.35,0,.39-.49a15.64,15.64,0,0,0,1.32-2,4.63,4.63,0,0,1,.28-.49c.06-.08.33.26.57.77l.28.57Zm1-1.4a1.63,1.63,0,0,1-.28.4A6.63,6.63,0,0,1,11,3.72l-.53-.56.12-.29c.2-.49.24-.51.64-.19a5.57,5.57,0,0,1,.85.78A2.78,2.78,0,0,1,11.87,3.89Z" />
+            </svg>
             <h4 class="h4 header__company-name">RanchiMall</h4>
         </a>
-        <label class="theme-switcher" title="Change theme">
-            <input id="theme_switcher" class="theme-switcher__checkbox" type="checkbox">
-            <svg class="icon moon-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M10 6a8 8 0 0 0 11.955 6.956C21.474 18.03 17.2 22 12 22 6.477 22 2 17.523 2 12c0-5.2 3.97-9.474 9.044-9.955A7.963 7.963 0 0 0 10 6zm-6 6a8 8 0 0 0 8 8 8.006 8.006 0 0 0 6.957-4.045c-.316.03-.636.045-.957.045-5.523 0-10-4.477-10-10 0-.321.015-.64.045-.957A8.006 8.006 0 0 0 4 12zm14.164-9.709L19 2.5v1l-.836.209a2 2 0 0 0-1.455 1.455L16.5 6h-1l-.209-.836a2 2 0 0 0-1.455-1.455L13 3.5v-1l.836-.209A2 2 0 0 0 15.29.836L15.5 0h1l.209.836a2 2 0 0 0 1.455 1.455zm5 5L24 7.5v1l-.836.209a2 2 0 0 0-1.455 1.455L21.5 11h-1l-.209-.836a2 2 0 0 0-1.455-1.455L18 8.5v-1l.836-.209a2 2 0 0 0 1.455-1.455L20.5 5h1l.209.836a2 2 0 0 0 1.455 1.455z"/></svg>
-            <svg class="icon sun-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 18a6 6 0 1 1 0-12 6 6 0 0 1 0 12zm0-2a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM11 1h2v3h-2V1zm0 19h2v3h-2v-3zM3.515 4.929l1.414-1.414L7.05 5.636 5.636 7.05 3.515 4.93zM16.95 18.364l1.414-1.414 2.121 2.121-1.414 1.414-2.121-2.121zm2.121-14.85l1.414 1.415-2.121 2.121-1.414-1.414 2.121-2.121zM5.636 16.95l1.414 1.414-2.121 2.121-1.414-1.414 2.121-2.121zM23 11v2h-3v-2h3zM4 11v2H1v-2h3z"/></svg>
-        </label>
+        <theme-toggle></theme-toggle>
     </header>
     <div id="outlet_switcher" class="grid gap-1-5 hide">
         <div class="flex align-center">
@@ -120,26 +140,57 @@
     <main class="page">
         <section class="outlet-hero-section grid margin-bottom-3r">
             <button class="outlet-label">
-                <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M21 13.242V20h1v2H2v-2h1v-6.758A4.496 4.496 0 0 1 1 9.5c0-.827.224-1.624.633-2.303L4.345 2.5a1 1 0 0 1 .866-.5H18.79a1 1 0 0 1 .866.5l2.702 4.682A4.496 4.496 0 0 1 21 13.242zm-2 .73a4.496 4.496 0 0 1-3.75-1.36A4.496 4.496 0 0 1 12 14.001a4.496 4.496 0 0 1-3.25-1.387A4.496 4.496 0 0 1 5 13.973V20h14v-6.027zM5.789 4L3.356 8.213a2.5 2.5 0 0 0 4.466 2.216c.335-.837 1.52-.837 1.856 0a2.5 2.5 0 0 0 4.644 0c.335-.837 1.52-.837 1.856 0a2.5 2.5 0 1 0 4.457-2.232L18.21 4H5.79z"/></svg>
+                <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
+                    <path fill="none" d="M0 0h24v24H0z" />
+                    <path
+                        d="M21 13.242V20h1v2H2v-2h1v-6.758A4.496 4.496 0 0 1 1 9.5c0-.827.224-1.624.633-2.303L4.345 2.5a1 1 0 0 1 .866-.5H18.79a1 1 0 0 1 .866.5l2.702 4.682A4.496 4.496 0 0 1 21 13.242zm-2 .73a4.496 4.496 0 0 1-3.75-1.36A4.496 4.496 0 0 1 12 14.001a4.496 4.496 0 0 1-3.25-1.387A4.496 4.496 0 0 1 5 13.973V20h14v-6.027zM5.789 4L3.356 8.213a2.5 2.5 0 0 0 4.466 2.216c.335-.837 1.52-.837 1.856 0a2.5 2.5 0 0 0 4.644 0c.335-.837 1.52-.837 1.856 0a2.5 2.5 0 1 0 4.457-2.232L18.21 4H5.79z" />
+                </svg>
                 <span class="outlet-label__name">Outlet</span>
-                <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 13.172l4.95-4.95 1.414 1.414L12 16 5.636 9.636 7.05 8.222z"/></svg>
+                <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
+                    <path fill="none" d="M0 0h24v24H0z" />
+                    <path d="M12 13.172l4.95-4.95 1.414 1.414L12 16 5.636 9.636 7.05 8.222z" />
+                </svg>
             </button>
             <h2 class="h2 weight-700 margin-bottom-1r">Internship Blockchain Contract</h2>
             <p>
-                Internship Blockchain Contract tokenizes all our internship initiatives. This is ownedby Incorporation Blockchain Contract.
+                Internship Blockchain Contract tokenizes all our internship initiatives. This is ownedby Incorporation
+                Blockchain Contract.
             </p>
         </section>
         <div class="rooms__header">
             <h4 class="room__label">Rooms</h4>
             <scroll-tab-header data-target="ico_page_group">
                 <button class="room-button" title="Investors">
-                    <svg class="icon button__icon--left" xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'><title>People</title><path d='M402 168c-2.93 40.67-33.1 72-66 72s-63.12-31.32-66-72c-3-42.31 26.37-72 66-72s69 30.46 66 72z' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='32'/><path d='M336 304c-65.17 0-127.84 32.37-143.54 95.41-2.08 8.34 3.15 16.59 11.72 16.59h263.65c8.57 0 13.77-8.25 11.72-16.59C463.85 335.36 401.18 304 336 304z' fill='none' stroke='currentColor' stroke-miterlimit='10' stroke-width='32'/><path d='M200 185.94c-2.34 32.48-26.72 58.06-53 58.06s-50.7-25.57-53-58.06C91.61 152.15 115.34 128 147 128s55.39 24.77 53 57.94z' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='32'/><path d='M206 306c-18.05-8.27-37.93-11.45-59-11.45-52 0-102.1 25.85-114.65 76.2-1.65 6.66 2.53 13.25 9.37 13.25H154' fill='none' stroke='currentColor' stroke-linecap='round' stroke-miterlimit='10' stroke-width='32'/></svg>
+                    <svg class="icon button__icon--left" xmlns='http://www.w3.org/2000/svg' class='ionicon'
+                        viewBox='0 0 512 512'>
+                        <title>People</title>
+                        <path
+                            d='M402 168c-2.93 40.67-33.1 72-66 72s-63.12-31.32-66-72c-3-42.31 26.37-72 66-72s69 30.46 66 72z'
+                            fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round'
+                            stroke-width='32' />
+                        <path
+                            d='M336 304c-65.17 0-127.84 32.37-143.54 95.41-2.08 8.34 3.15 16.59 11.72 16.59h263.65c8.57 0 13.77-8.25 11.72-16.59C463.85 335.36 401.18 304 336 304z'
+                            fill='none' stroke='currentColor' stroke-miterlimit='10' stroke-width='32' />
+                        <path
+                            d='M200 185.94c-2.34 32.48-26.72 58.06-53 58.06s-50.7-25.57-53-58.06C91.61 152.15 115.34 128 147 128s55.39 24.77 53 57.94z'
+                            fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round'
+                            stroke-width='32' />
+                        <path
+                            d='M206 306c-18.05-8.27-37.93-11.45-59-11.45-52 0-102.1 25.85-114.65 76.2-1.65 6.66 2.53 13.25 9.37 13.25H154'
+                            fill='none' stroke='currentColor' stroke-linecap='round' stroke-miterlimit='10'
+                            stroke-width='32' />
+                    </svg>
                     <span class="button__label">
                         Interns
                     </span>
                 </button>
                 <button class="room-button" title="Phases">
-                    <svg class="icon button__icon--left" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M4 10.5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm0-6c-.83 0-1.5.67-1.5 1.5S3.17 7.5 4 7.5 5.5 6.83 5.5 6 4.83 4.5 4 4.5zm0 12c-.83 0-1.5.68-1.5 1.5s.68 1.5 1.5 1.5 1.5-.68 1.5-1.5-.67-1.5-1.5-1.5zM7 19h14v-2H7v2zm0-6h14v-2H7v2zm0-8v2h14V5H7z"/></svg>
+                    <svg class="icon button__icon--left" xmlns="http://www.w3.org/2000/svg" height="24px"
+                        viewBox="0 0 24 24" width="24px" fill="#000000">
+                        <path d="M0 0h24v24H0V0z" fill="none" />
+                        <path
+                            d="M4 10.5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm0-6c-.83 0-1.5.67-1.5 1.5S3.17 7.5 4 7.5 5.5 6.83 5.5 6 4.83 4.5 4 4.5zm0 12c-.83 0-1.5.68-1.5 1.5s.68 1.5 1.5 1.5 1.5-.68 1.5-1.5-.67-1.5-1.5-1.5zM7 19h14v-2H7v2zm0-6h14v-2H7v2zm0-8v2h14V5H7z" />
+                    </svg>
                     <span class="button__label">
                         Projects
                     </span>
@@ -154,8 +205,10 @@
             <section>
                 <h3 class="h3 margin-bottom-1-5r">Projects</h3>
                 <p class="margin-bottom-3r">
-                    Please refer to the whitepaper <a href="https://www.ranchimall.net/ICO/">here</a> for detailed terms.
-                    RanchiMall Initial Coin Offering (ICO) abides by the terms we offered in our ICO whitepaper available
+                    Please refer to the whitepaper <a href="https://www.ranchimall.net/ICO/">here</a> for detailed
+                    terms.
+                    RanchiMall Initial Coin Offering (ICO) abides by the terms we offered in our ICO whitepaper
+                    available
                     at link above. We have made certain changes in our terms as our learning has improved. All
                     these changes are to support the interests of our long term investors.
                 </p>
@@ -163,7 +216,8 @@
                 <ol type="1">
                     <li>
                         <p>
-                            RanchiMall Tokens (RMT) now own the financial gains emerging from all our blockchain contracts
+                            RanchiMall Tokens (RMT) now own the financial gains emerging from all our blockchain
+                            contracts
                         </p>
                     </li>
                     <li>
@@ -179,14 +233,16 @@
                     <li>
                         <p>
                             Number of RMTs tokens in circulation has been paused to
-                            10000 instead of a release schedule of 21 million in 3 years. The un-issued tokens will stay vested
+                            10000 instead of a release schedule of 21 million in 3 years. The un-issued tokens will stay
+                            vested
                             with the Founder of RanchiMall.
                         </p>
                     </li>
                     <li>
                         <p>
                             The price discovery during active phase has been USD 1500 per
-                            token giving RMTs in circulation a valuation of 150 million USD. Unless this price is realised in open
+                            token giving RMTs in circulation a valuation of 150 million USD. Unless this price is
+                            realised in open
                             makets on sustainable basis, new tokens will not be put in circulation.
                         </p>
                     </li>
@@ -194,9 +250,10 @@
             </section>
         </scroll-tab-panels>
     </main>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script>
-    <script src="js/components.js"></script>
-    <script src="js/index.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js"></script>
+    <script src="assets/js/components.js"></script>
+    <script src="https://unpkg.com/uhtml@3.0.1/es.js"></script>
+    <script src="assets/js/index.js"></script>
     <script>
         const interns = [
             {
@@ -271,7 +328,7 @@
             },
         ]
 
-        function renderAllInterns(){
+        function renderAllInterns() {
             const frag = document.createDocumentFragment()
             getRef('interns_container').innerHTML = ''
             interns.forEach(investor => {
@@ -281,11 +338,12 @@
         }
         renderAllInterns()
 
-        document.addEventListener('click', e=> {
-            if(e.target.closest('.intern__level')){
+        document.addEventListener('click', e => {
+            if (e.target.closest('.intern__level')) {
                 getRef('intern_level_popup').show()
             }
         })
     </script>
 </body>
+
 </html>
\ No newline at end of file
diff --git a/new-layout.html b/new-layout.html
index 9178ac0..685597d 100644
--- a/new-layout.html
+++ b/new-layout.html
@@ -28,41 +28,49 @@
         </header>
         <ul id="floor_list" class="grid"></ul>
     </section>
-    <header id="main_header" class="grid align-center full-bleed">
+    <header id="main_header" class="full-bleed">
         <button id="elevator_button" class="button" onclick="showSiteMap()">
-            <svg class="icon button__icon--left" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 3L16.3301 10.5H7.66987L12 3Z"/><path d="M12 21L7.66987 13.5L16.3301 13.5L12 21Z"/></svg>
+            <svg class="icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M12 3L16.3301 10.5H7.66987L12 3Z" />
+                <path d="M12 21L7.66987 13.5L16.3301 13.5L12 21Z" />
+            </svg>
             <span class="button__label">
                 Elevator
             </span>
         </button>
         <a href="index.html" class="main-logo flex align-center page-link justify-self-center" data-target="home_page">
-            <svg id="main_header__logo" class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20.46,21.32C20,19.78,18.6,18.59,15.3,17a12.67,12.67,0,0,1-2.64-1.56,4.27,4.27,0,0,1-.79-1,2.6,2.6,0,0,1,0-1.41c.24-.68.49-1,2.43-2.85a7.18,7.18,0,0,0,2.09-2.92,4.25,4.25,0,0,0,0-1.77,6.52,6.52,0,0,0-2.85-3.11c-.56-.36-.81-.4-.81-.15a2.33,2.33,0,0,1-.18.45L12.4,3l-.53-.36c-.28-.21-.64-.41-.77-.49s-.46-.11-.46,0a6.21,6.21,0,0,1-.37.83s-.08,0-.17-.08c-1.15-.83-1.64-1-1.64-.73A7.33,7.33,0,0,1,7.7,3.65C6.48,5.68,5.24,6.7,4,6.7c-.56,0-.54,0-.37.64s.2.58.68.43a3.37,3.37,0,0,0,1.09-.54.86.86,0,0,1,.3-.17,1.34,1.34,0,0,1,.13.39.79.79,0,0,0,.17.4A3.5,3.5,0,0,0,7.37,7.3L7.8,7l.09.34c.12.45.19.51.62.39a4.25,4.25,0,0,0,2.17-1.54l.38-.45,0,.39A5.92,5.92,0,0,1,8.89,9.54L7.67,10.71c-2,1.93-1.89,3.51.37,5a27.41,27.41,0,0,0,2.89,1.51c.17.07.62.32,1,.54C14,19,15,20.23,15,21.48a2,2,0,0,0,0,.49h0c0,.05,0,.05.56-.1a1.89,1.89,0,0,0,.53-.21,2.41,2.41,0,0,0-.34-1.15,7.05,7.05,0,0,0-1.68-1.77,21.91,21.91,0,0,0-3.2-1.83A9.53,9.53,0,0,1,8.16,15.2a2.18,2.18,0,0,1-.74-1.55C7.42,12.79,7.86,12,9,11c1.77-1.64,2.45-2.45,2.92-3.55a2.28,2.28,0,0,0,.26-1.26A2,2,0,0,0,12,5.06l-.2-.45L12,4.3l.28-.49.09-.18L12.6,4a3.69,3.69,0,0,1,.61,1.76A3.47,3.47,0,0,1,12.94,7l-.09.25s-.21.37-.41.69A17.78,17.78,0,0,1,9.91,10.6c-1.07,1-1.43,1.62-1.47,2.47a2.05,2.05,0,0,0,.7,1.73,10.47,10.47,0,0,0,3.28,2.08c2.28,1.13,3.26,1.81,4,2.73a2.94,2.94,0,0,1,.74,1.75,1.26,1.26,0,0,0,.09.57.48.48,0,0,0,.26,0l.51-.13.29-.08,0-.28c-.13-1-1-2-2.47-3a25.52,25.52,0,0,0-3.26-1.77,8.59,8.59,0,0,1-2.23-1.43,2.09,2.09,0,0,1-.5-2.62c.26-.53.5-.83,2.35-2.6,1.51-1.45,2.15-2.58,2.15-3.79A3.67,3.67,0,0,0,13,3.48a3,3,0,0,1-.4-.42A1.85,1.85,0,0,1,13,2.33a6.74,6.74,0,0,1,1.83,1.73,2.62,2.62,0,0,1,.47,1.68,3,3,0,0,1-.55,1.84c-.45.78-.79,1.14-2.67,2.93a5.56,5.56,0,0,0-1.3,1.64,1.77,1.77,0,0,0-.21,1,1.76,1.76,0,0,0,.19.92,6.28,6.28,0,0,0,2.9,2.34,21.6,21.6,0,0,1,3.66,2c1.35,1,2,2,2,3a1.06,1.06,0,0,0,.05.47,2.83,2.83,0,0,0,1-.24C20.56,21.68,20.56,21.66,20.46,21.32ZM7.29,6.4h0a2.23,2.23,0,0,1-.9.28L6,6.72l.43-.53a15.22,15.22,0,0,0,1.89-3,3.52,3.52,0,0,1,.38-.67c.07-.08.49.2,1,.64l.39.35L9.66,4A6.7,6.7,0,0,1,7.29,6.4Zm3.58-1.11A5.8,5.8,0,0,1,9.25,6.51h0a3.3,3.3,0,0,1-.74.17l-.35,0,.39-.49a15.64,15.64,0,0,0,1.32-2,4.63,4.63,0,0,1,.28-.49c.06-.08.33.26.57.77l.28.57Zm1-1.4a1.63,1.63,0,0,1-.28.4A6.63,6.63,0,0,1,11,3.72l-.53-.56.12-.29c.2-.49.24-.51.64-.19a5.57,5.57,0,0,1,.85.78A2.78,2.78,0,0,1,11.87,3.89Z"/></svg>
+            <svg id="main_header__logo" class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                <path
+                    d="M20.46,21.32C20,19.78,18.6,18.59,15.3,17a12.67,12.67,0,0,1-2.64-1.56,4.27,4.27,0,0,1-.79-1,2.6,2.6,0,0,1,0-1.41c.24-.68.49-1,2.43-2.85a7.18,7.18,0,0,0,2.09-2.92,4.25,4.25,0,0,0,0-1.77,6.52,6.52,0,0,0-2.85-3.11c-.56-.36-.81-.4-.81-.15a2.33,2.33,0,0,1-.18.45L12.4,3l-.53-.36c-.28-.21-.64-.41-.77-.49s-.46-.11-.46,0a6.21,6.21,0,0,1-.37.83s-.08,0-.17-.08c-1.15-.83-1.64-1-1.64-.73A7.33,7.33,0,0,1,7.7,3.65C6.48,5.68,5.24,6.7,4,6.7c-.56,0-.54,0-.37.64s.2.58.68.43a3.37,3.37,0,0,0,1.09-.54.86.86,0,0,1,.3-.17,1.34,1.34,0,0,1,.13.39.79.79,0,0,0,.17.4A3.5,3.5,0,0,0,7.37,7.3L7.8,7l.09.34c.12.45.19.51.62.39a4.25,4.25,0,0,0,2.17-1.54l.38-.45,0,.39A5.92,5.92,0,0,1,8.89,9.54L7.67,10.71c-2,1.93-1.89,3.51.37,5a27.41,27.41,0,0,0,2.89,1.51c.17.07.62.32,1,.54C14,19,15,20.23,15,21.48a2,2,0,0,0,0,.49h0c0,.05,0,.05.56-.1a1.89,1.89,0,0,0,.53-.21,2.41,2.41,0,0,0-.34-1.15,7.05,7.05,0,0,0-1.68-1.77,21.91,21.91,0,0,0-3.2-1.83A9.53,9.53,0,0,1,8.16,15.2a2.18,2.18,0,0,1-.74-1.55C7.42,12.79,7.86,12,9,11c1.77-1.64,2.45-2.45,2.92-3.55a2.28,2.28,0,0,0,.26-1.26A2,2,0,0,0,12,5.06l-.2-.45L12,4.3l.28-.49.09-.18L12.6,4a3.69,3.69,0,0,1,.61,1.76A3.47,3.47,0,0,1,12.94,7l-.09.25s-.21.37-.41.69A17.78,17.78,0,0,1,9.91,10.6c-1.07,1-1.43,1.62-1.47,2.47a2.05,2.05,0,0,0,.7,1.73,10.47,10.47,0,0,0,3.28,2.08c2.28,1.13,3.26,1.81,4,2.73a2.94,2.94,0,0,1,.74,1.75,1.26,1.26,0,0,0,.09.57.48.48,0,0,0,.26,0l.51-.13.29-.08,0-.28c-.13-1-1-2-2.47-3a25.52,25.52,0,0,0-3.26-1.77,8.59,8.59,0,0,1-2.23-1.43,2.09,2.09,0,0,1-.5-2.62c.26-.53.5-.83,2.35-2.6,1.51-1.45,2.15-2.58,2.15-3.79A3.67,3.67,0,0,0,13,3.48a3,3,0,0,1-.4-.42A1.85,1.85,0,0,1,13,2.33a6.74,6.74,0,0,1,1.83,1.73,2.62,2.62,0,0,1,.47,1.68,3,3,0,0,1-.55,1.84c-.45.78-.79,1.14-2.67,2.93a5.56,5.56,0,0,0-1.3,1.64,1.77,1.77,0,0,0-.21,1,1.76,1.76,0,0,0,.19.92,6.28,6.28,0,0,0,2.9,2.34,21.6,21.6,0,0,1,3.66,2c1.35,1,2,2,2,3a1.06,1.06,0,0,0,.05.47,2.83,2.83,0,0,0,1-.24C20.56,21.68,20.56,21.66,20.46,21.32ZM7.29,6.4h0a2.23,2.23,0,0,1-.9.28L6,6.72l.43-.53a15.22,15.22,0,0,0,1.89-3,3.52,3.52,0,0,1,.38-.67c.07-.08.49.2,1,.64l.39.35L9.66,4A6.7,6.7,0,0,1,7.29,6.4Zm3.58-1.11A5.8,5.8,0,0,1,9.25,6.51h0a3.3,3.3,0,0,1-.74.17l-.35,0,.39-.49a15.64,15.64,0,0,0,1.32-2,4.63,4.63,0,0,1,.28-.49c.06-.08.33.26.57.77l.28.57Zm1-1.4a1.63,1.63,0,0,1-.28.4A6.63,6.63,0,0,1,11,3.72l-.53-.56.12-.29c.2-.49.24-.51.64-.19a5.57,5.57,0,0,1,.85.78A2.78,2.78,0,0,1,11.87,3.89Z" />
+            </svg>
             <h4 class="h4 header__company-name">RanchiMall</h4>
         </a>
-        <label class="theme-switcher" title="Change theme">
-            <input id="theme_switcher" class="theme-switcher__checkbox" type="checkbox">
-            <svg class="icon moon-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M10 6a8 8 0 0 0 11.955 6.956C21.474 18.03 17.2 22 12 22 6.477 22 2 17.523 2 12c0-5.2 3.97-9.474 9.044-9.955A7.963 7.963 0 0 0 10 6zm-6 6a8 8 0 0 0 8 8 8.006 8.006 0 0 0 6.957-4.045c-.316.03-.636.045-.957.045-5.523 0-10-4.477-10-10 0-.321.015-.64.045-.957A8.006 8.006 0 0 0 4 12zm14.164-9.709L19 2.5v1l-.836.209a2 2 0 0 0-1.455 1.455L16.5 6h-1l-.209-.836a2 2 0 0 0-1.455-1.455L13 3.5v-1l.836-.209A2 2 0 0 0 15.29.836L15.5 0h1l.209.836a2 2 0 0 0 1.455 1.455zm5 5L24 7.5v1l-.836.209a2 2 0 0 0-1.455 1.455L21.5 11h-1l-.209-.836a2 2 0 0 0-1.455-1.455L18 8.5v-1l.836-.209a2 2 0 0 0 1.455-1.455L20.5 5h1l.209.836a2 2 0 0 0 1.455 1.455z"/></svg>
-            <svg class="icon sun-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 18a6 6 0 1 1 0-12 6 6 0 0 1 0 12zm0-2a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM11 1h2v3h-2V1zm0 19h2v3h-2v-3zM3.515 4.929l1.414-1.414L7.05 5.636 5.636 7.05 3.515 4.93zM16.95 18.364l1.414-1.414 2.121 2.121-1.414 1.414-2.121-2.121zm2.121-14.85l1.414 1.415-2.121 2.121-1.414-1.414 2.121-2.121zM5.636 16.95l1.414 1.414-2.121 2.121-1.414-1.414 2.121-2.121zM23 11v2h-3v-2h3zM4 11v2H1v-2h3z"/></svg>
-        </label>
+        <theme-toggle></theme-toggle>
     </header>
     <section class="banner">
         <p class="banner__text">
-            We are servicing current customers only. A new Blockchain-based version of Bob's Fund will be available soon.
+            We are servicing current customers only. A new Blockchain-based version of Bob's Fund will be available
+            soon.
         </p>
         <button class="close-button" onclick="this.parentNode.remove()">
-            <svg class="icon icon-only close-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z"/></svg>
+            <svg class="icon icon-only close-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24"
+                height="24">
+                <path fill="none" d="M0 0h24v24H0z" />
+                <path
+                    d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z" />
+            </svg>
         </button>
     </section>
     <div id="outlet_switcher" class="grid gap-1-5 hide-completely">
         <div class="flex align-center">
-<!--             <svg class="icon button__icon--left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24"
+            <!--             <svg class="icon button__icon--left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24"
                 height="24">
                 <path fill="none" d="M0 0h24v24H0z" />
                 <path
                     d="M21 13.242V20h1v2H2v-2h1v-6.758A4.496 4.496 0 0 1 1 9.5c0-.827.224-1.624.633-2.303L4.345 2.5a1 1 0 0 1 .866-.5H18.79a1 1 0 0 1 .866.5l2.702 4.682A4.496 4.496 0 0 1 21 13.242zm-2 .73a4.496 4.496 0 0 1-3.75-1.36A4.496 4.496 0 0 1 12 14.001a4.496 4.496 0 0 1-3.25-1.387A4.496 4.496 0 0 1 5 13.973V20h14v-6.027zM5.789 4L3.356 8.213a2.5 2.5 0 0 0 4.466 2.216c.335-.837 1.52-.837 1.856 0a2.5 2.5 0 0 0 4.644 0c.335-.837 1.52-.837 1.856 0a2.5 2.5 0 1 0 4.457-2.232L18.21 4H5.79z" />
             </svg> -->
             <span id="outlet_switcher__floor_num" class="weight-500 color-0-8"></span>
-<!--             <button class="justify-right" onclick="hideOutletSwitcher()">
+            <!--             <button class="justify-right" onclick="hideOutletSwitcher()">
                 <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
                     <path fill="none" d="M0 0h24v24H0z" />
                     <path
@@ -79,38 +87,62 @@
         <section class="features-grid">
             <div class="feature">
                 <div class="feature__icon">
-                    <svg class="icon" id="f47905c4-be19-4535-912c-ac0a41d5362d" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M55.59,38a10.43,10.43,0,0,0-3.09-4.19,12.61,12.61,0,0,0-5.4-2.46,11.57,11.57,0,0,0,5.75-4.7,13.39,13.39,0,0,0,1.86-7q0-7.62-5.86-11.46c-3.64-2.39-8.62-3.65-14.91-3.82V0H25.38V4.28H21.7V0H13.14V4.28H7.42v7.84l5.75,1.22V50.7L7.42,51.91v7.81h6.69V64h8.56V59.72h3.68V64h8.56V59.72h.42q10.37,0,15.8-4.15t5.45-12.3A14.09,14.09,0,0,0,55.59,38ZM41.35,21.11A5.14,5.14,0,0,1,39,25.77q-2.34,1.52-7.07,1.51h-5.4V14.48h6q4.45,0,6.65,1.58A5.81,5.81,0,0,1,41.35,21.11ZM41.29,48q-2,1.56-6,1.56H26.54V36.11H36a9.61,9.61,0,0,1,4.19.78,5,5,0,0,1,2.36,2.36,9.14,9.14,0,0,1,.76,4A5.66,5.66,0,0,1,41.29,48Z"/></svg>
+                    <svg class="icon" id="f47905c4-be19-4535-912c-ac0a41d5362d" data-name="Layer 1"
+                        xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+                        <path
+                            d="M55.59,38a10.43,10.43,0,0,0-3.09-4.19,12.61,12.61,0,0,0-5.4-2.46,11.57,11.57,0,0,0,5.75-4.7,13.39,13.39,0,0,0,1.86-7q0-7.62-5.86-11.46c-3.64-2.39-8.62-3.65-14.91-3.82V0H25.38V4.28H21.7V0H13.14V4.28H7.42v7.84l5.75,1.22V50.7L7.42,51.91v7.81h6.69V64h8.56V59.72h3.68V64h8.56V59.72h.42q10.37,0,15.8-4.15t5.45-12.3A14.09,14.09,0,0,0,55.59,38ZM41.35,21.11A5.14,5.14,0,0,1,39,25.77q-2.34,1.52-7.07,1.51h-5.4V14.48h6q4.45,0,6.65,1.58A5.81,5.81,0,0,1,41.35,21.11ZM41.29,48q-2,1.56-6,1.56H26.54V36.11H36a9.61,9.61,0,0,1,4.19.78,5,5,0,0,1,2.36,2.36,9.14,9.14,0,0,1,.76,4A5.66,5.66,0,0,1,41.29,48Z" />
+                    </svg>
                 </div>
                 <h4 class="feature__title">Bitcoin linked</h4>
                 <p class="feature__brief">Bob's Fund is a 20 year long term Bitcoin price linked product</p>
             </div>
             <div class="feature feature--wide">
                 <div class="feature__icon">
-                    <svg class="icon" id="a0972e55-309b-4721-ab64-f0e363b1245c" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M32,11.86a18.06,18.06,0,1,0,18,18.06A18.08,18.08,0,0,0,32,11.86Zm8.45,14.45-9.57,9.57a1.65,1.65,0,0,1-1.17.48,1.67,1.67,0,0,1-1.18-.48l-5-5a1.66,1.66,0,0,1,2.35-2.35l3.81,3.8L38.1,24a1.66,1.66,0,1,1,2.35,2.35Z"/><path d="M59.42,26.2a5.89,5.89,0,0,0-3.05-9.4h0a5.89,5.89,0,0,1-4.37-6A5.89,5.89,0,0,0,44,5a5.89,5.89,0,0,1-7.07-2.29h0a5.88,5.88,0,0,0-9.88,0A5.89,5.89,0,0,1,20,5a5.89,5.89,0,0,0-8,5.81h0a5.89,5.89,0,0,1-4.37,6,5.89,5.89,0,0,0-3,9.4h0a5.91,5.91,0,0,1,0,7.43A5.89,5.89,0,0,0,7.63,43,5.88,5.88,0,0,1,12,48.94L6.37,58.68a.34.34,0,0,0,.29.51l5.14.05a.34.34,0,0,1,.29.17l2.61,4.42a.33.33,0,0,0,.58,0l5.28-9.14a5.87,5.87,0,0,1,6.5,2.45h0a5.88,5.88,0,0,0,9.88,0h0a5.87,5.87,0,0,1,6.5-2.45l5.28,9.14a.33.33,0,0,0,.58,0l2.61-4.42a.34.34,0,0,1,.29-.17l5.14-.05a.34.34,0,0,0,.29-.51L52,48.94A5.88,5.88,0,0,1,56.37,43a5.89,5.89,0,0,0,3.05-9.4A5.91,5.91,0,0,1,59.42,26.2ZM32,50A20.06,20.06,0,1,1,52.06,29.92,20.08,20.08,0,0,1,32,50Z"/></svg>
+                    <svg class="icon" id="a0972e55-309b-4721-ab64-f0e363b1245c" data-name="Layer 1"
+                        xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+                        <path
+                            d="M32,11.86a18.06,18.06,0,1,0,18,18.06A18.08,18.08,0,0,0,32,11.86Zm8.45,14.45-9.57,9.57a1.65,1.65,0,0,1-1.17.48,1.67,1.67,0,0,1-1.18-.48l-5-5a1.66,1.66,0,0,1,2.35-2.35l3.81,3.8L38.1,24a1.66,1.66,0,1,1,2.35,2.35Z" />
+                        <path
+                            d="M59.42,26.2a5.89,5.89,0,0,0-3.05-9.4h0a5.89,5.89,0,0,1-4.37-6A5.89,5.89,0,0,0,44,5a5.89,5.89,0,0,1-7.07-2.29h0a5.88,5.88,0,0,0-9.88,0A5.89,5.89,0,0,1,20,5a5.89,5.89,0,0,0-8,5.81h0a5.89,5.89,0,0,1-4.37,6,5.89,5.89,0,0,0-3,9.4h0a5.91,5.91,0,0,1,0,7.43A5.89,5.89,0,0,0,7.63,43,5.88,5.88,0,0,1,12,48.94L6.37,58.68a.34.34,0,0,0,.29.51l5.14.05a.34.34,0,0,1,.29.17l2.61,4.42a.33.33,0,0,0,.58,0l5.28-9.14a5.87,5.87,0,0,1,6.5,2.45h0a5.88,5.88,0,0,0,9.88,0h0a5.87,5.87,0,0,1,6.5-2.45l5.28,9.14a.33.33,0,0,0,.58,0l2.61-4.42a.34.34,0,0,1,.29-.17l5.14-.05a.34.34,0,0,0,.29-.51L52,48.94A5.88,5.88,0,0,1,56.37,43a5.89,5.89,0,0,0,3.05-9.4A5.91,5.91,0,0,1,59.42,26.2ZM32,50A20.06,20.06,0,1,1,52.06,29.92,20.08,20.08,0,0,1,32,50Z" />
+                    </svg>
                 </div>
                 <h4 class="feature__title">Better returns than conventional assets</h4>
-                <p class="feature__brief">Over a very long time period, Bitcoin returns should outstrip returns on conventional assets like real estate and stocks</p>
+                <p class="feature__brief">Over a very long time period, Bitcoin returns should outstrip returns on
+                    conventional assets like real estate and stocks</p>
             </div>
             <div class="feature feature--wide">
                 <div class="feature__icon">
-                    <svg class="icon" id="a9cf0968-17a3-4e2e-8dcf-10d366d12d28" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M17.28,29a16.35,16.35,0,0,1-7.63-1.64,11.32,11.32,0,0,1-4.77-4.54,13.17,13.17,0,0,1-1.63-6.61V12.88A13.3,13.3,0,0,1,4.88,6.25,11.52,11.52,0,0,1,9.6,1.67,15.9,15.9,0,0,1,17.2,0a15.94,15.94,0,0,1,7.63,1.67,11.43,11.43,0,0,1,4.71,4.55,13.5,13.5,0,0,1,1.6,6.66v3.29a13.36,13.36,0,0,1-1.6,6.61,11.33,11.33,0,0,1-4.68,4.54A16,16,0,0,1,17.28,29Zm0-8a3.94,3.94,0,0,0,3.21-1.39,5.13,5.13,0,0,0,1.16-3.4V12.88a5.31,5.31,0,0,0-1.16-3.47A4,4,0,0,0,17.2,8a3.94,3.94,0,0,0-3.27,1.41,5.35,5.35,0,0,0-1.14,3.47v3.29A5.11,5.11,0,0,0,14,19.59,4.09,4.09,0,0,0,17.28,21Zm3,37.61-6.93-3.43L43.76,6.46,50.7,9.88ZM46.89,64a16.15,16.15,0,0,1-7.64-1.67,11.75,11.75,0,0,1-4.81-4.58,13,13,0,0,1-1.67-6.58V47.91a13.19,13.19,0,0,1,1.63-6.58,11.41,11.41,0,0,1,4.77-4.58,16.11,16.11,0,0,1,7.63-1.67,16,16,0,0,1,7.6,1.65,11.39,11.39,0,0,1,4.72,4.55,13.3,13.3,0,0,1,1.63,6.63v3.26a13.5,13.5,0,0,1-1.61,6.63,11.29,11.29,0,0,1-4.68,4.55A15.87,15.87,0,0,1,46.89,64Zm0-8c1.68,0,2.81-.42,3.4-1.26a6.33,6.33,0,0,0,.88-3.61V47.91a5.31,5.31,0,0,0-1.12-3.42,3.88,3.88,0,0,0-3.25-1.41,4,4,0,0,0-3.33,1.41,5.31,5.31,0,0,0-1.12,3.42v3.26a4.93,4.93,0,0,0,1.33,3.42A4.17,4.17,0,0,0,46.89,56Z"/></svg>
+                    <svg class="icon" id="a9cf0968-17a3-4e2e-8dcf-10d366d12d28" data-name="Layer 1"
+                        xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+                        <path
+                            d="M17.28,29a16.35,16.35,0,0,1-7.63-1.64,11.32,11.32,0,0,1-4.77-4.54,13.17,13.17,0,0,1-1.63-6.61V12.88A13.3,13.3,0,0,1,4.88,6.25,11.52,11.52,0,0,1,9.6,1.67,15.9,15.9,0,0,1,17.2,0a15.94,15.94,0,0,1,7.63,1.67,11.43,11.43,0,0,1,4.71,4.55,13.5,13.5,0,0,1,1.6,6.66v3.29a13.36,13.36,0,0,1-1.6,6.61,11.33,11.33,0,0,1-4.68,4.54A16,16,0,0,1,17.28,29Zm0-8a3.94,3.94,0,0,0,3.21-1.39,5.13,5.13,0,0,0,1.16-3.4V12.88a5.31,5.31,0,0,0-1.16-3.47A4,4,0,0,0,17.2,8a3.94,3.94,0,0,0-3.27,1.41,5.35,5.35,0,0,0-1.14,3.47v3.29A5.11,5.11,0,0,0,14,19.59,4.09,4.09,0,0,0,17.28,21Zm3,37.61-6.93-3.43L43.76,6.46,50.7,9.88ZM46.89,64a16.15,16.15,0,0,1-7.64-1.67,11.75,11.75,0,0,1-4.81-4.58,13,13,0,0,1-1.67-6.58V47.91a13.19,13.19,0,0,1,1.63-6.58,11.41,11.41,0,0,1,4.77-4.58,16.11,16.11,0,0,1,7.63-1.67,16,16,0,0,1,7.6,1.65,11.39,11.39,0,0,1,4.72,4.55,13.3,13.3,0,0,1,1.63,6.63v3.26a13.5,13.5,0,0,1-1.61,6.63,11.29,11.29,0,0,1-4.68,4.55A15.87,15.87,0,0,1,46.89,64Zm0-8c1.68,0,2.81-.42,3.4-1.26a6.33,6.33,0,0,0,.88-3.61V47.91a5.31,5.31,0,0,0-1.12-3.42,3.88,3.88,0,0,0-3.25-1.41,4,4,0,0,0-3.33,1.41,5.31,5.31,0,0,0-1.12,3.42v3.26a4.93,4.93,0,0,0,1.33,3.42A4.17,4.17,0,0,0,46.89,56Z" />
+                    </svg>
                 </div>
                 <h4 class="feature__title">Get 100% of gains</h4>
                 <p class="feature__brief">Investors are entitled to 100% of Bitcoin price gains</p>
             </div>
             <div class="feature">
                 <div class="feature__icon">
-                    <svg class="icon" id="b25d5f7d-dd5a-4cc1-a2c9-37dbecdeaff1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M32.11,64q-10.12,0-16-6.41t-5.9-19V25.46q0-12.56,5.9-19T32,0Q42,0,47.89,6.45t5.92,19V38.58q0,12.6-5.87,19T32.11,64Zm0-11.41a5.53,5.53,0,0,0,5-3q1.76-3,1.75-10.15V24.52c0-4.67-.6-8-1.79-10a5.87,5.87,0,0,0-10.26,0q-1.76,3-1.75,10.06V39.43q0,7.18,1.75,10.17A5.7,5.7,0,0,0,32.11,52.59Z"/></svg>
+                    <svg class="icon" id="b25d5f7d-dd5a-4cc1-a2c9-37dbecdeaff1" data-name="Layer 1"
+                        xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+                        <path
+                            d="M32.11,64q-10.12,0-16-6.41t-5.9-19V25.46q0-12.56,5.9-19T32,0Q42,0,47.89,6.45t5.92,19V38.58q0,12.6-5.87,19T32.11,64Zm0-11.41a5.53,5.53,0,0,0,5-3q1.76-3,1.75-10.15V24.52c0-4.67-.6-8-1.79-10a5.87,5.87,0,0,0-10.26,0q-1.76,3-1.75,10.06V39.43q0,7.18,1.75,10.17A5.7,5.7,0,0,0,32.11,52.59Z" />
+                    </svg>
                 </div>
                 <h4 class="feature__title">No management fee</h4>
                 <p class="feature__brief">The management fees on this product is zero</p>
             </div>
             <div class="feature">
                 <div class="feature__icon">
-                    <svg class="icon" id="e0287cba-7cef-4217-aee4-c8ac3e32d7a5" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M49.52,20.65a1,1,0,0,1,0-1.16L56.94,9a1,1,0,0,0-.83-1.58H18.32V2.52a2.52,2.52,0,1,0-5,0V59H9.4a2.52,2.52,0,1,0,0,5H22.21a2.52,2.52,0,0,0,0-5H18.32V32.73H56.11a1,1,0,0,0,.83-1.59Z"/></svg>
+                    <svg class="icon" id="e0287cba-7cef-4217-aee4-c8ac3e32d7a5" data-name="Layer 1"
+                        xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+                        <path
+                            d="M49.52,20.65a1,1,0,0,1,0-1.16L56.94,9a1,1,0,0,0-.83-1.58H18.32V2.52a2.52,2.52,0,1,0-5,0V59H9.4a2.52,2.52,0,1,0,0,5H22.21a2.52,2.52,0,0,0,0-5H18.32V32.73H56.11a1,1,0,0,0,.83-1.59Z" />
+                    </svg>
                 </div>
                 <h4 class="feature__title">Aligned goals</h4>
-                <p class="feature__brief">RanchiMall earns by having invested an equal amount as every investor, thus the interests of fund manager, and fund investors are totally aligned</p>
+                <p class="feature__brief">RanchiMall earns by having invested an equal amount as every investor, thus
+                    the interests of fund manager, and fund investors are totally aligned</p>
             </div>
         </section>
         <div class="rooms__header">
@@ -120,20 +152,44 @@
             <div id="expanding_tile" class="hide-completely"></div>
             <a class="room-tile room-tile--main" href="#performance_room">
                 <div class="tile-content">
-                    <svg class="room-tile__icon" id="b23be00b-0d64-4bed-9d99-6f7aaf421af4" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M44.53,26.6a7.17,7.17,0,1,1,5.07-2.1h0A7.16,7.16,0,0,1,44.53,26.6Zm0-11.47a4.31,4.31,0,1,0,3,1.26A4.31,4.31,0,0,0,44.53,15.13Z"/><path d="M62.58,1.38A4.7,4.7,0,0,0,58.35.09L45.09,2.66a14.61,14.61,0,0,0-7.56,4L19.92,24.29l-9,2.23a8.75,8.75,0,0,0-4.1,2.31L.46,35.2a1.43,1.43,0,0,0,1,2.44h.08L10,37.2l1.67,1.68L6.85,41.23a1.43,1.43,0,0,0-.38,2.3l14,14a1.44,1.44,0,0,0,1,.42l.24,0a1.47,1.47,0,0,0,1.05-.78l2.35-4.79,1.61,1.6-.45,8.58a1.43,1.43,0,0,0,.85,1.38,1.51,1.51,0,0,0,.58.12,1.44,1.44,0,0,0,1-.42l6.37-6.36a8.75,8.75,0,0,0,2.31-4.1l2.23-9,17.7-17.7a14.5,14.5,0,0,0,4-7.56L63.87,5.61A4.7,4.7,0,0,0,62.58,1.38ZM21,54.05,9.91,42.92,13.78,41,23,50.18ZM8.85,30.86a5.82,5.82,0,0,1,2.76-1.56L16,28.21,10.23,34l-.37.37-4.74.25ZM34.58,52.43A5.89,5.89,0,0,1,33,55.19l-3.74,3.73.25-4.74,6.13-6.13Zm20.68-28-18,18h0l-9,9-7.85-7.86-5.31-5.3h0l-2.55-2.54,27-27a11.72,11.72,0,0,1,5.38-3L58.3,19A11.64,11.64,0,0,1,55.26,24.41Zm5.8-19.34L59,15.68,48.28,5,58.89,2.9a1.85,1.85,0,0,1,2.17,2.17Z"/><path d="M2.63,62.76a1.41,1.41,0,0,1-1-.41,1.44,1.44,0,0,1,0-2l8.12-8.13a1.44,1.44,0,0,1,2,2L3.64,62.35A1.42,1.42,0,0,1,2.63,62.76Z"/><path d="M10.75,62.76a1.43,1.43,0,0,1-1-2.44l4.06-4.07a1.43,1.43,0,0,1,2,2l-4.06,4.06A1.43,1.43,0,0,1,10.75,62.76Z"/><path d="M2.63,54.64a1.43,1.43,0,0,1-1-2.44l4.07-4.06a1.43,1.43,0,0,1,2,2L3.65,54.22A1.44,1.44,0,0,1,2.63,54.64Z"/></svg>
+                    <svg class="room-tile__icon" id="b23be00b-0d64-4bed-9d99-6f7aaf421af4" data-name="Layer 1"
+                        xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+                        <path
+                            d="M44.53,26.6a7.17,7.17,0,1,1,5.07-2.1h0A7.16,7.16,0,0,1,44.53,26.6Zm0-11.47a4.31,4.31,0,1,0,3,1.26A4.31,4.31,0,0,0,44.53,15.13Z" />
+                        <path
+                            d="M62.58,1.38A4.7,4.7,0,0,0,58.35.09L45.09,2.66a14.61,14.61,0,0,0-7.56,4L19.92,24.29l-9,2.23a8.75,8.75,0,0,0-4.1,2.31L.46,35.2a1.43,1.43,0,0,0,1,2.44h.08L10,37.2l1.67,1.68L6.85,41.23a1.43,1.43,0,0,0-.38,2.3l14,14a1.44,1.44,0,0,0,1,.42l.24,0a1.47,1.47,0,0,0,1.05-.78l2.35-4.79,1.61,1.6-.45,8.58a1.43,1.43,0,0,0,.85,1.38,1.51,1.51,0,0,0,.58.12,1.44,1.44,0,0,0,1-.42l6.37-6.36a8.75,8.75,0,0,0,2.31-4.1l2.23-9,17.7-17.7a14.5,14.5,0,0,0,4-7.56L63.87,5.61A4.7,4.7,0,0,0,62.58,1.38ZM21,54.05,9.91,42.92,13.78,41,23,50.18ZM8.85,30.86a5.82,5.82,0,0,1,2.76-1.56L16,28.21,10.23,34l-.37.37-4.74.25ZM34.58,52.43A5.89,5.89,0,0,1,33,55.19l-3.74,3.73.25-4.74,6.13-6.13Zm20.68-28-18,18h0l-9,9-7.85-7.86-5.31-5.3h0l-2.55-2.54,27-27a11.72,11.72,0,0,1,5.38-3L58.3,19A11.64,11.64,0,0,1,55.26,24.41Zm5.8-19.34L59,15.68,48.28,5,58.89,2.9a1.85,1.85,0,0,1,2.17,2.17Z" />
+                        <path
+                            d="M2.63,62.76a1.41,1.41,0,0,1-1-.41,1.44,1.44,0,0,1,0-2l8.12-8.13a1.44,1.44,0,0,1,2,2L3.64,62.35A1.42,1.42,0,0,1,2.63,62.76Z" />
+                        <path
+                            d="M10.75,62.76a1.43,1.43,0,0,1-1-2.44l4.06-4.07a1.43,1.43,0,0,1,2,2l-4.06,4.06A1.43,1.43,0,0,1,10.75,62.76Z" />
+                        <path
+                            d="M2.63,54.64a1.43,1.43,0,0,1-1-2.44l4.07-4.06a1.43,1.43,0,0,1,2,2L3.65,54.22A1.44,1.44,0,0,1,2.63,54.64Z" />
+                    </svg>
                     <!-- <img class="room-tile__icon" src="./assets/illustrations/performance.svg" alt=""> -->
                     <h4 class="room-tile__title">Performance</h4>
                 </div>
             </a>
             <a class="room-tile" href="#product_room">
                 <div class="tile-content">
-                    <svg class="room-tile__icon" id="b76bf456-6b89-4220-8b44-f4f7d833bad6" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M61.28,22.11c0-.05,0-.09,0-.14L58.62,6A1.68,1.68,0,0,0,57,4.6H7A1.68,1.68,0,0,0,5.38,6L2.72,22c0,.05,0,.09,0,.14s0,.09,0,.14V57.72A1.68,1.68,0,0,0,4.38,59.4H59.62a1.68,1.68,0,0,0,1.68-1.68V22.25C61.3,22.2,61.28,22.16,61.28,22.11Zm-3.64-1.54H39.34L38.51,8h17ZM27.92,23.93h8.16v6.64L33,28.41a1.7,1.7,0,0,0-1.9,0l-3.13,2.16ZM35.15,8,36,20.57H28L28.91,8ZM8.46,8H25.55l-.88,12.61H6.36ZM57.94,56H6.06V23.93h18.5v9.84a1.67,1.67,0,0,0,2.63,1.38L32,31.84l4.81,3.31a1.65,1.65,0,0,0,.95.3,1.76,1.76,0,0,0,.78-.19,1.68,1.68,0,0,0,.9-1.49V23.93h18.5Z"/></svg>
+                    <svg class="room-tile__icon" id="b76bf456-6b89-4220-8b44-f4f7d833bad6" data-name="Layer 1"
+                        xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+                        <path
+                            d="M61.28,22.11c0-.05,0-.09,0-.14L58.62,6A1.68,1.68,0,0,0,57,4.6H7A1.68,1.68,0,0,0,5.38,6L2.72,22c0,.05,0,.09,0,.14s0,.09,0,.14V57.72A1.68,1.68,0,0,0,4.38,59.4H59.62a1.68,1.68,0,0,0,1.68-1.68V22.25C61.3,22.2,61.28,22.16,61.28,22.11Zm-3.64-1.54H39.34L38.51,8h17ZM27.92,23.93h8.16v6.64L33,28.41a1.7,1.7,0,0,0-1.9,0l-3.13,2.16ZM35.15,8,36,20.57H28L28.91,8ZM8.46,8H25.55l-.88,12.61H6.36ZM57.94,56H6.06V23.93h18.5v9.84a1.67,1.67,0,0,0,2.63,1.38L32,31.84l4.81,3.31a1.65,1.65,0,0,0,.95.3,1.76,1.76,0,0,0,.78-.19,1.68,1.68,0,0,0,.9-1.49V23.93h18.5Z" />
+                    </svg>
                     <h4 class="room-tile__title">Product</h4>
                 </div>
             </a>
             <a class="room-tile" href="#purchase_room">
                 <div class="tile-content">
-                    <svg class="room-tile__icon" id="bb329e59-3d30-49a7-ac0d-b164d3b3b631" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M42.74,64a14,14,0,1,1,14-14A14,14,0,0,1,42.74,64Zm0-24.73A10.7,10.7,0,1,0,53.44,50,10.71,10.71,0,0,0,42.74,39.27Z"/><path d="M28.7,50H14.08a3.43,3.43,0,0,1-3.42-3.58l1.4-31.51h4.85V17.8a1.71,1.71,0,1,0,3.42,0V14.88H33V17.8a1.71,1.71,0,1,0,3.42,0V14.88h4.84L42.2,36c.18,0,.35,0,.54,0a13.92,13.92,0,0,1,2.9.31l-1.1-24.8H36.42V9.76a9.76,9.76,0,1,0-19.51,0v1.69H8.79L7.24,46.24a6.85,6.85,0,0,0,6.84,7.15H29.14A14.24,14.24,0,0,1,28.7,50ZM20.33,9.76A6.34,6.34,0,1,1,33,9.76v1.69H20.33Z"/><path d="M41.23,54.65a1.69,1.69,0,0,1-1.18-.49l-3-3a1.67,1.67,0,0,1,2.35-2.36l1.84,1.84,4.85-4.85a1.66,1.66,0,0,1,2.35,2.35l-6,6A1.67,1.67,0,0,1,41.23,54.65Z"/></svg>
+                    <svg class="room-tile__icon" id="bb329e59-3d30-49a7-ac0d-b164d3b3b631" data-name="Layer 1"
+                        xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+                        <path
+                            d="M42.74,64a14,14,0,1,1,14-14A14,14,0,0,1,42.74,64Zm0-24.73A10.7,10.7,0,1,0,53.44,50,10.71,10.71,0,0,0,42.74,39.27Z" />
+                        <path
+                            d="M28.7,50H14.08a3.43,3.43,0,0,1-3.42-3.58l1.4-31.51h4.85V17.8a1.71,1.71,0,1,0,3.42,0V14.88H33V17.8a1.71,1.71,0,1,0,3.42,0V14.88h4.84L42.2,36c.18,0,.35,0,.54,0a13.92,13.92,0,0,1,2.9.31l-1.1-24.8H36.42V9.76a9.76,9.76,0,1,0-19.51,0v1.69H8.79L7.24,46.24a6.85,6.85,0,0,0,6.84,7.15H29.14A14.24,14.24,0,0,1,28.7,50ZM20.33,9.76A6.34,6.34,0,1,1,33,9.76v1.69H20.33Z" />
+                        <path
+                            d="M41.23,54.65a1.69,1.69,0,0,1-1.18-.49l-3-3a1.67,1.67,0,0,1,2.35-2.36l1.84,1.84,4.85-4.85a1.66,1.66,0,0,1,2.35,2.35l-6,6A1.67,1.67,0,0,1,41.23,54.65Z" />
+                    </svg>
                     <!-- <img class="room-tile__icon" src="./assets/illustrations/purchase.svg" alt=""> -->
                     <h4 class="room-tile__title">Buy</h4>
                 </div>
@@ -142,7 +198,10 @@
         <section class="room-container hide-completely page-layout">
             <header class="room-container__header">
                 <button class="grid flow-column gap-1 align-center" onclick="hideRoom()">
-                    <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M7.828 11H20v2H7.828l5.364 5.364-1.414 1.414L4 12l7.778-7.778 1.414 1.414z"/></svg>
+                    <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
+                        <path fill="none" d="M0 0h24v24H0z" />
+                        <path d="M7.828 11H20v2H7.828l5.364 5.364-1.414 1.414L4 12l7.778-7.778 1.414 1.414z" />
+                    </svg>
                     <h3 id="room_title" class="hide-completely"></h3>
                 </button>
             </header>
@@ -154,16 +213,20 @@
                 </section>
                 <section id="product_room" class="grid room">
                     <p class="margin-bottom-3r">
-                        Bobs Fund allows customers to take a direct share in Bitcoin and they are automatically guided into a
+                        Bobs Fund allows customers to take a direct share in Bitcoin and they are automatically guided
+                        into a
                         long term investment plan. Bitcoin is a long term investors paradise with supply artificially
-                        constrained, and demand only growing. There are no price guarantees in this product. But the long
-                        duration of the investment ensures that customers will get an outsized rate of return. RanchiMall as
+                        constrained, and demand only growing. There are no price guarantees in this product. But the
+                        long
+                        duration of the investment ensures that customers will get an outsized rate of return.
+                        RanchiMall as
                         Fund Manager does not charge management fees.
                     </p>
                     <h4 class="h4 margin-bottom-1r">Risk Management</h4>
                     <p class="margin-bottom-3r">
                         There is no price risk for RanchiMall in Bobs Fund. But since this is a long term
-                        product, information security risks are high to maintain Bitcoins safely. Bitcoin keys must be split
+                        product, information security risks are high to maintain Bitcoins safely. Bitcoin keys must be
+                        split
                         using Shamir Secret Key Share algorithm, and should be recombined at the time of redemption. The
                         number of shares should have enough redundancy so that if some holders are not around, the keys
                         must still be recovered.
@@ -171,12 +234,15 @@
                     <h4 class="h4 margin-bottom-1r">Founder Notes</h4>
                     <p class="margin-bottom-3r">
                         Bobs Fund was first issued in my MBA classmates WhatsApp group, and restricted only to my
-                        classmates in June 2017. The product had a long term duration of 20 years, and it needed lot of trust
+                        classmates in June 2017. The product had a long term duration of 20 years, and it needed lot of
+                        trust
                         which my classamtes had in me. We kept this product concept under observation and testing for 4
-                        years, before exploring options to make it public. Another objective was to try out an idea where
+                        years, before exploring options to make it public. Another objective was to try out an idea
+                        where
                         fund management expenses are nil, as fund management fees eats up a lot of customer returns over
                         long term. Instead we made an equal investment as every contributing member did, and we hope to
-                        earn over the long life time of this product. Over time we realized, we could also use the Bitcoin as
+                        earn over the long life time of this product. Over time we realized, we could also use the
+                        Bitcoin as
                         collateral for DeFi products, and that gives us an additional earning stream.
                     </p>
                 </section>
@@ -190,7 +256,7 @@
             </footer>
         </section>
         <section>
-            <a class="ext-link-tile" href="https://ranchimall.github.io/bobs-fund/" target="_blank" >
+            <a class="ext-link-tile" href="https://ranchimall.github.io/bobs-fund/" target="_blank">
                 <div class="grid">
                     <h4 class="tile__title">See Bob's Fund in action</h4>
                     <p class="tile__brief">Visit the website to see investors and asset performance</p>
@@ -200,8 +266,9 @@
         </section>
     </main>
 
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js"></script>
     <script src="assets/js/components.js"></script>
+    <script src="https://unpkg.com/uhtml@3.0.1/es.js"></script>
     <script src="assets/js/index.js"></script>
     <script>
         const bobFund = [
@@ -467,26 +534,26 @@
             //console.info(gain, interest, net)
             return [net * USD_current, percentGain.toFixed(0)];
         }
-        function renderAllFundInvestors(){
+        function renderAllFundInvestors() {
             const frag = document.createDocumentFragment()
             const timelineItemsFrag = document.createDocumentFragment()
             getRef('bobs_fund_timeline').innerHTML = ''
             bobFund.forEach(fund => {
-                const {release, invested, investors, href} = fund
+                const { release, invested, investors, href } = fund
                 console.log(release, invested, investors, href)
-                const timelineItem = create('li', {className: 'timeline-item'})
+                const timelineItem = create('li', { className: 'timeline-item' })
 
                 const tilelineItemHeader = create('header', {
                     className: 'timeline-item__header',
                     text: getFormatedTime(release, true)
                 })
 
-                if(fund.hasOwnProperty('investors')){
+                if (fund.hasOwnProperty('investors')) {
                     investors.forEach(investor => {
                         let [currentValue, gain] = calcNetValue(2676.5, 64.46, investor.invested, 0)
                         currentValue = parseFloat(currentValue.toFixed(2))
                         timeElapsed = (new Date().getFullYear() - 2017)
-                        frag.append(render.bobFundRow({...investor, currentValue, gain, timeElapsed}))
+                        frag.append(render.bobFundRow({ ...investor, currentValue, gain, timeElapsed }))
                     })
                     const fundContainer = create('div', {
                         className: 'grid series-container series-container--bobs-fund'
@@ -500,21 +567,21 @@
                     fundContainer.append(frag)
                     timelineItem.append(heading, fundContainer)
                 }
-                else{
+                else {
                     const fundCard = create('div', {
                         className: 'grid card'
                     })
                     let [currentValue, gain] = calcNetValue(37488, 72.56, invested, 0)
-                        currentValue = parseFloat(currentValue.toFixed(2))
+                    currentValue = parseFloat(currentValue.toFixed(2))
                     fundCard.innerHTML = `
                         <div class="flex space-between">
                             <div class="grid">
                                 <h5 class="label color-0-8 weight-500">Total fund investment</h5>
-                                <h3 class="value original-value">${invested.toLocaleString('en-US', {style: 'currency' ,currency: 'USD'})}</h3>
+                                <h3 class="value original-value">${invested.toLocaleString('en-US', { style: 'currency', currency: 'USD' })}</h3>
                             </div>
                             <div class="grid justify-right text-align-right">
                                 <h4 class="label color-0-8 weight-500">Current value</h4>
-                                <h3 class="value current-value" style="color: var(--green)">${currentValue.toLocaleString('en-US', {style: 'currency', currency: 'USD'})}</h3>
+                                <h3 class="value current-value" style="color: var(--green)">${currentValue.toLocaleString('en-US', { style: 'currency', currency: 'USD' })}</h3>
                             </div>
                         </div>
                         <a class="button button--filled justify-right" href='${href}' target="_blank">See investors</a>
@@ -528,4 +595,5 @@
         }
     </script>
 </body>
+
 </html>
\ No newline at end of file
diff --git a/webwallet.html b/webwallet.html
index 464f4a8..5962caf 100644
--- a/webwallet.html
+++ b/webwallet.html
@@ -26,22 +26,25 @@
         </header>
         <ul id="floor_list" class="grid"></ul>
     </section>
-    <header id="main_header" class="grid align-center full-bleed">
+    <header id="main_header" class="full-bleed">
         <button id="elevator_button" class="button" onclick="showSiteMap()">
-            <svg class="icon button__icon--left" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 3L16.3301 10.5H7.66987L12 3Z"/><path d="M12 21L7.66987 13.5L16.3301 13.5L12 21Z"/></svg>
+            <svg class="icon button__icon--left" width="24" height="24" viewBox="0 0 24 24" fill="none"
+                xmlns="http://www.w3.org/2000/svg">
+                <path d="M12 3L16.3301 10.5H7.66987L12 3Z" />
+                <path d="M12 21L7.66987 13.5L16.3301 13.5L12 21Z" />
+            </svg>
             <span class="button__label">
                 Elevator
             </span>
         </button>
         <a href="index.html" class="main-logo flex align-center page-link justify-self-center" data-target="home_page">
-            <svg id="main_header__logo" class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20.46,21.32C20,19.78,18.6,18.59,15.3,17a12.67,12.67,0,0,1-2.64-1.56,4.27,4.27,0,0,1-.79-1,2.6,2.6,0,0,1,0-1.41c.24-.68.49-1,2.43-2.85a7.18,7.18,0,0,0,2.09-2.92,4.25,4.25,0,0,0,0-1.77,6.52,6.52,0,0,0-2.85-3.11c-.56-.36-.81-.4-.81-.15a2.33,2.33,0,0,1-.18.45L12.4,3l-.53-.36c-.28-.21-.64-.41-.77-.49s-.46-.11-.46,0a6.21,6.21,0,0,1-.37.83s-.08,0-.17-.08c-1.15-.83-1.64-1-1.64-.73A7.33,7.33,0,0,1,7.7,3.65C6.48,5.68,5.24,6.7,4,6.7c-.56,0-.54,0-.37.64s.2.58.68.43a3.37,3.37,0,0,0,1.09-.54.86.86,0,0,1,.3-.17,1.34,1.34,0,0,1,.13.39.79.79,0,0,0,.17.4A3.5,3.5,0,0,0,7.37,7.3L7.8,7l.09.34c.12.45.19.51.62.39a4.25,4.25,0,0,0,2.17-1.54l.38-.45,0,.39A5.92,5.92,0,0,1,8.89,9.54L7.67,10.71c-2,1.93-1.89,3.51.37,5a27.41,27.41,0,0,0,2.89,1.51c.17.07.62.32,1,.54C14,19,15,20.23,15,21.48a2,2,0,0,0,0,.49h0c0,.05,0,.05.56-.1a1.89,1.89,0,0,0,.53-.21,2.41,2.41,0,0,0-.34-1.15,7.05,7.05,0,0,0-1.68-1.77,21.91,21.91,0,0,0-3.2-1.83A9.53,9.53,0,0,1,8.16,15.2a2.18,2.18,0,0,1-.74-1.55C7.42,12.79,7.86,12,9,11c1.77-1.64,2.45-2.45,2.92-3.55a2.28,2.28,0,0,0,.26-1.26A2,2,0,0,0,12,5.06l-.2-.45L12,4.3l.28-.49.09-.18L12.6,4a3.69,3.69,0,0,1,.61,1.76A3.47,3.47,0,0,1,12.94,7l-.09.25s-.21.37-.41.69A17.78,17.78,0,0,1,9.91,10.6c-1.07,1-1.43,1.62-1.47,2.47a2.05,2.05,0,0,0,.7,1.73,10.47,10.47,0,0,0,3.28,2.08c2.28,1.13,3.26,1.81,4,2.73a2.94,2.94,0,0,1,.74,1.75,1.26,1.26,0,0,0,.09.57.48.48,0,0,0,.26,0l.51-.13.29-.08,0-.28c-.13-1-1-2-2.47-3a25.52,25.52,0,0,0-3.26-1.77,8.59,8.59,0,0,1-2.23-1.43,2.09,2.09,0,0,1-.5-2.62c.26-.53.5-.83,2.35-2.6,1.51-1.45,2.15-2.58,2.15-3.79A3.67,3.67,0,0,0,13,3.48a3,3,0,0,1-.4-.42A1.85,1.85,0,0,1,13,2.33a6.74,6.74,0,0,1,1.83,1.73,2.62,2.62,0,0,1,.47,1.68,3,3,0,0,1-.55,1.84c-.45.78-.79,1.14-2.67,2.93a5.56,5.56,0,0,0-1.3,1.64,1.77,1.77,0,0,0-.21,1,1.76,1.76,0,0,0,.19.92,6.28,6.28,0,0,0,2.9,2.34,21.6,21.6,0,0,1,3.66,2c1.35,1,2,2,2,3a1.06,1.06,0,0,0,.05.47,2.83,2.83,0,0,0,1-.24C20.56,21.68,20.56,21.66,20.46,21.32ZM7.29,6.4h0a2.23,2.23,0,0,1-.9.28L6,6.72l.43-.53a15.22,15.22,0,0,0,1.89-3,3.52,3.52,0,0,1,.38-.67c.07-.08.49.2,1,.64l.39.35L9.66,4A6.7,6.7,0,0,1,7.29,6.4Zm3.58-1.11A5.8,5.8,0,0,1,9.25,6.51h0a3.3,3.3,0,0,1-.74.17l-.35,0,.39-.49a15.64,15.64,0,0,0,1.32-2,4.63,4.63,0,0,1,.28-.49c.06-.08.33.26.57.77l.28.57Zm1-1.4a1.63,1.63,0,0,1-.28.4A6.63,6.63,0,0,1,11,3.72l-.53-.56.12-.29c.2-.49.24-.51.64-.19a5.57,5.57,0,0,1,.85.78A2.78,2.78,0,0,1,11.87,3.89Z"/></svg>
+            <svg id="main_header__logo" class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                <path
+                    d="M20.46,21.32C20,19.78,18.6,18.59,15.3,17a12.67,12.67,0,0,1-2.64-1.56,4.27,4.27,0,0,1-.79-1,2.6,2.6,0,0,1,0-1.41c.24-.68.49-1,2.43-2.85a7.18,7.18,0,0,0,2.09-2.92,4.25,4.25,0,0,0,0-1.77,6.52,6.52,0,0,0-2.85-3.11c-.56-.36-.81-.4-.81-.15a2.33,2.33,0,0,1-.18.45L12.4,3l-.53-.36c-.28-.21-.64-.41-.77-.49s-.46-.11-.46,0a6.21,6.21,0,0,1-.37.83s-.08,0-.17-.08c-1.15-.83-1.64-1-1.64-.73A7.33,7.33,0,0,1,7.7,3.65C6.48,5.68,5.24,6.7,4,6.7c-.56,0-.54,0-.37.64s.2.58.68.43a3.37,3.37,0,0,0,1.09-.54.86.86,0,0,1,.3-.17,1.34,1.34,0,0,1,.13.39.79.79,0,0,0,.17.4A3.5,3.5,0,0,0,7.37,7.3L7.8,7l.09.34c.12.45.19.51.62.39a4.25,4.25,0,0,0,2.17-1.54l.38-.45,0,.39A5.92,5.92,0,0,1,8.89,9.54L7.67,10.71c-2,1.93-1.89,3.51.37,5a27.41,27.41,0,0,0,2.89,1.51c.17.07.62.32,1,.54C14,19,15,20.23,15,21.48a2,2,0,0,0,0,.49h0c0,.05,0,.05.56-.1a1.89,1.89,0,0,0,.53-.21,2.41,2.41,0,0,0-.34-1.15,7.05,7.05,0,0,0-1.68-1.77,21.91,21.91,0,0,0-3.2-1.83A9.53,9.53,0,0,1,8.16,15.2a2.18,2.18,0,0,1-.74-1.55C7.42,12.79,7.86,12,9,11c1.77-1.64,2.45-2.45,2.92-3.55a2.28,2.28,0,0,0,.26-1.26A2,2,0,0,0,12,5.06l-.2-.45L12,4.3l.28-.49.09-.18L12.6,4a3.69,3.69,0,0,1,.61,1.76A3.47,3.47,0,0,1,12.94,7l-.09.25s-.21.37-.41.69A17.78,17.78,0,0,1,9.91,10.6c-1.07,1-1.43,1.62-1.47,2.47a2.05,2.05,0,0,0,.7,1.73,10.47,10.47,0,0,0,3.28,2.08c2.28,1.13,3.26,1.81,4,2.73a2.94,2.94,0,0,1,.74,1.75,1.26,1.26,0,0,0,.09.57.48.48,0,0,0,.26,0l.51-.13.29-.08,0-.28c-.13-1-1-2-2.47-3a25.52,25.52,0,0,0-3.26-1.77,8.59,8.59,0,0,1-2.23-1.43,2.09,2.09,0,0,1-.5-2.62c.26-.53.5-.83,2.35-2.6,1.51-1.45,2.15-2.58,2.15-3.79A3.67,3.67,0,0,0,13,3.48a3,3,0,0,1-.4-.42A1.85,1.85,0,0,1,13,2.33a6.74,6.74,0,0,1,1.83,1.73,2.62,2.62,0,0,1,.47,1.68,3,3,0,0,1-.55,1.84c-.45.78-.79,1.14-2.67,2.93a5.56,5.56,0,0,0-1.3,1.64,1.77,1.77,0,0,0-.21,1,1.76,1.76,0,0,0,.19.92,6.28,6.28,0,0,0,2.9,2.34,21.6,21.6,0,0,1,3.66,2c1.35,1,2,2,2,3a1.06,1.06,0,0,0,.05.47,2.83,2.83,0,0,0,1-.24C20.56,21.68,20.56,21.66,20.46,21.32ZM7.29,6.4h0a2.23,2.23,0,0,1-.9.28L6,6.72l.43-.53a15.22,15.22,0,0,0,1.89-3,3.52,3.52,0,0,1,.38-.67c.07-.08.49.2,1,.64l.39.35L9.66,4A6.7,6.7,0,0,1,7.29,6.4Zm3.58-1.11A5.8,5.8,0,0,1,9.25,6.51h0a3.3,3.3,0,0,1-.74.17l-.35,0,.39-.49a15.64,15.64,0,0,0,1.32-2,4.63,4.63,0,0,1,.28-.49c.06-.08.33.26.57.77l.28.57Zm1-1.4a1.63,1.63,0,0,1-.28.4A6.63,6.63,0,0,1,11,3.72l-.53-.56.12-.29c.2-.49.24-.51.64-.19a5.57,5.57,0,0,1,.85.78A2.78,2.78,0,0,1,11.87,3.89Z" />
+            </svg>
             <h4 class="h4 header__company-name">RanchiMall</h4>
         </a>
-        <label class="theme-switcher" title="Change theme">
-            <input id="theme_switcher" class="theme-switcher__checkbox" type="checkbox">
-            <svg class="icon moon-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M10 6a8 8 0 0 0 11.955 6.956C21.474 18.03 17.2 22 12 22 6.477 22 2 17.523 2 12c0-5.2 3.97-9.474 9.044-9.955A7.963 7.963 0 0 0 10 6zm-6 6a8 8 0 0 0 8 8 8.006 8.006 0 0 0 6.957-4.045c-.316.03-.636.045-.957.045-5.523 0-10-4.477-10-10 0-.321.015-.64.045-.957A8.006 8.006 0 0 0 4 12zm14.164-9.709L19 2.5v1l-.836.209a2 2 0 0 0-1.455 1.455L16.5 6h-1l-.209-.836a2 2 0 0 0-1.455-1.455L13 3.5v-1l.836-.209A2 2 0 0 0 15.29.836L15.5 0h1l.209.836a2 2 0 0 0 1.455 1.455zm5 5L24 7.5v1l-.836.209a2 2 0 0 0-1.455 1.455L21.5 11h-1l-.209-.836a2 2 0 0 0-1.455-1.455L18 8.5v-1l.836-.209a2 2 0 0 0 1.455-1.455L20.5 5h1l.209.836a2 2 0 0 0 1.455 1.455z"/></svg>
-            <svg class="icon sun-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 18a6 6 0 1 1 0-12 6 6 0 0 1 0 12zm0-2a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM11 1h2v3h-2V1zm0 19h2v3h-2v-3zM3.515 4.929l1.414-1.414L7.05 5.636 5.636 7.05 3.515 4.93zM16.95 18.364l1.414-1.414 2.121 2.121-1.414 1.414-2.121-2.121zm2.121-14.85l1.414 1.415-2.121 2.121-1.414-1.414 2.121-2.121zM5.636 16.95l1.414 1.414-2.121 2.121-1.414-1.414 2.121-2.121zM23 11v2h-3v-2h3zM4 11v2H1v-2h3z"/></svg>
-        </label>
+        <theme-toggle></theme-toggle>
     </header>
     <div id="outlet_switcher" class="grid gap-1-5 hide">
         <div class="flex align-center">
@@ -83,8 +86,8 @@
         <h3 class="h3 margin-bottom-1r">Rooms</h3>
         <scroll-tab-header data-target="bit_bond_page_group" class="margin-bottom-1r">
             <button class="room-button">
-                <svg class="icon button__icon--left" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24"
-                    height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
+                <svg class="icon button__icon--left" xmlns="http://www.w3.org/2000/svg"
+                    enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
                     <g>
                         <rect fill="none" height="24" width="24" />
                     </g>
@@ -102,8 +105,8 @@
                 </span>
             </button>
             <button class="room-button">
-                <svg class="icon button__icon--left" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
-                    width="24px" fill="#000000">
+                <svg class="icon button__icon--left" xmlns="http://www.w3.org/2000/svg" height="24px"
+                    viewBox="0 0 24 24" width="24px" fill="#000000">
                     <path d="M0 0h24v24H0V0z" fill="none" />
                     <path
                         d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" />
@@ -154,9 +157,11 @@
             </p>
         </scroll-tab-panels>
     </main>
-    
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script>
-    <script src="js/components.js"></script>
-    <script src="js/index.js"></script>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js"></script>
+    <script src="assets/js/components.js"></script>
+    <script src="https://unpkg.com/uhtml@3.0.1/es.js"></script>
+    <script src="assets/js/index.js"></script>
 </body>
+
 </html>
\ No newline at end of file