:root {
  --primary-color: #ff3f1f;
  --secondary-color: #be3118;
  --text-shadow: #771e0e;
  --box-shadow: #a81900;

  --text-color: white;

  --gradient-primary: #1A1A1A;
  --gradient-secondary: #2A2A2A;
}

.primary {
  color: var(--primary-color);
}

html,
body {
  font-family: "Open Sans";
}

.custom-hr {
  height: 1px;
  border: none;
  background: linear-gradient(to right, transparent, var(--primary-color), transparent);
  opacity: 0.4;
  margin: 4rem 0;
}

@font-face {
  font-family: "Fira Code";
  src: url('/fonts/FiraCode.ttf');
}

@font-face {
  font-family: "Open Sans";
  src: url('/fonts/OpenSans.ttf');
}

@font-face {
  font-family: "Product Sans";
  src: url('/fonts/ProductSansRegular.ttf');
}

@font-face {
  font-family: "Product Sans Italic";
  src: url('/fonts/ProductSansItalic.ttf');
}

@font-face {
  font-family: "Product Sans Italic Bold";
  src: url('/fonts/ProductSansBoldItalic.ttf');
}

@font-face {
  font-family: "Product Sans Bold";
  src: url('/fonts/ProductSansBold.ttf');
}
