@import "tailwindcss";

@theme {
  --font-sans: "Atkinson Hyperlegible Mono", sans-serif;
  --font-mono: "IBM Plex Mono", monospace;

  --color-brand: #ef4e27;
  --color-face: #dbdddb;
  --color-screen: #000000;
  --color-creme: #f5f0e6;
  --color-border: rgba(0, 0, 0, 0.05);
  --bg-url: url("/bg-ep133.png");
  --shadow-my: 1px 1px 0px 1px #00000077;
}

:root {
  .ep40 {
    --color-brand: #ef4e27;
    --color-face: #e2d8c5;
    --color-screen: #00503a;

    --bg-url: url("/bg-ep40.png");
  }

  .ep1320 {
    --color-brand: #b22e20;
    --color-face: #b3ad8f;
    --color-screen: #0c3235;

    --bg-url: url("/bg-ep1320.png");
  }
}

@layer base {
  a {
    @apply text-blue-500;
  }
}

@layer utilities {
  .animate-pulse-slow {
    animation: pulse-slow 2s ease-in-out infinite;
  }

  @keyframes pulse-slow {
    0%,
    100% {
      opacity: 1;
      transform: scale(1);
    }
    50% {
      opacity: 0.8;
      transform: scale(1.1);
    }
  }
}

:popover-open {
  position: fixed;
  inset: unset;
  left: 32px;
  bottom: 32px;
  margin: 0;
  background: transparent;
  z-index: 100;
}

.bg-grid {
  background-image:
    linear-gradient(to right, var(--color-border) 1px, transparent 1px),
    linear-gradient(to bottom, var(--color-border) 1px, transparent 1px);
  background-size: 40px 40px;
}