:root {
  /* font family style */
  --font-primary: "Montserrat", sans-serif;
  /* color style */
  --clr-body: var(--clr-white-rgba);
  --clr-black-rgba: 0, 0, 0;
  --clr-black: var(--clr-black-rgba);
  --clr-white-rgba: 255, 255, 255;
  --clr-white: var(--clr-white-rgba);
  --clr-dark-knight: #171c32;
  --clr-circumorbital-ring: #6758c2;
  --clr-circumorbital-ring-rgb: 103, 88, 194;
  --clr-deep-velvet: #2f3347;
  --clr-wind-cave: #686b7a;
  --clr-sovereign-red: #d1293e;
  --clr-wallflower-white: #e3e3e6;
  --clr-dasyphyllous-green: #0bd637;
  --clr-ruined-smores: #0e0e12;

  /* font size */
  --font-size: 10px;

  /* shadow */
  --box-shadow-one: 2px 2px 0px 0px #3588b2;

  /* spacing style */
  --space-xxl: 12rem;
  --space-xl: 8rem;
  --space-lg: 6rem;
  --space-md: 4rem;
  --space-sm: 30px;

  /* radius */
  --radius-xxl: 4rem;
  --radius-xl: 30px;
  --radius-lg: 24px;
  --radius-md: 16px;
  --radius-sm: 12px;

  /* subheader style */
  --headerHeight: 100px;

  /* transition-smooth */
  --transition-smooth: all 0.3s;

  /* input size */
  --input-size: 57px;

  /* clients says traiangle */
  --clients-says-traiangle-size: 80px;
}