/* ---------------------- Google fonts --------------------------*/
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Noto+Serif+TC:wght@200..900&family=Platypi:ital,wght@0,300..800;1,300..800&display=swap");

/* --------------- tailwind css ------------------*/

@import "tailwindcss";

@theme {
  /* font family */
  --font-tc: "Noto Serif TC", serif;
  --font-platypi: "Platypi", serif;
  --font-inter: "Inter", sans-serif;

  --transition-smooth: 0.35s;
}

/* ------------------ Global CSS ---------------------*/

html {
  /* font-size: 0.52vw; */
  @apply lg:text-[0.520vw] md:text-[55%] text-[2.32vw];
}

body {
  @apply font-tc font-normal md:text-[1.6rem] text-[1.5rem] tracking-[0.095em] leading-[1.35] text-[#808588] bg-white;
}

/* container */
.container {
  @apply mx-auto lg:px-0 px-[2rem] lg:max-w-[142.5rem] md:max-w-[76.8rem] max-w-[64rem];
}

.container_full {
  @apply mx-auto px-[2rem] lg:max-w-[100%] md:max-w-[76.8rem] max-w-[64rem];
}

.menu_container {
  @apply mx-auto px-[2rem] lg:max-w-fit md:max-w-[76.8rem] max-w-[64rem];
}

/* title1 */
.title40 {
  @apply font-tc font-semibold md:text-[4rem] text-[2.8rem] leading-[1] tracking-[0] text-[#003254];
}


/* heading */
h1,
h2,
h3,
h4,
h5,
h6 {
  @apply block tracking-normal;
}
