/* VARIABLES */

:root {
  /*BORDERS */
  --divider: var(--accent-1) 1px solid;

  /* COLORS: CONSTANT */
  --button-fg: white;
  --accent-1: rgb(200 182 249);
  --accent-2: #f7f4fe00;

  /* COLORS: DARK THEME (DEFAULT) */
  --foreground: white;
  --background: #090057;
  --callout-background: #43279c;
  --link: #ff61e5;
  --button-bg: #9900a1;
  --button-bg-hover: #6b0070;
}

[data-theme="light"] {
  /* COLORS: LIGHT THEME */
  --foreground: black;
  --background: white;
  --callout-background: #d2bbfd;
  --link: #9900a1;
  --button-bg: #9900a1;
  --button-bg-hover: #e000eb;
}

/* ELEMENTS */

body {
  background-color: var(--background);
  color: var(--foreground);
}

a {
  color: var(--link);
}

a:hover {
  color: var(--foreground);
}

.nav-item {
  color: var(--foreground);
}

.nav-item:hover {
  color: var(--link);
}

.btn {
  background-color: var(--button-bg);
  color: var(--button-fg);
  padding: var(--btn-padding);
  border: none;
  text-decoration: none;
}

.btn:hover {
  background-color: var(--button-bg-hover);
}

#toggleTheme ul {
  background-color: var(--background);
  text-decoration: revert;
}

#toggleTheme ul .selected {
  background-color: var(--link);
  color: var(--background);
}

#toggleTheme ul li:not(.selected):hover {
  background-color: var(--button-bg-hover);
}

header {
  border-bottom: var(--divider);
}

.sec-footer {
  border-top: var(--divider);
}