@import url("https://fonts.googleapis.com/css2?family=Kanit:wght@300;500;700&display=swap");

:root {
  --primary-color: #ffb000;
  --secondary-color: #760606;
  --font-color: #ffffff;
  --highlight-color: #ffb000;
  --title-bg-color: #2b0808;
  --header-bg-color: #0a0809;
  --header-top-bg-color: #0f0f0f;
  --bg-color: #0a0809;
  --bg-light-color: #1c1c1e;
  --footer-bg-color: #0B0809;
  --footer-line-color: #BD1C28;

  --white-color: #ffffff;
  --black-color: #000000;
  --black-light-color: #161616;
  --gray-color: #9898a0;
  --gray-2-color: #313131;
  --red-color: #bd1c28;
  --green-color: #34d74c;

  --font-family: "Kanit";
  --font-size: 16px;
  --font-small-size: 14px;
  --font-title-size: 24px;
  --font-title-2-size: 20px;
  --font-title-weight: 700;
  --font-title-2-weight: 600;

  --content-width: 1280px;
}

*:where( :not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) {
  all: unset;
  display: revert;
}

/* Preferred box-sizing value */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Fix mobile Safari increase font-size on landscape mode */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

body {
  background-color: var(--bg-color);
  color: var(--font-color);
  font-size: var(--font-size);
  font-family: var(--font-family);
  font-weight: 300;
}

/* Reapply the pointer cursor for anchor tags */
a,
button {
  cursor: revert;
}

/* Remove list styles (bullets/numbers) */
ol,
ul,
menu,
summary {
  /* list-style: none; */
}

/* For images to not be able to exceed their container */
img {
  max-inline-size: 100%;
  max-block-size: 100%;
  max-width: 100%;
}

/* removes spacing between cells in tables */
table {
  border-collapse: collapse;
}

/* Safari - solving issue when using user-select:none on the <body> text input doesn't working */
input,
textarea {
  -webkit-user-select: auto;
}

/* revert the 'white-space' property for textarea elements on Safari */
textarea {
  white-space: revert;
}

/* minimum style to allow to style meter element */
meter {
  -webkit-appearance: revert;
  appearance: revert;
}

/* preformatted text - use only for this feature */
:where(pre) {
  all: revert;
  box-sizing: border-box;
}

/* reset default text opacity of input placeholder */
::placeholder {
  color: unset;
}

/* fix the feature of 'hidden' attribute.
 display:revert; revert to element instead of attribute */
:where([hidden]) {
  display: none;
}

/* revert for bug in Chromium browsers
 - fix for the content editable attribute will work properly.
 - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/
:where([contenteditable]:not([contenteditable="false"])) {
  -moz-user-modify: read-write;
  -webkit-user-modify: read-write;
  overflow-wrap: break-word;
  -webkit-line-break: after-white-space;
  -webkit-user-select: auto;
}

/* apply back the draggable feature - exist only in Chromium and Safari */
:where([draggable="true"]) {
  -webkit-user-drag: element;
}

/* Revert Modal native behavior */
:where(dialog:modal) {
  all: revert;
  box-sizing: border-box;
}

/* Remove details summary webkit styles */
::-webkit-details-marker {
  display: none;
}