*,
*::before,
*::after {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: #e5e7eb; /* gray-200 */
}

html {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-feature-settings: normal;
  font-variation-settings: normal;
}

body {
  margin: 0;
  line-height: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}

p {
  margin: 0;
}

ul,
ol,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

a {
  color: inherit;
  text-decoration: inherit;
}

b,
strong {
  font-weight: bolder;
}

img,
svg,
video {
  display: block;
  vertical-align: middle;
}

img,
video {
  max-width: 100%;
  height: auto;
}

/* ------------------------------------------------------------------ */
/* Base typography (formerly @layer base in the Tailwind source)       */
/* ------------------------------------------------------------------ */

:root {
  color: #0f172a; /* slate-900 */
  background-color: #fff;
}

h1 {
  font-size: 1.5rem; /* text-2xl */
  line-height: 2rem;
  font-weight: 700;
}

h2 {
  font-size: 1.25rem; /* text-xl */
  line-height: 1.75rem;
  font-weight: 700;
  margin-top: 0.75rem; /* mt-3 */
}

h3 {
  font-size: 1.125rem; /* text-lg */
  line-height: 1.75rem;
  font-weight: 700;
  margin-top: 0.75rem; /* mt-3 */
}

a {
  color: #2563eb; /* blue-600 */
}

p {
  margin-top: 0.25rem; /* mt-1 */
  margin-bottom: 1rem; /* mb-4 */
}

@media (prefers-color-scheme: dark) {
  :root {
    color: #e5e7eb; /* gray-200 */
    background-color: #000;
  }

  a {
    color: #60a5fa; /* blue-400 */
  }
}

/* ------------------------------------------------------------------ */
/* Utilities                                                           */
/* ------------------------------------------------------------------ */

/* Layout & sizing */
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.max-w-3xl {
  max-width: 48rem;
}
.w-full {
  width: 100%;
}
.w-28 {
  width: 7rem;
}
.w-32 {
  width: 8rem;
}
.h-28 {
  height: 7rem;
}
.h-auto {
  height: auto;
}
.p-4 {
  padding: 1rem;
}
.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Spacing */
.m-1 {
  margin: 0.25rem;
}
.mt-1 {
  margin-top: 0.25rem;
}
.mt-4 {
  margin-top: 1rem;
}
.mt-8 {
  margin-top: 2rem;
}
.mt-12 {
  margin-top: 3rem;
}
.mb-1 {
  margin-bottom: 0.25rem;
}
.mb-2 {
  margin-bottom: 0.5rem;
}
.mb-3 {
  margin-bottom: 0.75rem;
}
.mb-4 {
  margin-bottom: 1rem;
}
.mb-8 {
  margin-bottom: 2rem;
}
.mb-10 {
  margin-bottom: 2.5rem;
}
.mb-12 {
  margin-bottom: 3rem;
}
.mr-2 {
  margin-right: 0.5rem;
}

/* Flexbox */
.flex {
  display: flex;
}
.flex-row {
  flex-direction: row;
}
.flex-col {
  flex-direction: column;
}
.flex-none {
  flex: none;
}
.justify-between {
  justify-content: space-between;
}
.basis-1\/3 {
  flex-basis: 33.333333%;
}
.basis-2\/3 {
  flex-basis: 66.666667%;
}

/* Space between nav links (space-x-2.5 = 0.625rem) */
.space-x-2\.5 > * + * {
  margin-left: 0.625rem;
}

/* Positioning & overflow */
.float-right {
  float: right;
}
.overflow-hidden {
  overflow: hidden;
}

/* Typography */
.text-center {
  text-align: center;
}
.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}
.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}
.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}
.font-bold {
  font-weight: 700;
}
.italic {
  font-style: italic;
}
.underline {
  text-decoration: underline;
}
.leading-normal {
  line-height: 1.5;
}

/* Colors */
.text-slate-900 {
  color: #0f172a;
}
.text-gray-900 {
  color: #111827;
}
.text-gray-700 {
  color: #374151;
}
.text-gray-500 {
  color: #6b7280;
}
.bg-white {
  background-color: #fff;
}

@media (prefers-color-scheme: dark) {
  .dark\:text-gray-200 {
    color: #e5e7eb;
  }
  .dark\:text-white {
    color: #fff;
  }
  .dark\:bg-gray-900 {
    background-color: #111827;
  }
}

/* Borders & radii */
.border-t {
  border-top-width: 1px;
}
.border-r {
  border-right-width: 1px;
}
.border-b {
  border-bottom-width: 1px;
}
.border-l-0 {
  border-left-width: 0;
}
.border-gray-400 {
  border-color: #9ca3af;
}
.rounded-l {
  border-top-left-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
}
.rounded-r {
  border-top-right-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
}
.rounded-b-none {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.rounded-full {
  border-radius: 9999px;
}

/* Background images (project card icons) */
.bg-cover {
  background-size: cover;
}
.bg-center {
  background-position: center;
}

/* Lists */
.list-none {
  list-style: none;
}
.list-disc {
  list-style-type: disc;
}
.list-inside {
  list-style-position: inside;
}

/* ------------------------------------------------------------------ */
/* Responsive (Tailwind breakpoints: sm = 640px, lg = 1024px)          */
/* Must come after the base utilities so it can override them.         */
/* ------------------------------------------------------------------ */

@media (min-width: 640px) {
  .sm\:w-40 {
    width: 10rem;
  }
  .sm\:h-40 {
    height: 10rem;
  }
  .sm\:basis-1\/5 {
    flex-basis: 20%;
  }
  .sm\:basis-4\/5 {
    flex-basis: 80%;
  }
}

@media (min-width: 1024px) {
  .lg\:w-48 {
    width: 12rem;
  }
}