:root {
  --red: 350;
  --orange: 38;
  --green: 127;
  --main-brightness: 86%;
  --shadow-width: 10px;
}

.bg-custom-purple {
  background-color: hsla(256, 91%, 82%, 1);
}

.bg-custom-red {
  background-color: hsla(var(--red), 100%, var(--main-brightness), 1);
}

.bg-custom-orange {
  background-color: hsla(var(--orange), 100%, var(--main-brightness), 1);
}

.bg-custom-green {
  background-color: hsla(var(--green), 100%, var(--main-brightness), 1);
}

.red-shadow {
  box-shadow: 0px 0px var(--shadow-width) hsla(var(--red), 100%, var(--main-brightness), 1);
}

.orange-shadow {
  box-shadow: 0px 0px var(--shadow-width) hsla(var(--orange), 100%, var(--main-brightness), 1);
}

.green-shadow {
  box-shadow: 0px 0px var(--shadow-width) hsla(var(--green), 100%, var(--main-brightness), 1);
}

.blurred {
   filter: opacity(60%) blur(2px) grayscale(30%);
}

.bl-dashed {
  border-left-style: dashed;
  border-left-width: 1px;
}

.bb-dashed {
  border-bottom-style: dashed;
  border-bottom-width: 1px;
}

.hover-o-70:focus, .hover-o-70:hover {
  opacity: 0.7;
}

button:active {
  border-style: solid;
}

button:focus {
  outline: none;
}

.loading-blur {
  filter: blur(2px);
}