/*--------------------------------------------------------------
# Variables 
--------------------------------------------------------------*/

:root {
  
 /* fonts */
 --font-inter-regular: InterRegular, sans-serif;
 --font-inter-bold: InterBold, sans-serif;
 --font-inter-semibold: InterSemiBold, sans-serif;

 /* font sizes */
 --font-size-base: 16px;
 --font-size-sm: 14px;
 --font-size-lg: 18px;
 --font-size-21xl: 40px;
 --font-size-xl: 20px;
 --font-size-41xl: 60px;
 --font-size-61xl: 80px;
 --font-size-5xl: 24px;
 --font-size-31xl: 50px;
 --font-size-13xl: 32px;
 --font-size-29xl: 48px;
 --font-size-17xl: 36px;
 --font-size-lgi: 19px;
 --font-size-11xl: 30px;
 

  /* Defult links color */
  --color-links: #8c33ff;
  --color-links-hover: #321359;

  /* Primay colors */
  --color-primary: #8c33ff;
  --color-primary-dark: #321359;
  --color-primary-dark-rgb: rgba(92, 1, 203, 0.05);

  /* Secondary colors */
  --color-secondary: #485664;
  --color-secondary-light: #8f9fae;
  --color-secondary-dark: #3a4753;
  --color-secondary-rgb: 72, 86, 100;
  --color-secondary-light-rgb: 143, 159, 174;
  --color-secondary-dark-rgb: 58, 71, 83;

   /* Default text color */
  --color-red: #f25100;
  --color-red-rgb: 223, 21, 4;
  --color-orange: #f25100;
  --color-orange-rgb: rgba(242, 81, 0, 0.1);
  --color-yellow: #ffc107;
  --color-yellow-rgb: 255, 193, 7;
  --color-white: #ffffff;
  --color-white-rgb: 255, 255, 255;
  --color-gray: #6c757d;
  --color-gray-rgb: 108, 117, 125;
  --color-gray-500: #06180c;
  --color-gray-100: #0a0412;
  --color-gray-200: #050209;
  --color-gray-300: rgba(5, 2, 9, 0.5);
  /* --color-gray-400: rgba(255, 255, 255, 0.2); */
  --color-gray-400: rgba(240, 240, 240, 0.2);
  --color-black: #000000;
  --color-black-rgb: 0, 0, 0;
  --color-midnightblue: #321359;
  --color-thistle: #ada0bd;
  --color-khaki: rgba(255, 222, 130, 0.6);
  --color-mediumspringgreen: rgba(0, 255, 190, 0.3);
  --color-lime: rgba(0, 255, 0, 0.3);
  --color-darkorange: rgba(229, 113, 0, 0.3);
  --color-lightsteelblue-100: #c8d2f7;
  --color-lightsteelblue-200: rgba(160, 168, 223, 0.3);
  --color-deepskyblue: rgba(0, 195, 255, 0.3);
  --color-orangered-200: rgba(242, 81, 0, 0.1);
  --color-whitesmoke: #f7f7f7;
  --color-fuchsia: rgba(255, 51, 222, 0.1);
  --color-mediumslateblue: rgba(51, 95, 255, 0.1);

  /* Paddings */
  --padding-xs: 12px;
  --padding-xl: 20px;
  --padding-21xl: 40px;
  --padding-364xl: 383px;
  --padding-81xl: 100px;
  --padding-61xl: 80px;
  --padding-9xs: 4px;
  --padding-base: 16px;
  --padding-70xl: 89px;
  --padding-57xl: 76px;
  --padding-5xs: 8px;
  --padding-3xs: 10px;
  --padding-172xl: 191px;
  --padding-46xl: 65px;
  --padding-89xl-5: 108.5px;
  --padding-33xl: 52px;
  --padding-8xs: 5px;
  --padding-62xl: 81px;
  --padding-2xl: 21px;
  --padding-7xl: 26px;

  /* Border radiuses */
  --br-xl: 20px;
  --br-xs: 12px;
  --br-21xl: 40px;

}