/* =====================
   CSS Variables
====================== */
:root {
  --main-bg: #1a1a1a;
  --main-bg2: #2d2d2d;
  --main-bg3: #2a2a2a;
  --main-bg4: #1e1e1e;

  --main-purple: #d1a3ff;

  --main-dark: #3d3d3d;

  --main-white: #ffffff;
  --main-white2: rgba(255, 255, 255, 0.6);
  --main-white3: rgba(255, 255, 255, 0.8);
  --main-white4: rgba(255, 255, 255, 0.7);
  --main-white5: rgba(255, 255, 255, 0.5);
  --main-white6: rgba(255, 255, 255, 0.9);

  --main-red: rgba(128, 0, 128);
  --main-red2: #b02a37;
  --main-red3: #e53637;
  --main-red4: #f44336;
  --main-red5: #d32f2f;
  --main-red6: rgba(220, 53, 69, 0.5);
  --main-red7: rgba(220, 53, 69, 0.9);
  --main-red8: #a71e2a;
  --main-red9: rgba(220, 53, 69, 0.8);

  --main-blue: #3498db;
  --main-blue2: #2196F3;
  --main-blue3: #1976D2;

  --main-btn-hover: rgba(128, 0, 128);
  --main-btn-hove2: #ff6b6b;

  --coler-1: rgba(128, 0, 128, 1);
  --coler-2: var(--back-coler13);
  --coler-3: rgba(220, 53, 69, 0.1);
  --coler-4: #667eea;
  --coler-5: rgba(75, 0, 130, 1);
  --coler-6: rgba(128, 0, 128, 0.3);
  --coler-7: rgba(255, 255, 255, 0.4);
  --coler-8: #764ba2;
  --coler-9: rgba(102, 126, 234, 0.3);
  --coler-10: #333;
  --coler-11: #ccc;

  --coler-Yellow: #ffc107;
  --coler-Yellow2: #ffd700;
  --coler-Yellow3: #ff8c00;
  --coler-Yellow4: #ffd93d;

  --coler-box-shadow: rgba(128, 0, 128, 0.4);
  --coler-box-shadow2: rgba(220, 53, 69, 0.6);
  --coler-box-shadow3: rgba(220, 53, 69, 0.15);

  --coler-border: rgba(128, 0, 128, 0.2);

  --back-coler: rgba(128, 0, 128,0.05);
  --back-coler2: rgba(255, 255, 255, 0.2);
  --back-coler3: rgba(255, 255, 255, 0.1);
  --back-coler4: #6c757d;
  --back-coler5: #5a6268;
  --back-coler6: rgba(0, 0, 0, 0.8);
  --back-coler7: rgba(0, 0, 0, 0.7);
  --back-coler8: rgba(255, 255, 255, 0.05);
  --back-coler9: rgba(255, 255, 255, 0.02);
  --back-coler10: rgba(220, 53, 69, 0.05);
  --back-coler11: rgba(0, 0, 0, 0.1);
  --back-coler12: rgba(0, 0, 0, 0.2);
  --back-coler13: rgba(0, 0, 0, 0.3);

  --succeeded: #28a745;
  --succeeded2: #20c997;
  --succeeded3: #4CAF50;
  --succeeded4: #45a049;
  --succeeded5: #6bcf7f;

  --main-font: "Mulish", sans-serif;
  --title-font: "Oswald", sans-serif;
}