:root {
  --q-font: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Helvetica',
    sans-serif;

  --q-dark: 24, 25, 34;
  --q-dark-accent: 33, 34, 44;
  --q-color: 29, 29, 32;
  --q-subcolor: 100, 101, 111;
  --q-blue: 0, 81, 255;
  --q-main: var(--q-blue);
  --q-placeholder: #e2e2e7;
  --q-background: 245, 245, 248;
  --q-light: 249, 249, 250;
  --q-fair-text: 196, 197, 204;
  --q-white: 255, 255, 255;
  // shadow
  --q-wow-shadow: 0px 7px 21px rgba(125, 142, 167, 0.3);

  /* Effect styles */
  --q-card-shadow: 0px 2px 4px rgba(0, 0, 0, 0.06);
  --q-fly-shadow: 0px 14px 64px rgba(0, 0, 0, 0.1);

  /* sizes */
  --q-global-panel-height: 3.2em;
  --q-side-padding: 0.5em;
  --q-window-padding: 1em;

  /* Font-size styles */
  --q-g-title: 3em;
  --q-m-title: 1.875em;
  --q-s-title: 1.125em;
  --q-r-text: 1em;
  --q-s-text: 0.875em;
  --q-xs-text: 0.75em;

  /* Cards styles */
  --q-border-radius: 20px;
  --q-small-border-radius: 10px;
  --q-xs-border-radius: 6px;
}
$blue: #0068ff;
$main: $blue;
$secondary: #5f6368;
$lightGray: #f1f3f4;
$red: rgb(204, 92, 92);
$green: rgb(137, 204, 92);
$fair: rgb(230, 231, 236);

.q-g-title {
  font-size: var(--q-g-title);
  font-weight: 700;
}
.q-m-title {
  font-size: var(--q-m-title);
  font-weight: 700;
}
.q-s-title {
  font-size: var(--q-s-title);
  font-weight: 600;
}
.q-r-text {
  font-size: var(--q-r-text);
}
.q-s-text {
  font-size: var(--q-s-text);
  font-weight: 600;
}
.q-xs-text {
  font-size: var(--q-xs-text);
  font-weight: 600;
}

// colors
.q-subcolor {
  color: rgba(var(--q-subcolor), 1);
}

@media screen and (max-width: 767px) {
  :root {
    --q-window-padding: 0.5em;
  }
}