* {
  font-family: "Proxima Nova", "Ubiquity Nova", sans-serif;
}
:root {
  --page-init: 8s all cubic-bezier(0, 1, 1, 1);
  --elu-blu: #06061aff;
  --elu-blu-25: #06061a40;
  --elu-blu-50: #06061a80;
  --elu-blu-75: #06061abf;
}
@font-face {
  font-family: "Ubiquity Nova";
  font-style: normal;
  font-weight: 400;
  src: url(fonts/ubiquity-nova-standard.eot);
  src:
    url(fonts/ubiquity-nova-standard.eot#iefix) format("embedded-opentype"),
    url(fonts/ubiquity-nova-standard.woff) format("woff"),
    url(fonts/ubiquity-nova-standard.ttf) format("truetype");
}
svg {
  stroke: none;
}
section#Hero {
  position: absolute;
  top: 0;
  pointer-events: none;
}
ol {
  padding: 0;
  list-style: none;
}
li {
  font-family: "Proxima Nova", "Ubiquity Nova", Avenir, DIN;
  display: inline-block;
}
aside,
h1 {
  font-family: "Proxima Nova", "Ubiquity Nova", Avenir, DIN;
}
h1 > span.Active {
  opacity: 1;
}
h1 > span {
  opacity: 0;
  will-change: opacity, filter;
}
body.Active h1 > span {
  transition: var(--page-init);
}
h1 {
  text-transform: uppercase;
  text-rendering: geometricPrecision;
  font-weight: 400;
  text-align: center;
  font-size: 36px;
}
body.Active foreground > span {
  transition: var(--page-init);
}
foreground > span {
  font-weight: 100;
  text-rendering: optimizeSpeed;
  font-family: monospace;
  font-size: 12px;
  line-height: 1;
  text-align: right;
  color: rgba(255, 255, 255, 0.125);
  white-space: pre;
  opacity: 0;
  display: block;
  text-overflow: clip;
  height: 100vh;
  overflow: hidden;
  font-family: DIN;
  -webkit-mask-image: linear-gradient(to top right, transparent 50%, #000 100%);
}
foreground {
  height: 100vh;
  display: none;
}
div#sine-holder {
  padding: 0;
  position: absolute;
  right: 0;
  width: 100%;
  height: 100%;
  top: 0;
}
.spin::after {
  content: "> Press to Start";
  font-size: 12px;
  font-family: DIN;
  position: absolute;
  padding: 8px;
  text-transform: uppercase;
  color: #fff;
  text-rendering: geometricPrecision;
  border-radius: 8px;
  padding: 0;
  left: 0;
  right: 0;
  letter-spacing: 1px;
  text-align: center;
  filter: drop-shadow(0 0 16px #fff);
  top: calc(100% + 12px);
}
body.Active .spin::after {
  content: none;
}
canvas#sine {
  height: 100%;
  -webkit-mask-image: linear-gradient(90deg, #00000000 0, #00000020 25%, #00000000 50%, #00000020 75%, #00000000 100%);
  display: none;
}
body.Active canvas#sine {
  display: unset;
}
body {
  background-color: var(--elu-blu);
}
body.Active section#Hero {
  pointer-events: all;
}
body.Active foreground > span {
  opacity: 1;
}
body.Active div#headshot {
  opacity: 0.0625;
}
#Back {
  overflow: hidden;
  height: 100vh;
  width: 100vw;
  margin-left: 0;
  text-align: center;
}
body.Active #Info ol li {
  display: inline-block;
  height: 48px;
  text-align: center;
  display: inline-table;
  border-radius: 3px;
  height: auto;
  padding: 0;
  opacity: 1;
  filter: drop-shadow(0 0 16px #fff);
  color: #fff;
}
body.Active #Info ol a {
  user-select: none;
  display: table-cell;
  height: 100%;
  vertical-align: middle;
  padding: 12px 6px;
  display: block;
  opacity: 0.66;
}
body.Active #Info ol a:hover {
  opacity: 1;
  color: #0ff;
}
body.Active #Info {
  opacity: 1;
}
body.Active .center > div.logo {
  opacity: 0.375;
  padding: 18.75vw;
}
body.Active .center > div {
  opacity: 1;
}
body .center > div.logo {
  opacity: 1;
  position: absolute;
  padding: 32px;
  line-height: 0;
  margin: 0;
  height: 100%;
  width: 100%;
}
body .center > div {
  font-size: calc(2 * 128px / 3);
  font-weight: 100;
  text-rendering: geometricPrecision;
  line-height: 1;
  white-space: pre;
  text-align: left;
  padding: calc(128px / 3);
  opacity: 0;
}
body #Grid {
  position: relative;
}
body #Grid > div {
  position: fixed;
  left: 0;
  top: 0;
  opacity: 1;
}
body #grid-static {
  display: none;
  width: 100%;
  height: 100%;
  opacity: 1;
  position: absolute;
  top: 0;
  left: 0;
  background-image: url("../../image/grid-1.png");
  transform: translate(12px, 6px);
  -webkit-mask-image: radial-gradient(#00000040 0, #00000080 50%, #000000ff 100%);
  opacity: 0.25;
}
body #grid-dynamic {
  width: 100%;
  height: 100%;
  -webkit-mask-image: radial-gradient(#00000040 0, #00000080 50%, #000000ff 100%);
  opacity: 1;
}
body.Active #grid-dynamic {
  opacity: 1;
}
#UI {
  text-transform: uppercase;
  width: 100vw;
  top: 0;
  position: absolute;
  text-align: center;
  display: inline-block;
  left: 0;
  opacity: 1 !important;
  background: red;
  height: 0;
}
#Spreads > :first-child aside {
  position: relative;
  top: auto;
  right: auto;
  left: auto;
  font-family: "Proxima Nova", "Ubiquity Nova", Avenir, DIN;
  letter-spacing: 0;
  margin: 0 auto;
  width: auto;
}
#Logo svg.Active {
  fill-opacity: 0.75;
}
#Logo > article > div {
  display: table;
  vertical-align: middle;
}
#Logo {
  overflow: hidden;
  max-width: 100vw;
  max-height: 100vh;
  opacity: 1;
}
#Info svg#logo {
  height: 60px;
  display: inline-block;
  vertical-align: middle;
  stroke: none;
  margin: 6px auto 0;
  padding-top: 10px;
}
#Info svg {
  height: 24px;
  width: 24px;
}
#Info ol li span {
  font-size: 12px;
  text-rendering: geometricPrecision;
  vertical-align: MIDDLE;
  letter-spacing: 1px;
  display: inline-block;
}
#Info a:hover svg {
  fill: #0ff;
}
#Info > ol {
  text-transform: uppercase;
}
#Info > header > h1 {
  font-size: 48px;
  line-height: 1;
  display: inline-block;
  vertical-align: middle;
  margin: 0;
  color: #ffffffbf;
}
#Info > header > aside {
  font-size: 12px;
  letter-spacing: 0.25px;
  line-height: 1.25;
}
#Info > header {
  position: relative;
  overflow: hidden;
  padding: 10px calc(100% / 12);
  background-color: #ffffff10;
  text-align: center;
}
#Info > div > aside > span {
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 300;
}
#Info * {
  transition: 2s all cubic-bezier(0, 1, 1, 1);
  transform: translateY(-100%);
  filter: blur(8px);
  text-rendering: geometricPrecision;
  line-height: 1;
}
#Info > * {
  transition: 1s all cubic-bezier(0, 1, 1, 1);
  will-change: background;
  margin: 2px auto;
  border-radius: 3px;
  overflow: hidden;
}
#Info {
  user-select: none;
  opacity: 0;
  font-family: "Proxima Nova", "Ubiquity Nova", Avenir, DIN;
  line-height: 1.5;
  text-align: left;
  width: 75%;
  left: 0;
}
#headshot {
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: 1s opacity cubic-bezier(0, 1, 1, 1);
  background-size: cover;
  opacity: 0.125;
  filter: grayscale(1);
}
.spin:hover {
  opacity: 1;
}
.spin > div.before > div {
  border-width: 1px;
  border-style: outset;
  border-left-color: transparent;
  border-right-color: transparent;
  animation: rotation-b 16s linear 0s infinite;
}
.spin > div.after > div {
  border-width: 1px;
  border-style: double;
  border-top-color: transparent;
  border-right-width: 0;
  border-bottom-width: 0;
  opacity: 0.25;
  animation: rotation-a 16s linear 0s infinite;
}
body.Active .spin > div.after > div,
body.Active .spin > div.before > div {
  border-width: 2vw;
}
body.Active .spin > div.after > div {
  animation: rotation-a 64s linear 0s infinite;
}
body.Active .spin > div.before > div {
  animation: rotation-b 64s linear 0s infinite;
  -webkit-mask-image: linear-gradient(to right, transparent, #000, transparent);
}
.spin > div > div {
  border-radius: 50%;
  height: 100%;
}
.spin > div {
  vertical-align: middle;
  display: table;
  position: absolute;
  border-radius: 50%;
  height: 100%;
  width: 100%;
}
body.Active .spin > div > div {
  color: #ffffff40;
}
body.Active .spin #aP {
  fill: transparent;
}
.spin #aP {
  height: 100%;
  width: 100%;
  margin: 0;
}
.spin {
  transition: 1s all cubic-bezier(0.25, 0, 0, 1);
  opacity: 0.5;
  border-radius: 50%;
  position: relative;
  width: 160px;
  height: 160px;
  text-align: center;
  cursor: pointer;
}
body.Active #Logo {
  animation: logo-ani 0.2s;
  opacity: 1;
}
.logo:hover #aP {
  filter: drop-shadow(0 0 16px #fff);
}
.blur > svg {
  fill: #80ffff;
  fill-opacity: 1;
}
.blur {
  position: absolute;
  color: transparent;
  text-shadow: 0 0 calc(4 * 128px) #80ffff;
}
#bytecode {
  font-family: monospace;
  color: #80ffff;
  font-size: 12px;
  font-weight: 100;
  text-rendering: optimizeSpeed;
  word-break: break-all;
  line-height: 1;
  -webkit-mask-image: radial-gradient(#00000000 0, #00000000 50%, #00000010 100%);
  opacity: 0;
  display: none;
  vertical-align: middle;
  text-align: left;
}
body.Active #bytecode.Active {
  animation: bytecode-ani 2s;
  opacity: 1;
  display: table-cell;
}
background > video.Active {
  opacity: 0.75;
  transition: 1s opacity ease-in-out;
}
background > video {
  position: absolute;
  top: 0;
  right: calc(200% / 12);
  right: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  opacity: 0;
}
#UI #logo > div#logo-text {
  font-size: 20px;
  letter-spacing: 4px;
}
#Spreads > .Active {
  opacity: 1;
}
#Spreads > :first-child {
  opacity: 0;
  transition: 0.5s all ease-in-out;
}
#Spreads > .Active:first-child {
  opacity: 1;
}
#Overview > article > div a {
  color: #0ff;
}
#Overview > article > div {
  border: 1px solid #ffffff20;
  max-width: 1280px;
  width: 100%;
  border-radius: 16px;
  background: #00000080;
  margin: 24px auto;
}
#Overview > article > div > div {
  display: inline-block;
  width: 50%;
  vertical-align: middle;
}
#Overview img {
  width: 50%;
}
h2,
h3 {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  font-family: "Proxima Nova", "Ubiquity Nova", sans-serif;
  text-align: left;
  color: #fff;
  line-height: 1;
  font-weight: 500;
  font-size: 23px;
  letter-spacing: 0.3px;
  box-sizing: inherit;
  margin-top: 23px;
  line-height: 1.25;
  max-width: calc(100vw - 16px);
}
p {
  color: #bfbfbf;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  letter-spacing: 0.3px;
  font-family: "Proxima Nova", "Ubiquity Nova", sans-serif;
  text-align: left;
  box-sizing: inherit;
  margin: 0;
  padding: 0;
  font-size: 20px;
  line-height: 31px;
  margin-top: 17px;
  max-width: calc(100vw - 16px);
  margin: 17px 8px 0;
}
#Overview > article > div > div:nth-child(odd) {
  padding: 5% 0 5% 10%;
  width: calc(200% / 3);
}
#Overview > article > div > div:nth-child(even) {
  width: calc(100% / 3);
}
#farm-landscape,
#farm-portrait {
  display: none;
  height: 100%;
  width: 100%;
}
#Partners,
#Integrations,
#Audits {
  height: unset;
  padding: 10% 0;
}
#Partners > article > div:nth-child(1),
#Integrations > article > div:nth-child(1),
#Audits > article > div:nth-child(1) {
  max-width: 1280px;
  margin: 24px auto;
  width: 75%;
}
#Partners ul,
#Integrations ul {
  padding: 0;
  max-width: 1000px;
}
#Partners ul li,
#Integrations ul li {
  display: inline-block;
  margin: 24px;
  opacity: 0.75;
}
#Partners ul li:hover,
#Integrations ul li:hover {
  opacity: 1;
}
#Partners ul li img,
#Integrations ul li img,
#Partners ul li svg,
#Integrations ul li svg {
  height: 96px;
  width: 192px;
  max-width: 25vw;
}
#Partners ul li p,
#Integrations ul li p {
  text-align: center;
  line-height: 1;
}
#Partners .header-aside,
#Integrations .header-aside,
#Audits .header-aside {
  margin-left: 0;
}
#Audits a {
  color: #0ff;
  text-decoration: underline;
}
#Intro div.circle svg {
  margin: 19.5% 15.5% 0 16.5%;
  fill: #0ff;
}
#Intro > article > div > div.circle > div > div > div > div > div {
  background: #000;
  padding: 0 6.81875%;
}
#Intro .circle {
  max-width: 640px;
  max-height: 640px;
  width: calc(100% / 3);
  position: absolute;
  filter: blur(5px);
  z-index: -1;
  right: 0;
}
#Intro .circle div {
  border-radius: 50%;
  background: linear-gradient(315deg, #0ff, #00ffff20, transparent);
  display: inline-block;
  margin: 8px;
  min-height: 160px;
  min-width: 160px;
}
#Intro > article > div > div.circle > div > div {
  background-color: #000;
}
#media * {
  color: #000;
}
#media a {
  cursor: pointer;
}
#media a > div {
  text-align: center;
  display: inline-block;
  border-radius: 3px;
  border: 1px solid rgba(128, 128, 128, 0.0625);
  margin: 4px auto;
  height: auto;
  width: 192px;
  background: rgba(255, 255, 255, 0.75);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  vertical-align: middle;
  position: relative;
  padding: 8px 0;
}
#media a > div:hover * {
  opacity: 1;
}
#media .image {
  height: 192px;
  padding: 0;
  background-size: cover;
  background-position: 50% 12.5%;
}
#media .image aside {
  padding: 0;
}
#media .image > div svg {
  padding: 0;
}
#media a > div:hover {
  opacity: 0.75;
}
#media a > div > div {
  background: rgba(255, 255, 255, 0.875);
  vertical-align: middle;
  position: absolute;
  bottom: 0;
  width: 100%;
}
#media a > div > div > * {
  margin: 4px;
}
#media aside {
  color: #000;
  opacity: 1;
  display: inline-block;
  vertical-align: middle;
  list-style: 1;
}
#media div a div * {
  opacity: 0;
  transition: 125ms opacity ease-in-out;
}
#UI #media h3 {
  font-family: DIN;
  text-align: center;
  margin: 24px auto 0;
  font-size: 12px;
  font-weight: 100;
  letter-spacing: 2px;
  border-top: 1px solid rgba(128, 128, 128, 0.25);
  border-left: 0;
  border-right: 0;
  text-transform: uppercase;
}
#media img {
  float: left;
}
#media svg {
  height: 24px;
  width: 24px;
  fill: #000;
  vertical-align: middle;
}
#media ul li {
  padding: 3px 0;
  display: inline-block;
}
#UI #contact section > * {
  display: block;
  width: 100%;
  font-family: DIN;
  margin: 2px auto;
}
#UI #social svg {
  height: 24px;
  margin: 8px;
  fill: #fff;
  stroke: transparent;
}
#UI #contact svg {
  height: 24px;
  margin: 8px;
  fill: #fff;
  stroke: transparent;
}
#UI #blog svg {
  height: 24px;
  margin: 0;
  fill: #fff;
  stroke: transparent;
  vertical-align: middle;
}
#UI ul a {
  display: block;
  flex-direction: row;
}
#UI ul {
  list-style: none;
  padding: 0;
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
  flex-direction: row;
  display: flex;
  max-width: 1280px;
  align-items: top;
  overflow: hidden;
}
#UI > div {
  max-width: calc(640px + 96px);
  transform: translateX(100%);
  transition: 0.25s all cubic-bezier(0, 1, 1, 1);
  font-family: DIN;
  display: table;
  color: #000;
  line-height: 1.25;
  height: 100%;
  position: fixed;
  background-repeat: no-repeat;
  background-color: rgba(255, 255, 255, 0.125);
  backdrop-filter: blur(16px);
  opacity: 0;
  pointer-events: all;
  right: 0;
  width: 75%;
  top: 0;
  pointer-events: none;
  will-change: opacity, transform;
  overflow-y: hidden;
  overflow-x: hidden;
}
#UI div > div > ul {
  padding: 48px 0;
}
#UI div > div > * {
  text-rendering: optimizeSpeed;
  font-weight: 100;
  color: #fff;
  border-radius: 3px;
  padding: 48px 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: 0;
}
#UI > div > div {
  vertical-align: middle;
  display: table-cell;
  overflow: hidden;
  padding: 24px;
}
body.bio #cell,
body.blog #cell,
body.contact #cell,
body.media #cell,
body.social #cell {
  visibility: initial;
  background-color: #000;
}
body.bio #UI #bio,
body.media #UI #media {
  transform: translateX(100%);
  opacity: 1;
  pointer-events: all;
  display: inline-table;
  height: 100vh;
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
  display: block;
}
body.bio #UI #bio,
body.blog #UI #blog,
body.contact #UI #contact,
body.media #UI #media,
body.social #UI #social {
  transform: translateX(0);
  opacity: 1;
  pointer-events: all;
}
body.bio #UI,
body.blog #UI,
body.contact #UI,
body.media #UI,
body.social #UI {
  pointer-events: all;
}
body.bio main#Spreads,
body.blog main#Spreads,
body.contact main#Spreads,
body.media main#Spreads,
body.social main#Spreads {
  opacity: 0.25;
}
#bio {
  background: linear-gradient(0deg, #00000040, #00000080, #00000080, #00000080, #00000040);
}
#bio p {
  margin: 8px auto;
  max-width: 640px;
  text-align: left;
  text-transform: initial;
}
#bio ul a {
  display: inline;
  border: none;
  border-radius: initial;
  text-decoration: underline;
}
#UI #logo {
  display: block;
}
#UI #logo > div {
  display: inline-block;
  vertical-align: middle;
  padding: 4px;
  text-rendering: geometricPrecision;
}
#UI #logo-icon > svg {
  height: 36px;
  display: block;
  margin: 0;
  width: 36px;
  padding: 0;
  margin-right: 0;
}
#UI ul li div {
  letter-spacing: 2px;
  -ms-flex-pack: justify;
  -ms-flex-align: center;
  line-height: 1.25;
}
#UI ul li a {
  opacity: 0.5;
  padding: 20px;
}
#UI ul li a:hover {
  opacity: 1;
}
#Intro > article > div > div {
  vertical-align: middle;
}
#Intro > article > div:nth-child(1) img {
  object-position: center;
  object-fit: fill;
}
#Intro > article > div:nth-child(2) p {
  text-rendering: optimizeLegibility;
  letter-spacing: 0.3px;
  font-family: "Proxima Nova", "Ubiquity Nova", sans-serif;
  color: #bfbfbf;
  font-size: 20px;
  box-sizing: inherit;
  padding: 0 24px;
}
#Partners > article > div > img,
#Integrations > article > div > img,
#Partners > article > div > svg,
#Integrations > article > div > svg {
  width: 100vw;
}
#Spreads > footer > article div p {
  text-rendering: optimizeLegibility;
  font-family: "Proxima Nova", "Ubiquity Nova", sans-serif;
  text-align: center;
  color: #fff;
  font-size: 20px;
  line-height: 31px;
  letter-spacing: 0.4px;
  box-sizing: inherit;
}
#Spreads > footer > article > div a span {
  font-family: "Proxima Nova", "Ubiquity Nova", sans-serif;
  text-transform: uppercase;
}
#Spreads > footer > article div h4 {
  text-rendering: optimizeLegibility;
  font-family: "Proxima Nova", "Ubiquity Nova", sans-serif;
  text-align: center;
  color: #fff;
  font-weight: 500;
  font-size: 24px;
  line-height: 29px;
  letter-spacing: 0.4px;
  box-sizing: inherit;
  margin: 20px auto;
}
#Spreads > footer > article div a {
  display: inline-block;
  opacity: 0.5;
  letter-spacing: 2px;
  text-transform: uppercase;
}
#Spreads > footer > article div a:hover {
  opacity: 1;
}
#Intro > article > div:first-child img {
  width: 100%;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
