@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: local('Inter'),
              url('../../fonts/InterVariable.woff2') format('woff2');
}

:root {
  --radius-4:  4px;
  --radius-6:  6px;
  --radius-8:  8px;
  --radius-12: 12px;
  --radius-16: 16px;
  --radius-24: 24px;
  --radius-32: 32px;
  --spacing-2:  2px;
  --spacing-4:  4px;
  --spacing-6:  6px;
  --spacing-8:  8px;
  --spacing-10: 10px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-28: 28px;
  --spacing-32: 32px;
  --spacing-36: 36px;
  --spacing-40: 40px;
  --spacing-44: 44px;
  --spacing-52: 52px;
  --spacing-60: 60px;
  --spacing-80: 80px;
  --color-gray-0:   #ffffff;
  --color-gray-25:  #f6f6f8;
  --color-gray-50:  #e9ebed;
  --color-gray-100: #dde0e4;
  --color-gray-200: #bac1c9;
  --color-gray-300: #9ba4b0;
  --color-gray-400: #8791a1;
  --color-gray-500: #657181;
  --color-gray-600: #535d6a;
  --color-gray-700: #3d434c;
  --color-gray-800: #24282e;
  --color-gray-900: #121417;
  --color-accent-25:  #f5f9ff;
  --color-accent-50:  #ebf5ff;
  --color-accent-100: #cce1ff;
  --color-accent-300: #006aeb;
  --color-accent-400: #0059de;
  --color-accent-600: #003e94;
  --color-accent-700: #00265c;
  --color-positive-25:  #eefbf2;
  --color-positive-50:  #c7f5d5;
  --color-positive-100: #a3f0be;
  --color-positive-200: #6bd18f;
  --color-positive-300: #2cba67;
  --color-positive-400: #00a352;
  --color-positive-500: #00803e;
  --color-positive-600: #006b32;
  --color-negative-25:  #fef6f6;
  --color-negative-50:  #fce4e4;
  --color-negative-100: #fbd5d5;
  --color-negative-200: #f8afaf;
  --color-negative-300: #f67e7e;
  --color-negative-400: #f55b5b;
  --color-negative-500: #db2424;
  --color-negative-600: #b51c1c;
  --color-information-25:  #f2f7ff;
  --color-information-50:  #e0edff;
  --color-information-100: #cce1ff;
  --color-information-200: #99c3ff;
  --color-information-300: #66a6ff;
  --color-information-400: #3d8eff;
  --color-information-500: #006aeb;
  --color-information-600: #0059d6;
  --color-warning-25:  #fff6db;
  --color-warning-50:  #ffe8a3;
  --color-warning-100: #ffdd75;
  --color-warning-200: #ffb429;
  --color-warning-300: #f78f08;
  --color-warning-400: #e56b00;
  --color-warning-500: #c24a00;
  --color-warning-600: #a83200;
  --color-rating-mid: #85b129;
  --color-purple-25:  #f7f5fd;
  --color-purple-50:  #eee8fa;
  --color-purple-100: #e4dcf7;
  --color-purple-200: #cabaef;
  --color-purple-500: #5140de;
  --color-teal-25:  #e4f5f8;
  --color-teal-400: #03a48e;
  --color-teal-500: #0497a0;
  --color-teal-700: #044960;
  --color-navy-900: #16263f;
  --color-alpha-light-12: rgba(255, 255, 255, 0.12);
  --color-alpha-light-24: rgba(255, 255, 255, 0.24);
  --color-alpha-light-44: rgba(255, 255, 255, 0.44);
  --color-alpha-light-76: rgba(255, 255, 255, 0.76);
  --color-alpha-light-84: rgba(255, 255, 255, 0.84);
  --color-alpha-dark-12: rgba(20, 20, 20, 0.12);
  --color-alpha-dark-24: rgba(20, 20, 20, 0.24);
  --color-alpha-dark-44: rgba(20, 20, 20, 0.44);
  --color-alpha-dark-76: rgba(20, 20, 20, 0.76);
  --color-alpha-dark-84: rgba(20, 20, 20, 0.84);
  --color-alpha-gray-24: rgba(194, 194, 194, 0.24);
  --color-loot-poor:      #c2c2c2;
  --color-loot-common:    #939393;
  --color-loot-uncommon:  #119400;
  --color-loot-rare:      #0070dd;
  --color-loot-epic:      #a048e5;
  --color-loot-legendary: #ff8000;
  --color-loot-artifact:  #c6a957;
  --color-loot-heirloom:  #31abc9;
  --color-class-death-knight:      #b2313e;
  --color-class-death-knight-25:   #ffdcdc;
  --color-class-demon-hunter:      #943dc1;
  --color-class-demon-hunter-25:   #f7e8f7;
  --color-class-druid:             #ec8334;
  --color-class-druid-25:          #ffe9be;
  --color-class-evoker:            #439a85;
  --color-class-evoker-25:         #cef7f2;
  --color-class-hunter:            #91ad5f;
  --color-class-hunter-25:         #e4f0cb;
  --color-class-mage:              #6ec4e7;
  --color-class-mage-25:           #dbf0ff;
  --color-class-monk:              #5dd29a;
  --color-class-monk-25:           #e0ffe5;
  --color-class-paladin:           #e591b8;
  --color-class-paladin-25:        #ffeff6;
  --color-class-priest:            #ffffff;
  --color-class-priest-invert:     #9ba4b0;
  --color-class-rogue:             #eadb11;
  --color-class-rogue-25:          #fff8d3;
  --color-class-shaman:            #3370d7;
  --color-class-shaman-25:         #ecf6ff;
  --color-class-warlock:           #8788e6;
  --color-class-warlock-25:        #d7d6f6;
  --color-class-warrior:           #bf9e74;
  --color-class-warrior-25:        #f0e0d6;
}

