/* Font Imports */
@font-face {
  font-family: "Inter";
  src: url("fonts/Inter/Inter-VariableFont_slnt_wght.ttf") format("truetype-variations"), local("system-ui"), local("-apple-system"), local("BlinkMacSystemFont"), local("Segoe UI"), local("Roboto"), local("Oxygen"), local("Ubuntu"), local("Cantarell"), local("Fira Sans"), local("Droid Sans"), local("Helvetica Neue"), sans-serif;
  font-weight: 100 900;
  font-stretch: 75% 125%;
  font-style: normal;
}

@font-face {
    font-family: "RedHatMono";
    src: url('fonts/RedHatMono/RedHatMono-VariableFont_wght.ttf');
}

@font-face {
    font-family: "Red Hat Text";
    src: url('fonts/RedHatText/RedHatText-VariableFont_wght.ttf');
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
   --text-dimmed: #555;
   --text-black-white: #000;
   --text-dimmed-whiter: #555;
   --ocean-blue: #1137F5;
   --ocean-blue-dim: rgba(17, 55, 245, 0.5);
   --text-light: #fff;
   --text-link: LinkText;
   --background-color: #fff;
   --background-color-dim-dark: #e0e0e0;
   --background-gradient-gradient: linear-gradient(180deg, white 0%, #F5F5F5 100%);
   --background-color-pool: #F2F2F2;
   --background-white-dark: #fff;
   --background-transp-transp: rgba(0, 0, 0, 0.04);
   --background-lowtransp-lowtransp: rgba(0, 0, 0, 0.2);
   --box-shadow-light-dark: 0 0 60px rgba(255, 255, 255, 0.665);
   --background-black-blue: ;
   --svg-invert-0-100: invert(0%);
   --svg-invert-100-0: invert(100%);
   --border-dark-light: 1px solid rgba(0, 0, 0, 0.16);
   --noise-url: url("./assets/grain.png");
   --opacity-outer: 0.8;



    --fixed-width: 1280px;
    --content-padding: 0 5rem;
    --font-xxxsmall: 12px;
    --font-xxsmall: 14px;
    --font-xsmall: 16px;
    --font-small: 18px;
    --font-medium: 24px;
    --font-large: 32px;
    --font-xlarge: 48px;
    --font-xxlarge: 64px;
    --font-xxxlarge: 72px;
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 600;
    --home-padding: 124px 0;
    --home-heading-width: 700px;
    --home-heading-width-narrow: 600px;
    --mobile-width: 850px;

    /* HOME VARS */
    --home-navy: #02092d;
    --home-mediumgray: #737373;
    --home-darkgray: #222;
    --home-text: #fff;
    --home-dimmed: rgba(255, 255, 255, 0.70);
    --home-text-navy-or-white: #fff;
    --home-background-color: #0D0D0D;
    --home-card-bg: linear-gradient(180deg, #222330 0%, #0c0d1a 100%);
    --home-card-tall-bg: #121320;
    --home-top-bg-gradient: radial-gradient(87.41% 72.81% at 33.33% 21.53%, rgba(0, 76, 190, 0.35) 0%, rgba(0, 139, 217, 0) 100%), radial-gradient(50% 50% at 50% 50%, rgba(6, 255, 210, 0.15) 0%, rgba(0, 255, 163, 0) 100%), radial-gradient(169.35% 71.62% at 7.21% 79.74%, rgba(20, 39, 244, 0.4) 0%, rgba(69, 255, 222, 0) 100%), radial-gradient(104.59% 89.67% at 96.88% 85.99%, rgba(24, 25, 243, 0.35) 0%, rgba(157, 197, 237, 0) 76.56%);
    --home-card-border: 1px solid rgba(255, 255, 255, 0.15);
    --home-light-border: 1px solid rgba(255, 255, 255, 0.1);
    --home-cta-banner-bg: #008c95;
    --home-cta-border: 1px solid rgba(6, 225, 255, 0.3);
    --home-maybe-invert: invert(1);
    --home-get-started-bg: radial-gradient(87.41% 72.81% at 33.33% 21.53%, rgba(0, 76, 190, 0.35) 0%, rgba(0, 139, 217, 0) 100%), radial-gradient(50% 50% at 50% 50%, rgba(6, 255, 210, 0.15) 0%, rgba(0, 255, 163, 0) 100%), radial-gradient(169.35% 71.62% at 7.21% 79.74%, rgba(20, 39, 244, 0.4) 0%, rgba(69, 255, 222, 0) 100%);
    --home-team-bg: radial-gradient(107.84% 322.29% at 21.3% 183.33%, rgba(23, 217, 213, 0.3) 5.71%, rgba(20, 137, 238, 0.3) 33.85%, rgba(17, 55, 245, 0.3) 72.77%), #0d0d0d;
    --home-link-arrow: url(/National_Library/oe_/https://ocean.xyz:443/static/assets/home/arrow_right_light.svg);
    --home-logos-opacity: 0.8;
    --home-fancy-card-bg: radial-gradient(107.84% 322.29% at 21.3% 183.33%, rgba(17, 55, 245, 0.3) 27.23%, rgba(20, 137, 238, 0.3) 66.15%, rgba(23, 217, 213, 0.3) 94.29%), #121320;
    --home-small-datum-logo-url: url(/National_Library/oe_/https://ocean.xyz:443/static/assets/home/datum_logo_small_light.svg);

    /* NAVBAR VARS */
    --navbar-logo-svg-filter: brightness(0) saturate(100%) invert(14%) sepia(78%) saturate(7025%) hue-rotate(239deg) brightness(102%) contrast(110%);
}

@media (prefers-color-scheme: dark) {
  #home :root {
    --home-text: #fff;
    --home-background-color: #0d0d0d;
  }
}

@media (prefers-color-scheme: dark){
   :root {
    --text-dimmed: #828282;
    --text-black-white: #fff;
    --text-dimmed-whiter: rgb(212, 212, 212);
    --ocean-blue: #405FF8;
    --ocean-blue-dim: #405FF8;
    --text-light: #fff;
    --text-link: #405FF8;
    --background-color: #0D0D0D;
    --background-color-dim-dark: #3d3d3d;
    --background-gradient-gradient: linear-gradient(to bottom, #222330 0%, #0C0D1A 100%);
    --background-color-pool: linear-gradient(to bottom, #222330 0%, #0C0D1A 100%);
    --background-white-dark: linear-gradient(to bottom, #222330 0%, #0C0D1A 100%);
    --background-transp-transp: rgba(255, 255, 255, 0.1);
    --background-lowtransp-lowtransp: rgba(255, 255, 255, 0.2);
    --background-black-blue: ;
    --box-shadow-light-dark: 0 0 60px rgba(134, 134, 134, 0.665);
    --svg-invert-0-100: invert(100%);
    --svg-invert-100-0: invert(0%);
    --border-dark-light: 1px solid rgba(255, 255, 255, 0.16);
    --noise-url: none;
    --opacity-outer: 1;

    /* HOME VARS */
    --home-text: #fff;
    --home-dimmed: rgba(255, 255, 255, 0.70);
    --home-text-navy-or-white: #fff;
    --home-background-color: #0D0D0D;
    --home-card-bg: linear-gradient(180deg, #222330 0%, #0c0d1a 100%);
    --home-card-tall-bg: #121320;
    --home-top-bg-gradient: radial-gradient(87.41% 72.81% at 33.33% 21.53%, rgba(0, 76, 190, 0.35) 0%, rgba(0, 139, 217, 0) 100%), radial-gradient(50% 50% at 50% 50%, rgba(6, 255, 210, 0.15) 0%, rgba(0, 255, 163, 0) 100%), radial-gradient(169.35% 71.62% at 7.21% 79.74%, rgba(20, 39, 244, 0.4) 0%, rgba(69, 255, 222, 0) 100%), radial-gradient(104.59% 89.67% at 96.88% 85.99%, rgba(24, 25, 243, 0.35) 0%, rgba(157, 197, 237, 0) 76.56%);
    --home-card-border: 1px solid rgba(255, 255, 255, 0.15);
    --home-light-border: 1px solid rgba(255, 255, 255, 0.1);
    --home-cta-banner-bg: #008c95;
    --home-cta-border: 1px solid rgba(6, 225, 255, 0.3);
    --home-maybe-invert: invert(1);
    --home-get-started-bg: radial-gradient(87.41% 72.81% at 33.33% 21.53%, rgba(0, 76, 190, 0.35) 0%, rgba(0, 139, 217, 0) 100%), radial-gradient(50% 50% at 50% 50%, rgba(6, 255, 210, 0.15) 0%, rgba(0, 255, 163, 0) 100%), radial-gradient(169.35% 71.62% at 7.21% 79.74%, rgba(20, 39, 244, 0.4) 0%, rgba(69, 255, 222, 0) 100%);
    --home-team-bg: radial-gradient(107.84% 322.29% at 21.3% 183.33%, rgba(23, 217, 213, 0.3) 5.71%, rgba(20, 137, 238, 0.3) 33.85%, rgba(17, 55, 245, 0.3) 72.77%), #0d0d0d;
    --home-link-arrow: url(/National_Library/oe_/https://ocean.xyz:443/static/assets/home/arrow_right_light.svg);
    --home-logos-opacity: 0.8;
    --home-fancy-card-bg: radial-gradient(107.84% 322.29% at 21.3% 183.33%, rgba(17, 55, 245, 0.3) 27.23%, rgba(20, 137, 238, 0.3) 66.15%, rgba(23, 217, 213, 0.3) 94.29%), #121320;
    --home-small-datum-logo-url: url(/National_Library/oe_/https://ocean.xyz:443/static/assets/home/datum_logo_small_light.svg);

    /* NAVBAR VARS */
    --navbar-logo-svg-filter: invert(0%);
   }
}

@media (min-width: 1512px) {
    :root {
        --content-padding: 0px 0px;
    }
}

/* Font Styling */
.text-xxxsmall {
  font-size: var(--font-xxxsmall);
}

.text-xxsmall {
  font-size: var(--font-xxsmall);
}

.text-xsmall {
  font-size: var(--font-xsmall);
}

.text-small {
  font-size: var(--font-small);
}

.text-medium {
  font-size: var(--font-medium);
}

.text-large {
  font-size: var(--font-large);
}

.text-xlarge {
  font-size: var(--font-xlarge);
}

.text-xxlarge {
  font-size: var(--font-xxlarge);
}

.text-xxxlarge {
  font-size: var(--font-xxxlarge);
}

/* Font Weights */

.weight-light {
  font-weight: var(--font-weight-light);
}

.weight-normal {
  font-weight: var(--font-weight-normal);
}

.weight-medium {
  font-weight: var(--font-weight-medium);
}

.weight-bold {
  font-weight: var(--font-weight-bold);
}

/* Font Colors */

.text-dark {
    color: var(--text-black-white)
}

.text-ocean-blue {
    color: var(--ocean-blue);
}

.js-link {
    text-decoration: underline;
    cursor: pointer;
}

.text-dimmed {
    color: var(--text-dimmed);
}

.text-dimmed-whiter {
    color: var(--text-dimmed-whiter);
}

.text-blue {
    color: var(--ocean-blue);
}

.text-light {
    color: var(--text-light);
}

a {
    color: var(--text-link);
}

a.social-hero {
    text-decoration: none;
    font-family: "Inter", sans-serif;
}

a.undecorated {
    text-decoration: none;
    font-family: "Inter", sans-serif;
}

a.uncolored {
    color: inherit;
}

/* Element Styling */

body {
    margin: 0;
    font-family: "Inter", sans-serif;
    background-color: var(--background-color);
}

canvas {
    overflow: hidden;
    width: 500px;
    height: 100%;
    margin: 0 auto;
    display: block;
}

/* Background Styling */

.noise-background {
    background-image: var(--noise-url);
    background-repeat: repeat;
    opacity: var(---opacity-outer);
    width: 100%;
}

.noise-background_footer {
    background-image: var(--noise-url);
    background-repeat: repeat;
    opacity: var(---opacity-outer);
}

/* General Styling */

#page_wrapper {
    max-width: var(--fixed-width);
    display: block;
    margin: 0 auto;
}

.fullwidth {
    width: 100%;
}

/* Font Styling */
.inter {
    font-family: "Inter", sans-serif;
}

.mono {
    font-family: "RedHatMono", monospace;
}

.normal {
    font-weight: 400;
}
/* Normalweight is the same as normal, but named more descriptively */
.normalweight {
    font-weight: 400;
}

.boldweight {
    font-weight: 600;
}

.middleweight {
    font-weight: 500;
}

.px32 {
    font-size: 32px;
}

.px24 {
    font-size: 24px;
}

.px16 {
    font-size: 16px;
}

.rem12 {
    font-size: 1.2rem;
}

.lh40 {
    line-height: 40px;
}

.title {
    font-size: clamp(2rem, 2vw + 2.70rem, 4.5rem);
}

.text-center {
    text-align: center;
}

.inter-title {
    color: #000;
    font-family: "Inter", sans-serif;
    font-style: normal;
    font-size: 32px;
    font-weight: 600;
    line-height: normal;
}

.inter-subtitle {
    color: #000;
    font-family: "Inter", sans-serif;
    font-style: normal;
    font-size: 24px;
    font-weight: 400;
    line-height: normal;
}

.inter-list {
    color: #000;
    font-family: "Inter", sans-serif;
    font-style: normal;
    font-size: 24px;
    font-weight: 400;
    line-height: 60px;
    color: #000;
    font-family: "Inter", sans-serif;
    font-style: normal;
    font-size: 24px;
    font-weight: 400;
    line-height: 60px;
}

/* General Page Styling */

#page-wrap {
  padding: var(--content-padding);
  width: 100%;
}

@media (max-width: 960px) {
    #page-wrap {
        padding: 0 1rem;
    }
}

.section {
  width: 100%;
  max-width: var(--fixed-width);
  margin: 0 auto;
  display: flex;
  height: fit-content;
}

.column {
  flex-direction: column;
}

.current-config-subtitle {
  width: 50%;
  min-width: 400px;
  color:var(--text-dimmed);
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 19px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  align-self: start;
}

.block-section {
  width: 100%;
  max-width: var(--fixed-width);
  margin: 0 auto;
  display: block;
  height: fit-content;
}

.section-margin-top {
    margin-top: 16px;
}

.column-start {
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

.column-center {
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.mobile-row-column {
  flex-direction: row;
}

.desktop-content {
    display: block;
}

.desktop-content-flex-row{
    display: flex;
    flex-direction: row;
}

.mobile-content {
    display: none;
}

.mobile-content-flex-row{
    display: none;
}

.touchscreen-content {
    display: none;
}

.mouse-content {
    display: block;
}

@media (hover: none) and (pointer: coarse) {
    .touchscreen-content {
        display: block;
    }
    .mouse-content {
        display: none;
    }
}

@media (max-width: 850px)
{
  .mobile-row-column {
    flex-direction: column !important;
  }
  .mobile-content {
    display: block;
  }
  .mobile-content-flex-row {
    display: flex;
    flex-direction: row;
  }
  .desktop-content {
    display: none;
  }
  .desktop-content-flex-row {
    display: none;
  }

}

/* Hero Logo */

#logo-3d_wrapper {
  padding-top: 30px;
  width: 70%;
  max-width: 100%;
  height: 60%;
  top: 7.5%;
  overflow: hidden;
  position: absolute;
  z-index: -5;
  animation: logo-fade 1s forwards;
  margin: 0 auto;
  display: inline-block;
  pointer-events: none;
  margin-bottom: 5%;
}

@media (max-width: 460px)
{
  #logo-3d_wrapper {
    margin-bottom: 100%;
  }
}

@media (max-width: 830px)
{
  #logo-3d_wrapper {
    margin-bottom: 50%;
  }
}


video#logo-3d_wrapper::-webkit-media-controls-panel {
    display: none !important;
    opacity: 1 !important;
}

video#logo-3d_wrapper::-webkit-media-controls {
    display: none !important;
    opacity: 1 !important;
}

@keyframes logo-fade {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/* Header Pool Status */

#pool-status {
    width: 100%;
    height: 50px;
    display: flex;
    opacity: 0.9;
    background: var(--background-color-pool);
    text-align: center;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    color:var(--text-black-white);
    font-weight: 500;
    font-size: 0.875rem;
    letter-spacing: 0.04375rem;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    /* opacity: 0.56; */
}

.status-indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 24px;
}

.center-horizontal {
    margin: auto;
}

.status-online {
    animation: pulse 3s infinite;
    background-color: #23D123;
    filter: drop-shadow(0px 0px 7px rgba(0, 255, 26, 0.65)) drop-shadow(0px 0px 15px #06FFA5);
}

.status-online-text {
    color: #23D123;
}

.status-stale {
  background-color: #d1d123;
  filter: drop-shadow(0px 0px 7px rgba(255, 255, 0, 0.5)) drop-shadow(0px 0px 15px #e6e600);
}

.status-offline {
    background-color: #d12323;
    filter: drop-shadow(0px 0px 7px rgba(255, 0, 0, 0.65)) drop-shadow(0px 0px 15px #ff0606);
}

.status-offline-text {
    color: #D12323;
}

@keyframes pulse {
    0% {
        filter: drop-shadow(0px 0px 7px rgba(0, 255, 26, 0.65)) drop-shadow(0px 0px 15px #06FFA5);
    }

    50% {
        filter: drop-shadow(0px 0px 7px rgba(255, 255, 255, 0)) drop-shadow(0px 0px 15px #ffffff00);
    }

    100% {
        filter: drop-shadow(0px 0px 14px rgba(0, 255, 26, 0.65)) drop-shadow(0px 0px 15px #06FFA5);
    }
}

@media (max-width: 400px){
    .pool-status-newline{
        display: inline-block;
    }
}

/* Navigation Appbar */

.invert-img {
    filter: var(--svg-invert-100-0);
}

#nav-appbar {
    width: 100%;
    height: 100px;
    display: flex;
    background: transparent;
    text-align: center;
    align-items: center;
    justify-content: space-between;
    max-width: 1440px;
    box-sizing: content-box;
    justify-self: start;
}

#nav-center {
    width: 100%;
    display: flex;
    justify-content: center;
}

#nav-logo {
    width: 165px;
    height: 100px;
    cursor: pointer;
}

#nav-logo:hover {
    opacity: 0.56;
}

.nav-buttons {
    font-family: "Inter", sans-serif;
    text-decoration: none;
    background: none;
    border: none;
    margin: 0 16px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
    padding: 5px;
    text-align: center;
    font-style: normal;
    line-height: 20px;
    letter-spacing: 1.28px;
    text-transform: uppercase;
}

.nav-atag {
    font-weight: 350;
    text-decoration: none;
}

.nav-buttons:hover {
    opacity: 0.56;
}

.nav-buttons_bold {
    font-weight: 500;
}

#nav-buttons_gs {
    text-decoration: none;
    font-family: "Inter", sans-serif;
    border: none;
    border-radius: 2rem;
    margin: 0 10px 0px 10px;
    cursor: pointer;
    padding: 16px 28px;
    font-size: 16px;
    /* box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.12); */
    /* gap: 0.5rem; */
    text-align: center;
    font-size: 1rem;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 1.28px;
    text-transform: uppercase;
}

#nav-buttons_gs:hover {
    opacity: 0.56;
}

.nav-dropdown_link {
    font-family: "Inter", sans-serif;
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 14px;
    color: var(--ocean-blue);
    font-weight: 550;
    padding: 10px 20px;
    width: 100%;
    border-top: 1px solid rgba(128, 128, 128, 0.475);
}

.nav-dropdown_link_last {
    border-bottom: 1px solid rgba(128, 128, 128, 0.475);
}

.nav-dropdown_link:hover {
    background-color: #0000001e;
}


#nav-dropdown {
    display: none;
    flex-direction: column;
    justify-content: space-around;
    background-color: white;
    position: absolute;
    z-index: 10;
    padding: 20px 0px;
    right: 0;
    width: max-content;
    height: max-content;
    border-radius: 10px;
    border: 1px solid rgba(128, 128, 128, 0.475);
}

#nav-burger,
#nav-burger-ns {
    display: none;
    position: relative;
    padding: 5px;
    height: 22px;
    width: 26px;
    cursor: pointer;

}

