:root {
  --accent-light:   #7BC3FF;
  --accent-mid:     #06D;
  --accent-mid-80:  #06D8;
  --accent-dark:    #0045AA;
  --accent-dark-80: #0045AA80;
  --accent-dark-40: #0045AA40;

  --text-color:     #0045AA;
  --text-color-90:  #0045AA90;
  
  --selected:       #000;
  --backdrop-80:    #D2EBFF80;

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

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

.q .backdrop {
  backdrop-filter: blur(var(--base-font-size)) contrast(0.95) brightness(1.05);
  -webkit-backdrop-filter: blur(var(--base-font-size)) contrast(0.95) brightness(1.05);
}

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

.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/eth/q-large.webp);
}

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

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

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

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

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

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

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

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

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

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

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

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