:root {
  --color-green: #bada55;
  --color-brown: #6b6659;
  --color-tan: #cbcbba;
  --color-black: #000;
  --color-white: #fff;
  --color-red: #b3151a;
  --color-orange: #fa0;

  --gradient-green: linear-gradient(to bottom,
    var(--color-green) 0%,
    color(var(--color-green) shade(40%)) 100%);

  --header-height: 6rem;
  --content-margin: 2rem;
  --spacing-margin: 1rem;

  --list-reset: {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  --inline-list: {
    @apply --list-reset;

    & li {
      list-style-type: none;
      display: inline-block;
      white-space: nowrap;
    }
  }
  --with-separator: {
    & li:after {
      content: '//';
      padding: 0 0.5rem;
    }

    & li:last-child:after {
      content: '';
    }
  }
}