/* =======================
Font Family area
======================= */
@font-face {
  font-family: "code-regular";
  src: url("/assets/common/fonts/Coda-Regular.ttf") format("truetype");
}

@font-face {
  font-family: "code-extrabold";
  src: url("/assets/common/fonts/Coda-ExtraBold.ttf") format("truetype");
}

@font-face {
  font-family: "jetbrains";
  src: url("/assets/common/fonts/JetBrainsMono-VariableFont_wght.ttf")
    format("truetype");
}

@font-face {
  font-family: "montserrat";
  src: url("/assets/common/fonts/Montserrat-VariableFont_wght.ttf")
    format("truetype");
}

@font-face {
  font-family: "nunito";
  src: url("/assets/common/fonts/Nunito-VariableFont_wght.ttf")
    format("truetype");
}

@font-face {
  font-family: "sanchez";
  src: url("/assets/common/fonts/Sanchez-Regular.ttf") format("truetype");
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: var(--atf-transparent) !important;
  -webkit-touch-callout: none;
}

/* Base Body */
html,
body {
  overflow-x: hidden;
  overflow-y: auto;
}

body {
  min-height: 100vh;
  background-color: var(--atf-primary);
  font-family: var(--atf-font-nuni);
  outline: none;
}

:root {
  /* ==== font-family ==== */
  --atf-font-coda: "code-regular", sans-serif;
  --atf-font-jet: "jetbrains", sans-serif;
  --atf-font-monts: "montserrat", sans-serif;
  --atf-font-nuni: "nunito", sans-serif;
  --atf-font-sanc: "sanchez", sans-serif;

  /* ==== color area ==== */

  /* main colors */
  --atf-primary: #0f0f0f;
  --atf-secondary: #1a60fe;
  --atf-accent: #014cf6;
  --atf-link: #0135ad;

  /* dark colors */
  --atf-black: #000000;
  --atf-darkest-blue: #001647;
  --atf-darkest-blue-v2: #001c5b;
  --atf-darkest-blue-v3: #002370;
  --atf-darkest-blue-v4: #00091e;

  /* light colors */
  --atf-white: #ffffff;
  --atf-OffWhite: #faf9f6;
  --atf-semi-OffWhite: #faf9f673;
  --atf-text: #949494;

  /* Ui Colors */
  --atf-border: #353535;
  --atf-border-v2: #838383;
  --atf-border-v3: #555555;

  /* notice colors */
  --atf-red: #c20000;
  --atf-green: #00991f;

  /* RGBA Color */
  --atf-transparent: transparent;
  --atf-semi-trans: rgba(255, 255, 255, 0.098);
  --atf-dark-trans-v1: rgb(0 0 0 / 44%);
  --atf-dark-trans-v2: rgb(0 0 0 / 73%);
}

/* ============ 
LENIS FIX 
============  */
html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

/* ========================================
   CUSTOM NATIVE SCROLLBAR
======================================== */

html {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}

/* Chrome / Edge / Safari */

html::-webkit-scrollbar {
  width: 10px;
  height: 5px;
}

html::-webkit-scrollbar-track {
  background: transparent;
}

html::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 100px;
}

/* Visible while scrolling */

html.is-scrolling {
  scrollbar-color: var(--atf-OffWhite) transparent;
}

html.is-scrolling::-webkit-scrollbar-thumb {
  background: var(--atf-OffWhite);
}

html.is-scrolling::-webkit-scrollbar-track {
  background: transparent;
}

/* ============ 
Custom Classes 
============  */
.cp {
  cursor: pointer;
}

.inner {
  width: clamp(280px, 93%, 1300px) !important;
}