@import url("https://fonts.googleapis.com/css2?family=Alex+Brush&display=swap");
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Itim&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Orbitron:wght@400..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Dongle&display=swap");

:root {
  /* color */
  --bg-primary: #f2e4cb;
  --bg-secondary: #eba716;
  --bg-tertiary: #00a7a7;
  --bg-quaternary: #c4a384;

  --text-primary: #a7a7a7;
  --text-secondary: #ffff;

  /* font */
  --font-primary: "Alex Brush", cursive;
  --font-secondary: "JetBrains Mono", monospace;
  --font-tertiary: "Bebas Neue", sans-serif;
  --font-forty: "Itim", cursive;
  --font-fiftieth: "Orbitron", sans-serif;
  --font-sixty: "Dongle", cursive;
}

.font-alex-brush {
  font-family: var(--font-primary);
}

.font-jet-brains-mono {
  font-family: var(--font-secondary);
}

.font-bebas-neue {
  font-family: var(--font-tertiary);
}

.font-itim {
  font-family: var(--font-forty);
}

.font-orbitron {
  font-family: var(--font-fiftieth);
}

.font-dongle {
  font-family: var(--font-sixty);
}

#previewModal {
  transition: opacity 0.5s ease-in-out;
  opacity: 0; /* Modal tersembunyi pada awalnya */
}

#previewModal.opacity-100 {
  opacity: 1; /* Modal menjadi terlihat setelah diberi kelas opacity-100 */
}

#canvasBg {
  position: relative; /* Menambahkan posisi relative agar stiker dengan posisi absolute bisa berada di dalamnya */
}