:root {
  --primary: #1d2021;
  --bg: #282828;
  --bg-soft: #32302f;
  --bg-1: #3c3836;
  --fg: #ebdbb2;
  --secondary: #d65d0e;
  --secondary-hover: #fe8019;
  --accent: #fabd2f;
  --orange: #d65d0e;
  --yellow: #d79921;
  --aqua: #689d6a;
  --blue: #458588;
  --purple: #b16286;
  --red: #cc241d;
  --gray: #a89984;
  --pink: #b16286;
}

.bg-img {
  background:
    radial-gradient(ellipse 900px 700px at 10% 35%, rgba(214, 93, 14, 0.28), transparent),
    radial-gradient(ellipse 700px 600px at 88% 70%, rgba(215, 153, 33, 0.2), transparent),
    radial-gradient(ellipse 600px 500px at 55% 5%, rgba(177, 98, 134, 0.18), transparent),
    radial-gradient(ellipse 500px 400px at 75% 20%, rgba(104, 157, 106, 0.12), transparent),
    linear-gradient(160deg, #1d2021 0%, #282828 45%, #32302f 100%);

  min-height: 90vh;

  height: auto;

  background-size: cover;

  background-position: center center;

  background-repeat: no-repeat;
}

.bg-img.dashboard {
  min-height: auto;
}

body {
  background-color: var(--primary);
  color: var(--fg);
}

nav,
footer {
  background-color: var(--primary);

  color: var(--fg);
}

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

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

.navbar-toggler {
  border: none !important;

  box-shadow: none !important;
}

.btn-primary {
  background-color: var(--secondary);

  color: var(--fg);

  border-color: transparent;
}

.btn-primary:hover {
  background-color: var(--secondary-hover);

  color: var(--primary);

  border-color: transparent;
}

form a {
  text-decoration: none;

  color: var(--fg);

  transition: 0.2s ease-in-out;
}

form a:hover {
  color: var(--accent);
}

.bg-translucent {
  background-color: rgba(40, 40, 40, 0.6);
}

#sortSelect:hover {
  cursor: pointer;
}

.pinkBorder {
  border: var(--purple) 1px solid;
}

textarea {
  resize: none;
}