@import url('https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,400;0,600;0,700;0,800;1,400;1,600;1,700;1,800&display=swap');

* {
    font-family: 'Kanit', sans-serif;
}
.textBigBorder {
    -webkit-text-stroke-width: 5px;
    -webkit-text-stroke-color: white;    
    color: transparent;
}

.f600 { font-weight: 600; }
.f700 { font-weight: 700; }
.f800 { font-weight: 800; }
.fz10 { font-size: 10px; }
.fz12 { font-size: 12px; }
.fz14 { font-size: 14px; }
.fz16 { font-size: 16px; }
.fz18 { font-size: 16px; }
.fz20 { font-size: 20px; }
.fz22 { font-size: 22px; }
.fz28 { font-size: 28px; }
.fz120 { font-size: 120px; }


/* ========== Color Text ========== */
.colorRed1 { color: #8D2B29; }
a.colorRed1:hover { color: #831e1d; }
.colorRed { color: red; }
.colorSalmon { color: salmon; }
.colorGray1 { color: #351010; }
.colorGray2 { color: #4f5051; }
.colorGray { color: gray; }
.colorWhite { color: white; }
.colorBlue1 { color: #31b7ff; }
.colorGoldrod { color: goldenrod; }
a.colorBlue1:hover {
    cursor: pointer;
    color: #0087d0;
}
.italicA {
    font-style: italic;
    color: gray;
}
.italicA:hover { color: #5f5f5f; }


@media screen and (max-width: 456px) {
    .textBigBorder { -webkit-text-stroke-width: 2px; }
    .fz120 { font-size: 70px; }
    .s14 { font-size: 14px; }
    .s12 { font-size: 12px; }
}
@media screen and (max-width: 350px) {
    .ssh1 { font-size: 30px; }
    .ssh2 { font-size: 26px; }
    .ssh3 { font-size: 24px; }
    .ssh4 { font-size: 20px; }
    .ssh5 { font-size: 18px; }
    .ssh6 { font-size: 14px; }
    .ss10 { font-size: 10px; }
}