header {
  @apply relative z-50;
}

.website_logo {
  @apply w-72 h-auto relative;

  #secondary-logo {
    @apply absolute top-0 left-0 w-full h-auto opacity-0 transition-opacity duration-300 ease-in-out;
  }
  &.has-secondary-logo {
    .custom-logo-link,
    #secondary-logo {
      @apply transition-opacity duration-300 ease-out;
    }
    .custom-logo-link {
      @apply opacity-100;
    }
    #secondary-logo {
      @apply opacity-0 pointer-events-none;
    }
  }

  &.has-secondary-logo:hover {
    .custom-logo-link {
      @apply opacity-0;
    }
    #secondary-logo {
      @apply opacity-100;
    }
  }
}

.tools-container {
  @apply flex-row items-center gap-4;
  button {
    @apply flex flex-col items-center gap-4 text-lg;
    &:hover {
      @apply underline underline-offset-8 decoration-1;
    }

    img {
      @apply filter-white w-6 h-6;
    }
  }
}