#nav-icon,
#nav-icon-ns {
    display: block;
    width: 100%;
    height: 100%;
    background-image: url("/National_Library/oe_/https://ocean.xyz:443/static/assets/menu.svg");
    background-position: center;
    background-size: cover;
    cursor: pointer;
}

#nav-mobile-button-ns {
  position: absolute;
  height: 22px;
  width: 26px;
  top: 0;
  right: 0;
  cursor: pointer;
  opacity: 0;
}

#nav-mobile-button-ns:checked ~ #nav-dropdown {
  display: flex;
}

#nav-wide_wrap{
    display: flex;
    align-items: center;
}

.light-dark-button {
    height: 30px;
    width: 30px;
    border: none;
    background-color: transparent;
    background-image: url('./assets/light-dark.svg');
    filter: var(--svg-invert-0-100);
    background-size:contain;
    background-repeat: no-repeat;
}

.mobile-light-dark-toggle {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding-right: 35px;
}

.light-dark-wrap-burger{
    display: flex;
    justify-content: center;
    align-items: center;
}

.light-dark-button-burger {
    height: 30px;
    width: 30px;
    border: none;
    background-color: transparent;
    background-image: url('./assets/light-dark.svg');
    background-size:contain;
    background-repeat: no-repeat;
    margin-top: 10px;
    filter: none;
}

.light-JS-button {
    background-image: url('./assets/lightmode.svg');
}

.dark-JS-button {
    background-image: url('./assets/darkmode.svg');
}

.alwaysWhite {
    filter: invert(100%)
}


.light-dark-button:hover,
.light-dark-button-burger:hover {
    filter: invert(50%);
    cursor: pointer;
}

.light-dark-form{
    height: 30px;
    width: 30px;
}

@media(max-width: 1000px) {

    #nav-burger,
    #nav-burger-ns {
        display: unset;
    }

    #nav-img {
        cursor: pointer;
    }

    #nav-wide_wrap {
        display: none;
    }


}

/* General CSS Classes (based on Home)  */

.show-500 {
    display: none;
}

@media(max-width: 500px){
    .hide-500{
        display: none;
    }
    .show-500{
        display: block;
    }
}

.subtitle_gray {
    color: var(--text-dimmed);
    font-family: "Inter", sans-serif;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    /* letter-spacing: -0.03rem; */
    /* font-size: clamp(2rem, 2vw + 0.6rem, 3rem); */
    font-size: 1.5rem;
}


.hero_quote {
    color: var(--text-black-white);
    text-align: center;
    font-family: "Inter", sans-serif;
    font-size: clamp(1rem, 2vw + 1.60rem, 2rem);
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: -0.04rem;
}

.button_gradient_color {
    background: linear-gradient(135deg, #17D9D5 5%, var(--ocean-blue) 30%, #1489EE 80%, #17D9D5 90%);
}

.button_gradient_color_faded {
    background: radial-gradient(107.84% 322.29% at 21.3% 183.33%, rgba(17, 55, 245, 0.30) 27.23%, rgba(20, 137, 238, 0.30) 66.15%, rgba(23, 217, 213, 0.30) 94.29%), #FFF;
}

.big_number {
    font-size: clamp(2rem, 2vw + 4rem, 6.25rem);
}

.small_number {
    font-size: clamp(1rem, 1vw + 2rem, 3rem);
}

.nonlayout {
    width: 100%;
    height: 100%;
}

/* General Dashboard Styling */

.page-title-container {
  height: 80px;
}

.page-title-container>.title-text {
  color: var(--text-black-white);
  font-size: 60px;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  word-wrap: break-word;
}


@media (max-width: 700px) {
    .page-title-container>.title-text {
        font-size: 48px;
    }
}

#dashboard-spacer {
  margin: 24px 0px;
  width: 100%;
  height: 1px;
}

.dashboard-spacer-xsmall {
  margin: 8px 0px;
  width: 100%;
  height: 1px;
}

.generic-top_wrap {
    padding: var(--content-padding);
}

/* Home page overrides  */


#home #top #pool-status {
  color: white;
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: center;
  width: 100%;
  font-weight: 500;
  font-size: 0.875rem;
  letter-spacing: 0.04375rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
  width: 100%;
  background: none;
}

#home #footer-border {
  height: 0px;
}

/* Home page styling */

#home-top_wrap {
    padding: var(--content-padding);
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center;
    justify-content: center;
    margin: 0 auto;
    height: 98vh;
    position: relative;
    min-height: 620px;
  }

#home-top_lower_wrap {
    max-width: 1440px;
    /* margin-top: 375px; */
    margin-top: auto;
    margin-bottom: 150px;

    display: flex;
    justify-content: space-between;
    flex-direction: row;
    align-items: flex-start;
    width: 100%;
    /* align-self:flex-end; */
}



#home-top_lower_left {
    width: 100%;
    letter-spacing: -3.5px;
    margin-bottom: 50px;
}

#home-top_lower_right {
    text-align: right;
    align-self: flex-end;
    width: 40%;
}

/* Aspect ratio queries to prevent logo overlap  */

@media (min-width: 1091px) and (max-height: 870px) {
    #home-top_lower_wrap {
        margin-top: 0px;
        padding-top: 70vh;
    }

    #home-top_wrap>#nav-appbar {
        position: absolute;
        top: 0px;
        width: 90%;
    }
}

@media (min-width: 1091px) and (max-height: 660px) {
    #home-top_lower_wrap {
        margin-top: 0px;
        padding-top: 85vh;
    }
}

@media (min-width: 1091px) and (max-height: 510px) {
    #home-top_lower_wrap {
        margin-top: 0px;
        padding-top: 110vh;
    }
}

@media (min-width: 1091px) and (max-height: 430px) {
    #home-top_lower_wrap {
        margin-top: 0px;
        padding-top: 120vh;
    }
}


@media (max-width: 1090px) and (min-width:803px) and (max-height: 900px) {
    #home-top_lower_wrap {
        margin-top: 0px;
        padding-top: 70vh;
    }

    #home-top_wrap>#nav-appbar {
        position: absolute;
        top: 0px;
        width: 90%;
    }
}

@media (max-width: 1090px) and (min-width:803px) and (max-height: 720px) {
    #home-top_lower_wrap {
        margin-top: 0px;
        padding-top: 90vh;
    }
}


@media (max-width: 1090px) and (min-width:803px) and (max-height: 600px) {
    #home-top_lower_wrap {
        margin-top: 0px;
        padding-top: 100vh;
    }
}

@media (max-width: 1090px) and (min-width:803px) and (max-height: 500px) {
    #home-top_lower_wrap {
        margin-top: 0px;
        padding-top: 115vh;
    }
}

@media (max-width: 1090px) and (min-width:803px) and (max-height: 435px) {
    #home-top_lower_wrap {
        margin-top: 0px;
        padding-top: 135vh;
    }


}


@media (max-width: 803px) and (min-width:532px) and (max-height: 1150px) {
    #home-top_lower_wrap {
        margin-top: 0px;
        padding-top: 70vh;
    }

    #home-top_wrap>#nav-appbar {
        position: absolute;
        top: 0px;
        width: 90%;
    }
}

@media (max-width: 803px) and (min-width:532px) and (max-height: 890px) {
    #home-top_lower_wrap {
        margin-top: 0px;
        padding-top: 85vh;
    }
}

@media (max-width: 803px) and (min-width:532px) and (max-height: 700px) {
    #home-top_lower_wrap {
        margin-top: 0px;
        padding-top: 90vh;
    }

    #home-top_lower_left {
        font-size: 55px !important
    }
}


@media (max-width: 803px) and (min-width:532px) and (max-height: 600px) {
    #home-top_lower_wrap {
        margin-top: 0px;
        padding-top: 105vh;
    }
}


@media (max-width: 531px) and (max-height: 900px) {
    #home-top_lower_wrap {
        margin-top: 0px;
        padding-top: 70vh;
    }

    #home-top_wrap>#nav-appbar {
        position: absolute;
        top: 0px;
        width: 90%;
    }
}

@media  (max-width: 531px) and (max-height: 800px) {
    #home-top_lower_wrap {
        margin-top: 0px;
        padding-top: 75vh;
    }
}


@media  (max-width: 531px) and (max-height: 685px) {
    #home-top_lower_wrap {
        margin-top: 0px;
        padding-top: 80vh;
    }
}

@media (max-width: 531px) and (max-height: 575px) {
    #home-top_lower_wrap {
        margin-top: 0px;
        padding-top: 95vh;
    }
}

@media  (max-width: 531px) and (max-height: 485px) {
    #home-top_lower_wrap {
        margin-top: 0px;
        padding-top: 105vh;
    }
}
@media (max-width: 381px) {
      #home-top_lower_left {
        font-size: 45px !important
    }
}

@media (max-width: 531px) and (min-width: 461px)  {
      #home-top_lower_left {
        font-size: 56px !important
    }
}




@media(max-width: 460px) {
  #home-top_lower_wrap {
      flex-direction: column;
      align-items: center;
      justify-content: center;
      /* margin-top: 0; */
      /* margin-bottom: 0; */
  }

  #home-top_lower_left {
      width: 100%;
      text-align: center;
      align-self: center;
      margin-bottom: auto;
      font-size: var(--font-xlarge);
      align-self: flex-start;
  }

  #home-top_lower_right {
      text-align: center;
      align-self: center;
      width: 100%;
      margin-bottom: 50%;
      font-size: var(--font-medium);
  }
}

@media(max-width: 1090px) {
  /* #home-top_lower_right {
      align-self: center;
  } */
  #home-top_lower_wrap {
      flex-direction: column;
      align-items: center;
      justify-content: center;
  }

  #home-top_lower_left {
      width: 80%;
      text-align: center;
      align-self: center;
      margin-bottom: 50px;
  }

  #home-top_lower_right {
      text-align: center;
      align-self: center;
      width: 80%;
      margin-bottom: 50px;
  }
}

#home-padding {
    padding: var(--home-padding);
}

#home-nav_wrap {
    width: 100%;
    max-width: 1440px;
}

/* #home-mid1_wrap {
    max-width: var(--fixed-width);
    padding: var(--content-padding);
    margin: 0 auto;
    height: fit-content;
    display: flex;
    flex-direction: column;
    align-items: center;
} */

#home-mid1_top_text {
    overflow-x: auto;
    height: fit-content;
    margin-top: 100px;
    text-align: center;
}

#hero-message-container {
  width: 50%;
  max-width: 650px;
  margin-top: 72px;
}

@media(max-width: 850px) {
    #hero-message-container {
        width: 90%;
    }
}

#home-mid1_img {
    height: 100px;
    width: 100px;
}

#home-mid1_copy {
    margin: 32px 0px;
}


#home-mid1_direct {
  text-align: center;
  cursor: pointer;
}

.home-line {
    width: 100%;
    height: 1px;
    background-color: #4F4F4F;
    opacity: 0.5;
}

.home-line2 {
    width: 100%;
    height: 5px;
    background: linear-gradient(to bottom, #E5E5E5, rgba(229, 229, 229, 0.7), rgba(229, 229, 229, 0.4), rgba(229, 229, 229, 0));
}

#home-about_wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: "Inter", sans-serif;
    font-style: normal;
    /* text-shadow: 0px 3px 3px rgba(0, 0, 0, 0.3); */
    padding-top: 124px;
    padding-bottom: 124px;
    color: var(--text-black-white)
}

#home-marketing-points_wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: "Inter", sans-serif;
    font-style: normal;
    /* text-shadow: 0px 3px 3px rgba(0, 0, 0, 0.3); */
    padding-bottom: 124px;
    padding-top: 124px;
}

.home-heading-width {
    max-width: var(--home-heading-width);
}

.home-heading-width-narrow {
    max-width: var(--home-heading-width-narrow);
}

.home-heading-fixed-width {
    width: var(--home-heading-width);
}

@media (max-width: 720px) {
    .home-heading-fixed-width {
        width: 95%;
    }
}

#home-marketing-points_header {
    text-align: center;
}

#home-block-square_wrap {
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
    padding-top: 48px;
    padding-bottom: 48px;
}

.old-block-square {
    background-color: var(--text-dimmed);
    height: 20px;
    width: 20px;
    border-radius: 4px;
}

.new-block-circle {
    background-color: var(--ocean-blue);
    height: 20px;
    width: 20px;
    border-radius: 20px;
}
#home-about_logo {
    margin-top: 124px;
    margin-bottom: 67px;
}

#home-about_main_text {
    /* font-weight: bold;
    font-size: clamp(1.5rem, 2vw + 1.5rem, 3rem); */
    text-align: center;
    margin: 0px 30px 6px 30px;
    letter-spacing: -2px;
}

.home-about_data {
    /* font-size: clamp(1.2rem, 2vw + .5rem, 2rem); */
    text-align: center;
    margin: 10px 60px 0px 60px;
}

.home-about_data_payout,
.home-about_data_blocksfound {
    color: var(--ocean-blue);
}

.home-about_widget {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 100px;
    color: var(--text-black-white);
}

.home-about_widget_img {
    height: 100px;
    width: 100px;
    margin-bottom: 32px;
    filter: var(--svg-invert-0-100)
}

.home-about_widget_title {
    margin-top: 32px;
    margin-bottom: 8px;
    font-weight: bold;
    font-size: var(--font-small);
}

.home-about_widget_copy {
    text-align: center;
    font-weight: var(--font-weight-normal);
    font-size: var(--font-small);
}


#home-instruct_wrap {
    height: fit-content;
    overflow: hidden;
    position: relative;
    color: white;
    font-family: "Inter", sans-serif;
    font-style: normal;
    width: 100%;
    display: flex;
    justify-content: center;
}

#home-instruct_inner_wrap {
    max-width: var(--fixed-width);
    padding: var(--content-padding);
    margin: 0 auto;
    margin: 172px 0px;

}

#home-instruct_main_title {
    font-weight: var(--font-weight-bold);
    font-size: var(--font-large);
    margin-bottom: 82.5px;
    height: 58px;
    overflow-x: visible;
}

#home-instruct_bottom_wrap {
    margin-top: 60px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 40px;
    height: fit-content;
}

.home-instruct_step {
    font-size: var(--font-small);
    margin-bottom: 40px;
    display: flex;
    align-items: center;

}

.home-instruct_step_title {
    width: 36px;
    min-width: 36px;
    height: 36px;
    border-radius: 50px;
    border: 1px solid white;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 24px;
}

.home-instruct_step_copy {
    font-weight: bold;
    font-weight: 200;
}


.home-instruct_underline {
    border-bottom: 2px solid rgba(255, 255, 255, 0.654);
}

#home-instruct_view_button {
    font-family: "Inter", sans-serif;
    margin-top: 20.5px;
    height: 51px;
    width: 218px;
    border-radius: 50px;
    border: none;
    letter-spacing: 2px;
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    letter-spacing: 1px;
    background-color: white;
}

#home-instruct_bottom_right {
    border-radius: 20px;
    z-index: 100;
    width: fit-content;
    height: 100%;
    padding: 0px 40px
}

#home-instruct_video {
    width: 763px;
    box-shadow: 0 0 60px rgba(255, 255, 255, 0.665);
    border-radius: 20px;
}

#getstarted-instruct_video {
    margin: 0 auto;
    width: 100%;
    max-width: 800px;
    box-shadow: var(--box-shadow-light-dark);
    border-radius: 20px;
}

.video-poster {
    object-fit: contain;
}

#home-stats_wrap {
    display: flex;
    /* justify-content: center; */
    font-family: "Inter", sans-serif;
    font-style: normal;
    /* text-shadow: 0px 3px 3px rgba(0, 0, 0, 0.3); */
    color: #000;
    letter-spacing: -0.8;
}

#home-stats_inner_wrap {
    width: 100%;
    padding: var(--content-padding);
    max-width: 1440px;
    margin: 0 auto;
}


#home-stats_main_title {
    margin-top: 172px;
    font-size: 48px;
    font-weight: 600;
}

#home-stats_widget_wrap {
    margin-top: 172px;
    display: flex;
    width: 100%;
    justify-content: space-between;
}

.home-stats_widget {
    display: flex;
    flex-direction: column;
    font-size: 20px;
}

.home-stats_widget_title {
    font-weight: 650;
    font-size: 24px;
}

.home-stats_widget_data {
    font-weight: 600;
}

#worker-stats_wrap {
    display: flex;
    /* justify-content: center; */
    font-family: "Inter", sans-serif;
    font-style: normal;
    /* text-shadow: 0px 3px 3px rgba(0, 0, 0, 0.3); */
    color: #000;
    letter-spacing: -0.8;
}

#worker-stats_inner_wrap {
    width: 100%;
    padding: var(--content-padding);
    max-width: 1440px;
    margin: 0 auto;
}


.worker-stats-main-title {
    font-size: 48px;
}

#worker-stats_widget_wrap {
    margin-top: 48px;
    margin-bottom: 24px;
    display: flex;
    width: 100%;
    justify-content: space-between;
}

.worker-stats_widget {
    display: flex;
    flex-direction: column;
    font-size: 20px;
}

.worker-stats_widget_title {
    font-size: 24px;
}


#home-stats_dash_wrap {
    height: 51px;
    width: 218px;
    border-radius: 50px;
    border: none;
    background: radial-gradient(circle at 50%, #1137F5 20%, #1489EE 70%, #17D9D5 85%);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 172px;
    margin-top: 72px;
}

#home-stats_dash_button_view_button {
    font-family: "Inter", sans-serif;
    height: 47px;
    width: 214px;
    border-radius: 50px;
    border: none;
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    letter-spacing: 1px;
    color: #1137F5;
    background-color: white;
}

#home-stats_link {
    margin-top: 80px;
    color: #1137F5;
    margin-bottom: 125px;
    font-size: 32px;
    font-weight: bold;
    cursor: pointer;
}

#home-q_outer_wrap {
    display: flex;
    flex-direction: column;
}

#home-q_wrap {
    width: 100%;
    padding: var(--content-padding);
    max-width: 1440px;
    margin: 124px auto;
}

@media(max-width: 690px) {
    #home-q_wrap {
        margin: 0px auto;
    }
}

#home-q_title {
    font-size: var(--font-large);
    font-weight: var(--font-weight-bold);
    color: var(--text-black-white)
}

@media(max-width: 690px) {
    #home-q_title {
        margin-top: 32px;
    }
}

#home-q_set_wrap {
    margin-top: 72px;
}

@media(max-width: 690px) {
  #home-q_wrap {
      margin-top: 36px;
  }
}

.home-q_set {
    margin-bottom: 48px;
    user-select: none;
    font-size: var(--font-medium);
}

.home-q_set_ask {
    font-weight: bold;
    cursor: pointer;
    font-weight: 600;
    line-height: normal;
}

.home-q_set_ans {
    color: var(--Dimmed, #555);
    margin-top: 8px;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.02rem;
}

/* .home-q_set_up_arrow,
.home-q_set_ans {
    display: block;
} */

/* .home-q_set_up_arrow,
.home-q_set_down_arrow {
    color: #1137F5;
} */

#home-connect_wrap {
    height: fit-content;
    position: relative;
    color: white;
    font-family: "Inter", sans-serif;
    font-style: normal;
    width: 100%;
}

