@font-face {
  font-family: "BDO-Grotesk-reg";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/BDOGrotesk-Regular.woff2");
}
@font-face {
  font-family: "BDO-Grotesk-demi";
  font-style: normal;
  font-weight: 600;
  src: url("../fonts/BDOGrotesk-DemiBold.woff2");
}

:root {
  /* color */
  --black: #0a0a0a;
  --white: #ffffff;
  --lightgray: #fefefe;
  --midgray: #eceaea;
  --gray: #888888;
  --select: #faff74;
  /* font-size */
  --fs-200: 0.7rem;
  --fs-300: 0.875rem;
  --fs-400: 1rem;
  --fs-500: 1.25rem;
  --fs-600: 1.75rem;
  --fs-700: 2rem;
  --fs-800: 2.75rem;
  /* font-family */
  --ff-regular: BDO-Grotesk-reg;
  --ff-demi: BDO-Grotesk-demi;
  /* spaces */
  --xl: 4em;
  --l: 2em;
  --m: 1em;
  --s: 0.5em;
  --xs: 0.2em;

  /* plyer css */
  --plyr-color-main: tranparent;
  --plyr-control-icon-size: 24px;
  --plyr-audio-controls-background: #f70202;
  --plyr-audio-control-color: #ffffff;
  --plyr-audio-control-color-hover: rgba(236, 236, 255, 0.8);
  --plyr-range-thumb-height: 20px;
  --plyr-range-track-height: 2px;
  --plyr-range-fill-background: #ffffff;
  --plyr-audio-range-track-background: #888888;
  --plyr-control-spacing: 2.2rem;
}