@font-face {
    font-family: Roboto;
    src: url('../fonts/Roboto-Regular.woff2') format('woff2');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: Roboto;
    src: url('../fonts/Roboto-Bold.woff2') format('woff2');
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}

:root {
    color-scheme: light;
    --ot-background: #303e48;
    --ot-primary: #fcc44a;
    --ot-primary-hover: #fcc33a;
    --ot-secondary: #41525d;
    --ot-text: #4f4f4f;
    --pf-v5-global--FontFamily--text: Roboto, Arial, sans-serif;
    --pf-v5-global--FontFamily--heading: Roboto, Arial, sans-serif;
    --pf-v5-global--primary-color--100: var(--ot-secondary);
    --pf-v5-global--primary-color--200: #37474f;
    --pf-v5-global--link--Color: var(--ot-secondary);
    --pf-v5-global--link--Color--hover: #303e48;
    --pf-v5-global--active-color--100: var(--ot-secondary);
    --pf-v5-global--BackgroundColor--dark-100: var(--ot-background);
    --pf-v5-global--BackgroundColor--dark-200: var(--ot-secondary);
}

body {
    font-family: Roboto, Arial, sans-serif;
}

.pf-v5-c-button {
    --pf-v5-c-button--BorderRadius: 4px;
    --pf-v5-c-button--m-primary--Color: var(--ot-background);
    --pf-v5-c-button--m-primary--BackgroundColor: var(--ot-primary);
    --pf-v5-c-button--m-primary--hover--Color: var(--ot-background);
    --pf-v5-c-button--m-primary--hover--BackgroundColor: var(--ot-primary-hover);
    --pf-v5-c-button--m-primary--focus--Color: var(--ot-background);
    --pf-v5-c-button--m-primary--focus--BackgroundColor: var(--ot-primary-hover);
    --pf-v5-c-button--m-primary--active--Color: var(--ot-background);
    --pf-v5-c-button--m-primary--active--BackgroundColor: var(--ot-primary-hover);
}

.pf-v5-c-button.pf-m-primary {
    font-weight: 700;
}

:is(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid #0074a8;
    outline-offset: 3px;
}

.pf-v5-c-card,
.pf-v5-c-modal-box {
    border-radius: 8px;
}