@import url("normalize.css");
@import url("reset.css");
@import url("font-utility.css");
@import url("flex-utility.css");

:root {
  /*=========================== Layout ===========================*/
  --base-font: 16px;
  --base-row-unit: 27px;
  --base-col-unit: 24px;

  /*=========================== Color styles =====================*/
  /* Black & Gray */
  --color-black: #0b0e14;
  --color-light-black: #161b22;
  --color-gray: #353941;
  --color-light-gray: #9c9c9c;
  --color-light-gray-low-transparency: rgba(110, 110, 110, 0.15);
  --color-super-light-gray: #cfcfcf;
  --color-icon-gray: #8b9491;

  /* Navy & Primary */
  --color-navy: #101a2b;
  --color-primary: #0c4db6;
  --color-primary-low-transparency: rgba(12, 77, 182, 0.15);
  --color-light-primary: #7da8ec;
  --color-light-primary-low-transparency: rgba(47, 104, 197, 0.15);

  /* White & Accents */
  --color-white: #f0f6fc;
  --color-white-low-transparency: rgba(240, 246, 252, 0.15);
  --color-red: #e99797;
  --color-red-low-transparency: rgba(198, 90, 90, 0.15);
  --color-transparent: rgba(255, 255, 255, 0);
  --color-roadmap-card-1: #286dd4;
  --color-roadmap-card-2: #1e5fc0;
  --color-roadmap-card-3: #1254bb;
  --color-roadmap-card-4: #0c4db6;

  /*=========================== Text-size styles ==================*/
  /* Link */
  --font-link-s: calc(var(--base-font) * 0.875); /* 14px */
  --font-link-m: var(--base-font); /* 16px */

  /* Body */
  --font-body-s-auto-upper: calc(var(--base-font) * 0.75); /* 12px */
  --font-body-s-plus: calc(var(--base-font) * 0.875); /* 14px */
  --font-body-s-plus-auto: calc(var(--base-font) * 0.875); /* 14px */
  --font-body-m: var(--base-font); /* 16px */
  --font-body-m-plus: calc(var(--base-font) * 1.125); /* 18px */
  --font-body-m-plus-2: calc(var(--base-font) * 1.25); /* 20px */
  --font-body-m-plus-2-upper: calc(var(--base-font) * 1.5); /* 24px */
  --font-body-l: calc(var(--base-font) * 1.6875); /* 27px */
  --font-body-icon-m: var(--base-font); /* 16px */
  --font-body-icon-l: calc(var(--base-font) * 1.6875); /* 27px */

  /* Heading */
  --font-heading-s: calc(var(--base-font) * 1.875); /* 30px */
  --font-heading-m: calc(var(--base-font) * 2); /* 32px */
  --font-heading-l: calc(var(--base-font) * 3); /* 48px */
  --font-heading-xl: calc(var(--base-font) * 3.4375); /* 55px */
}

body {
  background-color: var(--color-black);
  /* font-family: "Open Sans", sans-serif;
  font-size:var(--base-font);
  line-height:var(--base-unit); */
  font:
    var(--base-font)/var(--base-row-unit) "Roboto",
    sans-serif;
  color: var(--color-white);
}

.container {
  max-width: 1272px;
  margin: 0 auto;
  width: 100%;
  padding: 0 24px;
  box-sizing: border-box;
}

.hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: polygon(0 0, 0 0, 0 0);
}