:root {
    --fs-187: calc(var(--font-size) * 18.7);
    --fs-104: calc(var(--font-size) * 10.4);
    --fs-69: calc(var(--font-size) * 6.9);
    --fs-51: calc(var(--font-size) * 5.1);
    --fs-48: calc(var(--font-size) * 4.8);
    --fs-40: calc(var(--font-size) * 4);
    --fs-30: calc(var(--font-size) * 3);
}

@font-face {
    font-family: "Big Shoulders";
    src: url("../font/BigShoulders-Thin.ttf") format("truetype");
    font-weight: 100;
    font-style: normal;
}
@font-face {
    font-family: "Big Shoulders";
    src: url("../font/BigShoulders-ExtraLight.ttf") format("truetype");
    font-weight: 200;
    font-style: normal;
}
@font-face {
    font-family: "Big Shoulders";
    src: url("../font/BigShoulders-Light.ttf") format("truetype");
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: "Big Shoulders";
    src: url("../font/BigShoulders-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: "Big Shoulders";
    src: url("../font/BigShoulders-Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: "Big Shoulders";
    src: url("../font/BigShoulders-SemiBold.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
}
@font-face {
    font-family: "Big Shoulders";
    src: url("../font/BigShoulders-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: "Big Shoulders";
    src: url("../font/BigShoulders-ExtraBold.ttf") format("truetype");
    font-weight: 800;
    font-style: normal;
}
@font-face {
    font-family: "Big Shoulders";
    src: url("../font/BigShoulders-Black.ttf") format("truetype");
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: "Bai Jamjuree";
    src: url("../font/BaiJamjuree-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
}

.bigshoulders-thin {
    font-family: "Big Shoulders";
    font-weight: 100;
}
.bigshoulders-extralight {
    font-family: "Big Shoulders";
    font-weight: 200;
}
.bigshoulders-light {
    font-family: "Big Shoulders";
    font-weight: 300;
}
.bigshoulders-regular {
    font-family: "Big Shoulders";
    font-weight: 400;
}
.bigshoulders-medium {
    font-family: "Big Shoulders";
    font-weight: 500;
}
.bigshoulders-semibold {
    font-family: "Big Shoulders";
    font-weight: 600;
}
.bigshoulders-bold {
    font-family: "Big Shoulders";
    font-weight: 700;
}
.bigshoulders-extrabold {
    font-family: "Big Shoulders";
    font-weight: 800;
}
.bigshoulders-black {
    font-family: "Big Shoulders";
    font-weight: 900;
}

.fw-700 {
    font-family: "Big Shoulders";
    font-weight: 700;
}
.fw-600 {
    font-family: "Big Shoulders";
    font-weight: 600;
}
.fw-400 {
    font-family: "Big Shoulders";
    font-weight: 400;
}

.fs-187 {
    font-size: var(--fs-187);
}
.fs-104 {
    font-size: var(--fs-104);
}
.fs-69 {
    font-size: var(--fs-69);
}
.fs-51 {
    font-size: var(--fs-51);
}
.fs-48 {
    font-size: var(--fs-48);
}
.fs-40 {
    font-size: var(--fs-40);
}
.fs-30 {
    font-size: var(--fs-30);
}