html,
body {
  background-color: #000;
  padding: 0;
  margin: 0;

  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: var(--font-weight-base);
  line-height: var(--font-lh-base);
  color: var(--color-base-darkest);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  display: block;
  margin: 0;
}

h1 {
  line-height: var(--font-lh-xl);
}

h3 {
  font-weight: 500;
  font-size: var(--font-size-lg);
  line-height: var(--font-lh-lg);
}

a {
  text-decoration: none;
}

.scene {
  min-height: 100vh;
  min-width: 100vw;
  background-color: #cbd1e1;
  background-blend-mode: multiply;
  background-color: var(--color-sg-brand-dark-blue);
  background-position: center center;
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  padding: 16px;
}

@media only screen and (max-height: 702px) {
  body {
    width: 100%;
    overflow-y: auto;
    overflow-y: overlay;
  }

  .scene.modal-scene {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
  }

  .scene.modal-scene .login-modal {
    position: static;
    top: unset;
    left: unset;
    right: unset;
    bottom: unset;
    transform: none;
  }
}

.scene {
  min-height: 100vh;
  min-width: 100vw;
  background: #cbd1e1;
  background-blend-mode: multiply;
  background-color: var(--color-sg-brand-dark-blue);
  background-position: center center;
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  padding: 16px;
}

:root {
  --font-size-base: 1rem; /* 14px (assuming 14px base font size) */
  --font-size-lg: 1.286rem; /* 18px */
  --font-size-xl: 1.571rem; /* 22px */
  --font-size-2xl: 1.857rem; /* 26px */
  --font-size-3xl: 2.286rem; /* 32px */
  --font-size-4xl: 2.857rem; /* 40px */

  --font-lh-xs: 1rem; /* 14px */
  --font-lh-sm: 1.143rem; /* 16px */
  --font-lh-base: 1.286rem; /* 18px */
  --font-lh-lg: 1.714rem; /* 24px */
  --font-lh-xl: 1.857rem; /* 26px */
  --font-lh-2xl: 2.143rem; /* 30px */
  --font-lh-3xl: 2.714rem; /* 38px */
  --font-lh-4xl: 3.429rem; /* 48px */

  --font-weight-base: 400;
  --font-weight-bold: 500;
  --font-weight-bolder: 600;

  --color-white: #fff;
  --color-gray: #f2f2f2;
  --color-black: #000;

  --color-base-lightest: #f3f3f3;
  --color-base-lighter: #e6e6e6;
  --color-base-light: #cfcfcf;
  --color-base: #6e6e6e;
  --color-base-dark: #3d3d3d;
  --color-base-darker: #242424;
  --color-base-darkest: #0d0d0d;

  --color-primary-lightest: #f2f8fd;
  --color-primary-lighter: #cce1f8;
  --color-primary-light: #67a6eb;
  --color-primary: #026bde;
  --color-primary-dark: #0256b2;
  --color-primary-darker: #014085;
  --color-primary-darkest: #00152c;

  --color-success-lightest: #f3f9f4;
  --color-success-lighter: #cfe6d4;
  --color-success-light: #6eb37f;
  --color-success: #0e802a;
  --color-success-dark: #0b6622;
  --color-success-darker: #084d19;
  --color-success-darkest: #063311;

  --color-info-lightest: #f2f8fa;
  --color-info-lighter: #cce4ea;
  --color-info-light: #66aec0;
  --color-info: #007896;
  --color-info-dark: #006078;
  --color-info-darker: #00485a;
  --color-info-darkest: #00303c;

  --color-warning-lightest: #fffaf2;
  --color-warning-lighter: #ffeacc;
  --color-warning-light: #ffbf66;
  --color-warning: #ff9500;
  --color-warning-dark: #cc7700;
  --color-warning-darker: #995900;
  --color-warning-darkest: #663c00;

  --color-insights-lightest: #fdf2f7;
  --color-insights-lighter: #f8ccdd;
  --color-insights-light: #e96799;
  --color-insights: #db0255;
  --color-insights-dark: #af0244;
  --color-insights-darker: #830133;
  --color-insights-darkest: #580122;

  --color-promo-lightest: #faf5fd;
  --color-promo-lighter: #ecd8f6;
  --color-promo-light: #c78be5;
  --color-promo: #a23dd4;
  --color-promo-dark: #8231aa;
  --color-promo-darker: #61257f;
  --color-promo-darkest: #200c2a;

  --color-danger-lightest: #fdf4f4;
  --color-danger-lighter: #f6d4d4;
  --color-danger-light: #e57e7e;
  --color-danger: #d42828;
  --color-danger-dark: #aa2020;
  --color-danger-darker: #7f1818;
  --color-danger-darkest: #551010;

  --color-sg-brand-dark-blue: #0076a5;
}

.screen-reader-only {
  display: block;
  height: 0;
  width: 0;
  overflow: hidden;
  position: absolute;
}