:root {
  /* Primary colors */
  --primary-color: hsl(0, 0%, 0%);
  --secondary-color: hsl(0, 0%, 100%);
  --gray-color: hsl(0, 0%, 50%);

  /* Background colors */
  --background-color: hsl(0, 0%, 100%);
  --background-color-secondary: hsl(0, 0%, 95%);
  --background-color-translucent: hsla(0, 0%, 100%, 0.25);
  /* Text colors */
  --text-color: hsl(0, 0%, 0%);
  --text-color-invert: hsl(0, 0%, 100%);
  /* Border colors */
  --border-color: hsl(0, 0%, 100%);
  --border-color-translucent: hsla(0, 0%, 100%, 0.3);
  /* Button colors */
  --button-text-color: hsl(0, 0%, 100%);
  --button-border-color: hsl(0, 0%, 0%);

  /* box-shadow */
  --box-shadow: 10px 10px 40px rgba(0, 0, 0, 0.2);
  --box-shadow-secondary: 1px 1px 40px rgba(0, 0, 0, 0.1);

  /* Navigation */
  --nav-item-background: hsla(0, 0%, 100%, 0.2);
  --nav-item-background-hover: hsla(0, 0%, 100%, 0.3);
}
:root {
  --transition-bouncy: cubic-bezier(.68, -.55, .265, 1.55);
}

/* Dark theme colors */
:root body.darkmode {
  /* Primary colors */
  --primary-color: hsl(0, 0%, 100%);
  --secondary-color: hsl(0, 0%, 0%);
  --gray-color: hsl(0, 0%, 50%);

  /* Background colors */
  --background-color: hsl(0, 0%, 0%);
  --background-color-secondary: hsl(0, 0%, 5%);
  --background-color-translucent: hsla(0, 0%, 0%, 0.3);
  /* Text colors */
  --text-color: hsl(0, 0%, 100%);
  --text-color-invert: hsl(0, 0%, 0%);
  /* Border colors */
  --border-color: hsl(0, 0%, 100%);
  --border-color-translucent: hsla(0, 0%, 88%, 0.1);
  /* Button colors */
  --button-text-color: hsl(0, 0%, 100%);
  --button-border-color: hsl(0, 0%, 48%);

  /* box-shadow */
  --box-shadow: 1px 1px 20px rgba(0, 0, 0, 0.3);
  --box-shadow-secondary: 1px 1px 40px rgba(0, 0, 0, 0.1);
}