:root {
  --h2e-surface: rgba(255, 255, 255, 0.78);
  --h2e-surface-soft: rgba(242, 247, 252, 0.82);
}

html {
  background-color: #f7fbff;
}

body {
  background-color: transparent;
  background-image: url("../../assets/img/h2e-science-background-v1.png");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  background-attachment: fixed;
}

header, footer {
  position: relative;
  z-index: 1;
}

main > section {
  background-color: var(--h2e-surface);
  backdrop-filter: blur(1.5px);
  -webkit-backdrop-filter: blur(1.5px);
}

main > section.bg-light, main > section.bg-secondary-subtle {
  background-color: var(--h2e-surface-soft) !important;
}

main > section:first-child {
  background-color: rgba(255, 255, 255, 0.56);
}

.card, .alert, .accordion-item, .modal-content {
  background-color: rgba(255, 255, 255, 0.94);
}

.ihk-logo-panel {
  display: inline-flex;
  align-items: center;
  max-width: 227px;
  padding: 0.75rem;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(13, 59, 115, 0.14);
  border-radius: 0.75rem;
  box-shadow: 0 0.5rem 1.25rem rgba(13, 59, 115, 0.08);
}

.ihk-logo {
  display: block;
  width: 100%;
  height: auto;
}

.ihk-logo-compact {
  max-width: 178px;
}

.ihk-logo-feature {
  max-width: 267px;
}

.ihk-logo-prominent {
  max-width: 320px;
}

.ihk-sidebar-logo {
  display: flex;
  width: 100%;
  max-width: 100%;
  margin-left: auto;
}

@media (max-width: 767.98px) {
  body {
    background-attachment: scroll;
    background-size: auto 100vh;
  }
}

@media (max-width: 767.98px) {
  main > section, main > section:first-child {
    background-color: rgba(255, 255, 255, 0.86);
  }
}

@media (prefers-reduced-transparency: reduce) {
  main > section, main > section:first-child, main > section.bg-light, main > section.bg-secondary-subtle {
    background-color: #ffffff !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}