@import "tailwindcss";

@import "./fonts/BalsamiqSans";

@theme {
}

:root {
  --safe-area-height: var(--tg-viewport-stable-height, 100dvh);
  --safe-area-width: var(--tg-viewport-width, 100dvw);

  --safe-area-top: var(--tg-viewport-safe-area-inset-top, 0px);
  --safe-content-top: var(--tg-viewport-content-safe-area-inset-top, 0px);
  --safe-top: calc(var(--safe-area-top) + var(--safe-content-top));

  --safe-area-right: var(--tg-viewport-safe-area-inset-right, 0px);
  --safe-content-right: var(--tg-viewport-content-safe-area-inset-right, 0px);
  --safe-right: calc(var(--safe-area-right) + var(--safe-content-right));

  --safe-area-bottom: var(--tg-viewport-safe-area-inset-bottom, 0px);
  --safe-content-bottom: var(--tg-viewport-content-safe-area-inset-bottom, 0px);
  --safe-bottom: calc(var(--safe-area-bottom) + var(--safe-content-bottom));

  --safe-area-left: var(--tg-viewport-safe-area-inset-left, 0px);
  --safe-content-left: var(--tg-viewport-content-safe-area-inset-left, 0px);
  --safe-left: calc(var(--safe-area-left) + var(--safe-content-left));
}

html,
body {
  background: #9ebf3e;
  height: var(--safe-area-height);
  width: var(--safe-area-width);
  font-family: "BalsamiqSans", sans-serif;
}

#root {
  width: 100%;
  height: 100%;
  max-width: 600px;
  margin: auto;
  overflow: hidden;
  position: relative;
}

button {
  &:focus-visible {
    outline: none;
  }
}