:root {
  /* COLORS */

  --border-color: #333;
  --app-body-color: #191919;
  --app-background-color: #212121;
  --app-text-color: white;
  --scrollbar-color: rgba(255, 255, 255, .15);
  --scrollbar-hover-color: rgba(255, 255, 255, .25);
  --scrollbar-active-color: rgba(255, 255, 255, .35);

  --modal-background-color: #333;
  --modal-border-color: #444;
  
  --primary-color: #0071e3;
  --primary-flat-color: #cce6ff;
  --green-color: #00a859;
  --green-flat-color: #6fffbc;
  --red-color: #ff1c4a;
  --secondary-color: #555;
  --secondary-flat-color: #e0e0e0;
  --purple-color: #ff46ff;
  --purple-flat-color: #f632ff40;
  --orange-color: #e8aa00;
  --orange-flat-color: #ff843240;

  --gold-color: #ffce79;
  --gold-dark-color: #ffbd4a;
  --gold-black-color: #5e3f09;
  --gold-flat-color: #ffad1f;

  --flat-color: #2a2a2a;
  --label-color: rgba(255, 255, 255, .5);
  --link-color: #cedeff;

  --accent-color: #90b5ff;
  --accent-flat-color: #90b5ff22;

  /* ANIMATIONS */

  --transition-100: all .1s ease-in-out;
  --transition-300: all .3s ease-in-out;

  /* SIZES */

  --badge-radius: 6px;
  --element-radius: 10px;
  --block-radius: 16px;
  --app-padding: 20px;
}

@keyframes shine {
  100% {
    transform: skewX(-20deg) translateX(125%);
  }
}