#home-connect_inner_wrap,
.home-connect_social {
    display: flex;
    flex-direction: column;
    align-items: center;
}


#home-connect_title {
    margin-top: 124px;
    font-size: var(--font-large);
    font-weight: 550;
}

#home-connect_social_wrap {
    margin-top: 72px;
    margin-bottom: 124px;
}

.home-connect_social {
    margin-bottom: 48px;
}

.home-connect_social_bottom {
    font-size: var(--font-medium);
    font-weight: 550;
}

.home-connect_social_top {
    font-size: var(--font-small);
    margin-bottom: 5px;
}

.home-box {
    width: 100%;
    height: 172px;
}

.spacer {
    width: 100%;
    height: 72px;
}

@media(max-width: 1700px) {
    #home-instruct_video {
        width: 700px;
        border-radius: 20px;
    }

    .home-instruct_step {
        margin-bottom: 50px;
    }


    #home-stats_widget_wrap {
        display: grid;
        grid-template-columns: 1fr 1fr;
        row-gap: 60px;
        column-gap: 0px;
        width: 90%;
    }

    .home-stats_widget_data {
        width: 440px;
    }
}

@media(max-width: 1500px) {
    #home-instruct_video {
        width: 600px;
    }

    #home-instruct_bottom_right {
        height: 100%;
        display: flex;
        align-items: center;
        border-radius: 20px;
        width: fit-content;
    }



}

@media(max-width: 1375px) {
    #home-instruct_video {
        width: 450px;
    }

    .home-instruct_step {
        margin-bottom: 40px;
    }


    #ocean-logo {
        margin-top: 140px !important;
    }

    /* #home-top_lower_wrap {
        margin-top: 375px;
    } */
}

@media(max-width: 1200px) {
    #home-instruct_video {
        width: 375px;
    }


}

@media(max-width: 1090px) {

    #home-instruct_video {
        width: 350px;
    }

    #home-top_lower_wrap {
        display: flex;
        flex-direction: column;
        align-items: center;
        /* margin-top: 100px; */
    }

    #home-top_lower_left,
    #home-top_lower_right {
        width: 80%;
        text-align: center;
    }

    #home-top_lower_left {
        margin-bottom: 50px;
    }

    #ocean-logo {
        margin-top: 120px !important;
    }

    #home-about_logo {
        margin-top: 100px;
    }

    #home-instruct_video {
        width: 650px;
    }

    #home-instruct_bottom_right {
        padding: 40px;
    }

    #home-instruct_bottom_wrap,
    .home-instruct_step,
    #home-stats_widget_wrap,
    #home-stats_inner_wrap {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .home-instruct_step_title {
        margin: 0px 0px 24px 0px
    }

    #home-instruct_view_button {
        margin-bottom: 50px;
    }

    #home-instruct_title,
    #home-instruct_main_title,
    #home-stats_title,
    #home-stats_main_title,
    #home-stats_link{
        text-align: center;
    }

    .home-stats_widget_data,
    .home-stats_widget_title {
        width: 100%;
        text-align: center;
    }

    #home-stats_widget_wrap {
        width: 100%;
        margin-top: 120px;
    }

    #home-instruct_bottom_left {
        margin: 0px 50px;
    }

}

/* lower a lot of margins here */
@media(max-width: 750px) {
    #home-instruct_video {
        width: 500px;
    }

    #home-mid1_top_text,
    .home-about_widget,
    #home-about_offer_wrap,
    #home-instruct_inner_wrap,
    #home-stats_main_title,
    #home-connect_title {
        margin-top: 130px;
    }

    #home-about_logo,
    #home-stats_widget_wrap {
        margin-top: 100px;
    }

    #home-mid1_direct,
    #home-about_offer_wrap,
    #home-instruct_inner_wrap,
    #home-stats_dash_wrap,
    #home-q_set_wrap,
    #home-connect_social_wrap {
        margin-bottom: 130px;
    }

    #home-instruct_main_title {
        height: fit-content;
    }


}

@media(max-width: 600px) {
    #home-instruct_video {
        width: 400px;
    }

    #home-about_br {
        display: none;
    }
}

@media(max-width: 470px) {
    #home-instruct_video {
        width: 300px;
    }

    #home-br1 {
        display: unset;
    }

    #home-connect_nostr {
        text-align: center;
    }
}



/* Hero Section Styling */

#hero-section {
    width: 100%;
    height: 830px;
    display: flex;
    align-items: center;
    flex-direction: column;
    /* background-color: red; */
    font-family: "Inter", sans-serif;
    font-style: normal;
}

#ocean-logo {
    width: 215px;
    margin-top: 162px;
    /* animation: logo-spin 1s 1 forwards; */
}

#front-page-title {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    font-size: 3em;
    text-align: center;
    margin-top: 72px;
    padding: 0px 100px 0px 100px;
}

#front-page-subtitle {
    color: #000;
    text-align: center;
    font-family: "Inter", sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-top: 24px;
}

/* Tor Button */

#tor-button {
    padding: 15px 20px;
    background: none;
    margin-top: 24px;
    justify-content: center;
    display: flex;
    flex-direction: row;
    align-items: center;

    color: #202020;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0.48px;

    cursor: pointer;
    border: none;
}

#tor-icon {
    width: 32px;
    height: 32px;
    margin-top: 0px;
}

/* Front Page Section Styling */

.fp-section {
    height: 585px;
    width: 100%;
    display: flex;
    margin-top: 0px;
    flex-direction: row;
}

.fp-section-left-wrapper {
    height: 100%;
    width: 50%;
    padding: 5%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.fp-section-right-wrapper {
    height: 100%;
    width: 50%;
    padding: 5%;
    display: flex;
    flex-direction: column;
}

/* --------------------- */

/* About Page Styling */

.back-button-wrapper {
    display: inline-flex;
    align-items: center;
    margin: 50px;
    cursor: pointer;
}

.back-button-wrapper>img {
    rotate: 180deg;
    width: 12px;
    margin-right: 10px;
}

.about-content {
    display: flex;
    align-items: center;
    flex-direction: column;
    margin: 0px 20% 150px 20%;
}

.about-content>h1 {
    color: #000;
    font-size: 64px;
    font-family: "Inter", sans-serif;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.about-content>p {
    color: #000;
    font-family: "Red Hat Text";
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px;
}

.section-login-left-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 67%;
}

#login-button {
    font-family: "Inter", sans-serif;
    width: 146px;
    height: 40px;
    flex-shrink: 0;
    background-color: #000;
    color: white;
}

.section-login-right-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 33%;
    padding: 100px;
}

#front-page-pool-info {
    height: 585px;
    width: 100%;
    display: flex;
    margin-top: 0px;
    flex-direction: column;
    align-items: left;
    padding: 50px;
}

#front-page-pool-info>span {
    color: #000;
    font-family: "Inter", sans-serif;
    font-size: 40px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-bottom: 30px;
}

.pool-container {
    width: 100%;
    height: 80px;
    border: 1px solid #D9D9D9;
}

#section-pool-status {
    border-radius: 29px;
    border: 1px solid #D9D9D9;
    padding: 100px;
    width: 50%;

}

#section-pool-status>p {
    color: #000;
    font-family: 'Inter';
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.section-login-left-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 67%;
}

#login-button {
    font-family: "Inter", sans-serif;
    width: 146px;
    height: 40px;
    flex-shrink: 0;
    background-color: #000;
    color: white;
}

.section-login-right-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 33%;
    padding: 100px;
}

#front-page-pool-info {
    height: 585px;
    width: 100%;
    display: flex;
    margin-top: 0px;
    flex-direction: column;
    align-items: left;
    padding: 50px;
}

#front-page-pool-info>span {
    color: #000;
    font-family: "Inter", sans-serif;
    font-size: 40px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-bottom: 30px;
}

.pool-container {
    width: 100%;
    height: 80px;
    border: 1px solid #D9D9D9;
}

#section-pool-status {
    border-radius: 29px;
    border: 1px solid #D9D9D9;
    padding: 100px;
    width: 50%;

}

#section-pool-status>p {
    color: #000;
    font-family: 'Inter';
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.table-cell.blockhash-text {
    min-width: 200px;
    direction: rtl;
    text-align: start;
}
@media screen and (max-width: 1000px) {
    .table-cell.blockhash-text{
        min-width: 140px;
    }
}

.table-cell.date-text {
    width: 1px;
}
.table-cell .date-text{
    min-width: 160px;
}

img.leading-icon {
    display: inline-block;
    height: 1em;
    width: auto;
    margin-right: 0.5em;
}

/* Footer Styling */

#footer-outer_wrap {
    display: flex;
    justify-content: center;
    width: 100%;
    font-family: "Inter", sans-serif;
    font-style: normal;
    font-size: 15px;
}

#footer-border {
    width: 100%;
    height: 1px;
    background-color: var(--background-lowtransp-lowtransp);
    margin-bottom: 75px;
}

#footer-inner_wrap {
    display: flex;
    flex-direction: column;
    padding: 0px 5% 90px 5%;
    width: 100%;
    max-width: 1440px;
    box-sizing: content-box;
}

#footer-top {
    display: flex;
    flex-direction: row;
}

#footer-left_wrap {
    width: 60%
}

#footer-logo {
    margin-bottom: 22px;
}

#footer-copy {
    width: 50%;
    font-size: 0.9375rem;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: -0.01281rem;
    color: var(--text-black-white);
}


#footer-grid {
    display: grid;
    grid-template-columns: 180px 180px 99px;
    grid-template-rows: repeat(4, 1fr);
    column-gap: 48px;
    row-gap: 20px;
}

.footer-grid_header {
    font-size: 1.0625rem;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: -0.0145rem;
    width: 90px;
    color: var(--text-black-white);
}

.footer-grid_link,
#footer-terms,
#footer-privacy,
#footer-legal {
    text-decoration: none;
    color: var(--text-black-white);
    font-size: 0.9375rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.01281rem;
}

#footer-legal {
    max-width: 450px;
}

.footer-grid_link {
    height: fit-content;
}

.footer-grid_link:hover {
    text-decoration: underline;
    text-decoration-color: var(--text-black-white) ;
    cursor: pointer;
}

#footer-bottom {
    display: flex;
    justify-content: space-between;
    margin-top: 106px;
}

#footer-bottom_right {
    display: flex;
}

#footer-terms {
    margin-right: 25px;
}


@media(max-width: 1000px) {
    #footer-outer_wrap {
        font-size: 12px;
    }

    .footer-grid_header {
        font-size: 14px;
    }

    #footer-grid {
        column-gap: 15px;
        row-gap: 7px;
    }

    #footer-bottom {
        margin-top: 50px;
    }

}

@media(max-width: 900px) {
    #footer-inner_wrap {
        padding: 0px 5% 60px 5%;
    }

    #footer-top,
    #footer-left_wrap,
    #footer-bottom {

        display: flex;
        flex-direction: column;
        align-items: center;

    }

    #footer-grid {
        text-align: center;
        margin-top: 50px;
        grid-template-columns: 1fr 1fr 1fr;
    }

    #footer-copy {
        text-align: center;
        width: 100%;
    }

    #footer-legal {
        margin-bottom: 10px;
        text-align: center;
    }

    .footer-grid_header {
        width: 100%;
        text-align: center;
    }

    #footer-bottom_right {
        display: flex;
        justify-content: center;
    }
}

/* Blog Styling */

#blog-nav_wrap {
    width: 100%;
    background-color: var(--ocean-blue);
    display: flex;
    justify-content: center;
}

#blog-outer_wrap {
    font-family: "Inter", sans-serif;
    font-style: normal;
    font-size: clamp(1.1875rem, 2vw + 0.5rem, 1.5rem);
}

#blog-top {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    height: 677px;
    background-color: var(--ocean-blue);
    overflow: hidden;
}

#blog-top_left_wrap {
    padding-left: 10%;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: end;
}

#blog-top_left {
    color: white;
    max-width: 720px;
    box-sizing: content-box;
}

#blog-path {
    margin-top: 100px;
    font-size: clamp(1.00rem, 1vw + 0.75rem, 1.5rem);
}

#blog-top_right {
    width: 100%;
    display: flex;
    justify-content: end;
}

#blog-top_right_wrap {
    width: 47.3vw;
}


#blog-img {
    position: relative;
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.blog-img_overlay {
    background: linear-gradient(0deg, var(--ocean-blue) 0%, var(--ocean-blue) 100%), #FFF;
    mix-blend-mode: lighten;
}

#blog-title {
    font-weight: 500;
    margin-top: 125px;
    font-size: clamp(2.00rem, 3vw + 2rem, 5.625rem);
    line-height: normal;
    letter-spacing: -0.05625rem;
    font-style: normal;
}

#blog-bottom {
    padding-top: 100px;
    display: flex;
    justify-content: center;
}

#blog-bottom_inner {
    max-width: 1440px;
    box-sizing: content-box;
    display: flex;
    padding: 0% 5%;
}



#blog-bottom_header {
    width: 35%;
}

#blog-bottom_post {
    width: 65%;
    color: var(--text-dimmed-whiter);
}

#blog-bottom_header_name {
    margin-bottom: 24px;
    color: var(--text-dimmed-whiter);
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: -0.015rem;
}

#blog-bottom_header_date {
    color: var(--text-dimmed);
}

.blog-bottom_post_h2 {
   color: var(--text-black-white);
}

div.blog-article-text .centered {
    text-align: center;
}

div.blog-article-text div.centered {
    margin-left: auto;
    margin-right: auto;
}

div.blog-article-text img.centered {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

div.blog-article-text div.blog-heading {
    font-size: var(--font-large);
    font-weight: var(--font-weight-bold);
}

div.blog-article-text div.blog-subhead {
    font-size: var(--font-small);
}

div.blog-article-text div.blog-section {
    font-size: var(--font-small);
    font-weight: var(--font-weight-bold);
    margin-top: var(--font-large);
    margin-bottom: var(--font-small);
}

div.blog-article-text div.blog-section.with-subhead {
    margin-bottom: 0px;
}

div.blog-article-text div.blog-section-subhead {
    font-size: var(--font-xsmall);
    margin-bottom: var(--font-small);
}

div.blog-article-text div.blog-subsection {
    font-size: var(--font-small);
    font-weight: var(--font-weight-bold);
    text-decoration: underline;
    margin-bottom: var(--font-xxxsmall);
}


div.blog-article-text div.blog-section + p {
    margin-top: 0px;
}

div.blog-article-text div.blog-section-subhead + p {
    margin-top: 0px;
}

div.blog-article-text div.blog-subsection + p {
    margin-top: 0px;
}

div.blog-article-text ul {
    font-size: var(--font-small);
}
div.blog-article-text .narrow-image {
    max-width: 550px;
}
div.blog-article-text .shrinking-image {
    max-width: 98%;
}
div.blog-article-text img.vertical-margin {
    margin-top: 12px;
    margin-bottom: 12px;
}

div.blog-article-text p {
    font-size: var(--font-small);
    margin-bottom: 25px;
    margin-top: 25px;
}
div.blog-article-text li {
    font-size: var(--font-small);
    margin-bottom: 25px;
    margin-top: 25px;
}
div.blog-article-text p.overflow-wrap {
    overflow-wrap: anywhere;
}
div.blog-article-text p.squeeze-top {
    margin-top: 5px;
}
div.blog-article-text p.squeeze-bottom {
    margin-bottom: 5px;
}
div.blog-article-text code {
    font-size: var(--font-xsmall);
    outline-style: solid;
    outline-width: 1px;
    outline-color: var(--ocean-blue);
    padding: 1px;
    z-index: 10000;
    cursor: text;
}
div.blog-article-text code.nowrap {
    white-space: nowrap;
}
div.blog-article-text code.indent {
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 2em;
}
div.blog-article-text ul.indent {
    padding-left: 2em;
}
p.image-caption {
    font-size: var(--font-xxsmall);
    margin-top: 0px;
    margin-bottom: 25px;
    font-style: italic;
}
div.blog-article-text>p:first-child {
    margin-top: 0px;
}
div.blog-article-text>p.pull-quote {
    font-size: clamp(1.75rem, 2.2vw + 0.5rem, 3rem);
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    padding-left: 32px;
    border-left: 11px solid var(--Brand, #1137F5);
    margin-bottom: 35px;
    margin-top: 35px;
}
div.blog-article-text>p.indent {
    margin-left: 2em;
}
div.blog-article-text ol.indent {
    margin-left: 2em;
}
/* shrink sublist top-bottom margins */
div.blog-article-text li li {
    margin-top: 12px;
    margin-bottom: 12px;
}
div.blog-article-text>p.math {
    display: flex;
    flex-direction: column;
}
p.math>math.centered {
    margin-left: auto;
    margin-right: auto;
}

@counter-style legal-sublist-style {
  system: extends lower-alpha;
  suffix: ') ';
  prefix: '(';
}

@counter-style legal-sublist-numeral-style {
  system: extends lower-roman;
  suffix: ') ';
  prefix: '(';
}

p.indent {
    margin-left: 2em;
}

p.half-indent {
    margin-left: 1em;
}

.blog-bottom_post_p {
    margin-bottom: 25px;
    margin-top: 25px;
}

.blog-bottom_post_p_top {
    margin-top: 0px;
}

.blog-collapsing-arrow {
    cursor: pointer;
    width: 15px;
    height: 15px;
    transition: all 0.3s ease;
}

.blog-arrow-rotate {
  transform: rotate(180deg);
}

.blog-collapsing-hidden {
    display: none;
}

.blog-collapsing-opacity {
    animation: opacity 1s;
}

.blog-bottom_post_p_special {
    font-size: clamp(1.75rem, 2.2vw + 0.5rem, 3rem);
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    padding-left: 32px;
    border-left: 11px solid var(--ocean-blue);
    margin-bottom: 35px;
    margin-top: 35px;
}

#blog-bottom_post_signature {
    margin-bottom: 25px;
    margin-top: 25px;
    font-weight: bold;
}

#blog-bottom_offer_wrap {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    height: 320px;
    background: var(--background-white-dark) ;
    border-radius: 25px;
    padding: 35px 0px
}

#blog-bottom_offer_gradient {
    margin-top: 30px;
    margin-bottom: 60px;
    border-radius: 27px;
    padding: 2px;
    background: radial-gradient(circle at 50%, var(--ocean-blue) 20%, #1489EE 70%, #17D9D5 85%);
}

#blog-bottom_offer_title {
    color: var(--text-dimmed);
    letter-spacing: 0.8;
    font-weight: bold;
}

#blog-bottom_offer_text {
    font-size: clamp(1.75rem, 2.2vw + 0.5rem, 2.5rem);
    text-align: center;
    font-weight: bold;
    color:var(--ocean-blue);
    margin: 0px 20px
}

#blog-bottom_offer_button {
    height: 51px;
    width: 178px;
    border-radius: 50px;
    color: white;
    border: none;
}

#blog-bottom_offer_button:hover {
    opacity: 0.8;
    cursor: pointer;
}

@media(max-width: 1600px) {
    #blog-title {
        margin-top: 70px;
    }

}

@media(max-width: 1360px) {


    #blog-title {
        margin-top: 55px;
    }

    #blog-bottom_header {
        width: 40%;
    }

    #blog-bottom_post {
        width: 60%;
    }

    #blog-top,
    #blog-img {
        height: 630px;
    }
}

