:root {
  /* Device dependent (desktop defaults) */
  --font-size-jumbo: 60px; /* 40/ 45 on not tablet/ desktop */
  --line-height-jumbo: 60px;

  --font-size-h3: 25px;
  --line-height-h3: 30px;

  --home-button-vertical-pad: 17px;
  --home-button-horizontal-pad: 24px;
  --home-button-text-display: block;
  --home-button-text-margin: 8px;
  --home-display-header-title-p: block;

  --default-pad: 32px;
  --gutterwidth: 32px;
  --max-columns: 4;

  --menu-height: 40px;
  --header-title-top-padding: 96px;
  --header-title-bottom-padding: 64px;
  --footer-flex-direction: row;
  --footer-flex-align: center;
  --footer-logo-order: 4;
  --footer-flex-gap: var(--half-pad);

  --grid-2-3-columns: 2fr 3fr;
  --grid-2-1-columns: 2fr 1fr;
  --grid-1-2-columns: 1fr 2fr;
  --grid-1-1-columns: 1fr 1fr;
  --grid-5-7-columns: 5fr 7fr;
  --grid-7-5-columns: 7fr 5fr;

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

  --sources-columns: 3;
  --observation-start-column: 2;
  --observation-boxes-flex-direction: row;

  /* TODO: Fixed or device dependent? */
  --font-size-regular-no-zoom: 16px;
  --line-height-regular-no-zoom: 24px;

  --font-size-big-no-zoom: 19px;
  --line-height-big-no-zoom: 27px;

  --font-size-small-no-zoom: 14px;
  --line-height-small-no-zoom: 20px;

  --font-size-super-small: 12px;
  --line-height-super-small: 16px;


  --font-size-h1: 36px;
  --line-height-h1: 40px;

  --font-size-h2: 30px;
  --line-height-h2: 36px;

  --font-size-h4: 22px;
  --line-height-h4: 28px;

  --font-size-h5: 19px;
  --line-height-h5: 27px;

  /* Derived */
  --default-font-zoom: 1;
  --zoomed-font-zoom: 1.5;
  --font-zoom: var(--default-font-zoom);

  --font-size-regular: calc(var(--font-size-regular-no-zoom) * var(--font-zoom));
  --line-height-regular: calc(var(--line-height-regular-no-zoom) * var(--font-zoom));

  --font-size-big: calc(var(--font-size-big-no-zoom) * var(--font-zoom));
  --line-height-big: calc(var(--line-height-big-no-zoom) * var(--font-zoom));

  --font-size-small: calc(var(--font-size-small-no-zoom) * var(--font-zoom));
  --line-height-small: calc(var(--line-height-small-no-zoom) * var(--font-zoom));

  --half-pad: calc(var(--default-pad) / 2);
  --double-pad: calc(var(--default-pad) * 2);
  /* Fixed */
  --zoomed-color: inherit;
  --unzoomed-color: #ccc;
  --white: #fff;
  --footer-white: #fbfbfb;
  --dark-footer-transparent-white: #ffffff73;
  --light-grey: #d1d1d1;
  --grey: #a9a9a9;
  --black: #27313c;

  --peace: #98bc00;
  --happy: #ffcf4a;
  --fun: #ffb546;
  --stress: #ff7600;
  --pain: #cb4f4f;

  --mild: #edf4f8;
  --character: #cde8f4;
  --chill: #3bb4e7;
  --relax: #2f99c6;

  --shadow: 0 10px 15px -3px rgba(0,0,0,.1),
            0 4px 6px -2px rgba(0,0,0,.05),
            0 -2px 8px 0 rgba(79,79,79,.05);

  --shadow-hover: 0 12px 18px -3px rgba(0,0,0,.25),
                  0 4px 6px -2px rgba(0,0,0,.07),
                  0 -2px 10px 0 rgba(81,81,81,.1);

  --font-weight-bold: 700;
  --tablet-min: 768px;
  --normal-radius: 8px;
  --small-radius: 4px;

  --dels-li-bottom-margin: 24px;
}


/* Tablet */
@media (max-width: 1024px) {
    :root {
        --font-size-jumbo: 40px;
        --line-height-jumbo: 45px;

        --font-size-h3: 25px;
        --line-height-h3: 30px;

        --home-button-vertical-pad: 12px;
        --home-button-horizontal-pad: 18px;
        --home-button-text-display: block;
        --home-button-text-margin: 8px;
        --home-display-header-title-p: block;

        --default-pad: 24px;
        --gutterwidth: 24px;

        --max-columns: 2;
        --menu-height: 40px;

        --header-title-top-padding: 48px;
        --header-title-bottom-padding: 32px;
        --footer-flex-direction: row;
        --footer-flex-align: center;
        --footer-logo-order: 4;
        --footer-flex-gap: var(--half-pad);
        --grid-2-3-columns: 2fr 3fr;
        --grid-2-1-columns: 2fr 1fr;
        --grid-1-2-columns: 1fr 2fr;
        --grid-1-1-columns: 1fr 1fr;
        --grid-5-7-columns: 5fr 7fr;
        --grid-7-5-columns: 7fr 5fr;
        --sources-columns: 2;
        --observation-start-column: 1;
        --observation-boxes-flex-direction: column;
    }
}

/* Mobile */
@media (max-width: 768px) {
    :root {
        --font-size-jumbo: 22px;
        --line-height-jumbo: 28px;

        --font-size-h3: 18px;
        --line-height-h3: 22px;

        --home-button-vertical-pad: 9px;
        --home-button-horizontal-pad: 12px;
        --home-button-text-display: none;
        --home-button-text-margin: 0;
        --home-display-header-title-p: none;

        --default-pad: 16px;
        --gutterwidth: 16px;

        --max-columns: 1;
        --menu-height: 34px;

        --header-title-top-padding: 32px;
        --header-title-bottom-padding: 24px;
        --footer-flex-direction: column;
        --footer-flex-align: start;
        --footer-logo-order: 2;
        --footer-flex-gap: 0;
        --grid-2-3-columns: 1fr;
        --grid-2-1-columns: 1fr;
        --grid-1-2-columns: 1fr;
        --grid-1-1-columns: 1fr;
        --grid-5-7-columns: 1fr;
        --grid-7-5-columns: 1fr;
        --sources-columns: 1;
        --observation-start-column: 1;
        --observation-boxes-flex-direction: column;
    }
}