@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Open+Sans:ital,wght@0,300;0,400;0,500;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&family=Orbitron:wght@400;500;600;700;800;900&display=swap');

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

@layer base {
  body {
    @apply bg-bastille text-white
  }

  input,
  select {
    @apply p-1
  }

  option {
    @apply text-cinder-500
  }

  input:not(.no-default),
  select:not(.no-default) {
    @apply rounded-lg text-cinder-500 interactive
  }

  * {
    font-family: 'Open Sans', sans-serif;
  }
}

@layer components {
  .panel {
    @apply bg-cinder shadow-xl p-8 rounded-xl
  }

  .header {
    @apply text-2xl font-bold
  }

  .subheader {
    @apply text-xl font-bold
  }

  button:not(.no-default) {
    @apply interactive p-1
  }

  button:not([class*="bg-"]):not(.no-default) {
    @apply bg-olive-drab
  }

  .interactive {
    @apply border-2 rounded-lg border-falcon cursor-pointer
  }

  .interactive svg {
    @apply fill-falcon
  }

  .interactive:disabled {
    @apply border-falcon-300 brightness-50 cursor-default
  }

  .fade-in {
    animation: fade 300ms forwards ease-in;
    animation-delay: 300ms;
  }

  .fade-out {
    animation: fade 300ms forwards ease-in reverse;
  }

  .trash-can,
  .anvil {
    overflow: visible;
  }

  .trash-can path.trash-lid,
  .anvil .anvil-base,
  .anvil .anvil-body {
    transition: 300ms transform, 300ms rotate, 300ms fill, 300ms stroke;
  }

  .trash-can:hover path.trash-lid {
    transform: translate(-5%, -10%);
    rotate: -10deg;
  }

  .anvil:hover .anvil-base {
    transform: translate(0px, 5%);
  }

  .anvil:hover .anvil-body {
    transform: translate(0px, -5%);
  }
}

@layer utilities {}

@keyframes fade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}