@media(max-width: 1000px) {

    #blog-top,
    #blog-img {
        height: 377px;
    }

    #blog-bottom {
        display: flex;
        flex-direction: column;
        padding-top: 40px;
    }

    #blog-bottom_post {
        width: 100%;
        margin-bottom: 30px;
    }

    #blog-bottom_header {
        width: 100%;
        margin-bottom: 30px;
    }

    #blog-bottom_header_date {
        opacity: 0.7;
    }

    #blog-bottom_offer_gradient {
        display: none;
    }

    #blog-path {
        display: none;
    }

    #blog-title {
        font-size: clamp(1.75rem, 2vw + 1.75rem, 2.9375rem);
        margin-top: 0px;
    }

    #blog-top_left {
        display: flex;
        align-items: center;
    }

    #blog-bottom_inner {
        flex-direction: column;
    }


}

@media(max-width: 750px) {

    #blog-img {
        background-image: url("./assets/blue_wave.png");
        height: 200px;
        width: 100%;
        border-radius: 20px;

    }

    #blog-top {
        grid-template-columns: 1fr;
        grid-template-rows: fit-content(500px) fit-content(500px);
        flex-direction: column-reverse;
        height: fit-content;

    }

    #blog-top_left_wrap {
        order: 2;
        padding: 0% 5%;
        height: fit-content;
    }

    #blog-top_left {
        order: 2;
        height: fit-content;

    }

    #blog-top_right {
        order: 1;

    }

    #blog-top_right_wrap {
        height: 100%;
        margin-right: 16px;
    }


    #blog-title {
        font-size: 2.9375rem;
        margin: 50px 0px;
    }


}

@media(max-width: 500px) {

    #blog-img,
    #blog-img_overlay {
        height: 170px;
        width: 100%;
    }

    #blog-title {
        font-size: 2.7rem;
        font-style: normal;
        font-weight: 500;
        line-height: 3.5rem;
        letter-spacing: -0.02938rem;
        margin: 16px 0px;
    }

    #blog-bottom_header_name{
        margin-bottom: 16px;
    }

    #blog-bottom{
        padding-top: 16px;
    }

}

@media(max-width: 450px) {

    #blog-img,
    #blog-img_overlay {
        height: 132px;
        width: 100%;
    }

}

@media(max-width: 360px) {

    #blog-img,
    #blog-img_overlay {
        height: 122.75px;
        width: 100%;
    }

}

/* Get started styling */

#gstart-img{
    position: relative;
    background-image: url("./assets/gstart_ocean.png");
    height: 100%;
    width: 100%;
    background-size: cover;
}

#gstart-title{
    font-weight: 500;
    margin-top: 56px;
    font-size: clamp(2.00rem, 3vw + 2rem, 5.625rem);
    line-height: normal;
    letter-spacing: -0.05625rem;
    font-style: normal;
    height: 434px;
    display: flex;
    align-items: end;
}

#gstart-bottom_title{
    color: var(--text-black-white);
    font-size: clamp(2.00rem, 3vw + 2rem, 3rem);
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    padding-bottom: 23px;
}

.gstart-bottom_post_p{
    padding-top: 23px;
    padding-bottom: 16px;
}

.gstart-p_contain{
    display: flex;
}

.gstart-num{
    padding: 0px 7px;
}

.article-list {

    margin-top: 20px;
    margin-bottom: 20px;
}
.article-list li {
    margin-bottom: 10px;
    font-size: 1.2rem;
    font-weight: 500;
    line-height: 1.5rem;
    color: var(--text-black-white);
    margin-left: 20px;
}

@media(max-width: 1600px) {
    #gstart-title {
       height: 380px;
    }

}

@media(max-width: 1360px) {

    #gstart-title {
        height: 350px;
    }

    #gstart-img {
        height: 630px;
    }
}

@media(max-width: 1000px) {

    #gstart-img {
        height: 377px;
    }

    #gstart-title {
        font-size: clamp(1.75rem, 2vw + 1.75rem, 2.9375rem);
        height: 200px;
    }

    #gstart-bottom_title{
        font-size: clamp(1.75rem, 2vw + 1.75rem, 2.5rem);
        padding-bottom: 0px;
    }
}

@media(max-width: 750px) {

    #gstart-img {
        height: 200px;
        width: 100%;
        border-radius: 20px;
    }

    #gstart-title {
        font-size: 2.9375rem;
        display: flex;
        align-content:center ;
        flex-wrap:wrap;
        height: fit-content;
        margin: 50px 0px;
    }
}

@media(max-width: 650px) {
    #gstart-title {
        margin: 25px 0px;
    }
}

@media(max-width: 500px) {
    #gstart-img {
        height: 170px;
        width: 100%;
    }

    #gstart-title {
        margin: 16px 0px;
    }

    .gstart-bottom_post_p{
        padding-bottom: 0px;
    }
}

@media(max-width: 450px) {
    #gstart-img {
        height: 132px;
        width: 100%;
    }
}

@media(max-width: 360px) {
    #gstart-img {
        height: 122.75px;
        width: 100%;
    }
}


/* Blogboard styling */
#blogboard-wrap {
    width: 100%;
    display: flex;
    justify-content: center;
}

#blogboard-nav_wrap {
    width: 100%;
    display: flex;
    justify-content: center;
}

#blogboard-nav_wrap {
    width: 100%;
    display: flex;
    justify-content: center;
}

#blogboard-inner_wrap {
    padding: 0% 5%;
    font-family: "Inter", sans-serif;
    font-style: normal;
    max-width: 1440px;
    width: 100%;
    box-sizing: content-box;
}

#blogboard-title {
    font-size: 72px;
    font-weight: 500;
    margin: 70px 0px 50px 0px;
    padding: 0px;
    color: var(--text-black-white)
}

#blogboard-line {
    height: 2px;
    width: 100%;
    background-color: rgba(128, 128, 128, 0.205);
}

.blogboard-subtitle {
    color: var(--text-black-white);
    font-size: 48px;
    margin-top: 24px;
    font-weight: 500;
}

#blogboard-grid {
    margin: 30px 0px 48px 0px;
    display: grid;
    grid-template-columns: fit-content(700px) fit-content(500px) fit-content(500px);
    grid-template-rows: fit-content(1000px) fit-content(1000px);
    row-gap: 48px;
    width: 100%;
    justify-content: space-between;
}


.blogboard-card {
    cursor: pointer;
    width: fit-content;
    height: fit-content;
    border-radius: 20px;
}


.blogboard-card_title {
    color: var(--text-black-white);
    font-weight: bold;
    margin-top: 16px;
    font-size: 24px;
    width: 448px;
}

.blogboard-card_date {
    color: var(--text-dimmed);
    margin-top: 8px;
    font-size: 19px;
    width: fit-content;
}

.blogboard-card_img {
    border-radius: 20px;
    position: relative;
    z-index: 0;
    height: 100%;
}

.blogboard-card_img_wrap {
    border-radius: 20px;
    width: fit-content;
    height: fit-content;
    position: relative;

}

.blogboard-card_fill {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
    border-radius: 20px;
    background: linear-gradient(0deg, #1137F5 0%, #1137F5 100%), #FFF;
    mix-blend-mode: lighten;
}

.blogboard-card_img,
.blogboard-card_img_wrap,
.blogboard-card_fill {
    height: 290px;
    width: 448px;
}

/* could potentially scale widths on a percentage, but the sizing is not as precise as adding
a lot of scaling breakpoints
*/

/* .blogboard-card_img,
.blogboard-card_img_wrap,
.blogboard-card_fill,
.blogboard-card_title,
.blogboard-card_date {
    width: 100%;
} */

@media(max-width: 1600px) {

    .blogboard-card_img,
    .blogboard-card_img_wrap,
    .blogboard-card_fill,
    .blogboard-card_title,
    .blogboard-card_date {
        width: 370px;
    }

    .blogboard-card_img,
    .blogboard-card_img_wrap,
    .blogboard-card_fill {
        height: 230px;
    }

}



@media(max-width: 1350px) {

    .blogboard-card_img,
    .blogboard-card_img_wrap,
    .blogboard-card_fill,
    .blogboard-card_title,
    .blogboard-card_date {
        width: 520px;
    }

    .blogboard-card_img,
    .blogboard-card_img_wrap,
    .blogboard-card_fill {
        height: 330px;
    }

    #blogboard-grid {
        grid-template-columns: fit-content(500px) fit-content(500px);
        grid-template-rows: fit-content(1000px) fit-content(1000px) fit-content(1000px);

    }

    .blogboard-card_title,
    .blogboard-card_date {
        font-size: 22px;
    }

    #blogboard-subtitle {
        font-size: 44px;
    }

    #blogboard-title {
        font-size: 69px;
    }
}

@media(max-width: 1250px) {

    .blogboard-card_img,
    .blogboard-card_img_wrap,
    .blogboard-card_fill,
    .blogboard-card_title,
    .blogboard-card_date {
        width: 480px;
    }

    .blogboard-card_img,
    .blogboard-card_img_wrap,
    .blogboard-card_fill {
        height: 300px;
    }
}


@media(max-width: 1150px) {

    .blogboard-card_img,
    .blogboard-card_img_wrap,
    .blogboard-card_fill,
    .blogboard-card_title,
    .blogboard-card_date {
        width: 420px;
    }

    .blogboard-card_img,
    .blogboard-card_img_wrap,
    .blogboard-card_fill {
        height: 290px;
    }

}

@media(max-width: 1000px) {

    .blogboard-card_img,
    .blogboard-card_img_wrap,
    .blogboard-card_fill,
    .blogboard-card_title,
    .blogboard-card_date {
        width: 360px;
    }

    .blogboard-card_img,
    .blogboard-card_img_wrap,
    .blogboard-card_fill {
        height: 220px;
    }

    .blogboard-card_title,
    .blogboard-card_date {
        font-size: 23px;
    }

    #blogboard-subtitle {
        font-size: 43px;
    }

    #blogboard-title {
        font-size: 68px;
    }

}

@media(max-width: 900px) {

    .blogboard-card_img,
    .blogboard-card_img_wrap,
    .blogboard-card_fill,
    .blogboard-card_title,
    .blogboard-card_date {
        width: 300px;
    }

    .blogboard-card_img,
    .blogboard-card_img_wrap,
    .blogboard-card_fill {
        height: 190px;
    }

}


@media(max-width: 750px) {

    .blogboard-card_img,
    .blogboard-card_img_wrap,
    .blogboard-card_fill,
    .blogboard-card_title,
    .blogboard-card_date {
        width: 270px;
    }


    .blogboard-card_img,
    .blogboard-card_img_wrap,
    .blogboard-card_fill {
        height: 165px;
    }

    .blogboard-card_title,
    .blogboard-card_date {
        font-size: 19px;
    }

    #blogboard-subtitle {
        font-size: 35px;
    }

    #blogboard-title {
        font-size: 58px;
    }

    #blogboard-grid {
        row-gap: 32px;
    }


    #blogboard-grid {
        margin-bottom: 100px;
    }

}

@media(max-width: 650px) {

    .blogboard-card_img,
    .blogboard-card_img_wrap,
    .blogboard-card_fill,
    .blogboard-card_title,
    .blogboard-card_date {
        width: 230px;
    }

    .blogboard-card_img,
    .blogboard-card_img_wrap,
    .blogboard-card_fill {
        height: 155px;
    }


    .blogboard-card_title,
    .blogboard-card_date {
        font-size: 18px;
    }

    #blogboard-subtitle {
        font-size: 32px;
    }

    #blogboard-title {
        font-size: 53px;
    }

    #blogboard-grid {
        row-gap: 32px;
    }


}

@media(max-width: 575px) {

    .blogboard-card_img,
    .blogboard-card_img_wrap,
    .blogboard-card_fill,
    .blogboard-card_title,
    .blogboard-card_date {
        width: 200px;
    }

    .blogboard-card_img,
    .blogboard-card_img_wrap,
    .blogboard-card_fill {
        height: 140px;
    }

    .blogboard-card_title,
    .blogboard-card_date {
        font-size: 18px;
    }

    #blogboard-title {
        font-size: 48px;
    }

    #blogboard-grid {
        row-gap: 20px;
    }
}

@media(max-width: 470px) {

    .blogboard-card_img,
    .blogboard-card_img_wrap,
    .blogboard-card_fill,
    .blogboard-card_title,
    .blogboard-card_date {
        width: 160px;
    }


    #blogboard-grid {
        row-gap: 20px;
    }
}

@media(max-width: 400px) {

    .blogboard-card_img,
    .blogboard-card_img_wrap,
    .blogboard-card_fill,
    .blogboard-card_title,
    .blogboard-card_date {
        width: 150px;
    }


    #blogboard-grid {
        row-gap: 20px;
    }
}

.inner-wrap {
    width: 100%;
    display: block;
    padding: var(--content-padding);
}

/* Pool Dashboard Styling */
.pool-dashboard_wrapper {
    width: 100%;
    margin: 0 auto;
    display: block;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}

.pool-dashboard_wrapper>.title {
    width: 50%;
    height: 119px;
    padding-top: 16px;
    padding-bottom: 16px;
    justify-content: flex-start;
    align-items: flex-start;
    display: inline-flex;
}

.flex-column {
    flex-direction: column;
}

.graph-title {
    color: var(--text-black-white);
    font-size: 24px;
    font-family: "Inter", sans-serif;
    font-weight: 600;
    word-wrap: break-word;
    line-height: 29px;
}

/* Tabs Styling */

.tabs_wrapper {
    /* # height: 35px; */
    border-bottom: 1px rgba(0, 0, 0, 0.16) solid;
    justify-content: flex-start;
    align-items: flex-start;
}

.tabs_wrapper-center {
    height: 35px;
    border-bottom: 1px rgba(0, 0, 0, 0.16) solid;
    justify-content: center;
    align-items: flex-start;
}

.normal-tab {
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 8px;
    padding-bottom: 8px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    display: flex;
}

.tab_wrapper {
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 8px;
    padding-bottom: 8px;
    justify-content: center;

    align-items: center;
    gap: 8px;
    display: flex;
}


.tabs_wrapper>.highlighted , .tabs_wrapper-center>.highlighted{
    border-bottom: 1px #1137F5 solid;
}

.tab-text {
    text-align: center;
    color:var(--text-dimmed);
    font-size: 16px;
    font-family: "Inter", sans-serif;
    font-weight: 500;
    text-transform: capitalize;
    word-wrap: break-word;
    cursor: pointer;
    text-decoration: none;
}

.tab-text:hover {
    color: var(--ocean-blue-dim)
}

.tab_wrapper>.highlighted {
    color: var(--ocean-blue);
}

/* Block template picker styling */
.blocktemplate-buttons {
    padding-top: 24px;
    padding-bottom: 24px;
}

.blocktemplate-button {
    margin-right: 16px;
    border-style: solid;
    border-width: 1px;
    border-color: #aaaaaa;
    border-radius: 40px;
    height: 48px;
    padding-left: 32px;
    padding-right: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

#BlockTemplateWidget {
    width: 600px;
    height: 600px;
}

#BlockTemplateTooltip {
    position: absolute;
    display: none;
    background-color: var(--background-color);
    color: var(--text-black-white);
    padding: 10px;
    border-radius: 8px;
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
    border: 1px solid #ddd;
    font-family: Arial, sans-serif;
    font-size: 14px;
    z-index: 1000;
    text-align: left;
    min-width: 100px;
    max-width: 1000px;
}

@media screen and (max-width: 850px) {
    .blocktemplate-button {
        margin-bottom: 8px;
    }
}

.blocktemplate-button.highlighted {
    border-color: var(--background-black-blue);
    background: #000000;
}

.blocktemplate-button-text {
    color: var(--text-dimmed-whiter);
    text-decoration: none;
}

.blocktemplate-button-text.highlighted {
    color: #ffffff;
}

/* Stats Styling */

.stats-header_wrapper {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    flex-direction: row;
}

.horizontal-divider {
    /* height: 100%; */
    width: 1px;
    margin: 0px 20px;
    background-color: #D9D9D9;
}

.label_wrapper {
    width: 50%;
}

.page-title {
    /* width: 100%; */
    height: 90px;
    /* padding-left: 48px;
    padding-right: 48px; */
    padding-top: 16px;
    padding-bottom: 16px;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 8px;
    display: inline-flex;

}

.page-title>.text {
    flex: 1 1 0;
    color: var(--text-black-white);
    font-size: 48px;
    font-family: "Inter", sans-serif;
    font-weight: 400;
    text-transform: capitalize;
    word-wrap: break-word;
}

.page-title>.text-notitle {
    flex: 1 1 0;
    color: black;
    font-size: 48px;
    font-family: "Inter", sans-serif;
    font-weight: 400;
    word-wrap: break-word;
}

.leaderboard {
    width: 100%;
    height: 90px;
    padding-left: 15%;
    padding-right: 48px;
    padding-top: 16px;
    padding-bottom: 16px;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 8px;
    display: inline-flex;
}

.leaderboard>.text {
    flex: 1 1 0;
    color: black;
    font-size: 48px;
    font-family: "Inter", sans-serif;
    font-weight: 400;
    text-transform: capitalize;
    word-wrap: break-word;
}

/* Data Table Styling */

.table-title-search-container {
    margin-top: 16px;
    width: 100%;
    height: fit-content;
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;
}

.table-title-container {
    display: flex;
    flex-direction: column;
    align-items: space-between;
    justify-content: space-between;
    width: 50%;
}
.table-title-container.table-title-fullwidth {
    width: 100%;
}

.table-title-flex-override{
    flex-direction: row;
}

.table-title-tooltip-container {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: start;
}

.table-title-text {
    color: var(--text-black-white);
    font-size: 24px;
    font-family: "Inter", sans-serif;
    font-weight: 600;
    line-height: 30px;
    word-wrap: break-word;
}

.table-subtitle-text {
    color: var(--text-black-white);
    font-size: 14px;
    font-family: "Inter", sans-serif;
    font-weight: 500;
    line-height: 20px;
    margin-bottom: 6px;
}

/* Table Content */

table {
    width: 100%;
    border-top-right-radius: 8px;
    border-top-left-radius: 8px;
    width: 100%;
    overflow: visible;
    border: var(--border-dark-light);
    font-family: "Inter", sans-serif;
    color: var(--text-black-white);
    position: relative;
    z-index: 1;
}

tbody {
     position: relative;
    z-index: 1;
}

thead {
     position: relative;
    z-index: 1;
}

.node-policy {
    color: var(--text-black-white)
}

.node-policy-link {
    color: var(--ocean-blue)
}


/* .table-row:nth-child(even){background-color: #fcfcfc} */

.table_wrapper {
    max-width: var(--fixed-width);
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-x: scroll;
    /* padding: 0px 15%; */
    margin-bottom: 50px;
}

/* Table Header Styling */

.table-header-container {
    /* width: 100%; */
    height: 40px;
    /* padding-left: 20px;
    padding-right: 20px; */
    background: linear-gradient(180deg, white 0%, #F5F5F5 100%);
    border-top-left-radius: 100px;
    border-top-right-radius: 100px;
    border-left: 1px rgba(0, 0, 0, 0.16) solid;
    border-top: 1px rgba(0, 0, 0, 0.16) solid;
    border-right: 1px rgba(0, 0, 0, 0.16) solid;
    /* justify-content: flex-start;
    align-items: center;
    gap: 20px;
    display: inline-flex; */
}


.title_wrapper {
    flex: 1 1 0;
    align-self: stretch;
    justify-content: flex-start;
    align-items: center;
    margin-top: 10px;
    gap: 10px;
    display: flex;
}

/* .table-header {
  justify-content: center;
  align-items: center;
  margin-top: 10px;
  gap: 10px;
  display: flex;
  flex: 1 1 0;
  color: black;
  font-size: 13px;
  font-family: "Inter", sans-serif;
  font-weight: 500;
  line-height: 19px;
  word-wrap: break-word;
} */

/* END Header Styling */

/* Announcement banner styling */

#announcement-banner {
  background-color: var(--home-cta-banner-bg);
  border: var(--home-cta-border);
  color: var(--home-text);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 600;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  width: 100%;
}

