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

@font-face {
    font-family: 'Amiri';
    src: url('../fonts/Amiri-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

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

@font-face {
    font-family: 'Amiri';
    src: url('../fonts/Amiri-BoldItalic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Aston Script';
    src: url('../fonts/Aston Script.ttf') format('truetype');
}

@font-face {
    font-family: 'Kate Marley';
    src: url('../fonts/KateMarleyDemo-V4Ymx.ttf') format('truetype');
}

@font-face {
    font-family: 'Fairy Flower';
    src: url('../fonts/FairyFlowerDemo-rvDwA.ttf') format('truetype');
}

@font-face {
    font-family: 'Gaqire';
    src: url('../fonts/GAQIRE.otf') format('opentype');
}

@font-face {
    font-family: 'Balhemson Slant';
    src: url('../fonts/BalhemsonSlantSlant-nRl24.otf') format('opentype');
}

@font-face {
    font-family: 'Boheme Floral';
    src: url('../fonts/Boheme Floral.ttf') format('truetype');
}

:root {
    --blue-color: #6E8FBD;
    --off-white-color: #FFFFFF;
    --off-black-color: #000000;

    --font-size-base: 14px;
    --font-size-small: 12px;
    --font-size-large: 18px;
    --font-size-xl: 24px;
    --font-size-xxl: 32px;
}

h1 {
    font-size: var(--font-size-xxl);
}

h2 {
    font-size: var(--font-size-xl);
}

h3 {
    font-size: var(--font-size-large);
}

h4, h5, h6 {
    font-size: var(--font-size-base);
}

p {
    font-size: var(--font-size-base);
}

@media screen and (min-width: 778px) {
    :root {
        --font-size-base: 16px;
        --font-size-small: 14px;
        --font-size-large: 20px;
        --font-size-xl: 32px;
        --font-size-xxl: 48px;
    }
}

@media screen and (min-width: 1024px) {
    :root {
        --font-size-base: 18px;
        --font-size-small: 16px;
        --font-size-large: 24px;
        --font-size-xl: 48px;
        --font-size-xxl: 64px;
    }
}