Finality-Coloured.css

@import url("https://cdn.jsdelivr.net/gh/tedhinklater/finality@main/finality.css");

/* Backdrop */
.layout-desktop .backdropImage {
  filter: blur(4px) saturate(124%) contrast(100%) brightness(22%);
  transition: filter 0.3s;
}

.backgroundContainer.withBackdrop {
  background: linear-gradient(0deg, rgb(1.176% 0% 3.529%) 0%, rgb(1.176% 0% 3.529% / 0.9998779296875) 6.25%, rgb(1.174% 0% 3.523% / 0.998046875) 12.5%, rgb(1.165% 0% 3.495% / 0.9901123046875) 18.75%, rgb(1.14% 0% 3.419% / 0.96875) 25%, rgb(1.087% 0% 3.26% / 0.9237060546875) 31.25%, rgb(0.99% 0% 2.971% / 0.841796875) 37.5%, rgb(0.832% 0% 2.495% / 0.7069091796875) 43.75%, rgb(0.588% 0% 1.765% / 0.5) 50%, rgb(0.345% 0% 1.034% / 0.2930908203125) 56.25%, rgb(0.186% 0% 0.558% / 0.158203125) 62.5%, rgb(0.09% 0% 0.269% / 0.0762939453125) 68.75%, rgb(0.037% 0% 0.11% / 0.03125) 75%, rgb(0.012% 0% 0.035% / 0.0098876953125) 81.25%, rgb(0.002% 0% 0.007% / 0.001953125) 87.5%, rgb(0% 0% 0% / 0.0001220703125) 93.75%, rgb(0% 0% 0% / 0) 100% );
  opacity: 1;
  filter:grayscale(30%);
}

.layout-mobile .itemBackdrop {
    display: block;
    -webkit-animation: backdrop-fadein .8s ease-in normal both;
    animation: backdrop-fadein .8s ease-in normal both;
    background-attachment: fixed;
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100vh !important;
    position: fixed !important;
    top: 0;
    margin-top: 0rem;
    left: 0;
    width: 100%;
    z-index: -1;
    filter: blur(0px) saturate(100%) contrast(130%) brightness(20%);
 }

.layout-mobile .backdropImage {
  filter: blur(0px) saturate(100%) contrast(120%) brightness(65%);
  transition: filter 0.3s;
}