@font-face {
    font-family: 'LibreBaskervilleBold';
    src: url('../font/LibreBaskerville-Bold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'ComicNeueRegular';
    src: url('../font/ComicNeue-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Pangolin';
    src: url('../font/Pangolin-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'ComicNeueBold';
    src: url('../font/ComicNeue-Bold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

:root {
    --main-font: ComicNeueRegular;
    --main-font-bold: ComicNeueBold;
    --main-header-font: Pangolin;
    --title-font: LibreBaskervilleBold;
    --border-color: #a8a080;
    /* Bootstrap Overrides */
    --bs-primary: #e7c160;
    --bs-secondary: #000000;
    --bs-success: #28a745;
    --bs-danger: #dc3545;
    --bs-warning: #ffc107;
    --bs-info: #17a2b8;
    --bs-light: #f8f9fa;
    --bs-dark: #343a40;
    /* Custom Variables */
    --main-bg-color: #f4f4f4;
    --main-text-color: #333;
    --card-border-radius: 8px;
    --btn-radius: 5px;
    --spacing-unit: 16px;
    /** Chopping Board colors **/
    --bs-light-gold: #FFE485;
    --bs-sand-dune: #EDCD5E;
    --bs-earthy-olive: #BCA24B;
    --bs-warm-bronze: #B09432;
    --bs-honey-brown: #B59F56;
    --bs-antique-gold: #A37F07;
    --bs-mustard-gold: #F5CE4A;
    --bs-amber-brown: #F2C11A;
    --bs-deep-saffron: #D0A617;
    --bs-dark-caramel: #937716;
    --bs-pecan-brown: #A6773D;
    --bs-cinnamon-brown: #9E622B;
    --bs-walnut-brown: #835C32;
    --bs-coffee-brown: #6F4E37;
    --bs-mocha-brown: #8D6E63;
    --bs-chestnut-brown: #954535;
    --bs-tan-brown: #D2B48C;
    --bs-caramel-brown: #A76F2D;
    --bs-bronze-brown: #996515;
    --bs-sepia-brown: #704214;
    --bs-tobacco-brown: #7C4A32;
    --bs-mahogany-brown: #4E3629;
    --bs-ebony-brown: #3B2F2F;
    --bs-russet-brown: #80461B;
    --bs-sienna-brown: #A0522D;
    --bs-umber-brown: #635147;
    --bs-copper-brown: #B87333;
    --bs-maple-brown: #C06A26;
    /*Patterns*/
    --stripe-primary-color: #DAB03;
    --stripe-background-color: #E5B46A;
    --circlular-primary-color: #94712B;
    --circlular-accent-color: #E5B46A;
    --circlular-background-color: #E4E4ED;
    --flower-primary-color: #94712B;
    --flower-background-color: #E4E4ED;
}

body {
    font-family: var(--main-font);
}

/*/PATTERNS /*/
.bg-stripes {
    background-image: repeating-linear-gradient( to right, var(--stripe-primary-color), var(--stripe-primary-color) 3.5px, transparent 3.5px, transparent );
    background-size: 31px 31px;
    background-color: var(--stripe-background-color);
}

.bg-circular {
    background: radial-gradient(calc(1.28 * 31px + 7.75px/2) at top 50% right calc(-.8*31px), var(--circlular-primary-color) calc(99.5% - 7.75px), var(--circlular-background-color) calc(101% - 7.75px) 99.5%, #0000 101%) calc(-1*calc(1.8 * 31px + 7.75px)) 31px, radial-gradient(calc(1.28 * 31px + 7.75px/2) at top 50% left calc(-.8*31px), var(--circlular-accent-color) calc(99.5% - 7.75px), var(--circlular-background-color) calc(101% - 7.75px) 99.5%, #0000 101%) calc(1.8 * 31px + 7.75px) calc(-1*31px), radial-gradient(calc(1.28 * 31px + 7.75px/2) at top 50% right calc(-.8*31px), var(--circlular-accent-color) calc(99.5% - 7.75px), var(--circlular-background-color) calc(101% - 7.75px) 99.5%, #0000 101%) calc(calc(1.8 * 31px + 7.75px)/-2) calc(-1*31px), radial-gradient(calc(1.28 * 31px + 7.75px/2) at top 50% left calc(-.8*31px), var(--circlular-primary-color) calc(99.5% - 7.75px), var(--circlular-background-color) calc(101% - 7.75px) 99.5%, #0000 101%) calc(calc(1.8 * 31px + 7.75px)/ 2) 31px, linear-gradient(90deg, var(--circlular-primary-color) 50%, var(--circlular-accent-color) 0);
    background-size: calc(1.8 * 31px + 7.75px) 124px;
}

.bg-flower {
    background: radial-gradient(27% 29% at right, #0000 83%, var(--flower-primary-color) 85% 99%, #0000 101%) calc(31px/2) 31px, radial-gradient(27% 29% at left, #0000 83%, var(--flower-primary-color) 85% 99%, #0000 101%) calc(31px/-2) 31px, radial-gradient(29% 27% at top, #0000 83%, var(--flower-primary-color) 85% 99%, #0000 101%) 0 calc(31px/2), radial-gradient(29% 27% at bottom, #0000 83%, var(--flower-primary-color) 85% 99%, #0000 101%) 0 calc(31px/-2), var(--flower-background-color);
    background-size: 62px 62px;
}