diff --git a/.prettierrc b/.prettierrc
index b18bf8a..85bbebc 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -5,7 +5,11 @@
   "singleQuote": false,
   "tabWidth": 2,
   "trailingComma": "es5",
-  "plugins": ["prettier-plugin-astro"],
+  "plugins": [
+    "prettier-plugin-astro",
+    "prettier-plugin-tailwind-css",
+    "@brown-ccv/prettier-config"
+  ],
   "overrides": [
     {
       "files": "*.astro",
diff --git a/package-lock.json b/package-lock.json
index 75c4b54..2078229 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,6 +14,7 @@
         "@astrojs/rss": "^4.0.5",
         "@astrojs/sitemap": "^3.0.5",
         "@astrojs/tailwind": "^5.1.0",
+        "@brown-ccv/prettier-config": "^0.3.0",
         "@radix-ui/react-checkbox": "^1.0.4",
         "@radix-ui/react-dialog": "^1.0.5",
         "@radix-ui/react-form": "^0.0.3",
@@ -39,7 +40,8 @@
         "eslint": "^8.56.0",
         "eslint-plugin-astro": "^0.31.4",
         "prettier": "^3.2.5",
-        "prettier-plugin-astro": "^0.13.0"
+        "prettier-plugin-astro": "^0.13.0",
+        "prettier-plugin-tailwind-css": "^1.5.0"
       }
     },
     "node_modules/@alloc/quick-lru": {
@@ -655,6 +657,14 @@
         "eslint-plugin-import": "^2.27.5"
       }
     },
+    "node_modules/@brown-ccv/prettier-config": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/@brown-ccv/prettier-config/-/prettier-config-0.3.0.tgz",
+      "integrity": "sha512-4JM926Y8S+W9XZ76brCOhnXrR4o+eGJE0OUlmGe+fVnG5lEFkLRxMT0sBuvDhJ0YmgicG/4vnRZxQfyC8AuZLg==",
+      "peerDependencies": {
+        "prettier": ">=3.0.0"
+      }
+    },
     "node_modules/@codemirror/autocomplete": {
       "version": "6.9.1",
       "resolved": "https://registry.npmjs.org/@codemirror/autocomplete/-/autocomplete-6.9.1.tgz",
@@ -14865,7 +14875,6 @@
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.3.2.tgz",
       "integrity": "sha512-rAVeHYMcv8ATV5d508CFdn+8/pHPpXeIid1DdrPwXnaAdH7cqjVbpJaT5eq4yRAFU/lsbwYwSF/n5iNrdJHPQA==",
-      "devOptional": true,
       "bin": {
         "prettier": "bin/prettier.cjs"
       },
@@ -14896,6 +14905,30 @@
       "integrity": "sha512-o/ObKgtMzl8SlpIdzaxFnt7SATKPxu4oIP/1NL+HDJRzxfJcAkOTAb/ZKMRyULbz4q+1t2/DAebs2Z1QairkZw==",
       "devOptional": true
     },
