@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

* {
  font-family: 'Inter', sans-serif !important;
}

#page_container {
  min-height: 100vh;
}

/* greeting */
.widget-greeting span {
  font-weight: 600 !important;
  letter-spacing: -0.5px !important;
}

/* search bar */
input[type='text'] {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 14px !important;
  padding: 14px 20px !important;
  backdrop-filter: blur(20px) !important;
  transition: all 0.3s ease !important;
}

input[type='text']:focus {
  border-color: rgba(139, 92, 246, 0.5) !important;
  box-shadow: 0 0 20px rgba(139, 92, 246, 0.15) !important;
}

/* service cards */
li.service {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 16px !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
  overflow: hidden !important;
}

li.service:hover {
  background: rgba(255, 255, 255, 0.07) !important;
  border-color: rgba(139, 92, 246, 0.3) !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 30px rgba(139, 92, 246, 0.1) !important;
}

/* resource bars */
.resource-bar {
  border-radius: 8px !important;
  overflow: hidden !important;
}

/* bookmark cards */
li.bookmark {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 14px !important;
  transition: all 0.3s ease !important;
}

li.bookmark:hover {
  background: rgba(255, 255, 255, 0.07) !important;
  transform: translateY(-2px) !important;
}

/* widget cards */
.information-widget-resource {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 14px !important;
  backdrop-filter: blur(20px) !important;
}

/* weather widget */
.information-widget-openmeteo {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 14px !important;
}