*,
*::before,
*::after {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

:root {
  /*====== COLOR ======*/
  --background: hsl(261, 89%, 7%);
  --background-gr: hsl(228, 57%, 9%);
  /* COLOR1 */
  --background1: hsl(261, 89%, 7%);
  --text1: hsl(0, 0%, 88%);
  --sub-title1: hsl(300, 100%, 50%);
  /* COLOR2 */
  --background2: hsl(228, 57%, 9%);
  --text2: hsl(0, 0%, 96%);
  --sub-title2: hsl(180, 100%, 50%);
  /* COLOR3 */
  --background3: hsl(0, 0%, 2%);
  --text3: hsl(0, 0%, 80%);
  --sub-title3: hsl(111, 100%, 54%);
  --sub-title3: hsl(18, 100%, 50%);
  /*====== FONT ======*/
  /* FONT-FAMILY */
  --font-title: "Audiowide", sans-serif;
  --font-text: "Share Tech Mono", sans-serif;
  --font-sub: "Rajdhani", sans-serif;
  /* FONT-SIZE */
  font-size: 62.5%;
  --font-size: 1.4rem;
  --font-size-lg: 1.6rem;
  --font-size-xl: 2.4rem;
}

@font-face {
  font-family: "Audiowide";
  src: url(assets/fonts/Audiowide/Audiowide-Regular.ttf);
}
@font-face {
  font-family: "Share Tech Mono";
  src: url(assets/fonts/Share_Tech_Mono/ShareTechMono-Regular.ttf);
}
@font-face {
  font-family: "Rajdhani";
  src: url(assets/fonts/Rajdhani/Rajdhani-Regular.ttf);
}