@import "tailwindcss";

@layer components {
  .fira-code-light {
    font-family: "Fira Code", monospace;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
  }

  .fira-code-regular {
    font-family: "Fira Code", monospace;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
  }

  .fira-code-bold {
    font-family: "Fira Code", monospace;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
  }

  .jetbrains-mono-thin {
    font-family: "JetBrains Mono", monospace;
    font-optical-sizing: auto;
    font-weight: 100;
    font-style: normal;
  }

  .jetbrains-mono-regular {
    font-family: "JetBrains Mono", monospace;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
  }

  .jetbrains-mono-bold {
    font-family: "JetBrains Mono", monospace;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
  }

  .space-grotesk-light {
    font-family: "Space Grotesk", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
  }

  .space-grotesk-regular {
    font-family: "Space Grotesk", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
  }

  .space-grotesk-bold {
    font-family: "Space Grotesk", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
  }

  .inter-regular {
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
  }
}

#links button {
  position: relative;
}

#links button::before {
  content: '';
  position: absolute;
  top: -24px;
  left: -24px;
  right: -24px;
  bottom: -24px;
}