/*----------------------------------------------*\
    VARIABLES
	======

	@package yaybrigade

\*----------------------------------------------*/
/*----------------------------------------------*\
    COMPONENTS
	==========

	@package yaybrigade

\*----------------------------------------------*/
/* 
 *
 * / Breakpoints
------------------------------------------------*/
/* 368px, bigger phones */
/* 560px */
/* 800px */
/* 1008px, tablet vertical */
/* 1200px */
/* 1440px, desktop */
:root {
  --white: #EBEEF3;
  --transparent-white: rgba(235, 238, 243, 0.2);
  --transparent-yellow: rgba(247, 212, 113, 0.5);
  --tranparent-orange: rgba(244, 169, 48, 0.7);
  --yellow: #eedc54;
  --orange: #f4a930;
  --transparent: rgba(235, 238, 243, 0);
  --twilight: #000330;
  --light-gray: #2E3157;
}

:root {
  /* Minor Third (factor: 1.2)*/
  --size-010: .194rem;
  --size-020: .232rem;
  --size-030: .279rem;
  --size-040: .334rem;
  --size-050: .401rem;
  --size-060: .482rem;
  --size-070: .578rem;
  --size-080: .694rem;
  --size-090: .833rem;
  --size-100: 1rem; /* <-- Default */
  --size-200: 1.2rem;
  --size-300: 1.44rem;
  --size-400: 1.728rem;
  --size-500: 2.074rem;
  --size-600: 2.488rem;
  --size-700: 2.986rem;
  --size-800: 3.584rem;
  --size-900: 4.301rem;
}
@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;
  }
}