@font-face {
    font-family: "Kanit";
    src: url("/static/fonts/kanit/Kanit-Thin.ttf") format("truetype");
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Kanit";
    src: url("/static/fonts/kanit/Kanit-ExtraLight.ttf") format("truetype");
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Kanit";
    src: url("/static/fonts/kanit/Kanit-Light.ttf") format("truetype");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

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

@font-face {
    font-family: "Kanit";
    src: url("/static/fonts/kanit/Kanit-Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Kanit";
    src: url("/static/fonts/kanit/Kanit-SemiBold.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

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

@font-face {
    font-family: "Kanit";
    src: url("/static/fonts/kanit/Kanit-ExtraBold.ttf") format("truetype");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Kanit";
    src: url("/static/fonts/kanit/Kanit-Black.ttf") format("truetype");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Kanit";
    src: url("/static/fonts/kanit/Kanit-ThinItalic.ttf") format("truetype");
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Kanit";
    src: url("/static/fonts/kanit/Kanit-ExtraLightItalic.ttf") format("truetype");
    font-weight: 200;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Kanit";
    src: url("/static/fonts/kanit/Kanit-LightItalic.ttf") format("truetype");
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

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

@font-face {
    font-family: "Kanit";
    src: url("/static/fonts/kanit/Kanit-MediumItalic.ttf") format("truetype");
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Kanit";
    src: url("/static/fonts/kanit/Kanit-SemiBoldItalic.ttf") format("truetype");
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

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

@font-face {
    font-family: "Kanit";
    src: url("/static/fonts/kanit/Kanit-ExtraBoldItalic.ttf") format("truetype");
    font-weight: 800;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Kanit";
    src: url("/static/fonts/kanit/Kanit-BlackItalic.ttf") format("truetype");
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

:root {
    --font-display: "Kanit", sans-serif;
    --font-body: "Kanit", sans-serif;
    --font-mono: "Kanit", sans-serif;
    --font-body-size: 1.0625rem;
    --font-heading-weight: 500;
    --font-card-title-weight: 400;
    --font-card-copy-weight: 200;
    --font-list-title-weight: 400;
    --font-page-title-size: clamp(3.6rem, 7vw, 6.5rem);
    --font-section-title-size: clamp(1.95rem, 3.7vw, 3.35rem);
    --font-card-title-size: 1.55rem;
    --font-card-copy-size: var(--font-body-size);
    --font-list-title-size: clamp(1.15rem, 2vw, 1.35rem);
}

html,
body,
button,
input,
select,
textarea {
    font-family: var(--font-body);
}

p {
    color: var(--white) !important;
    font-size: var(--font-body-size);
}

@media (max-width: 640px) {
    :root {
        --font-section-title-size: clamp(1.6rem, 8.2vw, 2.15rem);
        --font-list-title-size: 1.12rem;
    }
}