:root {
  --accent-light:   #FFE1A7;
  --accent-mid:     #FFC506;
  --accent-mid-80:  #FFC50680;
  --accent-dark:    #75391B;
  --accent-dark-80: #75391B80;

  --text-color:     #481F09;
  --text-color-90:  #481F0990;

  --selected:       #C10;
  --backdrop-80:    #FFE1A780;
  
  --prog-shadow:       #DB7D1F;
  --prog-base-outline: var(--accent-dark);
  --prog-fill-outline: var(--accent-dark);
  --prog-fill:         var(--accent-mid);
}

.backdrop {
  -webkit-backdrop-filter: blur(var(--base-font-size));
  backdrop-filter: blur(var(--base-font-size));
}

.o.hovered .backdrop, .o.selected .backdrop, .ui input:hover ~ .backdrop, .ui input:focus ~ .backdrop {
  -webkit-backdrop-filter: blur(var(--base-font-size)) contrast(0.83) brightness(1.2);
  backdrop-filter: blur(var(--base-font-size)) contrast(0.83) brightness(1.2);
}

.btn:hover .backdrop {
  -webkit-backdrop-filter: blur(var(--base-font-size)) brightness(0.2) saturate(5);
  backdrop-filter: blur(var(--base-font-size)) brightness(0.2) saturate(5);
}

.visible.q-large .background {
  background-image: url(../img/doge/q-large.webp);
}

.q-large .backdrop {
  -webkit-mask-image: url(../img/doge/q-large-matte.png);
  mask-image: url(../img/doge/q-large-matte.png);
}

.visible.q-mid .background {
  background-image: url(../img/doge/q-mid.webp);
}

.q-mid .backdrop {
  -webkit-mask-image: url(../img/doge/q-mid-matte.png);
  mask-image: url(../img/doge/q-mid-matte.png);
}

.visible.q-small .background {
  background-image: url(../img/doge/q-small.webp);
}

.q-small .backdrop {
  -webkit-mask-image: url(../img/doge/q-small-matte.png);
  mask-image: url(../img/doge/q-small-matte.png);
}

.visible.o-large .background {
  background-image: url(../img/doge/o-large.webp);
}

.visible.o-mid .background {
  background-image: url(../img/doge/o-mid.webp);
}

.visible.o-small .background {
  background-image: url(../img/doge/o-small.webp);
}

.visible.o-xsmall .background {
  background-image: url(../img/doge/o-xsmall.webp);
}

.ui form .background {
  background-image: url(../img/doge/form-input.webp);
}

.btn .background {
  background-image: url(../img/doge/c.png);
}