@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');

:root {
  --color-info: hsl(43, 50%, 70%);
  --color-warning: hsl(43, 50%, 70%);
  /* Widget background color with alpha */
  --bga: 70%;
  --color-widget-background: hsl(
    var(--color-widget-background-hsl-values),
    var(--bga)
  );
}

* {
  box-sizing: border-box;
}
body {
  font-family: 'Outfit', sans-serif;
  background-image: url(https://images.pexels.com/photos/2098428/pexels-photo-2098428.jpeg);
  /* backdrop-filter: blur(2px); */
  background-repeat: no-repeat;
  background-size: cover;
}
/* Blur effect for widget backgrounds */
.widget-content:not(.widget-content-frameless),
.widget-content-frame {
  backdrop-filter: blur(5px);
  box-shadow:
    rgba(0, 0, 0, 0.02) 0px 1px 3px 0px,
    rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
}

/* Make widgets same height */
.widget-type-dns-stats {
  height: 100%;
}
.widget-type-dns-stats .widget-content {
  height: calc(100% - var(--widget-gap));
}
.widget-type-dns-stats .widget-content .dns-stats {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.widget-type-prowlarr-custom .widget-content {
  height: calc(100% - var(--widget-gap));
}