@font-face {
  font-family: "RobotoSlab";
  font-style: normal;
  font-weight: normal;
  font-display: swap;
  src: url("../fonts/RobotoSlab-Regular.eot"); /* IE11 */
  src: url("../fonts/RobotoSlab-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/RobotoSlab-Regular.woff2") format("woff2"), url("../fonts/RobotoSlab-Regular.woff") format("woff"), url("../fonts/RobotoSlab-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "RobotoSlab";
  font-style: normal;
  font-weight: bold;
  font-display: swap;
  src: url("../fonts/RobotoSlab-Bold.eot"); /* IE11 */
  src: url("../fonts/RobotoSlab-Bold.eot?#iefix") format("embedded-opentype"), url("../fonts/RobotoSlab-Bold.woff2") format("woff2"), url("../fonts/RobotoSlab-Bold.woff") format("woff"), url("../fonts/RobotoSlab-Bold.ttf") format("truetype");
}
@font-face {
  font-family: "Krungthep";
  font-style: normal;
  font-weight: bold;
  font-display: swap;
  src: url("../fonts/Krungthep-Regular.eot"); /* IE11 */
  src: url("../fonts/Krungthep-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/Krungthep-Regular.woff2") format("woff2"), url("../fonts/Krungthep-Regular.woff") format("woff"), url("../fonts/Krungthep-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "SedanSC";
  font-style: normal;
  font-weight: normal;
  font-display: swap;
  src: url("../fonts/SedanSC-Regular.woff2") format("woff2");
}
:root {
  --color-speed: var(--cpx-color-red);
  --color-stamina: #21477b;
  --color-strength: var(--cpx-color-war);
}

:root {
  --cpx-color-red: #771028;
  --cpx-color-gray: rgb(238, 238, 238);
  --cpx-color-dark: #242424;
  --cpx-color-text: var(--cpx-color-dark);
  --cpx-color-war: #6B602E;
  --cpx-color-navy: #00004c;
  --cpx-color-error: #ddbec5;
  --cpx-color-error-text: var(--cpx-color-red);
  --cpx-color-success: #c6ddbe;
  --cpx-color-success-text: #346523;
  --cpx-color-info: #bfbedd;
  --cpx-color-info-text: rgb(37, 35, 101);
  --cpx-color-bronze: radial-gradient(circle at 18.7% 37.8%, #F2C17D 0%, #A44200 90%);
  --cpx-color-silver: radial-gradient(circle at 18.7% 37.8%, rgb(250, 250, 250) 0%, rgb(225, 234, 238) 90%);
  --cpx-color-gold: radial-gradient(ellipse farthest-corner at right bottom, #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%), radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%, #FFFFAC 8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%);
  --cpx-box-shadow: 0 0 10px 0 rgba(36, 36, 36, 0.3);
  --cpx-breakpoint-sm: 576px;
  --cpx-breakpoint-md: 768px;
  --cpx-breakpoint-lg: 922px;
  --cpx-breakpoint-xl: 1200px;
  --cpx-breakpoint-max: 1450px;
  --cpx-line-height: 1.8;
  --cpx-font-name: RobotoSlab;
  --cpx-font-stack: RobotoSlab, Helvetica, Arial, sans-serif;
  --cpx-font-name-title: RobotoSlab;
  --cpx-font-stack-title: var(--cpx-font-stack);
  --cpx-font-name-monospace: Krungthep;
  --cpx-font-stack-monospace: Krungthep, Helvetica, Arial, sans-serif;
  --cpx-font-name-parchment: SedanSC;
  --cpx-font-stack-parchment: SedanSC, Helvetica, Arial, sans-serif;
  --cpx-sidebar-width: 300px;
  --cpx-hud-max-width: 600px;
  --cpx-gap-size: 2rem;
  --cpx-border-radius: 0.3rem;
  --cpx-text-shadow: 0 0 3px rgba(36, 36, 36, 0.5), 0 0 5px rgba(36, 36, 36, 0.5);
  --cpx-text-shadow-white: 0 0 8px rgba(255, 255, 255, 0.3), 0 0 11px rgba(255, 255, 255, 0.3);
  --cpx-max-screen-width: 2000px;
}

:root {
  --cpx-button-py: 11px;
  --cpx-button-px: 30px;
  --cpx-button-b-radius: 0px;
  --cpx-bs-padding-size: 15px;
}