@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Noto+Serif:ital,wght@0,100..900;1,100..900&family=Nunito:ital,wght@0,200..1000;1,200..1000&family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');

:root{
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --bg: black;
    --white: #fff;
    --neon-orange: #FF5F1F;
    --icon-text: 5px;
    --Persimmon: #EC5800;
    --text-btn: 12px;
    --icon-btn:10px;
    --Platinum: #E5E4E2;
    --bg-color: linear-gradient(180deg, #f2f6fa , #e5eaf8);
    --bg-pgn: #f9fafc;
    --icon-color-download: #0E9F6E;
    --square-move: rgba(236, 243, 116, 0.8);
    --off-white: #FAF7F2;
    --blue-bg: #CFE9F8;
    --icon-pick: #bddef0;
    --online-color: #629924;
    --empty-board: #BAD1DF;
    --border-bottom: #82929C;
    --text-secondary: #999999;
    --scroll-thumb-hover: #888888;
    --scroll-thumb: #555555;
    --text-nav-color: #828282;
    --text-nav-hover: #4a649f;
    --text-title-color: #132e56;
    --text-empty: #18336e;
    --board-lobby-color: linear-gradient(0deg,rgba(0, 0, 0, 1) 0%, rgba(243, 245, 249, 1) 50%, rgba(224, 227, 233, 1) 100%);
    --text-choose: #afaca9;
    --border-pgn-color: #C9D6DF;
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
    --color-gray-50: oklch(98.5% .002 247.839);
    --color-gray-100: oklch(96.7% .003 264.542);
    --color-gray-200: oklch(92.8% .006 264.531);
    --color-gray-300: oklch(87.2% .01 258.338);
    --color-gray-400: oklch(70.7% .022 261.325);
    --color-gray-600: oklch(44.6% .03 256.802);
    --color-gray-800: oklch(27.8% .033 256.848);
    --color-gray-700: oklch(37.3% .034 259.733);
    --color-gray-900: oklch(21% 0.034 264.665);
    --color-yellow-100: oklch(97.3% 0.071 103.193);
    --color-yellow-200: oklch(94.5% 0.129 101.54);
    --color-yellow-300: oklch(90.5% 0.182 98.111);
    --color-green-500: oklch(72.3% .219 149.579);
    --color-green-100: oklch(96.2% .044 156.743);
    --color-green-300: oklch(87.1% .15 154.449);
    --color-green-600: oklch(62.7% .194 149.214);
    --color-red-100: oklch(93.6% .032 17.717);
    --color-red-300: oklch(80.8% 0.114 19.571);
    --color-red-400: oklch(70.4% 0.191 22.216);
    --color-red-500: oklch(63.7% .237 25.331);
    --color-red-600: oklch(57.7% 0.245 27.325);
    --color-red-300: oklch(80.8% .114 19.571);
    --color-orange-400: oklch(70.5% 0.213 47.604);
    --color-blue-400: oklch(70.7% .165 254.624);
    --color-blue-500: oklch(62.3% 0.214 259.815);
    --color-blue-600: oklch(54.6% 0.245 262.881);
    --color-zinc-700: rgb(63 63 70);
    --color-zinc-800: rgb(39 39 42);
    --font-weight-medium: 500;
    --font-weight-bold: 700;
    --spacing: .25rem;
    --text-xs: .75rem;
    --text-xs--line-height: calc(1 / .75);
    --text-2xl: 1.5rem;
    --text-sm: 0.875rem;
    --text-sm--line-height: calc(1.25 / 0.875);
    --blur-xs: 4px;
    --blur-sm: 8px;
    --radius: 0.625rem;
    --container-xl: 36rem;
    --container-2xl: 42rem;
    --container-4xl: 56rem;
}

/* * {
  outline: 1px solid red;
} */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    border: 0 solid;
}

html, body {
    height: 100%;
}

body{
    background: var(--bg-color);
    font-family: "Noto", sans-serif;
    display: flex;
    flex-direction: column;
}

input, button, select{
    font: inherit;
}

@property --tw-inset-shadow {
    syntax: "*"; 
    inherits: false; 
    initial-value: 0 0 #0000;
}

@property --tw-inset-ring-shadow {
    syntax: "*"; 
    inherits: false; 
    initial-value: 0 0 #0000; 
}

@property --tw-ring-offset-shadow {
    syntax: "*"; 
    inherits: false; 
    initial-value: 0 0 #0000;
}

@property --tw-translate-x{
    syntax: "*";
    inherits: false;
    initial-value: 0;
}

@property --tw-translate-y{
    syntax: "*";
    inherits: false;
    initial-value: 0;
}

/* Margin bottom */
.mb-1{
    margin-bottom: calc(var(--spacing) * 1);
}

.bottom-0 {
    bottom: 0;
}

.left-0 {
    left: 0;
}

.right-0 {
    right: 0;
}

.mb-2{
    margin-bottom: calc(var(--spacing) * 2);
}

.mb-4{
    margin-bottom: calc(var(--spacing) * 4);
}

.mb-5{
    margin-bottom: calc(var(--spacing) * 5);
}

.mb-6{
    margin-bottom: calc(var(--spacing) * 6);
}

.mt-1{
    margin-top: calc(var(--spacing) * 1);
}

.mt-2{
    margin-top: calc(var(--spacing) * 2);
}

.ml-2\.5 {
    margin-left: calc(var(--spacing) * 2.5);
}

/* Width and height */
.w-2{
    width: calc(var(--spacing) * 2);
}

.w-4{
    width: calc(var(--spacing) * 4);
}

.w-5{
    width: calc(var(--spacing) * 5);
}

.w-6{
    width: calc(var(--spacing) * 6);
}

.w-7{
    width: calc(var(--spacing) * 7);
}

.w-12 {
    width: calc(var(--spacing) * 12);
}

.w-20 {
    width: calc(var(--spacing) * 20);
}

.w-32 {
    width: calc(var(--spacing) * 32);
}

.h-2{
    height: calc(var(--spacing) * 2);
}

.h-4{
    height: calc(var(--spacing) * 4);
}

.h-5{
    height: calc(var(--spacing) * 5);
}

.h-12{
    height: calc(var(--spacing) * 12);
}

.h-96{
    height: calc(var(--spacing) * 96);
}

.grid{
    display: grid;
}

.fixed {
    position: fixed;
}

.flex-1{
    flex: 1;
}

.flex-wrap {
    flex-wrap: wrap;
}

.flex-col{
    flex-direction: column;
}

.grid-cols-\[50px_80px_1fr_1fr_150px\] {
    grid-template-columns: 50px 80px 1fr 1fr 150px;
}

.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hidden {
    display: none;
}

.absolute{
    position: absolute;
}

.inset-0{
    inset: 0;
}

.z-50{
    z-index: 50;
}

.relative{
    position: relative;
}

.w-full{
    width: 100%;
}

.grid-cols-3{
    grid-template-columns: repeat(3, minmax(0, 1fr));
}