:root {
  --color-social-facebook:            #0866ff;
  --color-social-facebook-hover:      #3b86ff;
  --color-social-facebook-active:     #0058e6;
  --color-social-pinterest:           #e60023;
  --color-social-pinterest-hover:     #ff304f;
  --color-social-pinterest-active:    #cf1935;
  --color-social-youtube:             #ff0000;
  --color-social-youtube-hover:       #ff3f3f;
  --color-social-youtube-active:      #df0000;
  --color-social-discord:             #5c6bc0;
  --color-social-discord-hover:       #7f8cd5;
  --color-social-discord-active:      #5563b3;
  --color-social-twitter-old:         #1da1f2;
  --color-social-twitter-old-hover:   #48baff;
  --color-social-twitter-old-active:  #2491d3;
}

:root {
  --gradient-scrim-image: linear-gradient(180deg, rgba(13, 13, 13, 0) 0%, rgba(13, 13, 13, 0.64) 100%);
  --gradient-scrim-game: linear-gradient(180deg, rgba(20, 20, 20, 0.01) 0%, rgba(20, 20, 20, 0.88) 100%);
  --gradient-social-instagram-icon: url("data:image/svg+xml;utf8,<svg viewBox='0 0 1 1' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect width='1' height='1' fill='url(%23g)'/><defs><radialGradient id='g' cx='0' cy='0' r='10' gradientTransform='matrix(0.0977 -0.0953125 0.0886475 0.671675 0 1)'><stop stop-color='rgb(255,221,85)' offset='0'/><stop stop-color='rgb(255,153,74)' offset='0.17282'/><stop stop-color='rgb(255,118,68)' offset='0.25923'/><stop stop-color='rgb(255,84,62)' offset='0.34564'/><stop stop-color='rgb(241,77,89)' offset='0.50923'/><stop stop-color='rgb(228,70,117)' offset='0.67282'/><stop stop-color='rgb(200,55,171)' offset='1'/></radialGradient></defs></svg>");
  --gradient-social-instagram-icon-hover: url("data:image/svg+xml;utf8,<svg viewBox='0 0 1 1' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect width='1' height='1' fill='url(%23g)'/><defs><radialGradient id='g' cx='0' cy='0' r='10' gradientTransform='matrix(0.0977 -0.0953125 0.0886475 0.671675 0 1)'><stop stop-color='rgb(255,221,85)' offset='0.057292'/><stop stop-color='rgb(255,153,74)' offset='0.35937'/><stop stop-color='rgb(255,118,68)' offset='0.51042'/><stop stop-color='rgb(255,84,62)' offset='0.66146'/><stop stop-color='rgb(241,77,89)' offset='0.74609'/><stop stop-color='rgb(228,70,117)' offset='0.83073'/><stop stop-color='rgb(200,55,171)' offset='1'/></radialGradient></defs></svg>");
  --gradient-social-instagram-icon-active: url("data:image/svg+xml;utf8,<svg viewBox='0 0 1 1' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect width='1' height='1' fill='url(%23g)'/><defs><radialGradient id='g' cx='0' cy='0' r='10' gradientTransform='matrix(0.0977 -0.0953125 0.0886475 0.671675 0 1)'><stop stop-color='rgb(255,84,62)' offset='0'/><stop stop-color='rgb(241,77,89)' offset='0.25'/><stop stop-color='rgb(228,70,117)' offset='0.5'/><stop stop-color='rgb(200,55,171)' offset='1'/></radialGradient></defs></svg>");
  --gradient-social-instagram-label: url("data:image/svg+xml;utf8,<svg viewBox='0 0 1 1' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect width='1' height='1' fill='url(%23g)'/><defs><radialGradient id='g' cx='0' cy='0' r='10' gradientTransform='matrix(0.0977 -0.0953125 0.0886475 0.671675 0 1)'><stop stop-color='rgb(255,221,85)' offset='0'/><stop stop-color='rgb(255,153,74)' offset='0.067561'/><stop stop-color='rgb(255,118,68)' offset='0.10134'/><stop stop-color='rgb(255,84,62)' offset='0.13512'/><stop stop-color='rgb(241,77,89)' offset='0.3396'/><stop stop-color='rgb(227,69,117)' offset='0.54407'/><stop stop-color='rgb(200,55,171)' offset='1'/></radialGradient></defs></svg>");
  --gradient-social-instagram-label-hover: url("data:image/svg+xml;utf8,<svg viewBox='0 0 1 1' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect width='1' height='1' fill='url(%23g)'/><defs><radialGradient id='g' cx='0' cy='0' r='10' gradientTransform='matrix(0.0977 -0.0953125 0.0886475 0.671675 0 1)'><stop stop-color='rgb(255,221,85)' offset='0'/><stop stop-color='rgb(255,153,74)' offset='0.16146'/><stop stop-color='rgb(255,118,68)' offset='0.24219'/><stop stop-color='rgb(255,84,62)' offset='0.32292'/><stop stop-color='rgb(241,77,89)' offset='0.59115'/><stop stop-color='rgb(227,69,117)' offset='0.85938'/><stop stop-color='rgb(200,55,171)' offset='1'/></radialGradient></defs></svg>");
  --gradient-social-instagram-label-active: url("data:image/svg+xml;utf8,<svg viewBox='0 0 1 1' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect width='1' height='1' fill='url(%23g)'/><defs><radialGradient id='g' cx='0' cy='0' r='10' gradientTransform='matrix(0.0977 -0.0953125 0.0886475 0.671675 0 1)'><stop stop-color='rgb(255,84,62)' offset='0'/><stop stop-color='rgb(241,77,89)' offset='0.15104'/><stop stop-color='rgb(227,69,117)' offset='0.30208'/><stop stop-color='rgb(200,55,171)' offset='1'/></radialGradient></defs></svg>");
}

