@font-face {
    font-family: "Angsana";
    src: url("@/assets/fonts/angsana.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Candara";
    src: url("@/assets/fonts/candara.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "Freestyle Script";
    src: url("@/assets/fonts/freestyle_script.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "Pristina";
    src: url("@/assets/fonts/pristina.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "Bona Nova";
    src: url("@/assets/fonts/bona_nova.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

// Change font size
html {
    p{
        font-size: 1.3rem;
    }
    p.normal{
        font-size: 1rem;
    }
    @media (min-width: 768px) {
        font-size: 20px;
    }

    @media (max-width: 767px) {
        font-size: 14px;
    }

    @media (max-width: 480px) {
        font-size: 12px;
    }
}

$display-font-sizes: (
    1: 5rem,
    2: 4.5rem,
    3: 4rem,
    4: 3.5rem,
    5: 3rem,
    6: 2.5rem,
);

$font-sizes: (
    1: 3rem,
    2: 2.5rem,
    3: 2rem,
    4: 1.75rem,
    5: 1.25rem,
);

$font-sizes-mobile: (
    1: 2.25rem,
    2: 2rem,
    3: 1.75rem,
    4: 1.5rem,
    5: 1.25rem,
);

@each $index, $size in $font-sizes {
    .fs-#{$index} {
        font-size: $size;

        @media (max-width: 768px) {
            font-size: map-get($font-sizes-mobile, $index);
        }
    }
}