:root {
  /* Font Stack */
  --p-font: 'Sofia Pro', sans-serif;

  /* Background Colors */
  --b-color: #1b1e28; /* bg primary */
  --bs-color: #181b24; /* bg secondary */
  --bt-color: #172040; /* bg trinary */
  --bq-color: #e6e8ea; /* bg quaternary */

  /* Primary Colors */
  --p-color: #ffd50d; /* primary */
  --s-color: #5d7eff; /* secondary */
  --t-color: #f1f4f6; /* trinary */
  --sh-color: #5878f2; /* sec hovery */

  --w-color: #ffffff; /* white */
  --bl-color: #000000; /* black */

  /* Elements Colors */
  --hr-color: #e1e4e64d; /* hr */
  --br-color: #262933; /* break */
  --e-color: #d30012; /* error */
  --l-color: #308fe7; /* link */

  --btn-border: #d2d5d6; /* btn border */
  --btn-hover: #1f2330; /* btn hover*/

  --cmt-color: #1f2330; /* comment btn */
  --cmt-focus: #252935; /* comment focus*/

  --h-color: #4a64cc8a; /* text highlight */

  /* Font Colors */
  --f-color: #e1e4e6; /* primary */
  --fs-color: #c3c6c9; /* secondary */
  --ft-color: #919397; /* trinary */
  --fh-color: #262a30; /* hover */

  /* Misc */
  --ts-color: #02140b; /* tinysites */
}

@custom-media --viewport-3 (max-width: 372px);
@custom-media --viewport-4 (max-width: 480px);
@custom-media --viewport-7 (max-width: 768px);
@custom-media --viewport-9 (max-width: 992px);
@custom-media --viewport-10 (max-width: 1025px);
@custom-media --viewport-12 (max-width: 1200px);
@custom-media --viewport-13 (max-width: 1367px);