+    "node_modules/prettier-plugin-tailwind-css": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/prettier-plugin-tailwind-css/-/prettier-plugin-tailwind-css-1.5.0.tgz",
+      "integrity": "sha512-LUbINk8O0l+r7iPO6fUOQtoZdF7lQ0SGZTrlAl6IjW8zc5URMGqdW2QVoIK2de2HQeKvb9X2xv8aUzf+v2UVYw==",
+      "dev": true,
+      "dependencies": {
+        "prettier": "^2.0.5"
+      }
+    },
+    "node_modules/prettier-plugin-tailwind-css/node_modules/prettier": {
+      "version": "2.8.8",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz",
+      "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==",
+      "dev": true,
+      "bin": {
+        "prettier": "bin-prettier.js"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
     "node_modules/prismjs": {
       "version": "1.29.0",
       "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.29.0.tgz",
diff --git a/package.json b/package.json
index 3b61e1a..b201a3b 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
     "@astrojs/rss": "^4.0.5",
     "@astrojs/sitemap": "^3.0.5",
     "@astrojs/tailwind": "^5.1.0",
+    "@brown-ccv/prettier-config": "^0.3.0",
     "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-form": "^0.0.3",
@@ -43,6 +44,7 @@
     "eslint": "^8.56.0",
     "eslint-plugin-astro": "^0.31.4",
     "prettier": "^3.2.5",
-    "prettier-plugin-astro": "^0.13.0"
+    "prettier-plugin-astro": "^0.13.0",
+    "prettier-plugin-tailwind-css": "^1.5.0"
   }
 }
diff --git a/src/components/ActivityPage.tsx b/src/components/ActivityPage.tsx
index 8e244b9..7cca99e 100644
--- a/src/components/ActivityPage.tsx
+++ b/src/components/ActivityPage.tsx
@@ -24,7 +24,7 @@ const ActivityPage = () => {
       {user && activityData && (
         <section className="space-y-2">
           <h3>
-            <span className="font-bold px-2">{activityData.length}</span> download(s)
+            <span className="px-2 font-bold">{activityData.length}</span> download(s)
           </h3>
           <ActivityTable data={activityData} />
         </section>
diff --git a/src/components/ActivityTable.tsx b/src/components/ActivityTable.tsx
index 363de19..b93351b 100644
--- a/src/components/ActivityTable.tsx
+++ b/src/components/ActivityTable.tsx
@@ -7,10 +7,10 @@ export interface ActivityTableProps {
 
 const ActivityTable: React.FC<ActivityTableProps> = ({ data }) => {
   return (
-    <div className="w-full overflow-x-scroll no-scrollbar">
-      <table className="table-fixed border-spacing-2 w-full">
+    <div className="no-scrollbar w-full overflow-x-scroll">
+      <table className="border-spacing-2 w-full table-fixed">
         <thead>
-          <tr className="text-xl bg-neutral-100 text-left text-neutral-900">
+          <tr className="bg-neutral-100 text-neutral-900 text-xl text-left">
             <th>Description</th>
             <th className="w-1/4">User</th>
             <th className="w-1/5">Download Date</th>
@@ -28,8 +28,8 @@ const ActivityTable: React.FC<ActivityTableProps> = ({ data }) => {
                   </td>
                   <td>
                     <div>
-                      <p className="text-lg font-semibold text-neutral-900">{name}</p>
-                      <p className="text-neutral-700 italic overflow-hidden overflow-ellipsis ">
+                      <p className="text-neutral-900 text-lg font-semibold">{name}</p>
+                      <p className="text-neutral-700 overflow-ellipsis  overflow-hidden italic">
                         {email}
                       </p>
                       <p className="small">{institution}</p>
diff --git a/src/components/Card.tsx b/src/components/Card.tsx
index b3b230e..d9ce65f 100644
--- a/src/components/Card.tsx
+++ b/src/components/Card.tsx
@@ -14,11 +14,11 @@ const Card: React.FC<CardProps> = ({ link, image, title, name, institution, bio
   // strip 'public/' from the avatar string since astro's public folder is available without this in the link
   const imageURL = image?.replace("/public", "")
   return (
-    <div className="flex flex-col md:flex-row gap-4 md:gap-8">
+    <div className="md:flex-row md:gap-8 flex flex-col gap-4">
       {image && (
         <div className="flex-none">
           <img
-            className="object-cover rounded-full w-40 h-40 md:w-64 md:h-64"
+            className="md:w-64 md:h-64 object-cover w-40 h-40 rounded-full"
             src={imageURL}
             alt={name}
           />
@@ -27,7 +27,7 @@ const Card: React.FC<CardProps> = ({ link, image, title, name, institution, bio
       <div className="space-y-4">
         <div>
           <a
-            className="text-xl font-semibold underline text-neutral-900"
+            className="text-neutral-900 text-xl font-semibold underline"
             href={link}
             target="_blank"
           >
diff --git a/src/components/DataForm.tsx b/src/components/DataForm.tsx
index eaaa7ea..ffa3aa6 100644
--- a/src/components/DataForm.tsx
+++ b/src/components/DataForm.tsx
@@ -23,7 +23,7 @@ const DataForm = () => {
   return (
     <Form.Root
       ref={formRef}
-      className="p-6 rounded outline outline-neutral-100 outline-1 shadow-md space-y-4"
+      className="outline outline-neutral-100 outline-1 p-6 space-y-4 rounded shadow-md"
       onSubmit={handleSubmit(onSubmit)}
       action="https://repository.library.brown.edu/studio/item/bdr:p54c6u36/"
       target="_blank"
diff --git a/src/components/HeaderLink.astro b/src/components/HeaderLink.astro
index 4f8e1f8..b9d11b0 100644
--- a/src/components/HeaderLink.astro
+++ b/src/components/HeaderLink.astro
@@ -15,7 +15,7 @@ const isActive = href === pathname || href === "/" + subpath?.[0]
   class:list={[
     className,
     "hover:underline underline-offset-8",
-      isActive ? "text-neutral-900 font-semibold underline" : "no-underline",
+    isActive ? "text-neutral-900 font-semibold underline" : "no-underline",
   ]}
   {...props}
 >
diff --git a/src/components/Input.tsx b/src/components/Input.tsx
index 1e097b5..3a8d66c 100644
--- a/src/components/Input.tsx
+++ b/src/components/Input.tsx
@@ -14,14 +14,14 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
     return (
       <Form.Field name={name} className="flex flex-col gap-2">
         <Form.Label>{label}</Form.Label>
-        <div className="flex items-center gap-2 bg-white rounded-full shadow-inner min-w-60 w-max py-3 px-5 focus-within:shadow-inner-focus">
+        <div className="min-w-60 w-max focus-within:shadow-inner-focus flex items-center gap-2 px-5 py-3 bg-white rounded-full shadow-inner">
           {icon && <span className="text-neutral-300 w-5 h-5">{icon}</span>}
 
           <Form.Control asChild>
             <input {...delegated} ref={ref} />
           </Form.Control>
         </div>
-        <Form.Message className="px-2 text-primary-300" match="valueMissing">
+        <Form.Message className="text-primary-300 px-2" match="valueMissing">
           Please enter your {label}
         </Form.Message>
         {match !== undefined && (
diff --git a/src/components/Login.tsx b/src/components/Login.tsx
index 1bff73a..859b9fb 100644
--- a/src/components/Login.tsx
+++ b/src/components/Login.tsx
@@ -34,7 +34,7 @@ const Login: React.FC<LoginProps> = ({ currentUser, setUserFunction }) => {
           <Button onClick={() => login()}>Log In</Button>
         )}
       </div>
-      {message && <p className="font-semibold text-primary-300">{message}</p>}
+      {message && <p className="text-primary-300 font-semibold">{message}</p>}
     </section>
   )
 }
diff --git a/src/components/Publications.tsx b/src/components/Publications.tsx
index b3349df..b36c864 100644
--- a/src/components/Publications.tsx
+++ b/src/components/Publications.tsx
@@ -58,7 +58,7 @@ const PublicationSection: React.FC<PubProps> = ({ publications }) => {
     <>
       <section className="flex flex-col gap-6">
         <h2>Featured Publications</h2>
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
+        <div className="md:grid-cols-2 grid grid-cols-1 gap-2">
           {featuredPubs.map((publication, i) => {
             return (
               <div key={i} className="">
@@ -66,7 +66,7 @@ const PublicationSection: React.FC<PubProps> = ({ publications }) => {
                   <p>{publication.citation}</p>
                   {publication.pdf && (
                     <a
-                      className="no-underline bg-neutral-500 text-neutral-50 rounded-full py-3 px-7 w-max"
+                      className="bg-neutral-500 text-neutral-50 px-7 w-max py-3 no-underline rounded-full"
                       href={publication.pdf}
                     >
                       View PDF
@@ -78,12 +78,12 @@ const PublicationSection: React.FC<PubProps> = ({ publications }) => {
           })}
         </div>
       </section>
-      <Form className="flex flex-col lg:flex-row gap-4 justify-center my-24">
+      <Form className="lg:flex-row flex flex-col justify-center gap-4 my-24">
         <div>
           <Input
             label="Search for a publication"
             name="pubQuery"
-            icon={<MagnifyingGlassIcon className="h-full w-full" />}
+            icon={<MagnifyingGlassIcon className="w-full h-full" />}
             placeholder="Durand, Jorge..."
             value={searchInput}
             onChange={handleChange}
@@ -144,10 +144,10 @@ const PublicationSection: React.FC<PubProps> = ({ publications }) => {
                                 }
                               >
                                 {option.label === "Books" && (
-                                  <div className="flex-none hidden md:block shadow-book-shadow w-40 h-72">
+                                  <div className="md:block shadow-book-shadow h-72 flex-none hidden w-40">
                                     {pub.image ? (
                                       <img
-                                        className="flex-none object-cover h-full w-full"
+                                        className="flex-none object-cover w-full h-full"
                                         src={pub.image}
                                       />
                                     ) : (
@@ -161,7 +161,7 @@ const PublicationSection: React.FC<PubProps> = ({ publications }) => {
                                   {pub.pdf && (
                                     <div className={option.label === "Books" ? "" : "ml-2"}>
                                       <a
-                                        className="no-underline bg-neutral-500 text-neutral-50 rounded-full py-3 px-7 w-max"
+                                        className="bg-neutral-500 text-neutral-50 px-7 w-max py-3 no-underline rounded-full"
                                         href={pub.pdf}
                                       >
                                         View PDF
diff --git a/src/components/Textarea.tsx b/src/components/Textarea.tsx
index 2ead700..cb532ae 100644
--- a/src/components/Textarea.tsx
+++ b/src/components/Textarea.tsx
@@ -14,14 +14,14 @@ export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
     return (
       <Form.Field name={name} className="relative flex flex-col gap-2">
         <Form.Label>{label}</Form.Label>
-        <span className="px-2 py-1 text-xs text-neutral-300 rounded absolute top-9 right-1">
+        <span className="text-neutral-300 top-9 right-1 absolute px-2 py-1 text-xs rounded">
           {characterCount}/{maxLength}
         </span>
         <Form.Control asChild>
           <textarea
             rows={4}
             maxLength={maxLength}
-            className="text-gray-400 text-sm font-medium outline-none border-b-2 w-full py-6"
+            className="w-full py-6 text-sm font-medium text-gray-400 border-b-2 outline-none"
             {...delegated}
             ref={ref}
             onChange={(e) => setCharacterCount(e.target.value.length)}
diff --git a/src/content/news/04-25-2024.md b/src/content/news/04-25-2024.md
index 8a7dcfd..1b8e253 100644
--- a/src/content/news/04-25-2024.md
+++ b/src/content/news/04-25-2024.md
@@ -1,6 +1,6 @@
 ---
 pubDate: 04.25.2024
-heroImage: /public/images/gettyimages-1389862392.webp
+heroImage: /images/gettyimages-1389862392.webp
 title: Static CCMS
 description: This post was generated from CMS
 ---
diff --git a/src/content/news/first-post.md b/src/content/news/first-post.md
index ae9c959..7e406f5 100644
--- a/src/content/news/first-post.md
+++ b/src/content/news/first-post.md
@@ -1,8 +1,8 @@
 ---
-title: 'First post'
-description: 'Lorem ipsum dolor sit amet'
-pubDate: 'Jul 02 2022'
-heroImage: '/blog-placeholder-3.jpg'
+title: "First post"
+description: "Lorem ipsum dolor sit amet"
+pubDate: "Jul 02 2022"
+heroImage: "/blog-placeholder-3.jpg"
 ---
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
diff --git a/src/content/news/markdown-style-guide.md b/src/content/news/markdown-style-guide.md
index 9b6d48b..f6e4373 100644
--- a/src/content/news/markdown-style-guide.md
+++ b/src/content/news/markdown-style-guide.md
@@ -1,8 +1,8 @@
 ---
-title: 'Markdown Style Guide'
-description: 'Here is a sample of some basic Markdown syntax that can be used when writing Markdown content in Astro.'
-pubDate: 'Jul 01 2022'
-heroImage: '/blog-placeholder-1.jpg'
+title: "Markdown Style Guide"
+description: "Here is a sample of some basic Markdown syntax that can be used when writing Markdown content in Astro."
+pubDate: "Jul 01 2022"
+heroImage: "/blog-placeholder-1.jpg"
 ---
 
 Here is a sample of some basic Markdown syntax that can be used when writing Markdown content in Astro.
@@ -81,8 +81,9 @@ within a `footer` or `cite` element, and optionally with in-line changes such as
 > Don't communicate by sharing memory, share memory by communicating.<br>
 > — <cite>Rob Pike[^1]</cite>
 
-[^1]: The above quote is excerpted from Rob Pike's [talk](https://www.youtube.com/watch?v=PAAkCSZUG1c) during
-Gopherfest, November 18, 2015.
+[^1]:
+    The above quote is excerpted from Rob Pike's [talk](https://www.youtube.com/watch?v=PAAkCSZUG1c) during
+    Gopherfest, November 18, 2015.
 
 ## Tables
 
@@ -97,7 +98,7 @@ Gopherfest, November 18, 2015.
 #### Output
 
 | Italics   | Bold     | Code   |
-|-----------|----------|--------|
+| --------- | -------- | ------ |
 | _italics_ | **bold** | `code` |
 
 ## Code Blocks
@@ -128,13 +129,13 @@ Output
 ```html
 <!doctype html>
 <html lang="en">
-<head>
-  <meta charset="utf-8" />
-  <title>Example HTML5 Document</title>
-</head>
-<body>
-<p>Test</p>
-</body>
+  <head>
+    <meta charset="utf-8" />
+    <title>Example HTML5 Document</title>
+  </head>
+  <body>
+    <p>Test</p>
+  </body>
 </html>
 ```
 
@@ -178,23 +179,23 @@ Output
 
 ```markdown
 - Fruit
-    - Apple
-    - Orange
-    - Banana
+  - Apple
+  - Orange
+  - Banana
 - Dairy
-    - Milk
-    - Cheese
+  - Milk
+  - Cheese
 ```
 
 #### Output
 
 - Fruit
-    - Apple
-    - Orange
-    - Banana
+  - Apple
+  - Orange
+  - Banana
 - Dairy
-    - Milk
-    - Cheese
+  - Milk
+  - Cheese
 
 ## Other Elements — abbr, sub, sup, kbd, mark
 
diff --git a/src/content/news/second-post.md b/src/content/news/second-post.md
index 4d2f886..31afbf3 100644
--- a/src/content/news/second-post.md
+++ b/src/content/news/second-post.md
@@ -1,8 +1,8 @@
 ---
-title: 'Second post'
-description: 'Lorem ipsum dolor sit amet'
-pubDate: 'Jul 03 2022'
-heroImage: '/blog-placeholder-4.jpg'
+title: "Second post"
+description: "Lorem ipsum dolor sit amet"
+pubDate: "Jul 03 2022"
+heroImage: "/blog-placeholder-4.jpg"
 ---
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
diff --git a/src/content/news/third-post.md b/src/content/news/third-post.md
index 43b17ab..0747bcc 100644
--- a/src/content/news/third-post.md
+++ b/src/content/news/third-post.md
@@ -1,8 +1,8 @@
 ---
-title: 'Third post'
-description: 'Lorem ipsum dolor sit amet'
-pubDate: 'Jul 04 2022'
-heroImage: '/blog-placeholder-2.jpg'
+title: "Third post"
+description: "Lorem ipsum dolor sit amet"
+pubDate: "Jul 04 2022"
+heroImage: "/blog-placeholder-2.jpg"
 ---
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
diff --git a/src/content/news/using-mdx.mdx b/src/content/news/using-mdx.mdx
index 31e7c8a..277be81 100644
--- a/src/content/news/using-mdx.mdx
+++ b/src/content/news/using-mdx.mdx
@@ -1,8 +1,8 @@
 ---
-title: 'Using MDX'
-description: 'Lorem ipsum dolor sit amet'
-pubDate: 'Jul 12 2022'
-heroImage: '/blog-placeholder-5.jpg'
+title: "Using MDX"
+description: "Lorem ipsum dolor sit amet"
+pubDate: "Jul 12 2022"
+heroImage: "/blog-placeholder-5.jpg"
 ---
 
 This theme comes with the [@astrojs/mdx](https://docs.astro.build/en/guides/integrations-guide/mdx/) integration installed and configured in your `astro.config.mjs` config file. If you prefer not to use MDX, you can disable support by removing the integration from your config file.
@@ -18,7 +18,7 @@ If you have existing content authored in MDX, this integration will hopefully ma
 Here is how you import and use a UI component inside of MDX.  
 When you open this page in the browser, you should see the clickable button below.
 
-import HeaderLink from '../../components/HeaderLink.astro';
+import HeaderLink from "../../components/HeaderLink.astro"
 
 <HeaderLink href="#" onclick="alert('clicked!')">
   Embedded component in MDX
diff --git a/src/content/pages/data.md b/src/content/pages/data.md
index 15654b0..f213093 100644
--- a/src/content/pages/data.md
+++ b/src/content/pages/data.md
@@ -6,4 +6,4 @@ title: Data
 
 After submitting this form, you will be redirected to the Brown Digital Repository to download the data.
 
-The data is currently available for SPSS and STATA file formats.
\ No newline at end of file
+The data is currently available for SPSS and STATA file formats.
diff --git a/src/content/pages/home.md b/src/content/pages/home.md
index f44cf47..b3ba4c2 100644
--- a/src/content/pages/home.md
+++ b/src/content/pages/home.md
@@ -17,4 +17,3 @@ charge for research and educational purposes through this web-site.
 The MMP is a unique source of data that enables researchers to track patterns and processes of contemporary Mexican
 immigration to the United States. The project is a multi-disciplinary research effort that generates public use data on
 the characteristics and behavior of Mexican migrants.
-
diff --git a/src/content/pages/study-design.md b/src/content/pages/study-design.md
index 11a49af..790d0b1 100644
--- a/src/content/pages/study-design.md
+++ b/src/content/pages/study-design.md
@@ -142,4 +142,3 @@ all the households in the home country sample and another weight for all the hou
 When working with pooled data from multiple communities, these weights give you the option to adjust your estimates in
 order to take into account the relative sizes of all the sampling frames. Whether you will need to weight your estimates
 or not will depend on what your goal is.
-
diff --git a/src/firebase-config.json b/src/firebase-config.json
index 7ffbd5e..92e89bd 100644
--- a/src/firebase-config.json
+++ b/src/firebase-config.json
@@ -5,4 +5,4 @@
   "storageBucket": "mmp-site-b1c9b.appspot.com",
   "messagingSenderId": "364364593490",
   "appId": "1:364364593490:web:9636e89bda12afe7f2a28b"
-}
\ No newline at end of file
+}
diff --git a/src/styles/global.css b/src/styles/global.css
index b7e57de..c7d71d3 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -5,189 +5,188 @@
 @tailwind utilities;
 
 @layer base {
-    :root {
-        @apply font-body;
-        @apply text-base;
-        @apply text-neutral-700;
-    }
-
-    html,
-    body {
-        @apply h-full;
-    }
-
-    body {
-        @apply grid;
-        @apply bg-neutral-50;
-        grid-template-columns:
+  :root {
+    @apply font-body;
+    @apply text-base;
+    @apply text-neutral-700;
+  }
+
+  html,
+  body {
+    @apply h-full;
+  }
+
+  body {
+    @apply grid;
+    @apply bg-neutral-50;
+    grid-template-columns:
       1fr
       min(1000px, 100%)
       1fr;
-    }
-
-    body > * {
-        grid-column: 2;
-        @apply px-3;
-    }
-
-    h1,
-    h2,
-    h3,
-    h4 {
-        @apply font-header;
-        @apply text-neutral-900;
-    }
-
-    h1,
-    h2 {
-        @apply font-bold;
-    }
-
-    h1 {
-        @apply text-5xl;
-    }
-
-    h2 {
-        @apply text-3xl;
-    }
-
-    h3 {
-        @apply text-2xl;
-    }
-
-    a {
-        @apply underline;
-    }
-
-    p.small {
-        @apply text-base;
-        @apply text-neutral-500;
-    }
-
-    input,
-    select {
-        @apply bg-white;
-    }
-
-    input::placeholder,
-    textarea::placeholder {
-        @apply text-neutral-300;
-    }
-
-    input:focus {
-        @apply outline-none;
-    }
-
-    textarea:focus {
-        @apply outline-none;
-        @apply shadow-inner-focus;
-    }
-
-    input.disabled,
-    select.disabled {
-        @apply bg-gray;
-    }
-
-    textarea {
-        @apply bg-white;
-        @apply shadow-inner;
-        @apply border-none;
-        @apply rounded-lg;
-        @apply p-3;
-        @apply w-full;
-    }
-
-    button {
-        @apply flex gap-2 items-center;
-        @apply py-2 px-3;
-        @apply w-max;
-        @apply rounded-full;
-        @apply text-neutral-50;
-        @apply transition-all;
-    }
-
-    button:hover {
-        @apply bg-primary-700;
-        @apply shadow-md;
-    }
-
-    button[role="checkbox"] {
-        @apply justify-center;
-        @apply rounded-none;
-        @apply bg-neutral-50 text-neutral-900;
-    }
-
-    button[role="checkbox"]:hover {
-        @apply shadow-none;
-    }
-
-
-    button[role="switch"] {
-        @apply bg-neutral-300;
-        @apply flex gap-0;
-        @apply p-0.5;
-    }
-
-    button[role="switch"][data-state='checked'] {
-        @apply bg-neutral-500;
-    }
-
-    th {
-        @apply font-bold;
-        @apply px-4 py-3;
-        @apply text-left;
-        @apply gap-4;
-    }
-
-    td {
-        @apply text-neutral-700;
-        @apply px-4 py-3;
-    }
+  }
+
+  body > * {
+    grid-column: 2;
+    @apply px-3;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4 {
+    @apply font-header;
+    @apply text-neutral-900;
+  }
+
+  h1,
+  h2 {
+    @apply font-bold;
+  }
+
+  h1 {
+    @apply text-5xl;
+  }
+
+  h2 {
+    @apply text-3xl;
+  }
+
+  h3 {
+    @apply text-2xl;
+  }
+
+  a {
+    @apply underline;
+  }
+
+  p.small {
+    @apply text-base;
+    @apply text-neutral-500;
+  }
+
+  input,
+  select {
+    @apply bg-white;
+  }
+
+  input::placeholder,
+  textarea::placeholder {
+    @apply text-neutral-300;
+  }
+
+  input:focus {
+    @apply outline-none;
+  }
+
+  textarea:focus {
+    @apply outline-none;
+    @apply shadow-inner-focus;
+  }
+
+  input.disabled,
+  select.disabled {
+    @apply bg-gray;
+  }
+
+  textarea {
+    @apply bg-white;
+    @apply shadow-inner;
+    @apply border-none;
+    @apply rounded-lg;
+    @apply p-3;
+    @apply w-full;
+  }
+
+  button {
+    @apply flex items-center gap-2;
+    @apply px-3 py-2;
+    @apply w-max;
+    @apply rounded-full;
+    @apply text-neutral-50;
+    @apply transition-all;
+  }
+
+  button:hover {
+    @apply bg-primary-700;
+    @apply shadow-md;
+  }
+
+  button[role="checkbox"] {
+    @apply justify-center;
+    @apply rounded-none;
+    @apply bg-neutral-50 text-neutral-900;
+  }
+
+  button[role="checkbox"]:hover {
+    @apply shadow-none;
+  }
+
+  button[role="switch"] {
+    @apply bg-neutral-300;
+    @apply flex gap-0;
+    @apply p-0.5;
+  }
+
+  button[role="switch"][data-state="checked"] {
+    @apply bg-neutral-500;
+  }
+
+  th {
+    @apply font-bold;
+    @apply px-4 py-3;
+    @apply text-left;
+    @apply gap-4;
+  }
+
+  td {
+    @apply text-neutral-700;
+    @apply px-4 py-3;
+  }
 }
 
 @layer components {
-    .readable {
-        width: min(75ch, 100%);
-    }
-
-    .switchSlider {
-        @apply w-5 h-5;
-        @apply bg-neutral-50;
-        @apply rounded-full;
-        transition: transform 100ms;
-        transform: translateX(2px);
-        will-change: transform;
-    }
-
-    .switchSlider[data-state='checked'] {
-        transform: translateX(21px);
-    }
-
-    .readable ul {
-        @apply list-disc;
-        @apply pl-14;
-        @apply py-2;
-    }
-
-    .readable li {
-        @apply m-2;
-    }
+  .readable {
+    width: min(75ch, 100%);
+  }
+
+  .switchSlider {
+    @apply w-5 h-5;
+    @apply bg-neutral-50;
+    @apply rounded-full;
+    transition: transform 100ms;
+    transform: translateX(2px);
+    will-change: transform;
+  }
+
+  .switchSlider[data-state="checked"] {
+    transform: translateX(21px);
+  }
+
+  .readable ul {
+    @apply list-disc;
+    @apply pl-14;
+    @apply py-2;
+  }
+
+  .readable li {
+    @apply m-2;
+  }
 }
 
 @layer utilities {
-    .full-bleed {
-        @apply w-full;
-        grid-column: 1 / 4;
-    }
-
-    /* Hide scrollbar for Chrome, Safari and Opera */
-    .no-scrollbar::-webkit-scrollbar {
-        display: none;
-    }
-
-    /* Hide scrollbar for IE, Edge and Firefox */
-    .no-scrollbar {
-        -ms-overflow-style: none; /* IE and Edge */
-        scrollbar-width: none; /* Firefox */
-    }
+  .full-bleed {
+    @apply w-full;
+    grid-column: 1 / 4;
+  }
+
+  /* Hide scrollbar for Chrome, Safari and Opera */
+  .no-scrollbar::-webkit-scrollbar {
+    display: none;
+  }
+
+  /* Hide scrollbar for IE, Edge and Firefox */
+  .no-scrollbar {
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
+  }
 }