#announcement-banner a.trailing {
  display: flex;
  align-items: center;
  padding-left: 1.25rem;
  border-left: var(--home-light-border);
  color: var(--home-text);
  text-decoration: none;
}

#announcement-banner div.inner-container {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
}

#announcement-banner {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

#announcement-banner .content {
  vertical-align: middle;
  margin-right: auto;
}

@media (min-width: 961px) {
  #announcement-banner a {
    gap: 0.5rem;
  }
}

#announcement-banner a.link-arrow::after, #announcement-banner span .arrow::after {
  display: inline-block;
  content: var(--home-link-arrow);
  margin-left: 0.25rem;
  vertical-align: middle;
  line-height: 1rem;
}

#announcement-banner a.link-arrow.light::after, #announcement-banner span .arrow::after {
  content: url(/National_Library/oe_/https://ocean.xyz:443/static/assets/home/arrow_right_light.svg);
}

#announcement-banner .link-arrow.dark::after, #announcement-banner .arrow.dark::after {
  filter: brightness(0) saturate(100%);
}

/* Table Body Styling */
.lb-entry_wrapper {
    width: 100%;
    height: 60px;
    /* padding-left: 20px;
    padding-right: 20px; */
    /* background-color: #4F4F4F; */
    border-left: 1px rgba(0, 0, 0, 0.16) solid;
    border-top: 1px rgba(0, 0, 0, 0.16) solid;
    border-right: 1px rgba(0, 0, 0, 0.16) solid;
    justify-content: space-around;
    align-items: center;
    gap: 20px;
    display: inline-flex;
    flex: 1 1 0;
}

.table-row {
    height: 60px;
    z-index: 1;
    position: relative;
}

.table-cell {
    padding:10px;
    text-align: center;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow-x: hidden;
    overflow-y: visible important!;
    word-break: break-word;
    max-width: 200px;
    color: var(--text-black-white);
    z-index: 1;
}

div.inner-table-cell {
    text-align: left;
    text-overflow: ellipsis;
    overflow-x: hidden;
    display: flex;
    align-items: center;
}

.worker-link {
    color: var(--text-black-white);
}

td > a {
    color: var(--text-black-white);
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow-x: hidden;
}

.header-cell {
    font-family: "Inter", sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: 19px;
    color: var(--text-black-white);
    background: var(--background-gradient-gradient)
}

.table-empty-wrapper {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
}


.table-empty-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 100%;
  width: 100%;
  background: var(--background-gradient-gradient);
  border-radius: 8px; border: 1px rgba(0, 0, 0, 0.16) solid;

}

.table-empty-icon-container {
  width: fit-content;
  height: fit-content;
  padding: 20px;
}

.bubble-icon {
  opacity: 0.5;
  background: rgb(17,55,245);
  background: linear-gradient(45deg, rgba(17,55,245,1) 0%, rgba(20,137,238,1) 48%, rgba(23,217,213,1) 100%);
  /* background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%); */
}

.bubble-upper {
  width: 20px;
  height: 20px;
  border-radius: 100%;
  position: relative;
  top: 0%;
  left: 75%;

}
.bubble-lower {
  width: 55px;
  height: 55px;
  border-radius: 100%;
  position: relative;
  top: 0%;
  left: 0%;
}

.table-empty-text {
  color: var(--text-dimmed);
  font-size: 14px;
  font-family: "Inter";
  font-weight: 500;
  line-height: 19px;
  word-wrap: break-word;
  margin-bottom: 16px;
}

.empty-icon-top {
  height: 50px;
  width: 50px;
  border-radius: 100%;
  position: relative;
  top: 50%;
  left: 50%;
  background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%);
}

.lb-entry {
    display: flex;
    flex: 1 1 0;
    height: 60px;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 10px;
}

#narrow {
    text-overflow: clip;
    max-width: 15px;
}

.entry>.text {
    flex: 1 1 0;
    align-self: stretch;
    color: black;
    font-size: 14px;
    font-family: "Inter", sans-serif;
    font-weight: 500;
    line-height: 19px;
    word-wrap: break-word;
}

.table-body_wrapper {
    width: 100%;
}

/* END Body Styling */


.table-footer-container {
    /* width: 100%; */
    position: sticky;
    height: 40px;
    /* padding: 10px 20px; */
    background: var(--background-gradient-gradient);
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    border: var(--border-dark-light);
    /* justify-content: space-between;
    align-items: center;
    gap: 20px; */
    /* display: flex; */
}

.table-previous-button {
    width: 15px;
    cursor: pointer;
    transform: rotate(180deg);
    filter: var(--svg-invert-0-100)
}

.table-next-button {
    width: 15px;
    cursor: pointer;
    filter: var(--svg-invert-0-100)
}

.pagination-text {
    color: var(--text-black-white);
    text-decoration: none;
    cursor: pointer;
    font-size: 20px;
    /* padding: 5px 10px; */
}

.footer-page-content {
    font-family: "Inter", sans-serif;
    font-size: 16px;
    /* display: none; */
}

.footer-container {
    padding: 10px;
    width: 100%;
    font-size: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 40px;
    /* padding: 10px 20px; */
    background: var(--background-gradient-gradient);
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    border: var(--border-dark-light);
    color: var(--text-black-white);
}

.table-footer-results {
    font-family: "Inter", sans-serif;
    font-size: 16px;
    color: var(--text-black-white);
    justify-self: flex-end;
}

.page-selected {
    border-bottom: 1px var(--ocean-blue) solid;
}

/* Stats Panel Styling */

.stats-panel_wrapper {
    width: 100%;
    height: 64px;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    margin-bottom: 0px;
}

/* Other Styling */

/* Stats Panel Styling */

.stats-panel_wrapper {
    width: 100%;
    height: 64px;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    margin-bottom: 0px;
}

/* Other Styling */

.search_wrapper {
    display: flex;
    flex-direction: column;
    /* padding: 24px 48px; */
    align-items: flex-start;
    gap: 8px;
    flex: 1 0 0;
    align-self: stretch;
}

.worker-count {
    font-family: "Inter", sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    min-width: 400px;
    width: 50%;
}

@media(max-width: 490px) {
    .worker-count {
        min-width: 300px;
    }
}

@media(max-width: 1000px) {
    .worker-count {
        width: 100%;
    }
}

.input_wrapper {
    width: 100%;
    max-width: 650px;
    justify-content: space-between;
    flex-direction: row;

    /* background-color: red; */
    display: flex;
    padding: 8px 8px 8px 16px;
    align-items: center;
    gap: 12px;
    border-radius: 999px;
    background-color: var(--background-transp-transp);
    /* border: 1px solid rgba(0, 0, 0, 0.16); */
}

.input-worker_wrapper {
    width: fit-content;
    justify-content: space-between;
    margin-top: 16px;
    /* background-color: red; */
    display: flex;
    padding: 8px 16px 8px 16px;
    align-items: center;
    gap: 12px;
    border-radius: 999px;
    background-color: var(--background-transp-transp);
    color: var(--text-black-white);
}

.address-input {
    background: none;
    border: none;
    width: 100%;
    color: var(--text-black-white);
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
    margin-right: 16px;
}

.address-input:focus {
    outline: none;
}

.search-button {
    height: 36px;
    width: 36px;
    flex-shrink: 0;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: transparent;
    border: none;
    cursor: pointer;
    filter: var(--svg-invert-0-100)
}

.background-empty-bookmark {
    background-image: url("/National_Library/oe_/https://ocean.xyz:443/static/assets/bookmark-empty.svg");
}

.background-filled-bookmark {
    background-image: url("/National_Library/oe_/https://ocean.xyz:443/static/assets/bookmark-filled.svg");
}

.example {
    color:var(--text-dimmed);
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 19px;
}

.actions-container {
    justify-content: flex-start;
    align-items: center;
    gap: 32px;
    display: inline-flex;
}

.actions_wrapper {
    padding-left: 8px;
    padding-right: 8px;
    border-radius: 51px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    display: flex;
}

.actions_wrapper>.text {
    color: #555555;
    font-size: 14px;
    font-family: "Inter", sans-serif;
    font-weight: 500;
    line-height: 19px;
    word-wrap: break-word;
}

.hide-overflow {
    overflow-x: hidden;
    overflow-y: visible;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hide-overflow-bolt12 {
    overflow-x: clip;
    overflow-y: visible;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 240px;
}

.worker-search_wrapper {
    height: 100%;
    display: inline-flex;
    width: 100%;
    max-width: 720px;
    margin: 8px 0px;
    justify-content: flex-end;
}

.stats-worker-search_wrapper {
    height: 50%;
    display: inline-flex;
    width: 100%;
    justify-content: flex-end;

}

.calculator-input-wrapper {
    min-width: 200px;
    width: 100%;
}

.worker-search-container {
    display: flex;
    align-items: center;
    min-width: 200px;
    width: 100%;

    border-radius: 48px;
    border: var(--border-dark-light);
    background: rgba(0, 0, 0, 0.04);

    /* elevation 1 */
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.12);
}

.search-prepended-icon {
    margin: auto 16px;
    filter: var(--svg-invert-100-0);
    padding: 0px;
    width: 32px;
    height: 32px;
}

.worker-search-input {
    width: 100%;
    height: 100%;
    color: #555;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 19px;
    /* 105.556% */
    background: none;
    border: none;
}

.worker-search-button {
    cursor: pointer;
    display: flex;
    padding: 16px;
    justify-content: center;
    align-items: center;
    background-size: cover;
    border-radius: 100%;
    background: radial-gradient(107.84% 322.29% at 21.3% 183.33%, #1137F5 27.23%, #1489EE 66.15%, #17D9D5 94.29%);
    margin: 8px;
    /* elevation 1 */
    border: none;
    /* box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.12); */
}

.worker-search-button>img {
    width: 100%;
    height: 100%;
    filter: invert(100);
}

.leaderboard_wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0px 15%;
    margin-bottom: 50px;
}



.lb-header_wrapper {
    width: 100%;
    height: 40px;
    padding-left: 20px;
    padding-right: 20px;
    background: linear-gradient(180deg, white 0%, #F5F5F5 100%);
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    border-left: 1px rgba(0, 0, 0, 0.16) solid;
    border-top: 1px rgba(0, 0, 0, 0.16) solid;
    border-right: 1px rgba(0, 0, 0, 0.16) solid;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
    display: inline-flex;
}

.lb-header {
    flex: 1 1 0;
    height: 40px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    display: flex;
}



/* Stats Dashboard */

.icon {
    width: 32px;
    height: 32px;
    text-align: center;
    color: #1137F5;
    font-size: 24px;
    font-family: Material Icons;
    font-weight: 400;
    word-wrap: break-word;
}

.background-edit {
    background-image: url("/National_Library/oe_/https://ocean.xyz:443/static/assets/edit_pencil.svg")
}

.background-add {
    background-image: url("/National_Library/oe_/https://ocean.xyz:443/static/assets/plus_circle_outline.svg")
}

.background-search {
    color: black;

    background-image: url("/National_Library/oe_/https://ocean.xyz:443/static/assets/background_search.svg")
}

/* .tab-text {
  text-align: center;
  color: #555555;
  font-size: 16px;
  font-family: Inter;
  font-weight: 500;
  text-transform: capitalize;
  word-wrap: break-word;
} */

/* Misc Styling Elements */

#round-button {
    padding: 24px 32px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 35px;
    background-color: #202020;
    cursor: pointer;

    color: #FFF;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0.48px;
    margin-top: 48px;
    border: none;
}

/* Outline Button */

#outline-button {
    width: 450px;
    height: 100px;
    border: 1px solid #202020;
    border-radius: 16px;
    display: flex;
    align-items: baseline;
    padding: 24px 32px;
    margin-top: 32px;
    cursor: pointer;
    color: #000;
    background-color: white;
    flex-direction: column;
}

#outline-button:hover {
    box-shadow: 0px 8px 8px rgba(0, 0, 0, 0.25);
}

#outline-button:hover img {
    animation: slide-right 1s alternate forwards;
}

#outline-button img {
    align-self: baseline;
    margin-left: 50px;
}

#outline-button-title {
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: baseline;
    align-items: baseline;
    flex-wrap: nowrap;
}

#outline-button-title p {
    color: #000;
    font-family: "Inter", sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-align: left;
    width: 70%;
}

#outline-button-subtitle {
    margin-top: 7px;
}

#outline-button-subtitle p {
    color: #000;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    opacity: 0.56;
}

.line-divider {
    width: 100%;
    height: 1px;
    background-color: #D9D9D9;
}

/* Dashboard Styling */

.dashboard-row_header,
.dashboard-table_row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
    padding-left: 10px;
    padding-right: 10px;
}

.dashboard-table_row {
    border-top: 1px solid black;
}

.dashboard-table-data,
.dashboard-table-head {
    display: flex;
    justify-content: end;
}

.dashboard-table-head_start,
.dashboard-table-head_mid,
.dashboard-table-head {
    font-weight: bolder;
}

.dashboard-table-data_mid,
.dashboard-table-head_mid {
    margin-right: 10px;
}

.dashboard-table-data_mid2,
.dashboard-table-head_mid2 {
    margin-right: 30px;
}

.dashboard-table_row_double {
    border-bottom: 1px solid black;
}

.dashboard-widget {
    font-family: 'Inter';
    font-style: normal;
    font-size: 11.5px;
    border: 1px solid black;
    border-bottom: 2px solid black;
    padding: 20px;
    margin-bottom: 40px;
}

.dashboard-widget_info {
    font-size: 35px;
    margin-top: 13px;
    margin-bottom: 15px;
}

.range-button, #block-toggle-button, .csv-download-button, .toggle-button {
    margin: 16px 16px 0px 0px;
    border: var(--border-dark-light);
    border-radius: 40px;
    height: 28px;
    padding: 0px 16px;
    text-decoration: none;
    cursor: pointer;
    font-family: "Inter", sans-serif;
    background-color: var(--background-color);
    color: var(--text-black-white)
}
.range-button:hover, #block-toggle-button:hover, .csv-download-button:hover, .toggle-button:hover {
    background-color: var(--background-color-dim-dark);
}

.csv-download-button {
    margin: 0px;
}

.graph-range-button-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.hidden{
    display: none;
}

.bolded-button{
    font-weight: bold;
    background-color: var(--background-color-dim-dark);
}

.dashboard-graph_title {
    font-family: 'Inter';
    font-style: normal;
    font-size: 16px;
    font-weight: bold;
    margin: 30px 0px;
    padding-left: 30px;
    text-align: left;
    color: var(--text-black-white);
}

.dygraph-title {
    font-family: 'Inter';
    font-style: normal;
    font-size: 16px;
    font-weight: bold;
    margin: 30px 0px;
    padding-left: 30px;
    text-align: left;
    color: var(--text-black-white);
}

.graph-hashrate,
.graph-payouts,
.graph-blocks-found,
.graph-participants {
    font-family: 'Inter';
    font-style: normal;
    font-size: 16px;
    font-weight: bold;
    margin: 30px 0px;
    text-align: left;
    width: 1000px;
}

#graph-container {
    /* margin: 0 auto; */
    border-radius: 8px;
    border: var(--border-dark-light);
    background: var(--background-gradient-gradient);
    /* gap: 30px 30px; */
    justify-content: flex-start;
    align-items: center;
    display: flex;
    flex-direction: row;
    margin-top: 16px;
    width: auto;
    height: 270px;
}

#graph-hashrate {
    width: 95%;
    margin: 0 auto;
    height: 90%;
    color: var(--text-black-white);
}

@media (max-width: 1300px) {
    #graphs_wrapper {
        flex-direction: column;
        justify-content: center;
        margin-top: 32px;
    }
}

/* Pool Dashboard Stats */

.pool-stats {
    display: flex;
    flex-direction: row;
    margin-top: 0px;
    justify-content: space-between;
    align-items: flex-start;
    gap: 30px;
}

@media (max-width: 900px) {
  .pool-stats {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 30px;
  }

  .dashboard-container {
    width: 100%;
    max-width: 100%;

  }
}

.stats_wrapper {
    width: 100%;
    gap: 30px 30px;
    margin: 0 auto;
    justify-content: space-around;
    align-items: center;
    display: flex;
    flex-direction: row;
}

.faded {
  opacity: 0.5;
}

.dashboard-container {
    flex: 1;
    /* height: 20px; */
    max-height: 120px;
    max-width: 450px;
    padding: 20px;
    padding-right: 40px;
    background: var(--background-gradient-gradient);
    border-radius: 8px;
    overflow: hidden;
    border: var(--border-dark-light);
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    display: inline-flex;
    color: var(--text-black-white);
}

.dashboard-container>p {
    color: var(--text-black-white);
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 20px;
    word-wrap: break-word;
}

.dashboard-container>span {
    color: var(--text-black-white);
    text-decoration: none;
    font-size: 32px;
    font-weight: 400;
    word-wrap: break-word;
}

@media (min-width: 900px) and  (max-width: 1100px) {
    .dashboard-container>p {
        font-size: 12px;
    }
    .dashboard-container>span {
        font-size: 24px;
    }
}

/* #graph-hashrate {
    width: auto;
    height: 270px;
    margin-bottom: 40px;
} */

#dashboard-hashrate_graph,
#dashboard-miner_balance_graph {
    width: 960px;
    border: 1px solid black;
    height: 270px;
    margin-bottom: 40px;
}

/* 404 page styling */

.notfound_gradient_container {
  pointer-events: none;
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100vh;
}

#notfound-nav_wrap {
    width: 100%;
    display: flex;
    justify-content: center;
}

#notfound-outer_wrap {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

#notfound-inner_wrap {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    margin-bottom: 100px;
}

#notfound-go_button {
    border-radius: 2rem;
    background: radial-gradient(107.84% 322.29% at 21.3% 183.33%, rgba(17, 55, 245, 0.30) 27.23%, rgba(20, 137, 238, 0.30) 66.15%, rgba(23, 217, 213, 0.30) 94.29%), #FFF;
    display: inline-flex;
    padding: 1rem 1.75rem;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.12);
    border: none;
    color: var(--black, #000);
    text-align: center;
    font-size: 1rem;
    font-style: normal;
    font-weight: 550;
    line-height: normal;
    letter-spacing: 0.08rem;
    text-transform: uppercase;
    margin-top: 2.38rem;
    cursor: pointer;
}

/* Dropdown Component */

.js-content {
  display: none;
}

/* Dropdown Button */

.dropdown-button {
  cursor: pointer;
}

/* Dropdown Toggle */

.dropdown-toggle {
  display: none;
  background: url('/National_Library/oe_/https://ocean.xyz:443/static/assets/down_arrow_blue.svg');
}

.dropdown-toggle-ns:checked ~ .dropdown-message-hide {
  display: block;
}

.dropdown-toggle-ns:checked ~ .dropdown-arrow {
  transform: rotate(180deg);

}

/* Dropdown Title */

.dropdown-title {
  width: fit-content;
  position: relative;
  display: inline-block;
  margin-top: 0px;

  background: none;
  border: none;

  font-family: "Inter", sans-serif;
  font-size: var(--font-xsmall);

  font-style: normal;
  text-align: left;
  transition: all 0.3s ease;
}

.dropdown-title-bold_blog {
  font-weight: 600;
}

.dropdown-title-bold {
  font-weight: var(--font-weight-bold);
}

@media (min-width: 600px) {
  .dropdown-title {
    font-size: var(--font-small);
    text-align: left;
  }

  .dropdown-title-bold {
    font-weight: bold;
  }
}

.dropdown-title:hover {
  opacity: 0.6;
}

/* Dropdown Message */

.dropdown-content-wrapper {
  position: relative;
  z-index: 2;
}

