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

:root {
  --font-family-base: "Inter", sans-serif;
  --background-image-url: url("../images/website/game4.png"); /* updated the variable name for clarity */

  font-family: var(--font-family-base);
  color: rgba(255, 255, 255, 0.87);
  background: var(--background-image-url) no-repeat;
  /* The image is a screenshot of the game. It sHOULD COVER THE ENTIRE screen in a nice way. */
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-color: #000;
  /* background-image: url("/assets/images/website/game2.png"); */
  image-rendering: pixelated;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

canvas {
  display: block;
  margin: 0 auto;
  touch-action: none;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

body {
  padding-top: 10rem;
}

#app {
  margin: 0 auto;
}

@font-face {
  font-family: "MoleFont";
  src: url("../fonts/LanaPixel.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}


.molefont {
  font-family: "MoleFont", sans-serif;
}