:root {
  --taproot-logo-fill: #efb200;
  --taproot-logo-filter: drop-shadow(1px 1px 2px oklch(15% 0.25 216));
}

a.nav-logo {
  line-height: 0;

  svg {
    height: var(--esp-header-height);
    width: var(--esp-header-height);
    color: var(--taproot-logo-fill);
    filter: var(--taproot-logo-filter);
    transition: transform 0.5s ease-in-out;
  }

  &:hover {
    background: transparent;
    svg {
      transform: scale(1.12);
    }
  }
}

[theme="light"] {
  esp-page {
    --esp-page-background-image: url(/public/assets/papyrus.webp);
    --esp-page-background-image-opacity: 0.5;
  }
}

[theme="dark"] {
  esp-page {
    --esp-page-background-image: url(/public/assets/connectwork.webp);
    --esp-page-background-image-opacity: 0.55;
  }
}

esp-header-button#light-dark-button {
  svg {
    display: none;
  }
  &.is-light {
    .moon-icon {
      display: block;
    }
    .sun-icon {
      display: none;
    }
  }
  &.is-dark {
    .moon-icon {
      display: none;
    }
    .sun-icon {
      display: block;
    }
  }
}

.center-content {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: grid;
  place-content: center;
}

esp-header {
  --esp-header-brand-placement: baseline;
}