.dropdown-content-wrapper a {
  position: relative;
  z-index: 3;
}

.dropdown-message {
  z-index: 1;
  font-family: "Inter", sans-serif;
  color: var(--text-dimmed-whiter);
  text-align: left;
  padding: 5px;
  position: relative;
  z-index: 10;
  line-height: 1.2;
  animation: opacity 1s;
  margin-top: 8px;
  font-weight: var(--font-weight-medium);
  line-height: normal;
  letter-spacing: -0.02rem;
  transition: all 0.3s ease;
}

.dropdown-message-hide {
  display: none;
}

@media (min-width: 600px) {
  .dropdown-message {
    font-size: var(--font-small);
    font-weight: var(--font-weight-medium);
  }
}

@media (min-width: 1070px) {
  .dropdown-message {
    font-size: var(--font-small);
    text-align: left;
  }
}

.dropdown-arrow {
  background: url('/National_Library/oe_/https://ocean.xyz:443/static/assets/down_arrow_blue.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  width: 15px;
  height: 15px;
  display: inline-block;
  transition: all 0.3s ease;
  margin-left: 10px;
}

.faq-arrow {
  width: 10px;
  height: 10px;
  transition: all 0.3s ease;
  background: url("/National_Library/oe_/https://ocean.xyz:443/static/assets/down_arrow_blue.svg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.dropdown-container {
  display: block;
  margin-top: 36px;
  margin-bottom: 36px;
}

/* .dropdown-container .dropdown-message {
  color: var(--text-dimmed-whiter);
  text-align: left;
  padding: 5px;
  position: relative;
  z-index: 10;
  line-height: 1.2;
  animation: opacity 1s;
  margin-top: 8px;

  font-size: clamp(1.1875rem, 1vw + 0.5rem, 1.5rem);
  font-weight: var(--font-weight-medium);
  line-height: normal;
  letter-spacing: -0.02rem;
} */

.hide-faq-message {
  display: none;
}

.faq-title:focus .faq-message{
  display: block;
  opacity: 1;
}

.rotate-faq-arrow {
  transform: rotate(180deg);
}

.faq-title:focus .faq-arrow {
  transform: rotate(180deg);
}

.message-subline {
  /* font-size: 18px; */
  font-weight: 600;
  margin-bottom: 10px;
}

@keyframes opacity {
  0% {
      opacity: 0;
  }
  100% {
      opacity: 1;
  }
}



/* Tool Tip Styling */

.tooltip {
    cursor: pointer;
}

.tooltip-info {
    position: absolute;
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-left: 10px;
    margin-top: 0px;
    background-image: url("/National_Library/oe_/https://ocean.xyz:443/static/assets/info_icon.svg");
    filter: var(--svg-invert-0-100)
}

.tooltip-worker {
    position: static;
    z-index:1
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 5px;
    padding: 5px;
    position: absolute;
    z-index: 10;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;
    font-size: 12px;
    line-height: 1.2;
    opacity: 0;
    transition: opacity 0.3s;
}

.tooltiptext-worker{
    visibility: hidden;
    width: fit-content;
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 5px;
    padding: 5px;
    position: absolute;
    z-index: 100;
    bottom: 70%;
    left: 47%;
    font-size: 12px;
    line-height: 1.2;
    opacity: 0;
    transition: opacity 0.3s;
}


.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

.tooltip-worker:hover .tooltiptext-worker {
    visibility: visible;
    opacity: 1;
}

@media (max-width: 1500px) {
    .tooltiptext-worker {
      left: 48%;
    }
}





/* Chat/FAB */
iframe#kiwi-app {
    width: 100%;
    flex: 1;
    border: 1px solid black;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.chatbox-icon {
    height: 24px;
    width: 24px;
}

div.fab {
    height: 50px;
    width: 50px;
    border-radius: 50%;
    display: inline-block;
    position: fixed;
    bottom: 10px;
    right: 40px;
    box-shadow: #000;
    background-color: #1137F5;
}

div#chat-fab {
    /* background-image: url("/National_Library/oe_/https://ocean.xyz:443/static/assets/chat.svg"); */
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1000;
}

div#chatbox {
    min-width: 350px;
    max-width: 700px;
    width: 50%;
    min-height: 200px;
    max-height: 600px;
    height: 75%;
    position: fixed;
    display: none;
    bottom: 10px;
    right: 20px;
    flex-direction: column;
    z-index: 1000;
}

div#chatbox-header {
    width: 100%;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    background-color: #1137F5;
    min-height: 50px;
    max-height: 50px;
    flex: 1;

    display: inline-flex;
    flex-direction: row;
}

@media (max-width: 700px) {
    div#chat-fab {
        right: 10px;
    }
}

.chatbox-header-item {
    margin-top: auto;
    margin-bottom: auto;
    margin-left: 15px;
}

.chatbox-header-fill {
    flex-grow: 1;
    align-items: end;
    display: flex;
    flex-direction: row-reverse;
    margin-right: 15px;
}

#chatbox-close {
    cursor: pointer;
}

/* Background gradient/blobs */

.fixed-gradient-container {
    pointer-events: none;
    position: fixed;
    z-index: -10;
    height: 100vh;
}

.gradient-container {
    max-width: none;
    pointer-events: none;
    position: absolute;
    z-index: -10;
    width: 100%;
    height: 100%;
    overflow: overlay;
}

.homepage-gradient {
    height: 900px;
}

.script-only {
    display: none !important;
}
.table-noscript {
    display: table-cell !important;
}

/* Animations */

@keyframes slide-right {
    0% {
        margin-left: 50px;
    }

    60% {
        margin-left: 60px;
    }

    100% {
        margin-left: 50px;
    }
}

@keyframes logo-spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes fade-in {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/* Depreciated */

/* dashboard responsiveness */
 @media (min-width: 1250px) {

  #dashboard-outer_wrap {
      display: flex;
      flex-direction: column;
      justify-content: center;
      margin: 0px;
      align-items: center;
  }

  .dashboard-graph_title {
      font-size: 17px;
  }
}

@media (min-width: 1750px) {

  #dashboard-outer_wrap {
      display: flex;
      flex-direction: column;
      justify-content: center;
      margin: 0px;
      align-items: center;
  }

  #dashboard-table_wrap {
      width: 1500px;
      justify-content: center;
      display: flex;
  }

  #dashboard-average_table,
  #dashboard-balance_table {
      width: 600px;
  }

  #dashboard-widget_grid {
      width: 1230px;
  }

  #dashboard-hashrate_graph,
  #dashboard-miner_balance_graph {
      width: 1230px;
  }

  .dashboard-graph_title {
      font-size: 17px;
  }

}


@media (max-width: 1065px) {
  #dashboard-table_wrap {
      width: 800px;
  }

  #dashboard-average_table {
      width: 480px;
  }

  #dashboard-widget_grid {
      margin-top: 30px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 30px;
      width: 800px;
      margin-bottom: 40px;
  }

  .dashboard-widget {
      margin-bottom: 0px;
  }

  #dashboard-hashrate_graph,
  #dashboard-miner_balance_graph {
      width: 800px;
  }

}

@media (max-width: 885px) {
  #dashboard-table_wrap {
      width: 700px;
  }

  .dashboard-table-data_mid {
      margin-right: 0px;
  }

  .dashboard-table-head_mid2 {
      margin-right: 20px;
  }

  #dashboard-average_table {
      width: 480px;
  }



  #dashboard-widget_grid {
      margin-top: 30px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 30px;
      width: 700px;
      margin-bottom: 40px;
  }

  .dashboard-widget {
      margin-bottom: 0px;
  }

  #dashboard-hashrate_graph,
  #dashboard-miner_balance_graph {
      width: 700px;
  }

}



@media (max-width: 790px) {


  #dashboard-outer_wrap {
      display: flex;
      flex-direction: column;
      justify-content: center;
      margin: 0px;
      align-items: center;
  }

  #dashboard-search_address {
      font-size: 19px;
  }

  #dashboard-table_wrap {
      flex-direction: column;
      align-items: center;
  }

  #dashboard-average_table {
      margin-left: 0px;
      margin-top: 20px;
      width: 480px;
  }

  .dashboard-table-data_mid {
      margin-right: 0px;
  }

  .dashboard-table-head_mid2 {
      margin-right: 20px;
  }


  #dashboard-widget_grid {
      margin-top: 30px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
      width: 480px;
      margin-bottom: 40px;
  }

  .dashboard-widget {
      margin-bottom: 0px;
  }

  #dashboard-hashrate_graph,
  #dashboard-miner_balance_graph {
      width: 500px;
  }

}

@media (max-width: 600px) {

  #dashboard-search_address {
      font-size: 15px;
  }

  #dashboard-search_edit {
      font-size: 11px;
  }

  #dashboard-table_wrap {
      flex-direction: column;
      width: 80%;
  }

  #dashboard-average_table {
      margin-left: 0px;
      margin-top: 20px;
      width: 100%;
  }

  #dashboard-balance_table {
      width: 100%;
  }

  .dashboard-table-data_mid {
      margin-right: 0px;
  }

  .dashboard-table-head_mid2 {
      margin-right: 20px;
  }


  #dashboard-widget_grid {
      margin-top: 30px;
      display: grid;
      grid-template-columns: 1fr;
      gap: 20px;
      width: 80%;
      margin-bottom: 40px;
  }

  .dashboard-widget {
      margin-bottom: 0px;
  }

  #dashboard-hashrate_graph,
  #dashboard-miner_balance_graph {
      width: 80%;
  }

}

@media (max-width: 500px) {

  .dashboard-table-head_end {
      text-align: end;
  }

  .dashboard-table-data_start {
      padding-right: 8px;
  }

  #dashboard-search_form {
      display: flex;
      flex-direction: column;
  }

  #dashboard-search_address {
      font-size: 80%;
      margin-bottom: 10px;
  }

  #dashboard-table_wrap {
      margin-top: 20px;
  }
}

#ms-outer_wrap {
  margin-left: 50px;
  font-family: 'Inter';
  font-style: normal;
}

#ms-title {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  font-size: 46px;
  margin-top: 60px;

  padding: none;
}

#ms-search_form {
  display: flex;
  flex-direction: row;
}

#ms-search_address {
  font-family: 'Inter';
  font-style: normal;
  margin-right: 15px;
  font-size: 21px;
}

#ms-search_edit {
  font-family: 'Inter';
  font-style: normal;
  font-size: 12px;
  font-weight: 500;
  text-decoration: underline;
  border: none;
  background-color: none;
  cursor: pointer;
  background: none;

}

#ms-subtitle_outer_wrap {
  display: flex;
  margin-top: 10px;
}

#ms-subtitle_left_wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#ms-subtitle_right_wrap {
  display: flex;
  flex-direction: column;
  margin-left: 45px;
}

.ms-subtitle {
  font-size: 16px;
}

#ms-worker {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  width: 350px;
  height: 18px;
}


#ms-wsearch_outer_wrap {
  width: 1015px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  margin-top: 20px;
  padding: 15px 15px 0px 15px;


}

#ms-wsearch_bar {
  border: 1px solid rgba(0, 0, 0, 0.1);
  width: 400px;
  height: 40px;
  font-family: 'Inter';
  font-style: normal;
  font-size: 21px;
  font-weight: normal;
  padding-left: 17px;
}

#ms-wsearch_results {
  margin-top: 25px;

}

#ms-wsearch_results_header_wrap {
  width: 949px;
  display: grid;
  grid-template-columns: 1.1fr 1.4fr 1.0fr 1.0fr 1fr;
  margin-bottom: 10px;
  font-size: 17px;
}


.ms-wsearch_results_header_first {
  padding-left: 7px;
}

.ms-wsearch_results_header_last {
  margin-right: 14px;
}

.ms-wsearch_results_header_last,
.ms-wsearch_results_data_last {
  justify-self: end;
}

#js-dashboard_hashrate_graph,
#js-dashboard_miner_balance_graph {
  display: none;
}

#dashboard-hashrate_graph,
#dashboard-miner_balance_graph {
  width: 960px;
  border: 1px solid black;
  height: 270px;
  margin-bottom: 40px;
}

#ms-wsearch_results_data_wrap {
  width: 949px;
  display: grid;
  grid-template-columns: 1.13fr 1.5fr 1.0fr 1.0fr 1fr;
  padding: 7px 30px 7px 7px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  border-left: 1px solid rgba(0, 0, 0, 0.1);
  border-right: 1px solid rgba(0, 0, 0, 0.1);
}

.tooltip {
    cursor: pointer;
}

#ms-stats_header_wrap {
  display: flex;
  width: 1010px;
  justify-content: space-between;
  margin-bottom: 15px;
  align-items: center;
  margin-top: 28px;
}

#ms-stats_title {
  font-size: 16px;
  margin-left: 5px;
}

#ms-stats_search {
  border: 1px solid rgba(0, 0, 0, 0.1);
  width: 470px;
  height: 35px;
  font-family: 'Inter';
  font-style: normal;
  font-size: 16px;
  font-weight: normal;
  padding-left: 15px;
}

#ms-stats_display {
  width: 1010px;
  height: 350px;
  background-color: rgba(128, 128, 128, 0.302);
} */

/* 404 page */

#notfound-404 {
  color: var(--black, #000);
  text-align: center;
  font-size: 4.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  text-transform: capitalize;
  margin-bottom: 30px;
}

#notfound-copy {
  color: var(--black, #000);
  text-align: center;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  text-transform: capitalize;
  position: absolute;
  width: 100%;
  top: 32%;
  z-index: 100;
  padding: 5px;
}

#notfound-copy:hover {
  cursor: pointer;
}

div.fab-button {
    height: 50px;
    border-radius: 25px;
    display: inline-block;
    position: fixed;
    bottom: 10px;
    right: 40px;
    background-color: #1137F5;
    box-shadow: 0px 2px 21px 0px #1489EE80;

    display: inline-flex;
    flex-direction: row;
}

.center-vertical {
    margin-top: auto;
    margin-bottom: auto;
}

.button-margin-left  {
    margin-left: 15px;
}
.button-margin-right {
    margin-right: 15px;
}

div.fab {
    height: 50px;
    width: 50px;
    border-radius: 50%;
    display: inline-block;
    position: fixed;
    bottom: 10px;
    right: 40px;
    background-color: #1137F5;
    box-shadow: 0px 2px 21px 0px #1489EE80;
    display: inline-flex;
}

.wave-hide {
  display: none;
}

#wave1 {
  position: absolute;
  width: 300%;
  height: 300%;
  left: -100%;
  top: 50%;
  background-color: rgba(8, 178, 227, 0.4);
  border-radius: 45%;
  animation: rotate 10s linear infinite;
  z-index: 1;
}

@media (max-width: 500px) {
    div#chatbox {
        width: 100%;
        height: 100%;
        max-height: unset;
        position: fixed;
        display: none;
        bottom: 0px;
        right: 0px;
        flex-direction: column;
    }

    div#chatbox-header {
        border-top-right-radius: 0px;
        border-top-left-radius: 0px;
    }

    iframe#kiwi-app {
        border-bottom-left-radius: 0px;
        border-bottom-right-radius: 0px;
    }
}

.chatbox-header-item {
    margin-top: auto;
    margin-bottom: auto;
    margin-left: 15px;
}

#wave3 {
  position: absolute;
  width: 300%;
  height: 300%;
  left: -100%;
  top: 60%;
  background-color: rgba(17, 55, 245, 0.4);
  border-radius: 40%;
  animation: rotate 5s linear infinite;
  z-index: 1;
}

.chatbox-control {
    cursor: pointer;
}


@keyframes rotate {
  100% {
      transform: rotate(360deg);
  }
}

@keyframes wave {
  0% {
      transform: translateY(2px);
  }

  50% {
      transform: translateY(-1px);
  }

  100% {
      transform: translateY(2px);
  }
}

@media (max-width:1000px) {
  #notfound-outer_wrap {
      height: 800px;
  }

  .notfound_gradient_container {
      height: 900px;
  }

  #notfound-404 {
      margin-bottom: 80px;
  }

}

@media (max-width:500px) {
  #notfound-outer_wrap {
      height: 550px;
  }

  .notfound_gradient_container {
      height: 650px
  }

  #notfound-404 {
      font-size: 4rem;
      margin-bottom: 70px;
  }

  #notfound-copy {
      font-size: 1.0rem;
  }

  #notfound-go_button {
      border-radius: 2rem;
      background: radial-gradient(107.84% 322.29% at 21.3% 183.33%, rgba(17, 55, 245, 0.30) 27.23%, rgba(20, 137, 238, 0.30) 66.15%, rgba(23, 217, 213, 0.30) 94.29%), #FFF;
      display: inline-flex;
      padding: 0.8rem 1rem;
      width: 140px;
      align-items: center;
      gap: 0.5rem;
      box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.12);
      border: none;
      color: var(--black, #000);
      text-align: center;
      font-size: 0.8rem;
      font-style: normal;
      font-weight: 550;
      line-height: normal;
      letter-spacing: 0.08rem;
      text-transform: uppercase;
      margin-top: 2.38rem;
      align-self: center;
      cursor: pointer;
  }
}

.dygraph-legend {
    position: absolute;
    font-size: 14px;
    z-index: 10;
    width: fit-content;
    background: var(--background-color);
    line-height: normal;
    text-align: left;
    overflow: hidden;
    color: var(--text-black-white)
}

.dygraph-legend[dir=rtl] {
    text-align: right
}

.dygraph-legend-line {
    display: inline-block;
    position: relative;
    bottom: .5ex;
    padding-left: 1em;
    height: 1px;
    border-bottom-width: 2px;
    border-bottom-style: solid;
    border-bottom-color: var(--text-black-white);
}

.dygraph-legend-dash {
    display: inline-block;
    position: relative;
    bottom: .5ex;
    height: 1px;
    border-bottom-width: 2px;
    border-bottom-style: solid;
    border-bottom-color: var(--text-black-white);
}

.dygraph-roller {
    position: absolute;
    z-index: 10;
}

.dygraph-annotation {
    position: absolute;
    z-index: 10;
    overflow: hidden;
}

.dygraph-default-annotation {
    border: 1px solid #000;
    background-color: #fff;
    text-align: center
}

.dygraph-axis-label {
    z-index: 10;
    line-height: normal;
    overflow: hidden;
    color: var(--text-black-white)
}

.dygraph-title {
    font-weight: 700;
    z-index: 10;
    text-align: center;
    color: var(--text-black-white)
}

.dygraph-xlabel {
    text-align: center;
    color: var(--text-black-white)
}

.dygraph-label-rotate-left {
    text-align: center;
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg)
}

.dygraph-label-rotate-right {
    text-align: center;
    transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg)
}

.dygraph-rangesel-zoomhandle {
    display: none !important;
}

.dygraph-axis-label.dygraph-axis-label-x {
    stroke: red; /* Change color to red */
    stroke-width: 2px; /* Adjust line thickness */
}

.annotation:hover {
    filter: brightness(80%);
    transition: filter 0.3s ease;
}

.annotation {
    cursor: pointer;
}

/* Lightning form styling */

.config-title-container {
    height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
}

.config-title-container>.title-text {
  color: var(--text-black-white);
  font-size: 60px;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  word-wrap: break-word;
}

.config-error-container, .config-centered-layout{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: fit-content;
}

.config-error-text{
    color: #D12323;
    font-size: 13px;
    padding: 10px 20px;
    background: var(--background-color-pool);
    border: 1px solid rgba(128, 128, 128, 0.541);
    border-radius: 5px;
    margin-bottom: 10px;
    margin-top: 40px;
}

.config-info-text{
    color: var(--ocean-blue);
    font-size: 13px;
    padding: 10px 20px;
    background: var(--background-color-pool);
    border: 1px solid rgba(128, 128, 128, 0.541);
    border-radius: 5px;
}

