$min_width: 320px; 
$max_width: 1200px;

:root {
  //////////////
  /////FONT/////
  //////////////

  --askella-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI","Roboto", "Helvetica Neue", Arial, sans-serif,"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

  //////////////
  /////PANEL////
  //////////////
  --askella-default-bg-color: hsl(
  var(--askella-panel-color-h),
  var(--askella-panel-color-s),
  var(--askella-panel-color-l));

  // FONT ON PANEL
  --askella-contrastThreshold: 60%;
  --askella-switch: calc((var(--askella-panel-color-l) - var(--askella-contrastThreshold)) * -100);
  --askella-font-color: hsl(
  var(--askella-panel-color-h),
  0%, 
  var(--askella-switch));

  --askella-font-color-opacity-60: hsla(
  var(--askella-panel-color-h),
  0%, 
  var(--askella-switch),
  0.6);

  //////////////
  /////MENU/////
  //////////////

  --askella-menu-color-h: 270;
  --askella-menu-color-s: 70%;
  --askella-menu-color-l: 50%;

  --askella-menu-bg-color: hsl(
  var(--askella-menu-color-h),
  var(--askella-menu-color-s),
  var(--askella-menu-color-l));

  --askella-menu-bg-color-lighten-50: hsla(
  var(--askella-menu-color-h),
  var(--askella-menu-color-s),
  var(--askella-menu-color-l),
  0.75);

  --askella-menu-bg-color-lighten-25: hsla(
  var(--askella-menu-color-h),
  var(--askella-menu-color-s),
  var(--askella-menu-color-l),
  0.25);

  --askella-menu-bg-color-lighten-15: hsla(
  var(--askella-menu-color-h),
  var(--askella-menu-color-s),
  var(--askella-menu-color-l),
  0.15);

  --askella-menu-bg-color-lighten-5: hsla(
  var(--askella-menu-color-h),
  var(--askella-menu-color-s),
  var(--askella-menu-color-l),
  0.05);

  --askella-menu-bg-color-lighten-2: hsla(
  var(--askella-menu-color-h),
  var(--askella-menu-color-s),
  var(--askella-menu-color-l),
  0.02);

  --askella-switch-sec-col: calc(
  (var(--askella-menu-color-l) - var(--askella-contrastThreshold)) * -100);

  --askella-menu-sec-color-angle: var(--askella-menu-color-h);
  --askella-menu-sec-color-sat: var(--askella-menu-color-s);
  --askella-menu-sec-color-lig: var(--askella-switch-sec-col);
  --askella-menu-sec-color-a: 0.1;

  --askella-menu-sec-color: hsla(
  var(--askella-menu-sec-color-angle),
  var(--askella-menu-sec-color-sat),
  var(--askella-menu-sec-color-lig),
  var(--askella-menu-sec-color-a)
  );
  --askella-menu-sec-hover-color: hsla(
  var(--askella-menu-sec-color-angle),
  var(--askella-menu-sec-color-sat),
  calc(var(--askella-menu-sec-color-lig) - 0%),
  calc(var(--askella-menu-sec-color-a) / 1.5)
  );

  --askella-menu-sec-color-less-opacity: hsla(
  var(--askella-menu-sec-color-angle),
  var(--askella-menu-sec-color-sat),
  var(--askella-menu-sec-color-lig),
  1
  );
  //FONT ON MENU
  --askella-switch-menu-font: calc((var(--askella-menu-color-l) - var(--askella-contrastThreshold)) * -100);
  --askella-menu-font-color: hsl(211, 50%, var(--askella-switch-menu-font));

  // BRAND
  --askella-sidebar-brand-color: var(--askella-menu-font-color);

  --askella-menu-ul-li-background-color: hsla(
  var(--askella-menu-sec-color-angle),
  var(--askella-menu-sec-color-sat),
  var(--askella-menu-sec-color-lig),
  0.04
  );
  --menu-ul-ul-background-color: var(--askella-menu-ul-li-background-color);

  //MISC
  --askella-hamburger-color: var(--askella-font-color);

  //HEADER-HR-COLOR
  --askella-col-side: var(--askella-default-bg-color);
  --askella-col-middle: var(--askella-font-color);

  //WEBKIT-SCROLLBAR-COLORS
  --webkit-scrollbar-track-color: #f1f1f1;
  --webkit-scrollbar-thumb: hsl(0, 0%, 50%);
  --webkit-scrollbar-thumb-hover: hsl(0, 0%, 35%);

  --askella-link-color: hsl(
  var(--askella-link-color-h),
  var(--askella-link-color-s),
  var(--askella-link-color-l));

  --askella-link-color-hover: hsl(
  var(--askella-link-color-h),
  var(--askella-link-color-s),
  calc(var(--askella-link-color-l) - 15%));
  --askella-link-color-visited: hsl(
  calc(var(--askella-link-color-h) + 0),
  var(--askella-link-color-s),
  var(--askella-link-color-l)); 
  --askella-menu-width: 320px;
}