:root {
    --background-tooltip: #e8e8e8;
    --white: #fff;
    --black: #32323d;
    --yellow: #f8e71c;
    --blue: #4a90e2;
    --green: #50e3c2;
    --red: #e35050;
    --gray: #dbdbdb;
    --dark-alpha-10: rgba(0, 0, 0, 0.1);
    --dark-alpha-30: rgba(0, 0, 0, 0.3);
    --dark-alpha-50: rgba(0, 0, 0, 0.5);
    --dark-alpha-70: rgba(0, 0, 0, 0.7);
    --dark-alpha-80: rgba(0, 0, 0, 0.8);
    --hover-tooltip-opacity: hsla(0, 0%, 100%, 0.3);
    --hover-box-chart: hsla(0, 0%, 100%, 0.2);
    --text-opacity: hsla(0, 0%, 100%, 0.4);
    --primary-bg: #282828;
    --layout-bg: #1e1e1e;
    --sidebar-bg: rgba(0, 0, 0, 0.05);
    --sidebar-popup-bg: #f2f2f2;
    --alpha-bg: hsla(0, 0%, 100%, 0.05);
    --contrast-bg: rgba(20, 20, 20, 0.4);
    --footer-bg: rgba(20, 20, 20, 1);
    --contrast-color: rgba(254, 255, 255, 0.8);
    --banner-home-dot: #d8d8d8;
    --loading-bg: rgba(0, 0, 0, 0.05);
    --loading-bg-animation: #f5f5f5;
    --scroll-thumb-bg: rgba(0, 0, 0, 0.1);
    --no-content-bg: #f9f9f9;
    --box-item-bg: #fff;
    --artist-layout-bg: hsla(0, 0%, 100%, 0.8);
    --alpha-layout-bg: rgba(12, 3, 3, 0.8);
    --tab-active-bg: hsla(0, 0%, 100%, 0.3);
    --queue-player-popup-bg: #2d2f32;
    --progressbar-active-bg: var(--purple-primary);
    --progressbar-player-bg: rgba(0, 0, 0, 0.1);
    --kara-lyrics-bg: #9882bd;
    --kara-btn-bg: hsla(0, 0%, 100%, 0.1);
    --theme-setting-active: rgba(0, 0, 0, 0.15);
    --player-bg: #fff;
    --select-bg: rgba(0, 0, 0, 0.15);
    --text-primary: #32323d;
    --text-secondary: rgba(0, 0, 0, 0.6);
    --purple-primary: #6b3483;
    --text-item-hover: #6b3483;
    --link-text-hover: #9c32ca;
    --player-text: #32323d;
    --search-bg: #282828;
    --search-text: #dfe6e9;
    --text-placeholder: #757575;
    --setting-icon-text: #495057;
    --navigation-text: #32323d;
    --sidebar-title: rgba(0, 0, 0, 0.7);
    --song-item-action: rgba(50, 50, 61, 0.5);
    --border-primary: rgba(0, 0, 0, 0.1);
    --border-secondary: rgba(0, 0, 0, 0.05);
    --border-box: rgba(0, 0, 0, 0.2);
    --spotlight-item: #f1f1f1;
    --queue-border: rgba(0, 0, 0, 0.1);
    --border-player: rgba(0, 0, 0, 0.05);
    --thumbnail-player: hsla(0, 0%, 100%, 0.8);
    --main-box-shadow: hsla(0, 0%, 81.2%, 0.4);
    --sticky-header-box-shadow: rgba(0, 0, 0, 0.08);
    --notify-box-shadow: rgba(0, 0, 0, 0.2);
    --portal-menu-box-shadow: rgba(0, 0, 0, 0.3);
    --main-text-stroke: #6b3483;
    --chart-bg-img-alpha: hsla(0, 0%, 100%, 0.9);
    --chart-box-bg-alpha: hsla(0, 0%, 100%, 0.1);
    --chart-hover-bg-alpha: hsla(0, 0%, 100%, 0.3);
    --chart-logo-color: #000;
    --chart-icon-play-color: #fff;
    --linear-gradient-bg: linear-gradient(180deg, #740091, #2d1a4c);
    --padding-section: 59px;
    --icon-plus: #be93c5;
    --purple-primary: #7200a1;
  
    --bg-alpha: rgb(28 28 28 / 80%);
    --bxh-vn-us-kpop: hsl(0deg 0% 27% / 50%);
    --bg-frame: rgb(44 44 44);
    --bg-menu-item: hsl(0deg 2% 46% / 50%);
    --hover-button: rgb(114 111 111);
  }
  
  * {
    margin: 0;
    padding: 0;
    box-sizing: inherit;
  }
  
  html {
    /* 62.5% == 1rem => 10px, 100% == 16px */
    font-size: 62.5%;
    line-height: 1.5;
  }
  
  body {
    font-family: "Inter", sans-serif;
    color: var(--text-primary);
    background-color: var(--layout-bg);
    font-weight: 400;
    -ms-scroll-chaining: none;
    overscroll-behavior: none;
    overflow: hidden;
  }
  
  img {
    width: 100%;
  }
  
  li {
    list-style-type: none;
  }
  
  a {
    text-decoration: none;
  }