@font-face {
	font-family: 'Akzidenz-Grotesk Pro';
  font-style: normal;
  font-weight: 300;
	src: url(../fonts/akzidenzgroteskpro_regular.ttf);
	src: url(../fonts/akzidenzgroteskpro_regular.ttf) format('truetype');
  font-display: swap;
}
@font-face {
	font-family: 'Akzidenz-Grotesk Pro';
  font-style: normal;
  font-weight: 700;
	src: url(../fonts/akzidenzgroteskpro_boldex.otf);
	src: url(../fonts/akzidenzgroteskpro_boldex.otf) format('opentype');
  font-display: swap;
}

:root {
  --column-size: 336px;

  --primary-color: #1E1E1E;
  --primary-accent: #fff;
  --primary-accent2: #DC1E1C;
  --primary-accent3: #FF9F9F;
  --primary-accent4: #757E88;
  --primary-accent5: #202020;
  --primary-accent6: #218768;
  --primary-accent7: #214A87;
  --primary-accent8: #E7D2C3;
  --primary-accent9: #D9D9D9;
  --primary-accent10: #E3E3E3;
  --primary-accent11: #FAFAFA;
  --primary-accent12: #e6effc;
  --primary-accent13: #ffe4e4;
  --primary-accent14: #e6fff8;
  --primary-opacity: rgba(255, 255, 255, 0.04);
  --primary-opacity2: rgba(255, 159, 159, 0.04);
  --primary-opacity3: rgba(118, 118, 118, 0.04);
  --primary-opacity4: #fbfbfb;
  --primary-opacity5: rgba(117, 126, 136, 0.14);
  --primary-opacity6: rgba(117, 126, 136, 0.75);
  --primary-opacity7: rgba(117, 126, 136, 0.24);
  --primary-opacity8: rgba(117, 126, 136, 0.02);
  --primary-opacity9: rgba(255, 255, 255, 0.1);
  --primary-opacity10: rgba(117, 126, 136, 0.37);
  --primary-opacity11: rgba(27, 27, 27, 0.47);

  --link-color: var(--primary-color);
  --link-hover: var(--primary-accent2);

  --button-width: 450px;
  --button-height: 56px;
  --button-offset: 26px;
  --button-radius: 56px;

  --button-color: var(--primary-accent);
  --button-color-hover: var(--primary-accent);
  --button-background: var(--primary-color);
  --button-background-hover: var(--primary-accent2);

  -webkit-tap-highlight-color: transparent;
}

html {
  container-type: normal;

  @media (max-width: 1600px) {
    container-name: desctop;
  }

  @media (max-width: 1440px) {
    container-name: desctop large;
  }

  @media (max-width: 1280px) {
    container-name: desctop large xlarge;
  }

  @media (max-width: 1025px) {
    container-name: desctop large xlarge medium;
  }

  @media (max-width: 640px) {
    container-name: desctop large xlarge medium small;
  }

  @media (max-width: 399px) {
    container-name: desctop large xlarge medium small xsmall;
  }
}

body {
  /* overflow: hidden; */
  /* overflow-y: auto; */
  min-height: 100vh;
  line-height: 1.3;
  font-weight: 300;
  font-size: calc(12px + 2 * var(--window-resize));
  font-family: 'Mont', 'Montserrat', Arial, Helvetica, sans-serif !important;
  
  display: flex;
  row-gap: 0;
  flex-direction: column;
}

* {
  outline: none;
  font-weight: inherit;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  box-sizing: border-box;

  @media screen and (max-width: 1440px) {
    --column-size: 280px;
  }
}

a {
  color: var(--link-color);
  transition: color .3s ease;
  text-decoration: none;
}
a:hover {
  color: var(--link-hover);
}
.text a {
  --link-color: var(--primary-accent2);
  /* text-decoration: underline !important; */
  border-bottom: 1px solid var(--link-color);
}
.text a:hover {
  border-bottom-color: var(--link-hover);
}

h1 {
  font-weight: 300;
  font-size: calc(24px + 24 * var(--window-resize));
  color: var(--title-color, var(--primary-color));
}
h2 {
  font-weight: 300;
  font-size: calc(24px + 20 * var(--window-resize));
  color: var(--title-color, var(--primary-color));
}
.title > *:not(:is(h1, h2)) {
  font-weight: 300;
  font-size: calc(24px + 24 * var(--window-resize));
  color: var(--title-color, var(--primary-color));
}
.title :is(h1, h2) {
  margin-top: 0;
}
.title--center :is(h1, h2) {
  text-align: center;
}
.title span {
  font-weight: 300;
  font-size: calc(14px + 0 * var(--window-resize));
  color: var(--primary-accent4);
  text-transform: none;
  display: inline-block;
  margin-left: 8px;
}

.dfx {
  display: flex;
}

.container {
  padding: 0 var(--container-offset);
  width: var(--container-size);
  max-width: 100%;
  margin: 0 auto;
  /* box-sizing: content-box; */
}
.container .container {
  width: 100%;
  padding: 0;
}

.separator {
  width: 100%;
  height: 1px;
  background-color: var(--primary-accent9);
}

.sticky {
  /* position: -webkit-sticky;
  position: sticky;
  top: 40px;
  z-index: 1; */
}

.tooltip {
  position: absolute;
  top: 0;
  left: 0;
  margin-top: -4px;
  transform: translateX(-50%) translateY(-100%);
  background-color: var(--primary-color);
  border-radius: 6px;
  padding: 8px 12px;
  color: var(--primary-accent);
  font-weight: 400;
  font-size: calc(10px + 0 * var(--window-resize));
}