:root {
  --clr-grey-1: hsl(209, 0%, 16%);
  --clr-grey-2: hsl(211, 0%, 23%);
  --clr-grey-3: hsl(209, 0%, 30%);
  --clr-grey-4: hsl(209, 0%, 39%);
  --clr-grey-5: hsl(210, 0%, 49%);
  --clr-grey-6: hsl(209, 0%, 60%);
  --clr-grey-7: hsl(211, 0%, 70%);
  --clr-grey-8: hsl(210, 0%, 80%);
  --clr-grey-9: hsl(212, 0%, 89%);
  --clr-grey-10: hsl(210, 0%, 96%);
  --clr-white: #fff;
  --clr-red-dark: hsl(360, 67%, 44%);
  --clr-red-light: hsl(360, 71%, 66%);
  --clr-green-dark: hsl(125, 67%, 44%);
  --clr-green-light: hsl(125, 71%, 66%);
  --clr-black: #222222;

  /* my colors */
  --clr-legacy-grey-very-light: hsl(0, 0%, 90%);
  --clr-legacy-grey: hsl(0, 0%, 14%);
  --clr-legacy-grey-lighter: hsl(0, 0%, 25%);
  --clr-legacy-red: rgb(238, 78, 73);
  --clr-legacy-red-lighter: rgb(255, 87, 87);
  --clr-legacy-yellow: rgb(255, 209, 102);
  --clr-legacy-green-lighter: hsl(80, 65%, 50%);
  --clr-legacy-green: rgb(135, 183, 39);
  --clr-legacy-green-darker: hsl(80, 65%, 40%);

  --clr-pandacom-grey: #494848;
  --clr-pandacom-grey-new: #414141;
  --clr-pandacom-dark-grey: #262626;
  --clr-pandacom-light-grey: #747474;
  --clr-pandacom-orange: #ffa428;
  --clr-pandacom-darker-orange: #f58f1f;
  --clr-pandacom-brighter-orange: #ffa62f;
  --clr-pandacom-bg-orig: #e3e3e3;

  /* other settings */
  --transition: all 0.3s linear;
  --fast-transition: all 0.1s linear;

  /* settings for components */
  --navbar-height: 95px;
}

@import url('https://fonts.googleapis.com/css2?family=Lato&family=Roboto:wght@300;400;500&display=swap');

html,
body {
  padding: 0;
  margin: 0;
  font-family: 'Lato', sans-serif;
  background: var(--clr-pandacom-bg-orig);
  color: var(--clr-pandacom-light-grey);
}

a {
  color: inherit;
  text-decoration: none;
}

* {
  box-sizing: border-box;
}

/*
  UTILITY CLASSES
*/

.mirrorX {
  transform: scale(-1, 1);
}

.clickable:hover {
  cursor: pointer;
}

.invertSvgColor {
  filter: invert(100%) saturate(100%) brightness(100%) contrast(100%);
}