:root {
  --shadow-4: 0 2px 4px rgba(20, 20, 20, 0.04);
  --shadow-12: 0 4px 12px rgba(20, 20, 20, 0.12);
}

:root {
  --font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --text-display-48-size:        48px;
  --text-display-48-line-height: 48px;
  --text-display-48-weight:      600;
  --text-display-40-size:        40px;
  --text-display-40-line-height: 44px;
  --text-display-40-weight:      600;
  --text-display-36-size:        36px;
  --text-display-36-line-height: 40px;
  --text-display-36-weight:      600;
  --text-display-32-size:        32px;
  --text-display-32-line-height: 38px;
  --text-display-32-weight:      600;
  --text-display-28-size:        28px;
  --text-display-28-line-height: 34px;
  --text-display-28-weight:      600;
  --text-display-24-size:        24px;
  --text-display-24-line-height: 32px;
  --text-display-24-weight:      600;
  --text-display-22-size:        22px;
  --text-display-22-line-height: 28px;
  --text-display-22-weight:      600;
  --text-display-20-size:        20px;
  --text-display-20-line-height: 28px;
  --text-display-20-weight:      600;
  --text-display-18-size:        18px;
  --text-display-18-line-height: 24px;
  --text-display-18-weight:      600;
  --text-display-16-size:        16px;
  --text-display-16-line-height: 22px;
  --text-display-16-weight:      600;
  --text-display-14-size:        14px;
  --text-display-14-line-height: 20px;
  --text-display-14-weight:      600;
  --text-display-12-size:        12px;
  --text-display-12-line-height: 20px;
  --text-display-12-weight:      600;
  --text-display-12c-size:        12px;
  --text-display-12c-line-height: 16px;
  --text-display-12c-weight:      600;
  --text-body-18-size:        18px;
  --text-body-18-line-height: 28px;
  --text-body-18-weight:      400;
  --text-body-16-size:        16px;
  --text-body-16-line-height: 24px;
  --text-body-16-weight:      400;
  --text-body-14-size:        14px;
  --text-body-14-line-height: 20px;
  --text-body-14-weight:      400;
  --text-body-12-size:        12px;
  --text-body-12-line-height: 16px;
  --text-body-12-weight:      400;
  --text-body-18m-size:        18px;
  --text-body-18m-line-height: 28px;
  --text-body-18m-weight:      500;
  --text-body-16m-size:        16px;
  --text-body-16m-line-height: 24px;
  --text-body-16m-weight:      500;
  --text-body-14m-size:        14px;
  --text-body-14m-line-height: 20px;
  --text-body-14m-weight:      500;
  --text-body-12m-size:        12px;
  --text-body-12m-line-height: 16px;
  --text-body-12m-weight:      500;
  --text-body-11m-size:        11px;
  --text-body-11m-line-height: 12px;
  --text-body-11m-weight:      500;
  --text-body-8m-size:         8px;
  --text-body-8m-line-height:  8px;
  --text-body-8m-weight:       500;
}

