:root {
  /* TEXT COLOR */

  --colorWhite: #fbfbfb;
  --colorDark: #000;
  --colorDark-orchid: #3EBD93;
  --colorTelegray: #c9c9c9;
  --colorGreyMain: #a0a0a0;

  --colorBlack: #232323;
  --colorPearlescent: #818181;
  --colorBlue: #16A5CF;

  --colorManatee: #C1C1C1;
  
  --colorGrayBrown: #3f3f3f50;
  --colorManateeLight: #8e9ea8;
  --colorSrvlk: #eac69e;
  --colorSrvdl: #b59169;
  --colorGreenLite: #dcffc7;
  --colorGreyLite: #8c8983;


  /* UPD TEXT COLOR 2025 */
  --colorMain: #d9d6c9; /* ok */
  --colorGalk: #b4af9a; /* ok */
  --colorFwoolf: #d9d6c9; /* ok */
  --colorFwoolf-lite: #f5f4ec; /* ok */
  --colorFwoolf-black: #898575; /* ok */
  --colorFwoolf-border: #555249; /* ok */
  --colorCrayola: #7d7abe; /* ok */
  --colorBlack: #181512; /* ok */
  --colorBlacklite: #656565; /* ok */
  --colorBlackrgba: rgb(33 30 29 / 80%);
  --colorRed: #f23f42;
  --colorGreen: #8bc34a;

  /* ACCENT COLOR */
  --accent: #E0AF4C; /* ok */
  --accentlite: #ffb54e; /* ok */
  --preloader: #BEBCB7; /* ok */

  /* BACKGROUND COLOR */
  --bgColorMainGreySub: #262321; /* ok */
  --bgColorMainBlack: #181512; /* ok */
  --bgColorMainAside: #252220;/* ok */
  --bgColorMainAsideLite: #2d2a28; /* ok */
  --bgColorMainAsideTitle: #1c1917; /* ok */
  --background-ads: rgb(28 25 23 / 36%); /* ok */
  --background-main: #211E1C; /* ok */
  --bgColorServerLine: #68c233; /* ok */
  
  
  --bgGraphiteGray: #5454544d; /* ! */
  --bgBtnRadian: #F8F8F8;

  --background-main-page: #161616; /* ! */
  --bgColorMainWhite: #fbfbfb;
  --bgGrayBrown: #404040;
  --background-main-light-page: #3f3f3f50;
  --bgColorMaterial: #232323;
  --bgLightTelegray: #ccc;
  --bgAsphaltColor: #515050;
  --background-main-light-page: #3f3f3f50;
  --bgColorInput: #1C1917;
  --bgColorMainGrey: #3f3f3f;
  --bgColorMain-red: #b91f1f;
  --bgColorbtnserv: #4caf50;

  /* BORDER COLOR */
  --border-main-grey: #4f4f4f;
  --border-main-page: #303030;
  --border-modal: solid #323232;
  --border-main-ads: #232323;
  --border-main-accent: #a56200;
  --border-main-grey-lite: #303030;
  --border-aside: #1a1a1a;
  --border-aside-hover: #a0a0a0;

  /* HOVER */
  --hoverGrey: rgb(80 80 80 / 50%);
  --hover: #232323;
  --hoverAccentMain: #303030;

  /* SHADOW COLOR */
  --shadowHoverAccentMain: 0 0 5rem;

  /* FONT-FAMILY */
  --fontFamilyMain: "Rubik";

  /* FONT SIZE */
  --fontSize-XSmall: 9rem;
  --fontSize-XSmall-medium: 10rem;
  --fontSize-lite: 11rem; /* ! */
  --fontSize-small: 12rem;
  --fontSize-small-medium: 13rem;
  --fontSize-default: 14rem;
  --fontSize-middle-lite: 15rem;
  --fontSize-middle: 16rem;
  --fontSize-medium: 17rem;
  --fontSize-large: 18rem;
  --fontSize-large-medium: 20rem; /* ! */
  --fontSize-XLarge-small: 21rem;
  --fontSize-XLarge: 24rem;
  --fontSize-XLarge-medium: 25rem;
  --fontSize-big: 32rem; /* ! */
  --fontSize-big-update: 32rem; /* ! */
  --lineHeight-default: 21rem;

  /* BORDER RADIUS */
  --radiusMain: 5rem;
  --radiusMainLite: 3rem;

  /* TRANSITION */
  --transition-short: 0.1s ease; /* ! */
  --transition-default: 0.2s ease;
  --transition-cubick: 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  --transition-linear: 0.25s linear;

  /* RARITY COLORS */
  --rarity-common: #8c8983;
  --rarity-uncommon: #4a9eff;
  --rarity-rare: #a855f7;
  --rarity-epic: #ec4899;
  --rarity-legendary: #E0AF4C;

}

@media (max-width: 640px) {
  :root {
    /* FONT SIZE */
    --fontSize-XLarge: 20rem;
    --fontSize-big-update: 30rem; /* ! */
  }}