:root {
    --bg-color: #f5f5f5;
    --primary-color: #00aaff;
    --white-color: #ffffff;
    --dropdown-bg-color: #ffffff;
    --dropdown-hover-color: #f1f1f1;
    --link-color: #00aaff;
    --btn-hover: #237ed8;
    --score-color: #6d98c3;
    --footer-bg-color: #237ed8;
    --footer-text-color: #ffffff;
    --footer-border-color: #ffffff;

    --primary-blue: #00aaff;
    --highlight-color: #ffffff;
    --sun: #ffcc00;
    --sky: #0080ff;
    --sun-hover: #ff9900;
    --button-blue: #ffffff;
    --font-color:#345d8a;
    --dark-color:#0d3969;
}

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


html{
    height:auto !important; 
    height:100%; 
    min-height:100%; 
    width:auto !important; 
    width:100%; 
    min-width:100%; 
    font-family: 'Kanit', Helvetica, Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: var(--bg-color);
}

body{
    height:auto !important; 
    height:100%;  
    min-height:100%; 
    width:auto !important; 
    width:100%; 
    min-width:100%; 
    position: absolute;
    font-family: 'Kanit', Helvetica, Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: var(--bg-color);
}

a,div,p,b,textarea,button,input,form,h1,h2,h3,h4,h5,h6{ 
    font-family: 'Kanit', Helvetica, Arial, sans-serif;
    color:var(--font-color);
}

h1,h2,h3,h4,h5,h6{ 
  font-family: 'Kanit', Helvetica, Arial, sans-serif;
  color:var(--white-color);
}

body::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: var(--bg-color);
}

body::-webkit-scrollbar
{
	width: 12px;
	background-color: var(--bg-color);
}

body::-webkit-scrollbar-thumb
{
	background-color: var(--score-color);
    border-radius: 6px;
}