/* [project]/src/assets/css/global.css [app-client] (css) */
@font-face {
  font-family: Montserrat;
  src: url("../media/Montserrat-Regular.8b6ae9af.ttf");
  font-weight: normal;
}

@font-face {
  font-family: Montserrat;
  src: url("../media/Montserrat-Medium.b6a3adaa.ttf");
  font-weight: 500;
}

@font-face {
  font-family: Montserrat;
  src: url("../media/Montserrat-SemiBold.0b7ac1f3.ttf");
  font-weight: 600;
}

* {
  font-optical-sizing: auto;
  color: var(--textMajor);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: none;
  -webkit-tap-highlight-color: transparent;
  margin: 0;
  padding: 0;
  font-family: Montserrat;
  text-decoration: none;
  font-synthesis: none !important;
}

html, body {
  background-color: var(--whitePrimary);
}

button, input, pre {
  font-family: inherit;
}

button {
  cursor: pointer;
  border: none;
  outline: none;
}

pre {
  white-space: pre-wrap;
  max-width: 100%;
}

:root {
  --space-v-xs: 4px;
  --space-v-s: 8px;
  --space-v-m: 16px;
  --space-v-l: 24px;
  --space-v-xl: 32px;
  --space-v-xxl: 48px;
  --space-h-xs: 4px;
  --space-h-s: 8px;
  --space-h-m: 16px;
  --space-h-l: 24px;
  --space-h-xl: 32px;
  --space-h-xxl: 48px;
  --brandPrimaryMajor: #162f6f;
  --brandPrimary: #1e3c88;
  --brandPrimaryMedium: #4d66a3;
  --brandPrimaryLight: #e9edf6;
  --brandPrimaryGhost: #f3f5fb;
  --blackMajor: #000;
  --blackPrimary: #797979;
  --blackMedium: #a6a6a6;
  --blackLight: #e5e5e5;
  --blackGhost: #f5f5f5;
  --whitePrimary: #fff;
  --linkNormal: var(--brandPrimary);
  --linkHover: var(--brandPrimaryMajor);
  --linkPressed: var(--brandPrimaryMedium);
  --linkDisabled: var(--blackLight);
  --menuButtonNormal: var(--blackMedium);
  --menuButtonHover: var(--blackPrimary);
  --menuButtonActive: var(--blackMajor);
  --menuButtonDisabled: var(--blackLight);
  --textMajor: var(--blackMajor);
  --textPrimary: var(--blackPrimary);
  --textMedium: var(--blackMedium);
  --buttonNormal: var(--brandPrimary);
  --buttonHover: var(--brandPrimaryMajor);
  --buttonPressed: var(--brandPrimaryMedium);
  --buttonDisabled: var(--blackLight);
  --headingMajor: var(--blackMajor);
  --headingPrimary: var(--blackPrimary);
  --headingLight: var(--whitePrimary);
  --headingBrandPrimary: var(--brandPrimary);
  --fontSizeHeading1: 48px;
  --fontSizeHeading2: 36px;
  --fontSizeHeading3: 28px;
  --fontSizeHeading4: 22px;
  --fontSizeTextMain: 16px;
  --fontSizeTextTag: 14px;
  --fontSizeMenu1: 20px;
  --fontSizeMenu2: 16px;
  --lineHeightHeading1: 48px;
  --lineHeightHeading2: 44px;
  --lineHeightHeading3: 36px;
  --lineHeightHeading4: 30px;
  --lineHeightTextMain: 24px;
  --lineHeightTextTag: 20px;
  --lineHeightMenu1: 28px;
  --lineHeightMenu2: 24px;
}

.heading1 {
  font-size: var(--fontSizeHeading1);
  line-height: var(--lineHeightHeading1);
  text-transform: uppercase;
  font-weight: 400;
}

.heading2 {
  font-size: var(--fontSizeHeading2);
  line-height: var(--lineHeightHeading2);
  text-transform: uppercase;
  font-weight: 400;
}

.heading3 {
  font-size: var(--fontSizeHeading3);
  line-height: var(--lineHeightHeading3);
  text-transform: uppercase;
  font-weight: 400;
}

.heading4 {
  font-size: var(--fontSizeHeading4);
  line-height: var(--lineHeightHeading4);
  text-transform: uppercase;
  font-weight: 400;
}

.text {
  font-size: var(--fontSizeTextMain);
  line-height: var(--lineHeightTextMain);
  font-weight: 400;
}

.tag {
  font-size: var(--fontSizeTextTag);
  line-height: var(--lineHeightTextTag);
  font-weight: 400;
}

.menu1 {
  font-size: var(--fontSizeMenu1);
  line-height: var(--lineHeightMenu1);
  text-transform: uppercase;
  font-weight: 400;
}

.menu2 {
  font-size: var(--fontSizeMenu2);
  line-height: var(--lineHeightMenu2);
  text-transform: uppercase;
  font-weight: 400;
}

.normal {
  font-weight: 400;
}

.medium {
  font-weight: 500;
}

.semibold {
  font-weight: 600;
}

.underline {
  text-decoration-skip-ink: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-thickness: auto;
}

main {
  flex-direction: column;
  display: flex;
}

.content {
  width: calc(100% - (var(--space-h-xl) * 2));
  padding: 0 var(--space-h-xl);
  gap: var(--space-v-xl);
  flex-direction: column;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
}

body.disableScroll {
  height: 100%;
  margin: 0;
  overflow: hidden;
}

@media (max-width: 800px) {
  :root {
    --space-v-xs: 4px;
    --space-v-s: 8px;
    --space-v-m: 12px;
    --space-v-l: 16px;
    --space-v-xl: 24px;
    --space-v-xxl: 32px;
    --space-h-xs: 4px;
    --space-h-s: 8px;
    --space-h-m: 12px;
    --space-h-l: 16px;
    --space-h-xl: 16px;
    --space-h-xxl: 16px;
    --fontSizeHeading1: 32px;
    --fontSizeHeading2: 26px;
    --fontSizeHeading3: 22px;
    --fontSizeHeading4: 18px;
    --lineHeightHeading1: 40px;
    --lineHeightHeading2: 34px;
    --lineHeightHeading3: 30px;
    --lineHeightHeading4: 26px;
  }
}