:root {
  /*green*/
  --light-green: #a4ffd8;
  --medium-green: #53dbaa;
  --dark-green: #43b38d;
  /* grey*/
  --mouse-grey: #fafafb;
  --athens-grey: #eff2f5;
  --smoke-grey: #e4e6eb;
  --ghost-grey: #ced2d8;
  --iron-grey: #d0d3d9;
  --metal-grey: #cccccc;
  --regent-grey: #7f8d9a;
  --snape-grey: #556c7b;
  --charcoal-grey: #363e51;
  --shadow-grey: #2e3542;
  /*purple*/
  --purple: #8267d6;

  /*yellow*/
  --yellow: #f39d35;
  /*black & white*/
  --white: #fff;
  --black: #000;
  /* typography */
  --thin: 100;
  --light: 300;
  --regular: 400;
  --medium: 500;
  --bold: 700;
  --extra-bold: 900;
  /* nav */
  --nav-height: 60px;
  /* margin */
  /* row gap */
  --row-gap-1: 10px;
  --row-gap-2: 15px;
  --row-gap-3: 30px;
  --row-gap-4: 40px;
  --row-gap-5: 50px;
  --row-gap-6: 60px;
  --row-gap-7: 70px;
  --row-gap-8: 80px;
  --row-gap-9: 90px;
  --row-gap-10: 100px;
  /* width */
  --panel-width: 300px;
}