/* tokens.css */
:root {
  --color-white: #ffffff;
  --color-black : #000000;
  --color-primary: #4a90e2;
  --color-secondary: #FF0044;
  --color-ash-theme: #EBEBEB;

  --space-xxs: 4px;
  --space-xl5: 5px;
  --space-sm: 8px;
  --space-xs: 10px; /* added reusable 10px token */
  --space-md: 16px;
  --space-2xs: 20px;
  --space-xl: 22px;
  --space-lg: 24px;
  --space-xl: 32px;
  --font-base: "Arial", sans-serif;
  --radius-md: 8px;
/* FONT SIZES */
  --font-size-sm: 12px;
  --font-size-xs: 14px;
  --font-size-md: 16px;    
  --font-size-base: 18px; 
  --font-size-lg: 20px;
  --font-size-xl: 24px;
  --font-size-2xl: 30px;
  --font-size-3xl: 36px;
  
  /* font weight */

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
}


/* COMMON CSS FOR ALL PAGES */
 
 body{overflow-x: hidden; font-size: var(--font-size-md);}
 .text-right{text-align: right;}
 .sub_heading{font-size: var(--font-size-lg);font-weight: var(--font-weight-semibold);color: var(--color-black);}
.header {background: var(--color-white);padding: var(--space-md);}
.new_container{max-width: 1200px; margin:0 0 0 auto;}
.search-icon{padding: 0;position: absolute;right: var(--space-md); top: var(--space-xxs);}
.search-bar,.search-bar:hover,.search-bar:focus{background-color: #EBEBEB;border-radius: 32px;border: 0;box-shadow: none;outline: 0;font-size: 14px;}
.w-40{width: 40%;}
.game-list li{padding: var(--space-xs) var(--space-xs) var(--space-xs) var(--space-xs);}
.game-list li a, .game-list li a:hover{font-size: var(--font-size-xs);background-color: var(--color-secondary);color:var(--color-white);border-radius: var(--space-xl);padding: var(--space-xl5)var(--space-2xs);}
.footer-bg{background-color: var(--color-ash-theme);}