@import "./fonts.css";
@import url('./fonts.css');

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

html, body {
  overflow-x: hidden;
  width: 100%;
}

.cursive-title {
  font-family: "Brush Script MT", cursive;
}

.gochi-hand-regular {
  font-family: "Gochi Hand", cursive;
  font-weight: 400;
  font-style: normal;
}

.text-outline {
  -webkit-text-stroke: 2.5px rgba(133, 53, 0, 0.986); /* border color */
  color: white; /* fill color */
}

.text-shadow {
  text-shadow: -4px -1px 0px rgba(201, 95, 24, 0.986);
}

.lobster-two-regular {
  font-family: "Lobster Two", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.lobster-two-bold {
  font-family: "Lobster Two", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.lobster-two-regular-italic {
  font-family: "Lobster Two", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.lobster-two-bold-italic {
  font-family: "Lobster Two", sans-serif;
  font-weight: 800;
  font-style: italic;
}


html {
  scroll-behavior: smooth;
  scroll-padding-top: 3.5rem; /* matches h-14 */
}

/* Smooth mobile scaling */
@media (max-width: 640px) {
  nav ul {
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch; /* smooth iOS scroll */
    scrollbar-width: none; /* hide scrollbar Firefox */
  }

  nav ul::-webkit-scrollbar {
    display: none; /* hide scrollbar Chrome/Safari */
  }
}