@font-face {
  font-family: Stray;
  font-display: swap;
  src: url("/stray.woff2") format("woff2");
}

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

* { @apply transition-all duration-300 ease-in-out; }
html { @apply h-full scroll-smooth; }
body { @apply bg-ctp-crust text-ctp-text h-full; }
h1 { @apply text-3xl md:text-4xl font-semibold my-4; }
h2 { @apply text-2xl md:text-3xl font-bold my-4; }
h3 { @apply text-xl md:text-2xl font-bold my-4; }
h4 { @apply text-lg md:text-xl font-bold my-4; }
h5 { @apply text-base md:text-lg font-bold my-4; }
h6 { @apply text-sm md:text-base font-bold my-4; }
a { @apply text-ctp-sapphire hover:text-ctp-sky focus:outline-none no-underline; }
article { @apply p-2 sm:p-4 text-ctp-subtext0; }
p { @apply my-4 text-sm sm:text-base; }
code { @apply bg-ctp-overlay0 p-0.5 rounded-md; }
pre { @apply bg-ctp-overlay0 p-4 rounded-md my-4 overflow-x-auto; }
blockquote { @apply bg-ctp-overlay0 p-4; }
hr { @apply my-4 border-ctp-overlay1; }
ul { @apply list-disc ml-6; }
ol { @apply list-decimal ml-6; }
header { @apply flex flex-col justify-between items-center gap-4; }
nav { @apply flex gap-4; }
img { @apply object-cover object-center; }
form { @apply my-4 flex flex-col justify-center items-start; }
input { @apply m-1 py-1 px-2 w-full border bg-ctp-overlay1 text-ctp-subtext1; }
button { @apply m-1 py-1 px-2 w-full text-base; }
footer { @apply my-4 text-center; }
table { @apply w-full my-4; }
thead { @apply bg-ctp-overlay0; }
tbody { @apply bg-ctp-base text-ctp-subtext0; }
tr, th, td { @apply p-1 border border-ctp-overlay1; }