@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Poppins:wght@400;500;600;700&family=Raleway:wght@400;500;600&display=swap');

@font-face {
    font-family: 'Frogie';
    src: url('/fonts/Frogie-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Futura';
    src: url('/fonts/Futura-Std-Medium.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

:root {
    --off-white: #fffcfa;
    --red: #eb0307;
    --yellow: #ffad2d;
    --dark-red: #931618;
    --black: #211919;
    --font-heading-family: 'Frogie', sans-serif;
    --font-heading-size: 1.3rem;
    --font-heading-weight: 400;
    --font-subheading-family: 'Futura', sans-serif;
    --font-subheading-size: 1.2rem;
    --font-subheading-weight: 500;
    --font-body-family: 'Poppins', sans-serif;
    --font-body-size: 0.9rem;
    --font-body-weight: 400;
}

/* Headings */
.heading {
    font-family: var(--font-heading-family);
    font-size: var(--font-heading-size);
    font-weight: var(--font-heading-weight);
}

.subheading {
    font-family: var(--font-subheading-family);
    font-size: var(--font-subheading-size);
    font-weight: var(--font-subheading-weight);
}

.body-text {
    font-family: var(--font-body-family);
    font-size: var(--font-body-size);
    font-weight: var(--font-body-weight);
}

/* Colors */
.text-off-white {
    color: var(--off-white);
}

.text-black {
    color: var(--black);
}

.text-red {
    color: var(--red);
}

.text-dark-red {
    color: var(--dark-red);
}

.text-yellow {
    color: var(--yellow);
}

.bg-off-white {
    background-color: var(--off-white);
}

.bg-red {
    background-color: var(--red);
}

.bg-dark-red {
    background-color: var(--dark-red);
}

.bg-yellow {
    background-color: var(--yellow);
}

.bg-yellow-outline {
    border: solid 2px var(--yellow);
    background-color: transparent;
}