.text-display-48 { font-family: var(--font-family-base); font-size: var(--text-display-48-size); line-height: var(--text-display-48-line-height); font-weight: var(--text-display-48-weight); }
.text-display-40 { font-family: var(--font-family-base); font-size: var(--text-display-40-size); line-height: var(--text-display-40-line-height); font-weight: var(--text-display-40-weight); }
.text-display-36 { font-family: var(--font-family-base); font-size: var(--text-display-36-size); line-height: var(--text-display-36-line-height); font-weight: var(--text-display-36-weight); }
.text-display-32 { font-family: var(--font-family-base); font-size: var(--text-display-32-size); line-height: var(--text-display-32-line-height); font-weight: var(--text-display-32-weight); }
.text-display-28 { font-family: var(--font-family-base); font-size: var(--text-display-28-size); line-height: var(--text-display-28-line-height); font-weight: var(--text-display-28-weight); }
.text-display-24 { font-family: var(--font-family-base); font-size: var(--text-display-24-size); line-height: var(--text-display-24-line-height); font-weight: var(--text-display-24-weight); }
.text-display-22 { font-family: var(--font-family-base); font-size: var(--text-display-22-size); line-height: var(--text-display-22-line-height); font-weight: var(--text-display-22-weight); }
.text-display-20 { font-family: var(--font-family-base); font-size: var(--text-display-20-size); line-height: var(--text-display-20-line-height); font-weight: var(--text-display-20-weight); }
.text-display-18 { font-family: var(--font-family-base); font-size: var(--text-display-18-size); line-height: var(--text-display-18-line-height); font-weight: var(--text-display-18-weight); }
.text-display-16 { font-family: var(--font-family-base); font-size: var(--text-display-16-size); line-height: var(--text-display-16-line-height); font-weight: var(--text-display-16-weight); }
.text-display-14 { font-family: var(--font-family-base); font-size: var(--text-display-14-size); line-height: var(--text-display-14-line-height); font-weight: var(--text-display-14-weight); }
.text-display-12 { font-family: var(--font-family-base); font-size: var(--text-display-12-size); line-height: var(--text-display-12-line-height); font-weight: var(--text-display-12-weight); }

.text-body-18   { font-family: var(--font-family-base); font-size: var(--text-body-18-size);  line-height: var(--text-body-18-line-height);  font-weight: var(--text-body-18-weight);  }
.text-body-16   { font-family: var(--font-family-base); font-size: var(--text-body-16-size);  line-height: var(--text-body-16-line-height);  font-weight: var(--text-body-16-weight);  }
.text-body-14   { font-family: var(--font-family-base); font-size: var(--text-body-14-size);  line-height: var(--text-body-14-line-height);  font-weight: var(--text-body-14-weight);  }
.text-body-12   { font-family: var(--font-family-base); font-size: var(--text-body-12-size);  line-height: var(--text-body-12-line-height);  font-weight: var(--text-body-12-weight);  }

.text-body-18m  { font-family: var(--font-family-base); font-size: var(--text-body-18m-size); line-height: var(--text-body-18m-line-height); font-weight: var(--text-body-18m-weight); }
.text-body-16m  { font-family: var(--font-family-base); font-size: var(--text-body-16m-size); line-height: var(--text-body-16m-line-height); font-weight: var(--text-body-16m-weight); }
.text-body-14m  { font-family: var(--font-family-base); font-size: var(--text-body-14m-size); line-height: var(--text-body-14m-line-height); font-weight: var(--text-body-14m-weight); }
.text-body-12m  { font-family: var(--font-family-base); font-size: var(--text-body-12m-size); line-height: var(--text-body-12m-line-height); font-weight: var(--text-body-12m-weight); }
.text-body-11m  { font-family: var(--font-family-base); font-size: var(--text-body-11m-size); line-height: var(--text-body-11m-line-height); font-weight: var(--text-body-11m-weight); }
.text-body-8m   { font-family: var(--font-family-base); font-size: var(--text-body-8m-size);  line-height: var(--text-body-8m-line-height);  font-weight: var(--text-body-8m-weight);  }