:root {
  --theme-50: 12 16 24;
  --theme-100: 19 26 38;
  --theme-200: 42 54 73;
  --theme-300: 112 132 161;
  --theme-500: 69 120 255;
  --theme-700: 226 232 240;
  --theme-800: 203 213 225;
  --theme-900: 15 23 42;
}

body {
  background:
    radial-gradient(circle at 12% -10%, rgba(69, 120, 255, .22), transparent 34rem),
    radial-gradient(circle at 88% 0, rgba(45, 212, 191, .11), transparent 28rem),
    #0c1018;
}

#information-widgets {
  margin: 1.25rem 1.5rem 0;
  padding: .55rem 1rem;
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: .9rem;
  background: rgba(15, 23, 42, .62);
  backdrop-filter: blur(14px);
}

.services-group {
  padding: .35rem;
}

.service-group-name {
  letter-spacing: .01em;
  font-size: 1.05rem;
}

.service-card {
  border: 1px solid rgba(148, 163, 184, .15);
  border-radius: .75rem;
  background: rgba(30, 41, 59, .52) !important;
  box-shadow: none !important;
}

.service-card:hover {
  transform: translateY(-1px);
  border-color: rgba(96, 165, 250, .55);
  background: rgba(30, 41, 59, .88) !important;
}

.service-name {
  font-size: .84rem;
  letter-spacing: .005em;
}

.service-description {
  margin-top: .15rem;
  font-size: .68rem;
  color: rgb(148 163 184) !important;
}

.service-tags {
  right: .55rem;
}

#footer { padding-top: 1.5rem; }

@media (max-width: 640px) {
  #information-widgets { margin: .75rem .75rem 0; }
  #services { margin: .75rem; }
}