/* 
 *
 * / Components
------------------------------------------------*/
/* Breakpoints */
/* 368px, bigger phones */
/* 560px */
/* 800px */
/* 1008px, tablet vertical */
/* 1200px */
/* 1440px, desktop */
/* 
 *
 * ANCHOR:  Variables
------------------------------------------------*/
:root {
  --color-background-dark: #68113F;
  --color-background-light: #E4EFC1;
  --color-accent-1: #b50675;
  --color-accent-2: #ea8ea8;
  --color-accent-3: #CC96FF;
  --color-flour-light: #B32DCE;
  --color-flour: #A923BA;
  --color-flour-dark: #8B0FB0;
  --color-liquid-light: #F8A731;
  --color-liquid: #F8931D;
  --color-liquid-dark: #FF7F09;
  --color-egg-light: #FF5F28;
  --color-egg: #FF4B14;
  --color-egg-dark: #F52D00;
  --color-fat-light: #FFFA4B;
  --color-fat: #FFE62D;
  --color-fat-dark: #F7C90F;
  --color-sugar-light: #FF53B8;
  --color-sugar: #FF359A;
  --color-sugar-dark: #E1197C;
  --color-page-bg: var(--color-background-dark);
  --color-text: var(--color-background-light);
  --color-nav-active-bg: var(--color-accent-2);
  --color-nav-active-text: var(--color-background-dark);
  --color-nav-active-border: var(--color-accent-2);
  --color-icon: var(--color-accent-2);
  --color-background-highlight: #811b51;
  --color-background-shadow: #580b2f;
}

body.view-calculator {
  --color-page-bg: var(--color-background-light);
  --color-text: var(--color-background-dark);
  --color-nav-active-bg: var(--color-accent-1);
  --color-nav-active-text: var(--color-background-light);
  --color-nav-active-border: var(--color-accent-1);
  --color-icon: var(--color-accent-1);
  --color-background-highlight:#f0facd;
  --color-background-shadow: #d2dcaf;
}

:root {
  /* Major Third (factor: 1.25)*/
  --size-010: .134rem;
  --size-020: .168rem;
  --size-030: .21rem;
  --size-040: .262rem;
  --size-050: .328rem;
  --size-060: .41rem;
  --size-070: .512rem;
  --size-080: .64rem;
  --size-090: .8rem;
  --size-100: 1rem; /* <-- Default */
  --size-200: 1.25rem;
  --size-300: 1.563rem;
  --size-400: 1.953rem;
  --size-500: 2.441rem;
  --size-600: 3.052rem;
  --size-700: 3.815rem;
  --size-800: 4.768rem;
  --size-900: 5.96rem;
  --size-1000: 7.45rem;
  --size-1100: 9.31rem;
  --size-1200: 11.63rem;
}
@media screen and (min-width: 23rem) {
  :root {
    font-size: 1.1rem;
  }
}
@media screen and (min-width: 35rem) {
  :root {
    font-size: 1.2rem;
  }
}
@media screen and (min-width: 50rem) {
  :root {
    font-size: 1.3rem;
  }
}
@media screen and (min-width: 63rem) {
  :root {
    font-size: 1.4rem;
  }
}
@media screen and (min-width: 75rem) {
  :root {
    font-size: 1.5rem;
  }
}
@media screen and (min-width: 90rem) {
  :root {
    font-size: 1.6rem;
  }
}