@tailwind base;
@tailwind components;
@tailwind utilities;

#root {
  font-family: 'Press Start 2P';
}

@layer utilities {
  .retro-text-shadow {
    text-shadow: 0px 1.5px 0px #000000, -1px 3px 0px rgba(0, 0, 0, 0.54);
  }

  .center-x-axis {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
}

@layer components {
  .download-button {
    @apply retro-text-shadow center-x-axis center-x-axis -bottom-4 z-10 h-12 w-10/12 border-2 text-xs text-white shadow-2xl transition-all hover:-translate-x-1/2 hover:scale-105 hover:duration-200 active:-translate-x-1/2 active:scale-95 active:opacity-80 active:shadow-none active:duration-75;
  }
}