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

* {
  margin: 0;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

img,
picture,
video,
canvas,
svg {
  max-width: 100%;
  -webkit-font-smoothing: antialiased;
}

input,
button,
textarea,
select {
  font: inherit;
  -webkit-font-smoothing: antialiased;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

:root {
  /* colors */
  --color-lightestred: #fbe9e9;
  --color-secondaryred: #dd2224;
  --color-basered: #d42123;
  --color-darkred: #b91d1f;
  --color-mlbaseberry: #db0a5b;
  --color-lightestblue: #e6f4fb;
  --color-mlasiablue: #3cbdff;
  --color-mlbaseblue1: #0090da;
  --color-mlblue2: #007abc;
  --color-mldarkblue3: #0061a0;
  --color-lightestgreen: #f6faed;
  --color-mlbasegreen: #a4ce4e;
  --color-darkgreen: #83a53e;
  --color-lightestteal: #e6f7f6;
  --color-mlbaseteal: #00aca0;
  --color-darkteal: #379b94;
  --color-lightestpurple: #efe9f5;
  --color-mlbasepurple: #5f259f;
  --color-darkpurple: #471c77;
  --color-lightestyellow: #fff9e6;
  --color-mlbaseyellow: #ffc600;
  --color-darkyellow: #e1b212;
  --color-mlbasesalmonorange: #fe5f55;
  --color-lightestgray2: #f8f8f8;
  --color-lightestgray: #f2f2f2;
  --color-lightgray: #d9d9d6;
  --color-mediumgray: #a7a8aa;
  --color-darkmediumgray: #8e8f91;
  --color-darkgray: #6e6e6e;
  --color-darkestgray: #333333;
  --color-white: #ffffff;
  --color-black: #000000;

  /* gradients */
  --gradient-1: var(--color-mlbasegreen), var(--color-mlbaseblue1);
  --gradient-2: var(--color-mlbaseblue1), var(--color-mlbaseteal);
  --gradient-3: #1e4c76, var(--color-mlblue2);
  --gradient-4: #000016, #1e4c76;
  --gradient-5: var(--color-mlbaseteal), var(--color-mlbasegreen);

  /* fonts */
  --font-heading: "MetLifeCircular", system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell,
    "Open Sans", "Helvetica Neue", sans-serif;
  --font-body: "Noto Sans", system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
    sans-serif;

  /* font sizes */
  --font-size-10: 0.625rem;
  --font-size-12: 0.75rem;
  --font-size-14: 0.875rem;
  --font-size-16: 1rem;
  --font-size-18: 1.125rem;
  --font-size-20: 1.25rem;
  --font-size-22: 1.375rem;
  --font-size-24: 1.5rem;
  --font-size-26: 1.625rem;
  --font-size-28: 1.75rem;
  --font-size-30: 1.875rem;
  --font-size-32: 2rem;
  --font-size-34: 2.125rem;
  --font-size-36: 2.25rem;
  --font-size-38: 2.375rem;
  --font-size-40: 2.5rem;
  --font-size-42: 2.625rem;
  --font-size-44: 2.75rem;
  --font-size-46: 2.875rem;
  --font-size-48: 3rem;

  /* line heights  */
  --line-height-18: 1.125rem;
  --line-height-20: 1.25rem;
  --line-height-21: 1.3125rem;
  --line-height-22: 1.375rem;
  --line-height-24: 1.5rem;
  --line-height-28: 1.75rem;
  --line-height-30: 1.875rem;
  --line-height-32: 2rem;
  --line-height-34: 2.125rem;
  --line-height-36: 2.25rem;
  --line-height-42: 2.625rem;
  --line-height-48: 3rem;
  --line-height-50: 3.125rem;
  --line-height-52: 3.25rem;
  --line-height-54: 3.375rem;
  --line-height-56: 3.5rem;
  --line-height-66: 4.125rem;

  /* sizes */
  --size-1: 1px;
  --size-2: 2px;
  --size-4: 4px;
  --size-6: 6px;
  --size-8: 8px;
  --size-10: 10px;
  --size-xxxs: 0.125rem; /* 2px */
  --size-xxs: 0.25rem; /* 4px */
  --size-xs: 0.5rem; /* 8px */
  --size-sm: 0.75rem; /* 12px */
  --size-md: 1rem; /* 16px */
  --size-lg: 1.25rem; /* 20px */
  --size-xl: 1.5rem; /* 24px */
  --size-2xl: 2rem; /* 32px */
  --size-3xl: 2.5rem; /* 40px */
  --size-4xl: 3rem; /* 48px */
  --size-5xl: 3.5rem; /* 56px */
  --size-6xl: 4rem; /* 64px */
  --size-7xl: 4.5rem; /* 72px */
  --size-8xl: 5rem; /* 80px */
}

@font-face {
  font-family: "MetLifeCircular";
  font-style: normal;
  font-display: swap;
  font-weight: 300;
  src: url("../assets/MetLifeCircular-Light.otf") format("opentype");
}

@font-face {
  font-family: "MetLifeCircular";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url("../assets/MetLifeCircular-Normal.otf") format("opentype");
}

@font-face {
  font-family: "MetLifeCircular";
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url("../assets/MetLifeCircular-Medium.otf") format("opentype");
}

@font-face {
  font-family: "MetLifeCircular";
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url("../assets/MetLifeCircular-Bold.otf") format("opentype");
}

@font-face {
  font-family: "Noto Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-variation-settings: "wdth" 100;
  src: url("../assets/NotoSans-Variable.ttf") format("truetype");
}