:root {
  --accent-light:   #CFEBBA;
  --accent-mid-80:  #2EDA7780;
  --accent-mid:     #2EDA77;
  --accent-dark:    #05361A;
  --accent-dark-80: #05361A80;

  --text-color:     #05361A;
  --text-color-90:  #05361A90;
  --text-color-40:  #05361A40;
  
  --selected:       #794800;
  --backdrop-80:    #CFEBBA80;

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

.backdrop {
  backdrop-filter: blur(var(--base-font-size)) contrast(0.83) brightness(1.2);
  -webkit-backdrop-filter: blur(var(--base-font-size)) contrast(0.83) brightness(1.2);
}

.o.hovered .backdrop, .o.selected .backdrop, .ui input:hover ~ .backdrop, .ui input:focus ~ .backdrop {
  backdrop-filter: blur(var(--base-font-size)) contrast(0.66) brightness(1.5);
  -webkit-backdrop-filter: blur(var(--base-font-size)) contrast(0.66) brightness(1.5);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

#countdown .background {
  background: conic-gradient(
    var(--text-color),
    var(--accent-light)
  );
}