#form-input-wrapper {
    width: 100%;
    margin-bottom: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#form-input-inner-wrapper {
    max-width: 650px;
    display: flex;
    flex-direction: column;
}

.column-650-wrapper {
    width: 100%;
    margin-bottom: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.column-650 {
    max-width: 650px;
    display: flex;
    flex-direction: column;
}

.small-link {
  color:var(--text-dimmed);
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 19px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  align-self: start;
}

.form-label {
    color: var(--text-black-white);
    font-size: 16px;
    margin-bottom: 8px;
    margin-top: 22px;
}

.form-title {
    color: var(--text-black-white);
    font-weight: 600;
    font-size: 24px;
    margin-top: 30px;
}

.form-input{
    height: 48px;
    width: 320px;
    border: 1px solid gray;
    border-radius: 8px;
    background-color: var(--background_color);
    color: var(--text-black-white);
    padding: 0px 10px;
}
.form-subtext {
    color: var(--text-black-white);
    opacity: 80%;
    font-weight: 400;
    font-size: 12px;
    margin-top: 4px;
}

.max-width-350 {
    max-width: 350px;
}

.form-button {
    width: fit-content;
    height: 51px;
    border-radius: 32px;
    padding: 16px 28px 16px 28px;
    gap: 8px;
    border: none;
    font-family: "Inter", sans-serif;
    font-weight: 300;
    font-size: 16px;
    text-align: center;
    letter-spacing: 1.28px;
    cursor: pointer;
    transition: filter 0.1s ease-in;
}

.form-button:hover {
    filter: brightness(120%);
}

#form-button-align {
    width: 320px;
    display: flex;
    justify-content: space-between;
    margin-top: 30px;
}

.input-grad {
    background: var(--background-color-pool);
    border: none
}

.form-json-config{
    min-height: 72px;
    height: fit-content;
    width: 320px;
    color: var(--text-black-white);
    padding: 15px;
    font-size: 12px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
}

.plain-text-input {
    border: none;
    background-color: transparent;
    outline: none;
    padding: 0;
    margin: 0;
    width: auto;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    cursor: default;
}

.multiline-text-input {
    border: none;
    background-color: transparent;
    outline: none;
    padding: 0;
    margin: 0;
    width: auto;
    height: auto;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    cursor: default;
}

@media (min-width: 700px) {
    .max-width-350 {
        max-width: 600px;
    }
    .form-input {
        min-width: 320px;
        width: 92.5%;
    }
    .form-json-config {
        min-width: 320px;
        width: 92.5%;
    }
}

#config-textarea{
    resize: none;
    height: fit-content;
    max-height: 150px;
    min-height: 50px;
    padding-right: 10px;
}

.border-button{
    width: 75px;
    height: 27px;
    border-radius: 32px;
    background: var(--background-color-pool);
    padding: 0px 10px;
    gap: 8px;
    transition: filter 0.1s ease-in;
    cursor: pointer;
    border: none;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.border-button-padded {
    width: fit-content;
    height: 27px;
    border-radius: 32px;
    background: var(--background-color-pool);
    padding: 0px 10px;
    gap: 8px;
    transition: filter 0.1s ease-in;
    cursor: pointer;
    border: none;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.border-button-gradient {
    width: 77px;
    height: 29px;
    border-radius: 32px;
    background: linear-gradient(135deg, #17D9D5 5%, var(--ocean-blue) 30%, #1489EE 80%, #17D9D5 90%);
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 12px
}

.border-button-gradient-padded {
    width: fit-content;
    padding: 1px;
    height: 29px;
    border-radius: 32px;
    background: linear-gradient(135deg, #17D9D5 5%, var(--ocean-blue) 30%, #1489EE 80%, #17D9D5 90%);
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 12px
}

.border-button-gradient:hover{
    filter: brightness(90%);
}

.border-button-gradient-padded:hover{
    filter: brightness(90%);
}

.border-button-text{
    color: var(--text-black-white);
    margin-right: 0px;
}

.range-wrap {
    width: 320px;
    height: 120px;
    border-radius: 8px;
    color: var(--text-black-white);
    padding: 15px;
    font-size: 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#payout-display {
    color: var(--text-black-white);
    font-size: 15px;
}

.range-info-wrap {
    display: flex;
    justify-content: space-between
}

.copy-icon {
    height: 19px;
    width: 16px;
    background-color: transparent;
    background-image: url("./assets/copyicon.png");
    filter: var(--svg-invert-0-100);
    background-size: contain;
    background-repeat: no-repeat;
}

.reload-block-icon-container {
    margin-left: 8px;
}

.reload-block-icon {
    height: 19px;
    width: 16px;
    background-color: transparent;
    background-image: url("./assets/reload.png");
    filter: var(--svg-invert-0-100);
    background-size: contain;
    background-repeat: no-repeat;
}

.range-input {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    cursor: pointer;
    width: 15rem;
}

.range-input::-webkit-slider-runnable-track {
    height: 1px;
    background: #828282
}

.range-input::-moz-range-track {
    height: 1px;
    background: #828282
}

.range-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    margin-top: -9.5px;
    background: linear-gradient(135deg, #17D9D5 20%, var(--ocean-blue) 55%, #1489EE 80%, #17D9D5 90%);
    height: 20px;
    width: 20px;
    border-radius: 50%
}

.range-input::-moz-range-thumb {
    -webkit-appearance: none;
    appearance: none;
    margin-top: -9.5px;
    background: linear-gradient(135deg, #17D9D5 20%, var(--ocean-blue) 55%, #1489EE 80%, #17D9D5 90%);
    height: 20px;
    width: 20px;
    border-radius: 50%
}

/* Home preflight */

#home .black-white-text {
    color: var(--home-text);
}
#home *,
#home ::before,
#home ::after {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: currentColor
}

#home body {
  margin: 0;
  line-height: inherit;
  background-color: var(--home-background-color);
}

#home h1,
#home h2,
#home h3,
#home h4,
#home h5,
#home h6 {
  font-size: inherit;
  font-weight: inherit;
}

#home a {
  color: inherit;
  text-decoration: inherit;
}

#home b,
#home strong {
  font-weight: bolder;
}

#home button,
#home input,
#home optgroup,
#home select,
#home textarea {
  font-family: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  font-size: 100%;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
  margin: 0;
  padding: 0
}

#home button,
#home select {
  text-transform: none;
}

#home button,
#home input:where([type=button]),
#home input:where([type=reset]),
#home input:where([type=submit]) {
  background-color: rgba(0, 0, 0, 0);
  background-image: none;
}

#home :-moz-focusring {
  outline: auto;
}

#home :-moz-ui-invalid {
  box-shadow: none;
}

#home blockquote,
#home dl,
#home dd,
#home h1,
#home h2,
#home h3,
#home h4,
#home h5,
#home h6,
#home hr,
#home figure,
#home p,
#home pre {
  margin: 0;
}

#home ol,
#home ul,
#home menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

#home button,
#home [role=button] {
  cursor: pointer;
}

#home :disabled {
  cursor: default;
}

/* Home Styles */


#home body {
  font-family: "Inter", sans-serif;
  background-color: var(--home-background-color);
  color: var(--home-text);
}

#home .h-full {
  height: 100%;
}

#home .py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

#home .flex {
  display: flex;
}

#home .flex-col {
  flex-direction: column;
}

#home .justify-between {
  justify-content: space-between;
}

#home .items-center {
  align-items: center;
}

#home .items-start {
  align-items: flex-start;
}

#home .shrink-0 {
  flex-shrink: 0;
}

#home .grid {
  display: grid;
}

#home .gap-tiny {
  gap: 0.375rem;
}

#home .gap-4 {
  gap: 1rem;
}

#home .gap-5 {
  gap: 1.25rem;
}

#home .gap-6 {
  gap: 1.5rem;
}

#home .gap-8 {
  gap: 2rem;
}

#home .gap-10 {
  gap: 2.5rem;
}

#home .gap-12 {
  gap: 3rem;
}

#home .gap-18 {
  gap: 4.5rem;
}

#home .grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#home .grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

#home .grid-cols-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

#home .grid-cols-6 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

#home .col-span-3 {
  grid-column: span 3/span 3;
}

#home .col-span-2 {
  grid-column: span 2/span 2;
}

#home .col-span-6 {
  grid-column: span 6/span 6;
}

#home .inline-block {
  display: inline-block;
}

#home .text-white {
  color: white;
}

#home .overflow-clip {
  overflow: clip;
  border-radius: 0.5rem;
}

#home .rounded-lg {
  border-radius: 0.5rem;
}

#home .relative {
  position: relative;
}

#home .text-center {
  text-align: center;
}

#home .px-\[5rem\] {
  padding-left: 5rem;
  padding-right: 5rem;
}

#home main {
  padding-left: 5rem;
  padding-right: 5rem;
}

#home main>section {
  padding-top: 2rem;
  padding-bottom: 2rem;
  display: flex;
  flex-direction: column;
  gap: 4rem;
}

#home section>header {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#home section>header>h1,
#home section>header>h2 {
  color: var(--home-text-navy-or-white);
  text-wrap: balance;
  text-align: center;
}

#home section>header>h1 {
  font-size: 2.5rem;
  font-weight: 600;
  line-height: 3.9375rem;
  letter-spacing: -0.09375rem;
}

#home section>header>h2 {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.625rem;
}

#home .video-container {
  background-color: var(--home-darkgray);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
}

#home .header-video-container {
  background-color: black;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
}

#home .video {
    object-fit: contain;
    max-width: 100%;
    max-height: 100%;
    border-radius: 0.5rem;
}

#home .play-video {
    position: absolute;
    z-index: 9;
}

#home .header-video {
    object-fit: cover;
    max-width: 100%;
}

#home .datum-logo-small {
    height: 24px;
    width: 90.86px;
    background-image: var(--home-small-datum-logo-url);
}

#home nav {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

#home nav ul a {
  color: white;
  white-space: nowrap;
  font-size: 0.875rem;
  font-weight: 600;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  border-radius: 999px;
  margin-left: -1rem;
  margin-right: -1rem;
}

#home nav ul a:hover {
  background: rgba(255, 255, 255, 0.2);
}

#home #hamburger {
  height: 1.5rem;
  width: 1.5rem;
}

#home #header-grid-content h1 {
  font-size: 5.25rem;
  line-height: 5.5625rem;
  letter-spacing: -0.2rem;
  color: white;
  font-weight: 600;
  text-wrap: balance;
}

#home #header-grid-content h2 {
  font-weight: 300;
  color: white;
  font-size: 1.25rem;
}

#home #mempool-screenshot {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#home .card {
  color: var(--home-text);
  padding: 2rem;
  border-radius: 1.5rem;
  background: var(--home-card-bg);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 15rem;
  gap: 1rem;
  border: var(--home-card-border);
}

#home #testimonials .card p {
  font-size: 1.25rem;
  font-weight: 500;
}

#home .profile .name {
  font-weight: 600;
}

#home .profile .role {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

#home .profile {
  display: flex;
  align-items: start;
  gap: 0.75rem;
}

#home .profile img {
  height: 2.5rem;
  width: 2.5rem;
  border-radius: 9999px;
}

#home .profile div {
  display: flex;
  flex-direction: column;
}

#home #testimonials {
  max-width: 1280px;
  padding-top: 1rem;
  padding-bottom: 1rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
}

#home #theres-more {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}


#home .card.tall {
  color: var(--home-text-navy-or-white);
  background: var(--home-card-tall-bg);
  min-height: 25rem;
}

#home .card.tall.fancy-card-bg {
    /* background: radial-gradient(107.84% 322.29% at 21.3% 183.33%, rgba(17, 55, 245, 0.3) 27.23%, rgba(20, 137, 238, 0.3) 66.15%, rgba(23, 217, 213, 0.3) 94.29%), #fff; */
    background: var(--home-fancy-card-bg);
  }

#home .card.tall h4 {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.625rem;
  text-wrap: balance;
}

#home .card.tall h3 {
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 2.275rem;
  letter-spacing: -0.0625rem;
}

#home .card.tall p {
  line-height: 1.875rem;
  font-size: 1rem;
  font-weight: 400;
}

#home .card.tall a {
  line-height: 1.625rem;
  font-size: 1rem;
  font-weight: 400;
  display: inline-flex;
  align-items: center;
}

#home .card.tall img {
  object-fit: cover;
}

#home a.link-arrow::after, #home span .arrow::after {
  display: inline-block;
  content: var(--home-link-arrow);
  margin-left: 0.25rem;
  vertical-align: middle;
  line-height: 1rem;
}

#home a.link-arrow.light::after, #home span .arrow::after {
  content: url(/National_Library/oe_/https://ocean.xyz:443/static/assets/home/arrow_right_light.svg);
}

#home .link-arrow.dark::after, #home .arrow.dark::after {
  filter: brightness(0) saturate(100%);
}

#home span.card-subhead {
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 2.1875rem;
  display: block;
  margin-left: 0.25rem;
  vertical-align: middle;
}

#home .card.tall img.abstract {
  width: 7.75rem;
  height: 7.75rem;
  flex-shrink: 0;
}

#home img.invertible {
  filter: var(--home-maybe-invert);
}

#home a.white-button-link, #home div.white-button-link {
  text-align: center;
  background-color: white;
  border-radius: 9999px;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  white-space: nowrap;
  color: var(--home-navy);
  display: flex;
  gap: 0.25rem;
  align-items: center;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5rem;
  width: fit-content;
  cursor: pointer;
}

#home .white-button-link span {
  font-size: 1rem;
  font-weight: 600;
  display: inline-block;
}

#home .white-button-link img {
  display: inline-block;
}

#home #header-content {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}

#home #cta-banner {
  background-color: var(--home-cta-banner-bg);
  border: var(--home-cta-border);
  color: var(--home-text);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 600;
  height: 3rem;
}

#home #cta-banner a {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  display: flex;
  align-items: center;
  padding-left: 1.25rem;
  border-left: var(--home-light-border);
  height: 3rem;
}


#home #top {
  padding-bottom: 2.625rem;
  color: var(--home-navy);
  background: var(--home-top-bg-gradient);
}

#home #get-started {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

#home #get-started .card {
  background: var(--home-get-started-bg);
  color: white;
}

#home #get-started h4 {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.625rem;
}

#home #get-started h3 {
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 2.25rem;
  letter-spacing: -0.0625rem;
}

#home #get-started a {
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 2.1875rem;
}

#home #get-started p {
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.25rem;
}

#home #get-started strong {
  font-weight: 700;
}

#home section#team {
  background: var(--home-team-bg);
  color: var(--home-text);
  padding-top: 5rem;
  padding-bottom: 5rem;
  display: flex;
  flex-direction: column;
  gap: 4rem;
}

#home section#faq div.dropdown-title {
  font-size: 1rem;
}

#home section#faq div.dropdown-title-bold {
  font-weight: 700;
}

#home section#faq p {
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.25rem;
}

#home section#faq a.text-ocean-blue {
  color: var(--ocean-blue);
}

#home #team-grid {
  max-width: 1280px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

#home .team-member {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  position: relative;
  min-height: 17.6875rem;
}

#home section#faq {
  padding-top: 5rem;
  padding-bottom: 5rem;
  padding-left: 1rem;
  padding-right: 1rem;
}

#home #faq-container {
  max-width: 1280px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

#home .team-member .hidden-overlay {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  height: 100%;
  background-color: var(--home-background-color);
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.25rem;
  padding: 1rem;
  border-radius: 1rem;
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
  opacity: 0;
  visibility: hidden;
  z-index: 10;
}

#home .team-member .hidden-overlay.visible {
  opacity: 1;
  visibility: visible;
}

#home .team-member img.headshot {
  width: 10rem;
  height: 10rem;
  border-radius: 9999px;
  cursor: pointer;
}

#home .team-member div {
  display: flex;
  flex-direction: column;
}

#home .team-member .name {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5rem;
  text-align: center;
}

#home .team-member .role {
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.375rem;
  color: var(--home-dimmed);
  text-align: center;
}

#home .team-member .socials {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 1rem;
    padding-top: 0.5rem;
    filter: var(--home-maybe-invert);
}

#home .team-member .socials img {
    width: 1rem;
    height: 1rem;
}

@media (max-width: 960px) {
  #home .sm\:w-full {
    width: 100%;
  }

  #home .sm\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #home .sm\:flex {
    display: flex;
  }

  #home .sm\:flex-wrap {
    flex-wrap: wrap;
  }

  #home .sm\:flex-col {
    flex-direction: column;
  }

  #home .sm\:items-center {
    align-items: center;
  }

  #home .sm\:gap-4 {
    gap: 1rem;
  }

  #home .sm\:hidden {
    display: none;
  }

  #home .sm\:text-center {
    text-align: center;
  }
}

@media (max-width: 960px) {
  #home main {
    padding-left: 0;
    padding-right: 0;
  }

  #home section>header>h1 {
    font-size: 1.75rem;
    line-height: 2.5rem;
  }

  #home nav {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  }

  #home .video-container {
    width: 100%;
    aspect-ratio: 16/9;
    min-height: 5rem;
  }

  #home #header-grid-content h1 {
    text-align: center;
    font-size: 2.125rem;
    line-height: 2.5rem;
    letter-spacing: -0.0625rem;
  }

  #home #header-grid-content h2 {
    text-align: center;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.25rem;
  }

  #home #logos {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    align-items: center;
    justify-content: center;
    gap: 2rem;
    opacity: var(--home-logos-opacity);
  }

  #home #logos div {
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scale(0.6);
  }

  #home #logos div:nth-child(1),
  #home #logos div:nth-child(2),
  #home #logos div:nth-child(3) {
    grid-column: span 2;
  }

  #home #logos div:nth-child(4),
  #home #logos div:nth-child(5),
  #home #logos div:nth-child(6) {
    grid-column: span 3;
  }

  #home .card p {
    font-size: 1.25rem;
    line-height: normal;
  }

  #home #testimonials {
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }

  #home #cta-banner {
    margin-top: 1rem;
    margin-bottom: 1rem;
    font-size: 0.75rem;
  }

  #home #top {
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0;
    padding-bottom: 0;
  }

  #home #get-started h4,
  #home #get-started h3,
  #home #get-started p,
  #home #get-started a {
    text-align: center;
    text-wrap: balance;
  }

  #home #get-started a {
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 2.1875rem;
  }

  #home #get-started h3 {
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 2.25rem;
    letter-spacing: -0.0625rem;
  }

  #home #team-grid {
    padding-left: 1rem;
    padding-right: 1rem;
  }



  #home .team-member .hidden-overlay {
    position: fixed;
    left: 1rem;
    right: 1rem;
    top: 50%;
    block-size: fit-content;
    transform: translateY(-50%);
  }

  #home .team-member img {
    width: 8rem;
    height: 8rem;
  }
}

@media (min-width: 961px) {
  #home #cta-banner a {
    gap: 0.5rem;
  }

  #home #testimonials {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }

  #home .md\:hidden {
    display: none;
  }

  #home .md\:gap-10 {
    gap: 2.5rem;
  }

  #home .md\:grid {
    display: grid;
  }

  #home .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #home .md\:px-\[5rem\] {
    padding-left: 5rem;
    padding-right: 5rem;
  }
}

@media (min-width: 1201px) {
  #home main>section {
    padding-top: 5rem;
    padding-bottom: 5rem;
    display: flex;
    flex-direction: column;
    gap: 4rem;
  }

  #home .lg\:gap-8 {
    gap: 2rem;
  }

  #home .lg\:gap-10 {
    gap: 2.5rem;
  }

  #home .lg\:gap-12 {
    gap: 3rem;
  }

  #home .lg\:gap-18 {
    gap: 4.5rem;
  }
}

