header {
  @apply relative z-50;
}

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

  .custom-logo {
    @apply opacity-100;
    transition: transform 0.3s ease-in-out;
  }

  #secondary-logo {
    @apply absolute top-0 left-0 w-full h-auto;
    @apply opacity-0;
    transition: all 0.3s ease-in-out;
  }

  &:hover {
    .custom-logo {
      @apply opacity-0;
      transition: all 0.3s ease-in-out;
      transform: scale(1.03);
    }
    #secondary-logo {
      @apply opacity-100 pointer-events-none;
      transition: all 0.3s ease-in-out;
      transform: scale(1.03);
    }
  }
}

.tools-container {
  @apply flex-row items-center gap-4;
  a,
  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;
    }
  }
}