:root {
  --color-1: #1c1c1c;
  --color-2: #fcf9ee;
  --color-3: #000000;
  --color-4: #454545;
  --color-5: #ffffff;
  --font-family-1: "Malone Serif", times, "Times New Roman", serif;
  --font-family-2: "Lars Malone", helvetica, arial, sans-serif;
  --heading-text-transform: none;
  --heading-font-weight: 400;

  --header-bg-color: var(--color-1);
  --body-bg-color: var(--color-2);
  --body-visit-msg-color: var(--color-3);
  --body-visit-msg-font-family: var(--font-family-1);
  --desktop-body-brand-invite-font-size: 1.2rem;
  --action-btn-color: var(--color-3);
  --action-btn-txt-color: var(--color-2);
  --base-font-family: var(--font-family-2);
  --body-panel-brand-invite-color: var(--color-4);

  --footer-bg-color: var(--color-1);
  --footer-txt-color: var(--color-2);
}

@font-face {
  font-family: "Malone Serif";
  src: url("../fonts/jm/MaloneSerif-Regular.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}

@font-face {
  font-family: "Malone Serif";
  src: url("../fonts/jm/MaloneSerif-SemiBold.woff2") format("woff2");
  font-display: swap;
  font-style: bold;
  font-weight: 600;
}

@font-face {
  font-family: "Lars Malone";
  src: url("../fonts/jm/LarsMalonePro-Regular.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}

@font-face {
  font-family: "Lars Malone";
  src: url("../fonts/jm/LarsMalonePro-Bold.woff2") format("woff2");
  font-display: swap;
  font-style: bold;
  font-weight: 700;
}