:root {
  --accent-light:   #FF9FDD;
  --accent-mid:     #53D;
  --accent-mid-80:  #53D8;
  --accent-dark:    #30019E;
  --accent-dark-60: #30019E80;
  --accent-dark-40: #30019E40;

  --backdrop-80:    #30019E80;
  --selected:       #37E8CE;

  --prog-shadow:       var(--accent-mid);
  --prog-base-outline: var(--accent-light);
  --prog-fill-outline: #EEE;
  --prog-fill:         #EEE;
}

.btn:hover .backdrop {
  backdrop-filter: blur(var(--base-font-size)) brightness(2);
  -webkit-backdrop-filter: blur(var(--base-font-size)) brightness(2);
}

.visible.q-large .background {
  background-image: url(../img/sol/q-large.webp);
}

.q-large .backdrop {
  -webkit-mask-image: url(../img/sol/q-large-matte.png);
  mask-image: url(../img/sol/q-large-matte.png);
}

.visible.q-mid .background {
  background-image: url(../img/sol/q-mid.webp);
}

.q-mid .backdrop {
  -webkit-mask-image: url(../img/sol/q-mid-matte.png);
  mask-image: url(../img/sol/q-mid-matte.png);
}

.visible.q-small .background {
  background-image: url(../img/sol/q-small.webp);
}

.q-small .backdrop {
  -webkit-mask-image: url(../img/sol/q-small-matte.png);
  mask-image: url(../img/sol/q-small-matte.png);
}

.visible.o-large .background {
  background-image: url(../img/sol/o-large.webp);
}

.visible.o-mid .background {
  background-image: url(../img/sol/o-mid.webp);
}

.visible.o-small .background {
  background-image: url(../img/sol/o-small.webp);
}

.visible.o-xsmall .background {
  background-image: url(../img/sol/o-xsmall.webp);
}

.ui form .background {
  background-image: url(../img/sol/form-input.webp);
}

.btn .background {
  background-image: url(../img/sol/c.png);
}