@media (min-width: 961px) and (max-width: 1200px) {
  #home #top {
    padding-top: 0rem;
    padding-bottom: 0rem;
  }

  #home #header-grid-content h1 {
    font-size: 4rem;
    line-height: 4.375rem;
    /* 109.375% */
    letter-spacing: -0.21875rem;
  }

  #home #header-grid-content h2 {
    font-size: 1rem;
    line-height: 1.625rem;
  }

  #home #logos img {
    transform: scale(0.8);
    margin-left: -1rem;
    margin-right: -1rem;
  }

  #home main>section {
    padding-top: 3.75rem !important;
    padding-bottom: 3.75rem !important;
    gap: 2rem !important;
  }

  #home #testimonials .card p {
    font-size: 1.25rem;
  }

  #home .card {
    padding: 1.5rem;
  }

  #home .card.tall h3 {
    font-size: 1.5rem;
    line-height: 120%;
    /* 1.8rem */
    letter-spacing: -0.0625rem;
  }

  #home section>header>h1 {
    font-size: 2.5rem;
  }
}

#home .mobile-menu {
  display: none;
}

@media (max-width: 961px) {
  #home #cta-banner .datum-logo-small {
    display: none;
  }

  #home .mobile-menu {
    color: white;
    display: block;
  }

  #home .menu-toggle {
    display: none;
  }

  #home .menu-icon {
    cursor: pointer;
    display: block;
    width: 1.5rem;
    height: 1.5rem;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 1rem;
    z-index: 1001;
    transition: position 0.3s ease;
  }

  #home .menu-icon::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-image: url("/National_Library/oe_/https://ocean.xyz:443/static/assets/home/hamburger.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: background-image 0.3s ease;
  }

  #home .menu-toggle:checked~.menu-icon {
    top: 2rem;
    right: 2rem;
    position: fixed;
    /* Change to fixed when menu is open */
  }

  #home .menu-toggle:not(:checked)~#logo {
    opacity: 0;
  }

  #home .menu-toggle:checked~#logo {
    top: 1rem;
    left: 1rem;
    position: fixed;
    z-index: 1001;
  }

  #home .menu-toggle:checked~.menu-icon::before {
    background-image: url("/National_Library/oe_/https://ocean.xyz:443/static/assets/home/close-hamburger.svg");
  }

  #home .menu {
    position: fixed;
    top: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(32, 138, 233);
    transition: top 0.3s ease;
    z-index: 1000;
  }

  #home .menu-toggle:checked~.menu {
    top: 0;
  }

  #home .menu-content {
    padding: 4rem;
  }

  #home .menu ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.625rem;
  }

  #home .menu ul li {
    width: 100%;
  }

  #home .menu ul li a {
    padding-top: 1rem;
    width: 100%;
    border-radius: 3rem;
    padding-bottom: 1rem;
    display: block;
    text-decoration: none;
    color: white;
    text-align: center;
    font-size: 1rem;
    font-weight: 400;
  }

  #home .menu ul li a:hover {
    background: rgba(255, 255, 255, 0.2);
  }
}

/* Duplicated home styles for new navbar */

#navbar .black-white-text {
    color: var(--home-text);
}
#navbar .lightmode-svg-invert {
    filter: var(--svg-invert-100-0);
}
#navbar #logo-symbol {
    filter: var(--navbar-logo-svg-filter);
}

#navbar *,
#navbar ::before,
#navbar ::after {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: currentColor
}

#navbar body {
  margin: 0;
  line-height: inherit;
  background-color: var(--home-background-color);
}

#navbar h1,
#navbar h2,
#navbar h3,
#navbar h4,
#navbar h5,
#navbar h6 {
  font-size: inherit;
  font-weight: inherit;
}

#navbar a {
  color: inherit;
  text-decoration: inherit;
}

#navbar b,
#navbar strong {
  font-weight: bolder;
}

#navbar button,
#navbar input,
#navbar optgroup,
#navbar select,
#navbar textarea {
  font-family: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  font-size: 100%;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
  margin: 0;
  padding: 0
}

#navbar button,
#navbar select {
  text-transform: none;
}

#navbar button,
#navbar input:where([type=button]),
#navbar input:where([type=reset]),
#navbar input:where([type=submit]) {
  background-color: rgba(0, 0, 0, 0);
  background-image: none;
}

#navbar :-moz-focusring {
  outline: auto;
}

#navbar :-moz-ui-invalid {
  box-shadow: none;
}

#navbar blockquote,
#navbar dl,
#navbar dd,
#navbar h1,
#navbar h2,
#navbar h3,
#navbar h4,
#navbar h5,
#navbar h6,
#navbar hr,
#navbar figure,
#navbar p,
#navbar pre {
  margin: 0;
}

#navbar ol,
#navbar ul,
#navbar menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

#navbar button,
#navbar [role=button] {
  cursor: pointer;
}

#navbar :disabled {
  cursor: default;
}

/* Home Styles */


#navbar body {
  font-family: "Inter", sans-serif;
  background-color: var(--home-background-color);
  color: var(--home-text);
}

#navbar .h-full {
  height: 100%;
}

#navbar .py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

#navbar .flex {
  display: flex;
}

#navbar .flex-col {
  flex-direction: column;
}

#navbar .justify-between {
  justify-content: space-between;
}

#navbar .items-center {
  align-items: center;
}

#navbar .items-start {
  align-items: flex-start;
}

#navbar .shrink-0 {
  flex-shrink: 0;
}

#navbar .grid {
  display: grid;
}

#navbar .gap-tiny {
  gap: 0.375rem;
}

#navbar .gap-4 {
  gap: 1rem;
}

#navbar .gap-5 {
  gap: 1.25rem;
}

#navbar .gap-6 {
  gap: 1.5rem;
}

#navbar .gap-8 {
  gap: 2rem;
}

#navbar .gap-10 {
  gap: 2.5rem;
}

#navbar .gap-12 {
  gap: 3rem;
}

#navbar .gap-18 {
  gap: 4.5rem;
}

#navbar .grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#navbar .grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

#navbar .grid-cols-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

#navbar .grid-cols-6 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

#navbar .col-span-3 {
  grid-column: span 3/span 3;
}

#navbar .col-span-2 {
  grid-column: span 2/span 2;
}

#navbar .col-span-6 {
  grid-column: span 6/span 6;
}

#navbar .inline-block {
  display: inline-block;
}

#navbar .text-white {
  color: white;
}

#navbar .overflow-clip {
  overflow: clip;
  border-radius: 0.5rem;
}

#navbar .rounded-lg {
  border-radius: 0.5rem;
}

#navbar .relative {
  position: relative;
}

#navbar .text-center {
  text-align: center;
}

#navbar .px-\[5rem\] {
  padding-left: 5rem
  padding-right: 5rem;
}

#navbar main {
  padding-left: 5rem;
  padding-right: 5rem;
}

#navbar main>section {
  padding-top: 2rem;
  padding-bottom: 2rem;
  display: flex;
  flex-direction: column;
  gap: 4rem;
}

#navbar section>header {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#navbar section>header>h1,
#navbar section>header>h2 {
  color: var(--home-text-navy-or-white);
  text-wrap: balance;
  text-align: center;
}

#navbar section>header>h1 {
  font-size: 2.5rem;
  font-weight: 600;
  line-height: 3.9375rem;
  letter-spacing: -0.09375rem;
}

#navbar section>header>h2 {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.625rem;
}

#navbar .video-container {
  background-color: var(--home-darkgray);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
}

#navbar .header-video-container {
  background-color: black;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
}

#navbar .video {
    object-fit: contain;
    max-width: 100%;
    max-height: 100%;
    border-radius: 0.5rem;
}

#navbar .play-video {
    position: absolute;
    z-index: 1000;
}

#navbar .header-video {
    object-fit: cover;
    max-width: 100%;
}

#navbar .datum-logo-small {
    height: 24px;
    width: 90.86px;
    background-image: var(--home-small-datum-logo-url);
}

#navbar nav {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

#navbar nav ul a {
  color: white;
  white-space: nowrap;
  font-size: 0.875rem;
  font-weight: 600;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  border-radius: 999px;
  margin-left: -1rem;
  margin-right: -1rem;
}

#navbar nav ul a:hover {
  background: rgba(255, 255, 255, 0.2);
}

#navbar #hamburger {
  height: 1.5rem;
  width: 1.5rem;
}

#navbar #header-grid-content h1 {
  font-size: 5.25rem;
  line-height: 5.5625rem;
  letter-spacing: -0.2rem;
  color: white;
  font-weight: 600;
  text-wrap: balance;
}

#navbar #header-grid-content h2 {
  font-weight: 300;
  color: white;
  font-size: 1.25rem;
}

#navbar #mempool-screenshot {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#navbar .card {
  color: var(--home-text);
  padding: 2rem;
  border-radius: 1.5rem;
  background: var(--home-card-bg);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 15rem;
  gap: 1rem;
  border: var(--home-card-border);
}

#navbar #testimonials .card p {
  font-size: 1.25rem;
  font-weight: 500;
}

#navbar .profile .name {
  font-weight: 600;
}

#navbar .profile .role {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

#navbar .profile {
  display: flex;
  align-items: start;
  gap: 0.75rem;
}

#navbar .profile img {
  height: 2.5rem;
  width: 2.5rem;
  border-radius: 9999px;
}

#navbar .profile div {
  display: flex;
  flex-direction: column;
}

#navbar #testimonials {
  max-width: 1280px;
  padding-top: 1rem;
  padding-bottom: 1rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
}

#navbar #theres-more {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}


#navbar .card.tall {
  color: var(--home-text-navy-or-white);
  background: var(--home-card-tall-bg);
  min-height: 25rem;
}

#navbar .card.tall.fancy-card-bg {
    /* background: radial-gradient(107.84% 322.29% at 21.3% 183.33%, rgba(17, 55, 245, 0.3) 27.23%, rgba(20, 137, 238, 0.3) 66.15%, rgba(23, 217, 213, 0.3) 94.29%), #fff; */
    background: var(--home-fancy-card-bg);
  }

#navbar .card.tall h4 {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.625rem;
  text-wrap: balance;
}

#navbar .card.tall h3 {
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 2.275rem;
  letter-spacing: -0.0625rem;
}

#navbar .card.tall p {
  line-height: 1.875rem;
  font-size: 1rem;
  font-weight: 400;
}

#navbar .card.tall a {
  line-height: 1.625rem;
  font-size: 1rem;
  font-weight: 400;
  display: inline-flex;
  align-items: center;
}

#navbar .card.tall img {
  object-fit: cover;
}

#navbar a.link-arrow::after, #navbar span .arrow::after {
  display: inline-block;
  content: var(--home-link-arrow);
  margin-left: 0.25rem;
  vertical-align: middle;
  line-height: 1rem;
}

#navbar a.link-arrow.light::after, #navbar span .arrow::after {
  content: url(/National_Library/oe_/https://ocean.xyz:443/static/assets/home/arrow_right_light.svg);
}

#navbar .link-arrow.dark::after, #navbar .arrow.dark::after {
  filter: brightness(0) saturate(100%);
}

#navbar span.card-subhead {
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 2.1875rem;
  display: block;
  margin-left: 0.25rem;
  vertical-align: middle;
}

#navbar .card.tall img.abstract {
  width: 7.75rem;
  height: 7.75rem;
  flex-shrink: 0;
}

#navbar img.invertible {
  filter: var(--home-maybe-invert);
}

#navbar a.white-button-link, #navbar div.white-button-link {
  text-align: center;
  background-color: white;
  border-radius: 9999px;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  white-space: nowrap;
  color: var(--home-navy);
  display: flex;
  gap: 0.25rem;
  align-items: center;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5rem;
  width: fit-content;
  cursor: pointer;
}

#navbar .white-button-link span {
  font-size: 1rem;
  font-weight: 600;
  display: inline-block;
}

#navbar .white-button-link img {
  display: inline-block;
}

#navbar #header-content {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}

#navbar #cta-banner {
  background-color: var(--home-cta-banner-bg);
  border: var(--home-cta-border);
  color: var(--home-text);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 600;
  height: 3rem;
}

#navbar #cta-banner a {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  display: flex;
  align-items: center;
  padding-left: 1.25rem;
  border-left: var(--home-light-border);
  height: 3rem;
}


#navbar {
  padding-bottom: 2.625rem;
}

#navbar #get-started {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

#navbar #get-started .card {
  background: var(--home-get-started-bg);
  color: white;
}

#navbar #get-started h4 {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.625rem;
}

#navbar #get-started h3 {
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 2.25rem;
  letter-spacing: -0.0625rem;
}

#navbar #get-started a {
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 2.1875rem;
}

#navbar #get-started p {
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.25rem;
}

#navbar #get-started strong {
  font-weight: 700;
}

#navbar #pool-status {
    background: none;
    color: var(--text-black-white);
    gap: 1rem;
}

@media (max-width: 960px) {
  #navbar .sm\:w-full {
    width: 100%;
  }

  #navbar .sm\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #navbar .sm\:flex {
    display: flex;
  }

  #navbar .sm\:flex-wrap {
    flex-wrap: wrap;
  }

  #navbar .sm\:flex-col {
    flex-direction: column;
  }

  #navbar .sm\:items-center {
    align-items: center;
  }

  #navbar .sm\:gap-4 {
    gap: 1rem;
  }

  #navbar .sm\:hidden {
    display: none;
  }

  #navbar .sm\:text-center {
    text-align: center;
  }
}

@media (max-width: 960px) {
  #navbar main {
    padding-left: 0;
    padding-right: 0;
  }

  #navbar section>header>h1 {
    font-size: 1.75rem;
    line-height: 2.5rem;
  }

  #navbar nav {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  }

  #navbar .video-container {
    width: 100%;
    aspect-ratio: 16/9;
    min-height: 5rem;
  }

  #navbar #header-grid-content h1 {
    text-align: center;
    font-size: 2.125rem;
    line-height: 2.5rem;
    letter-spacing: -0.0625rem;
  }

  #navbar #header-grid-content h2 {
    text-align: center;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.25rem;
  }

  #navbar #logos {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    align-items: center;
    justify-content: center;
    gap: 2rem;
    opacity: var(--home-logos-opacity);
  }

  #navbar #logos div {
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scale(0.6);
  }

  #navbar #logos div:nth-child(1),
  #navbar #logos div:nth-child(2),
  #navbar #logos div:nth-child(3) {
    grid-column: span 2;
  }

  #navbar #logos div:nth-child(4),
  #navbar #logos div:nth-child(5),
  #navbar #logos div:nth-child(6) {
    grid-column: span 3;
  }

  #navbar .card p {
    font-size: 1.25rem;
    line-height: normal;
  }

  #navbar #testimonials {
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }

  #navbar #cta-banner {
    margin-top: 1rem;
    margin-bottom: 1rem;
    font-size: 0.75rem;
  }

  #navbar {
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0;
    padding-bottom: 0;
  }

  #navbar #get-started h4,
  #navbar #get-started h3,
  #navbar #get-started p,
  #navbar #get-started a {
    text-align: center;
    text-wrap: balance;
  }

  #navbar #get-started a {
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 2.1875rem;
  }

  #navbar #get-started h3 {
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 2.25rem;
    letter-spacing: -0.0625rem;
  }

  #navbar #team-grid {
    padding-left: 1rem;
    padding-right: 1rem;
  }



  #navbar .team-member .hidden-overlay {
    position: fixed;
    left: 1rem;
    right: 1rem;
    top: 50%;
    block-size: fit-content;
    transform: translateY(-50%);
  }

  #navbar .team-member img {
    width: 8rem;
    height: 8rem;
  }
}

@media (min-width: 961px) {
  #navbar #cta-banner a {
    gap: 0.5rem;
  }

  #navbar #testimonials {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }

  #navbar .md\:hidden {
    display: none;
  }

  #navbar .md\:gap-10 {
    gap: 2.5rem;
  }

  #navbar .md\:grid {
    display: grid;
  }

  #navbar .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #navbar .md\:px-\[5rem\] {
    padding-left: 5rem;
    padding-right: 5rem;
  }
}

@media (min-width: 1201px) {
  #navbar main>section {
    padding-top: 5rem;
    padding-bottom: 5rem;
    display: flex;
    flex-direction: column;
    gap: 4rem;
  }

  #navbar .lg\:gap-8 {
    gap: 2rem;
  }

  #navbar .lg\:gap-10 {
    gap: 2.5rem;
  }

  #navbar .lg\:gap-12 {
    gap: 3rem;
  }

  #navbar .lg\:gap-18 {
    gap: 4.5rem;
  }
}

@media (min-width: 961px) and (max-width: 1200px) {
  #navbar {
    padding-top: 0rem;
    padding-bottom: 0rem;
  }

  #navbar #header-grid-content h1 {
    font-size: 4rem;
    line-height: 4.375rem;
    /* 109.375% */
    letter-spacing: -0.21875rem;
  }

  #navbar #header-grid-content h2 {
    font-size: 1rem;
    line-height: 1.625rem;
  }

  #navbar #logos img {
    transform: scale(0.8);
    margin-left: -1rem;
    margin-right: -1rem;
  }

  #navbar main>section {
    padding-top: 3.75rem !important;
    padding-bottom: 3.75rem !important;
    gap: 2rem !important;
  }

  #navbar #testimonials .card p {
    font-size: 1.25rem;
  }

  #navbar .card {
    padding: 1.5rem;
  }

  #navbar .card.tall h3 {
    font-size: 1.5rem;
    line-height: 120%;
    /* 1.8rem */
    letter-spacing: -0.0625rem;
  }

  #navbar section>header>h1 {
    font-size: 2.5rem;
  }
}

#navbar .mobile-menu {
  display: none;
}

@media (max-width: 961px) {
  #navbar #cta-banner .datum-logo-small {
    display: none;
  }

  #navbar .mobile-menu {
    color: white;
    display: block;
  }

  #navbar .menu-toggle {
    display: none;
  }

  #navbar .menu-icon {
    cursor: pointer;
    display: block;
    width: 1.5rem;
    height: 1.5rem;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 1rem;
    z-index: 1001;
    transition: position 0.3s ease;
  }

  #navbar .menu-icon::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-image: url("/National_Library/oe_/https://ocean.xyz:443/static/assets/home/hamburger.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: background-image 0.3s ease;
  }

  #navbar .menu-toggle:checked~.menu-icon {
    top: 2rem;
    right: 2rem;
    position: fixed;
    /* Change to fixed when menu is open */
  }

  #navbar .menu-toggle:not(:checked)~#logo {
    opacity: 0;
  }

  #navbar .menu-toggle:checked~#logo {
    top: 1rem;
    left: 1rem;
    position: fixed;
    z-index: 1001;
  }

  #navbar .menu-toggle:checked~.menu-icon::before {
    background-image: url("/National_Library/oe_/https://ocean.xyz:443/static/assets/home/close-hamburger.svg");
  }

  #navbar .menu {
    position: fixed;
    top: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(32, 138, 233);
    transition: top 0.3s ease;
    z-index: 1000;
  }

  #navbar .menu-toggle:checked~.menu {
    top: 0;
  }

  #navbar .menu-content {
    padding: 4rem;
  }

  #navbar .menu ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.625rem;
  }

  #navbar .menu ul li {
    width: 100%;
  }

  #navbar .menu ul li a {
    padding-top: 1rem;
    width: 100%;
    border-radius: 3rem;
    padding-bottom: 1rem;
    display: block;
    text-decoration: none;
    color: white;
    text-align: center;
    font-size: 1rem;
    font-weight: 400;
  }

  #navbar .menu ul li a:hover {
    background: rgba(255, 255, 255, 0.2);
  }
}