:root {
  /* light theme color */
  --light-background: #fff;
  --light-background-secondary: #eaeaea;
  --light-header: #fafafa;
  --light-color: #222;
  --light-color-secondary: #999;
  --light-border-color: #dcdcdc;

  /* dark theme colors */
  --dark-background: #292a2d;
  --dark-background-secondary: #3b3d42;
  --dark-header: #252627;
  --dark-color: #a9a9b3;
  --dark-color-secondary: #73747b;
  --dark-border-color: #4a4b50;

  /* variables for js, must be the same as these in @custom-media queries */
  --phoneWidth: (max-width: 684px);
  --tabletWidth: (max-width: 900px);
}

@custom-media --phone (width < 684px);
@custom-media --tablet (width < 900px);

@define-mixin greater-icon $stroke-width: 3px, $width: .95rem, $height: 100% {
  .greater-icon {
    width: $width;
    height: $height;

    path {
      stroke: currentColor;
      stroke-width: $stroke-width;
    }
  }
}

/* HOW TO USE */

/*@media (--phone) {*/
  /*margin-top: 0;*/
/*}*/