:root {
  --ost-logo-image: url("./style/OST_background.png");
  --ost-logo-fallback: linear-gradient(135deg, #111111 0%, #6f6f6f 42%, #f2f2f2 68%, #202020 100%);
  --ost-logo-stroke: #000000;
}

.logo-text,
.mobile-logo-text {
  --ost-logo-stroke-width: clamp(2px, 0.022em, 4px);
  --ost-logo-stroke-width-negative: clamp(-4px, -0.022em, -2px);
  color: #000000;
  background-image: var(--ost-logo-image), var(--ost-logo-fallback);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  overflow: visible;
  padding-top: 0.18em;
  padding-right: calc(var(--ost-logo-stroke-width) + 0.14em);
  padding-left: calc(var(--ost-logo-stroke-width) + 0.04em);
  margin-top: -0.18em;
  margin-right: calc(var(--ost-logo-stroke-width-negative) - 0.14em);
  margin-left: calc(var(--ost-logo-stroke-width-negative) - 0.04em);
  text-shadow: none;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .logo-text,
  .mobile-logo-text {
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter:
      drop-shadow(var(--ost-logo-stroke-width-negative) 0 0 var(--ost-logo-stroke))
      drop-shadow(var(--ost-logo-stroke-width) 0 0 var(--ost-logo-stroke))
      drop-shadow(0 var(--ost-logo-stroke-width-negative) 0 var(--ost-logo-stroke))
      drop-shadow(0 var(--ost-logo-stroke-width) 0 var(--ost-logo-stroke));
  }
}

@media (min-width: 769px) {
  .mobile-only,
  .mobile-logo-panel,
  .mobile-bottom-logo {
    display: none !important;
  }
}