@font-face {
  font-family: "F37 Ginger";
  src: url("../fonts/F37Ginger-Bold/F37Ginger-Bold.woff") format("woff"),
    url("../fonts/F37Ginger-Bold/F37Ginger-Bold.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "F37 Ginger";
  src: url("../fonts/F37Ginger-Regular/F37Ginger-Regular.woff") format("woff"),
    url("../fonts/F37Ginger-Regular/F37Ginger-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

/* override from base.css theme */
.pf-c-about-modal-box,
.pf-c-accordion,
.pf-c-alert,
.pf-c-alert-group,
.pf-c-app-launcher,
.pf-c-avatar,
.pf-c-backdrop,
.pf-c-background-image,
.pf-c-badge,
.pf-c-brand,
.pf-c-breadcrumb,
.pf-c-button,
.pf-c-card,
.pf-c-check,
.pf-c-chip,
.pf-c-chip-group,
.pf-c-clipboard-copy,
.pf-c-content,
.pf-c-context-selector,
.pf-c-data-list,
.pf-c-data-toolbar,
.pf-c-divider,
.pf-c-drawer,
.pf-c-dropdown,
.pf-c-empty-state,
.pf-c-expandable,
.pf-c-form,
.pf-c-form-control,
.pf-c-input-group,
.pf-c-label,
.pf-c-list,
.pf-c-login,
.pf-c-modal-box,
.pf-c-nav,
.pf-c-notification-badge,
.pf-c-options-menu,
.pf-c-overflow-menu,
.pf-c-page,
.pf-c-pagination,
.pf-c-popover,
.pf-c-progress,
.pf-c-radio,
.pf-c-select,
.pf-c-skip-to-content,
.pf-c-spinner,
.pf-c-switch,
.pf-c-tab-content,
.pf-c-table,
.pf-c-tabs,
.pf-c-title,
.pf-c-toolbar,
.pf-c-tooltip,
.pf-c-wizard,
.pf-l-bullseye,
.pf-l-flex,
.pf-l-gallery,
.pf-l-grid,
.pf-l-level,
.pf-l-split,
.pf-l-stack {
  font-family: "F37 Ginger";
  text-rendering: optimizeLegibility;
}

body {
  font-family: "F37 Ginger";
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

.h1,
.p-18,
.p-16,
.p-14 {
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
}

.h1 {
  font-size: 42px;
  color: var(--c-black-2);
}

.p-18 {
  font-size: 18px;
  color: var(--c-grey-3);
}

.p-16 {
  font-size: 16px;
  color: var(--c-grey-3);
}

.p-14 {
  font-size: 14px;
  color: var(--c-black-3);
}

.bold {
  font-weight: bold;
}

.link {
  text-decoration: underline;
  text-transform: lowercase;
  color: var(--c-black-4);
}

.instruction {
  font-size: 16px;
}

.test-test {
  color: red;
  background-color: red;
}