@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&display=swap');

:root {
  /* BUTTON STYLE */
  --btnPadding:0.5em 1em 0.5em 1em;
  --btnSidePadding: 1em;
  --btnTopPadding: 0.5em;
  --backgroundColor:white;
  --grey0: rgb(242, 242, 242);
  --grey1:rgb(233, 233, 233);
  --grey2:rgb(221, 221, 221);
  --grey3:rgb(209, 209, 209);

  --textColor0:white;
  --textColor1:black;

  --accentColor0:rgb(0, 185, 163);
  --accentColor1:rgb(0, 169, 149);


  /* GLOBAL ATTRIBUTES */
  --font: 'Atkinson Hyperlegible', sans-serif;
  --headerFont: 'Atkinson Hyperlegible', sans-serif;

  --letterHeight:1.5em;
  --letterSpacing:-0.5px;
  --headerLetterSpacing:-0.5px;

  --margin: 5px;
  --padding: 15px;

  /* ANIMATION */
  --transitionSpeed: 0.5s;

  /* GRID */
  --gridGap: 5px;

  /* BORDER */
  --borderRadius: 5px;
  --borderWidth: 1px;
  --border: var(--borderWidth) solid var(--grey1);

  /* BOX SHADOW */
  --lightBoxShadow: 0px 1px 3px var(--grey1);
  --boxShadow: 0px 1px 5px var(--grey2);
  --heavyBoxShadow: 0px 8px 15px var(--grey3);
}