:root {
  --primary: #150135;

  --secondary: #6c2bad;

  --secondary-hover: #3c7aca;

  --pink: #ff00f2;
}

.bg-img {
  /* background-image: url(/frontend/Images/Black\ Background\ Abstract.jpg); */

  background:
    linear-gradient(var(--primary), #6c2bad4d, var(--primary)),
    radial-gradient(
      circle 700px at 20% 30%,

      rgba(255, 0, 179, 0.445),
      transparent
    ),
    radial-gradient(
      circle 500px at 80% 70%,

      rgba(255, 0, 179, 0.445),
      transparent
    );

  min-height: 90vh;

  height: auto;

  background-size: cover;

  background-position: center center;

  background-repeat: no-repeat;

  /* background-blend-mode: overlay; */

  /* background-color: rgba(0, 0, 0, 0.467); */
}

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

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

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

  color: white;
}

.nav-link {
  color: white;
}

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

.navbar-toggler {
  border: none !important;

  box-shadow: none !important;
}

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

  color: white;

  border-color: transparent;
}

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

  color: white;

  border-color: transparent;
}

form a {
  text-decoration: none;

  color: white;

  transition: 0.2s ease-in-out;
}

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

.bg-translucent {
  background-color: #00000063;
}

#sortSelect:hover {
  cursor: pointer;
}

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

textarea {
  resize: none;
}