:root {
  /* COLORS */
  --main-back-color: #F6F6F6;
  --main-front-color: #707070/*#333333*/;
  --alt-back-color: #6686BD/*#355992*/;
  --old-alt-back-color: #355992;
  --alt-front-color: #EE342D;
  --info-color: #355992;
  --mild-warning-color: #FFAC33;
  --success-color: #5EAC35;
  --warning-color: #EE342D;

  --hover-opacity: calc(2 / 3);

  /* GRADIENTS */
  --main-grad-dir: to right;
  --main-grad-from: var(--main-back-color) 50%;
  --main-grad-to: hsl(from var(--old-alt-back-color) h s calc(l * 2.25));
  --alt-grad-dir: to right;
  --alt-grad-from: hsl(from var(--old-alt-back-color) h s calc(l * 1.35));
  --alt-grad-from-offset: var(--alt-grad-from) 30%;
  --alt-grad-light-from: rgb(from var(--alt-grad-from) r g b / var(--hover-opacity));
  --alt-grad-to: hsl(from var(--alt-front-color) h s calc(l * 1.35));
  --alt-grad-light-to: rgb(from var(--alt-grad-to) r g b / var(--hover-opacity));

  --max-width: 1024px;
  --max-width-with-padding: calc(var(--max-width) + (2 * var(--larger-size)));
  --padding-for-max-width: var(--larger-size);
  
  /* REFERENCE SIZE */
  --reference-size: 1rem;

  /* DISTANCES */
  --smaller-distance: calc(5 * var(--reference-size));
  --small-distance: calc(7.5 * var(--reference-size));
  --medium-distance: calc(10 * var(--reference-size));
  --large-distance: calc(15 * var(--reference-size));
  --larger-distance: calc(20 * var(--reference-size));
  --great-distance: calc(30 * var(--reference-size));

  /* GENERAL SIZES */
  --micro-size: calc(0.25 * var(--reference-size));
  --mini-size: calc(0.5 * var(--reference-size));
  --smaller-size: calc(0.75 * var(--reference-size));
  --small-size: calc(1 * var(--reference-size));
  --medium-size: calc(1.5 * var(--reference-size));
  --large-size: calc(1.75 * var(--reference-size));
  --larger-size: calc(2.5 * var(--reference-size));
  --great-size: calc(4 * var(--reference-size));

  /* LINES */
  --small-line: 1px;
  --medium-line: 2px;
  --big-line: 4px;

  /* FONTS */
  --smaller-font: calc(0.8 * var(--reference-size));
  --small-font: calc(0.9 * var(--reference-size));
  --normal-font: calc(1 * var(--reference-size));
  --large-font: calc(1.1 * var(--reference-size));
  --larger-font: calc(1.2 * var(--reference-size));
  --great-font: calc(1.5 * var(--reference-size));
  --greater-font: calc(2 * var(--reference-size));
  --mega-font: calc(3 * var(--reference-size));
  --giga-font: calc(4 * var(--reference-size));

  --main-font-family: "Roboto", "Gill Sans", "Helvetica", "Arial", "Lucida", sans-serif;

}

/* For browsers that don't support CSS variables */
@supports not (--custom: property) {
  :root {
    /* Fallback values for browsers that don't support CSS variables */
    --main-back-color: #F6F6F6;
    --main-front-color: #707070;
    --alt-back-color: #6686BD;
    --alt-front-color: #EE342D;
    --info-color: #355992;
    --mild-warning-color: #FFAC33;
    --success-color: #5EAC35;
    --warning-color: #EE342D;
    --hover-opacity: 0.6667;
    --reference-size: 16px;
    --smaller-distance: 80px;
    --small-distance: 120px;
    --medium-distance: 160px;
    --large-distance: 240px;
    --larger-distance: 320px;
    --great-distance: 480px;
    --micro-size: 4px;
    --mini-size: 8px;
    --smaller-size: 12px;
    --small-size: 16px;
    --medium-size: 24px;
    --large-size: 28px;
    --larger-size: 40px;
    --great-size: 64px;
    --small-line: 1px;
    --medium-line: 2px;
    --big-line: 4px;
    --smaller-font: 12.8px;
    --small-font: 14.4px;
    --normal-font: 16px;
    --large-font: 17.6px;
    --larger-font: 19.2px;
    --great-font: 24px;
    --greater-font: 32px;
    --mega-font: 48px;
    --giga-font: 64px;
  }
}