#Intro > article {
  position: relative;
  width: 100%;
  height: 100%;
}
#Intro > article > div {
  max-width: 1280px;
  text-align: center;
}
#Intro {
  background-image: url("../../image/grid-25.png");
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid #ffffff10;
  border-right: 0;
  border-left: 0;
}
#Spreads > section#Overview {
  background: 0 0;
}
#Logo div.before > div {
  border-color: #ffffff00 #ffffff80 #ffffff00 #ffffff80;
}
#Earn > article > div > p {
  max-width: 1280px;
  text-align: center;
  margin: 24px auto 0;
}
#Earn > article > div > div {
  position: relative;
  width: 75vw;
}
#Earn h2 {
  max-width: 1280px;
  margin: 0 auto 48px;
  text-align: center;
}
#Spreads > #Earn {
  height: unset;
  padding: 48px 0;
}
#Spreads > footer {
  height: calc(50% + 1px);
  font-size: 12px;
  font-weight: 400;
  text-rendering: unset;
  color: #bfbfbf;
  letter-spacing: 2px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background-image: url("../../image/grid-25.png");
  border-top: 1px solid #ffffff10;
  padding: 0 12px;
}
body #UI > ul > li {
  opacity: 0;
  overflow: hidden;
}
body #UI > ul > li:nth-child(1) {
  opacity: 1;
  margin-top: 8px;
}
body.Active #UI > ul > li {
  opacity: 1;
}
body.Active #UI > ul > li:nth-child(1) {
  opacity: 1;
}
footer ul {
  padding: 0;
}
footer #footer-message {
  margin-bottom: 48px;
}
footer a div {
  text-align: center;
}
footer a svg {
  height: 24px;
  width: 24px;
  fill: #bfbfbf;
}
footer a {
  opacity: 0;
}
footer a:hover {
  opacity: 1;
  color: #0ff;
}
footer a:hover span {
  color: #0ff;
}
footer a:hover svg {
  fill: #0ff;
}
body #UI > ul > li {
  pointer-events: none;
  margin-top: 20px;
}
body.Active #UI > ul > li {
  pointer-events: unset;
}
#UI > ul > li > ul {
  visibility: hidden;
  display: block;
}
#UI > ul > li > ul > li {
  display: block;
}
#UI > ul > li:hover > ul {
  visibility: visible;
}
#UI > ul > li > ul > li > a {
  padding: 20px;
}
body.Active #Info ol li a > span {
  opacity: 0;
}
#Intro li {
  width: 100%;
}
h2 {
  margin-top: 24px;
  font-size: 40px;
  text-align: left;
  line-height: 1;
  font-weight: 400;
  text-transform: uppercase;
}
#pilot-program a > span::before,
header > aside::before {
  content: "›› ";
  color: grey;
  margin: 0 2px 0 18px;
}
#pilot-program a > span::after,
header > aside::after {
  content: " ‹‹";
  color: grey;
  margin: 0 18px 0 2px;
}
#Info {
  color: #bfbfbf;
  text-align: center;
}
#Spreads {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
}
#Back,
#Hero {
  top: 0;
}
#Info svg {
  margin-right: 4px;
}
footer li {
  max-width: calc(100vw / 3);
  padding: 24px;
  vertical-align: middle;
  text-wrap: nowrap;
}
@keyframes down-arrow {
  0% {
    transform: translateY(0) rotate(45deg);
  }
  100% {
    transform: translateY(-100%) rotate(45deg);
  }
}
div#down-arrow {
  border: 3px solid #fff;
  border-top: transparent;
  border-left: transparent;
  animation: down-arrow 1s infinite alternate ease-in-out;
  opacity: 1;
}
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
div#down-arrow::after {
  content: "";
  position: absolute;
  width: 0;
  height: 16px;
  transform: rotate(-45deg) translate(5.5px, -8px);
  border: 1.5px solid;
}
div#down-arrow-wrapper {
  opacity: 0;
  animation: fade-in 2s forwards 2s;
  height: 16px;
  width: 16px;
  margin-right: 0;
  margin-left: auto;
  position: absolute;
  bottom: 48px;
  right: 48px;
  overflow: unset;
}
#Back,
#Logo {
  pointer-events: none;
}
#Logo > .spin {
  pointer-events: all;
}
#DevPool h1 {
  margin-top: 23px;
  font-size: 40px;
  line-height: 1.25;
}
#DevPool h2,
#DevPool h3 {
  text-align: center;
}
#DevPool #frame-wrapper {
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
#DevPool #frame-wrapper > img {
  -webkit-mask-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.5) 50%, transparent);
  margin: 0 auto;
  pointer-events: none;
  height: 100%;
  width: auto;
}
#DevPool #devpool-overlay {
  position: absolute;
  width: 100%;
  transform: translateY(-50%);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid #202020;
  border-width: 1px 0;
  padding-bottom: 24px;
}
input[type="button"] {
  font-weight: 600;
  background: #00ffff40;
  padding: 16px 32px;
}
input[type="button"]:hover {
  background: #00ffff80;
}
th {
  font-weight: 400;
  font-size: 16px;
}
td {
  padding: 4px 8px;
  font-size: 16px;
}
#analytics {
  margin-top: 24px;
  opacity: 0.75;
}
#fetch-total-rewards-target {
  padding: 0 16px;
}
#Spreads > * {
  overflow: hidden;
  width: 100vw;
}
background .gradient {
  background-image: radial-gradient(#00bfff00 0, #00bfffff 15%, #00bfff00 34%, #00bfffff 58%, #00bfff00 75%, #00bfffff 100%);
  animation: background-gradients-fade-in 2s ease-in-out forwards;
  top: 0;
  left: 0;
  width: 200vw;
  height: 200vh;
  position: absolute;
}
background > :nth-child(1) {
  transform: translateY(-100vh);
}
background > :nth-child(2) {
  transform: translateY(-50vh);
}
background {
  position: unset;
  display: unset;
  background-size: unset;
  background-position: unset;
  text-align: unset;
}
background,
background #grid {
  position: fixed;
  top: 0;
  left: 0;
}
background,
html {
  background-color: #000410;
}
background #grid {
  pointer-events: none;
}
background #grid canvas {
  width: 100%;
  height: 100%;
  opacity: 0;
  animation: background-grid-fade-in 2s ease-in-out forwards;
}
background .gradient {
  width: 200vw;
  height: 200vh;
  position: absolute;
  opacity: 0;
}
.grid-loaded background .gradient {
  background-image: radial-gradient(#00bfff00 0, #00bfffff 15%, #00bfff00 34%, #00bfffff 58%, #00bfff00 75%, #00bfffff 100%);
  animation: background-gradients-fade-in 2s ease-in-out forwards;
}
background > :nth-child(1) {
  transform: translateX(-100vw);
}
background > :nth-child(2) {
  transform: translateY(-50vh);
}
@keyframes background-gradients-fade-in {
  to {
    opacity: 0.125;
  }
}
@keyframes background-grid-fade-in {
  to {
    opacity: 0.5;
  }
}