@import url('https://fonts.googleapis.com/css2?family=Teko:wght@400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Teko:wght@400;500&family=Audiowide&display=swap');



/*-----------------------------------*\
  #CUSTOM PROPERTY
\*-----------------------------------*/

:root {

  /**
   * COLORS
   */

  /* background colors */
  --bg-white: hsla(0, 0%, 100%, 1);
  --bg-light-gray: hsla(240, 1%, 83%, 1);
  --bg-jet: hsla(0, 0%, 18%, 1);
  --bg-eerie-black: hsla(0, 0%, 13%, 1);
  --bg-rich-black-fogra-29: hsla(229, 23%, 9%, 1);
  --bg-smoky-black: hsla(0, 0%, 6%, 1);
  --bg-black: hsla(0, 0%, 0%, 1);

  /* gradient colors */
  --gradient-1: linear-gradient(to top,
   var(--bg-black) 0%, transparent 60%);
  --gradient-2: radial-gradient(
    circle at 75% 100%, #950101 0%,
     transparent 100%);

  /* text colors */
  --text-white: hsla(0, 0%, 100%, 1);
  --text-light-gray: hsla(240, 1%, 83%, 1);
  --text-rich-black-fogra-29:
   hsla(216, 42%, 12%, 1);
  --text-smoky-black: hsla(0, 0%, 6%, 1);
  --text-black: hsla(0, 0%, 0%, 1);

  /* border colors */
  --border-white: hsla(0, 0%, 100%, 1);
  --border-light-gray: hsla(240, 1%, 83%, 1);
  --border-gainsboro: hsla(220, 13%, 91%, 1);
  --border-eerie-black: hsla(0, 0%, 13%, 1);
  --border-smoky-black: hsla(0, 0%, 6%, 1);

  /**
   * TYPOGRAPHY
   */

  /* font family */
  --fontFamily-recoleta: 'Audiowide';
  --fontFamily-roboto: 'Teko', sans-serif;

  /* font size */
  --fontSize-1: 4rem;
  --fontSize-2: 5.2rem;
  --fontSize-3: 4rem;
  --fontSize-4: 3rem;
  --fontSize-5: 2.4rem;
  --fontSize-6: 1.8rem;
  --fontSize-7: 2rem;
  --fontSize-8: 2.3rem;
  --fontSize-9: 2rem;
  --fontSize-10: 2rem;

  /* font weight */
  --weight-regular: 400;
  --weight-medium: 500;

  /**
   * SPACING
   */

  --section-spacing: 70px;

  /**
   * BORDER RADIUS
   */

  --radius-pill: 500px;
  --radius-circle: 50%;

  /**
   * TRANSITION
   */

  --transition-1: 0.25s ease;
  --transition-2: 0.5s ease;
  --transition-3: 1000ms
   cubic-bezier(0.03, 0.98, 0.52, 0.99) 0s;
  --cubic-in: cubic-bezier(0.51, 0.03, 0.64, 0.28);
  --cubic-out: cubic-bezier(0.05, 0.83, 0.52, 0.97);

}