diff --git a/package-lock.json b/package-lock.json
index afd4d4a..024ae65 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,7 +17,6 @@
         "astro": "^3.3.2",
         "astro-icon": "^1.0.0-next.2",
         "astro-seo": "^0.8.0",
-        "normalize.css": "^8.0.1",
         "sharp": "^0.32.6",
         "svgo": "^3.0.2",
         "tailwindcss": "^3.3.3",
@@ -5245,11 +5244,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/normalize.css": {
-      "version": "8.0.1",
-      "resolved": "https://registry.npmjs.org/normalize.css/-/normalize.css-8.0.1.tgz",
-      "integrity": "sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg=="
-    },
     "node_modules/npm-run-path": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-5.1.0.tgz",
diff --git a/package.json b/package.json
index 5609be6..1cc0bf4 100644
--- a/package.json
+++ b/package.json
@@ -20,7 +20,6 @@
     "astro": "^3.3.2",
     "astro-icon": "^1.0.0-next.2",
     "astro-seo": "^0.8.0",
-    "normalize.css": "^8.0.1",
     "sharp": "^0.32.6",
     "svgo": "^3.0.2",
     "tailwindcss": "^3.3.3",
diff --git a/postcss.config.mjs b/postcss.config.mjs
index 1b5de37..c227472 100644
--- a/postcss.config.mjs
+++ b/postcss.config.mjs
@@ -1,8 +1,8 @@
 export default {
   plugins: {
-    "postcss-import": {},
-    "tailwindcss/nesting": {},
-    tailwindcss: {},
-    autoprefixer: {},
+    "postcss-import": true,
+    "tailwindcss/nesting": true,
+    tailwindcss: true,
+    autoprefixer: true,
   },
 };
diff --git a/src/components/Button.astro b/src/components/Button.astro
index 19fff87..ec21a1e 100644
--- a/src/components/Button.astro
+++ b/src/components/Button.astro
@@ -6,31 +6,11 @@ export interface Props {
 const { type } = Astro.props;
 ---
 
-<button class:list={[type]} type={type}><slot /></button>
-
-<style>
-  button {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    gap: 0.4em;
-    padding: 0.5em 0.75em;
-    min-width: 6em;
-    border-radius: 6px;
-    font-family: var(--secondary-font);
-    font-size: smaller;
-    border: none;
-    cursor: pointer;
-    box-shadow: var(--shadow-md);
-    transition: box-shadow 200ms;
-    background-color: var(--primary-color);
-    color: var(--color-on-primary);
-  }
-
-  button:hover,
-  button:focus,
-  button:active {
-    box-shadow: var(--shadow-xl);
-    outline: none;
-  }
-</style>
+<button
+  class="min-w-"
+  class:list={[
+    type,
+    "bg-primary font-primary flex min-w-[6em] cursor-pointer items-center justify-center gap-1.5 rounded-md px-3 py-2 text-canvas",
+  ]}
+  type={type}><slot /></button
+>
diff --git a/src/components/Card.astro b/src/components/Card.astro
deleted file mode 100644
index 8a039fe..0000000
--- a/src/components/Card.astro
+++ /dev/null
@@ -1,19 +0,0 @@
-<div class="card flex flex-col gap-4 rounded-lg p-4">
-  <slot />
-</div>
-
-<style>
-  .card {
-    background-color: var(--canvas-color);
-    /* box-shadow: var(--shadow-md); */
-  }
-
-  .card :global(h3, h4, h5, h6) {
-    margin: 0;
-  }
-
-  .card :global(ul) {
-    margin: 0;
-    padding: 0;
-  }
-</style>
diff --git a/src/components/header/Header.astro b/src/components/header/Header.astro
index d5cab88..46d8e68 100644
--- a/src/components/header/Header.astro
+++ b/src/components/header/Header.astro
@@ -3,8 +3,10 @@ import NavItem from "./NavItem.astro";
 import SocialLink from "./SocialLink.astro";
 ---
 
-<header class="sticky top-0 z-10 flex justify-between">
-  <nav>
+<header
+  class="shadow-canvas-50 max-hbp:h-[100px] max-hbp:flex-col max-hbp:items-center sticky top-0 z-10 flex h-[60px] justify-between bg-canvas shadow-lg shadow-canvas"
+>
+  <nav class="max-hbp:flex-1 font-secondary">
     <ul class="nav flex h-full whitespace-nowrap text-base">
       <NavItem title="About" url="/#" />
       <NavItem title="Skills" url="/#skills" />
@@ -12,7 +14,7 @@ import SocialLink from "./SocialLink.astro";
       <NavItem title="Contact me" url="/#contact-me" />
     </ul>
   </nav>
-  <div>
+  <div class="max-hbp:flex-1">
     <ul
       class="flex h-full items-center justify-between justify-self-stretch pr-2"
     >
@@ -25,30 +27,18 @@ import SocialLink from "./SocialLink.astro";
 <style>
   header {
     grid-area: header;
-    height: 60px;
     padding: 0 calc(50% - var(--max-content-width) / 2);
-    background: linear-gradient(
-      0deg,
-      transparent 0%,
-      var(--background-color-opaque) 7%,
-      var(--background-color) 75%
-    );
   }
+</style>
 
-  @media (max-width: 500px) {
-    header {
-      /* display: grid; */
-      height: 100px;
-      flex-direction: column;
-      align-items: center;
-    }
-
-    header > * {
-      flex: 1 1;
-    }
+<style is:global>
+  html {
+    --header-height: 100px;
   }
 
-  .nav {
-    font-family: var(--secondary-font);
+  @media screen(hbp) {
+    html {
+      --header-height: 60px;
+    }
   }
 </style>
diff --git a/src/components/header/SocialLink.astro b/src/components/header/SocialLink.astro
index e26c88e..be90958 100644
--- a/src/components/header/SocialLink.astro
+++ b/src/components/header/SocialLink.astro
@@ -12,7 +12,7 @@ const { url, icon } = Astro.props;
 <li>
   <a href={url} target="_blank" class="flex items-center px-2 opacity-80">
     <Icon size={32} name={icon} />
-    <span>{url}</span>
+    <span class="text-[0px]">{url}</span>
   </a>
 </li>
 
@@ -25,8 +25,4 @@ const { url, icon } = Astro.props;
   a:focus {
     opacity: 1;
   }
-
-  span {
-    font-size: 0;
-  }
 </style>
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 3c35809..a6dd46d 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -3,11 +3,9 @@ import { SEO } from "astro-seo";
 import Analytics from "../components/Analytics.astro";
 import Header from "../components/header/Header.astro";
 import Footer from "../components/Footer.astro";
-import "normalize.css";
 import "@fontsource/work-sans";
 import "@fontsource/montserrat/400.css";
 import "@fontsource/montserrat/600.css";
-import "../styles/variables.css";
 import "../styles/input.scss";
 
 export interface Props {
@@ -20,8 +18,8 @@ const { title, description } = Astro.props;
 const IS_PRODUCTION = import.meta.env.PROD;
 ---
 
-<!DOCTYPE html>
-<html lang="en" prefix="og: https://ogp.me/ns#">
+<!doctype html>
+<html lang="en" prefix="og: https://ogp.me/ns#" class="bg-canvas">
   <head>
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
@@ -44,23 +42,23 @@ const IS_PRODUCTION = import.meta.env.PROD;
     />
     {IS_PRODUCTION && <Analytics />}
   </head>
-  <body class="grid gap-x-7 min-h-screen">
+  <body
+    class="font-primary grid min-h-screen gap-x-7 bg-canvas text-neutral-50"
+  >
     <Header />
     <slot />
     <Footer />
   </body>
 </html>
 
-
-<style>
+<style is:global>
   html {
+    --primary-color: #29c785;
+    --color-on-canvas: #ffffff;
+    --max-content-width: 900px;
     scroll-behavior: smooth;
     scrollbar-width: thin;
   }
-</style>
-
-<style lang="scss" is:global>
-  @use "sass:color";
 
   body {
     grid-template:
@@ -68,19 +66,15 @@ const IS_PRODUCTION = import.meta.env.PROD;
       "  .     main    .   " auto
       "  .    footer   .   " max-content
       / 1fr minmax(auto, var(--max-content-width)) 1fr;
-    font-family: var(--primary-font);
-    background-color: var(--background-color);
-    color: var(--color-on-background);
   }
 
   main {
     grid-area: main;
-    display: flex;
-    flex-direction: column;
+    @apply flex flex-col;
   }
 
   section {
-    // Adjust anchoring position for header height
+    /* Adjust anchoring position for header height */
     padding-top: calc(var(--header-height) - 4px);
     margin-top: calc(4px - var(--header-height));
 
@@ -97,41 +91,23 @@ const IS_PRODUCTION = import.meta.env.PROD;
   h4,
   h5,
   h6 {
-    font-family: var(--secondary-font);
-    font-weight: 500;
+    @apply font-secondary font-medium;
   }
 
   h2 {
-    text-align: center;
-    margin: 1.5rem 0;
-    font-size: 1.825rem;
-    font-family: var(--primary-font);
+    /* TODO: Remove margin */
+    @apply font-primary my-4 text-center text-3xl;
   }
 
   h3 {
-    color: var(--secondary-color);
+    @apply text-primary;
   }
 
   strong {
-    font-weight: 600;
+    @apply font-semibold;
   }
 
   img {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    text-align: center;
-  }
-
-  .yellow {
-    color: #756303;
-  }
-
-  .green {
-    color: #29c785;
-  }
-
-  .gray {
-    color: #666;
+    @apply flex items-center justify-center text-center;
   }
 </style>
diff --git a/src/sections/About.astro b/src/sections/About.astro
index c2bf011..1b41a51 100644
--- a/src/sections/About.astro
+++ b/src/sections/About.astro
@@ -1,36 +1,20 @@
-<section id="about" class="text-center grid place-content-center">
-  <h1 class="title m-0 -ml-2">Dmitry Semenov</h1>
-  <p class="tagline text-xl text-left">Software Developer</p>
-  <p class="nickname text-xl">@lonelyteapot</p>
+<section
+  id="about"
+  class="grid h-[50vh] grid-cols-[auto_min-content] place-content-center text-center"
+>
+  <h1
+    class="title text-primary font-secondary col-span-2 row-start-1 m-0 -ml-2 text-[5rem]"
+  >
+    Dmitry Semenov
+  </h1>
+  <p class="tagline row-start-2 text-left text-xl">Software Developer</p>
+  <p class="nickname row-start-2 text-xl">@lonelyteapot</p>
 </section>
 
 <style>
-  section {
-    height: 50vh;
-    grid-template:
-      "title title" min-content
-      "tagline nickname" min-content
-      / auto min-content;
-  }
-
-  .title {
-    grid-area: title;
-    font-size: min(11.125vw, 5rem);
-    font-family: var(--secondary-font);
-    color: var(--primary-color);
-  }
-
-  @media (max-width: 500px) {
+  @media (min-width: 500px) {
     .title {
-      font-size: 5rem;
+      font-size: min(11.125vw, 5rem);
     }
   }
-
-  .tagline {
-    grid-area: tagline;
-  }
-
-  .nickname {
-    grid-area: nickname;
-  }
 </style>
diff --git a/src/sections/ContactMe.astro b/src/sections/ContactMe.astro
index 824b6a7..ad4b268 100644
--- a/src/sections/ContactMe.astro
+++ b/src/sections/ContactMe.astro
@@ -20,5 +20,3 @@ import Button from "../components/Button.astro";
     <Button type="submit">Send</Button>
   </form>
 </section>
-
-<style></style>
diff --git a/src/sections/ProjectIconLink.astro b/src/sections/ProjectIconLink.astro
index fcf17cc..4ac1a80 100644
--- a/src/sections/ProjectIconLink.astro
+++ b/src/sections/ProjectIconLink.astro
@@ -13,7 +13,7 @@ const { text, url, icon } = Astro.props;
 <a
   href={url}
   target="_blank"
-  class="flex flex-col items-center gap-0.5 rounded-lg p-1.5 text-xs"
+  class="font-secondary text-primary flex flex-col items-center gap-0.5 rounded-lg p-1.5 text-xs"
 >
   <Icon size={20} name={icon} />
   <span>{text}</span>
@@ -21,8 +21,6 @@ const { text, url, icon } = Astro.props;
 
 <style>
   a {
-    color: var(--secondary-color);
-    font-family: var(--secondary-font);
     transition: background-color 200ms;
   }
 
diff --git a/src/sections/Projects.astro b/src/sections/Projects.astro
index 303f11f..0ba3867 100644
--- a/src/sections/Projects.astro
+++ b/src/sections/Projects.astro
@@ -15,7 +15,7 @@ import steamynotesImage from "../images/steamynotes.webp";
       <p class="description my-4">
         Global provider of public transportation data.
       </p>
-      <ul class="keypoints list-disc pl-10">
+      <ul class="keypoints list-disc pl-6">
         <li>Growing database of public transportation data</li>
         <li>Real-time updates (vehicle locations, arrival predictions)</li>
         <li>Easy-to-use cross-platform app for passengers</li>
@@ -41,7 +41,7 @@ import steamynotesImage from "../images/steamynotes.webp";
       <p class="description my-4">
         A minimal mobile app that counts days between dates.
       </p>
-      <ul class="keypoints list-disc pl-10">
+      <ul class="keypoints list-disc pl-6">
         <li>Clean & Intuitive</li>
         <li>Built with <strong>Android SDK</strong></li>
         <li>Written in <strong>Kotlin</strong></li>
@@ -79,7 +79,7 @@ import steamynotesImage from "../images/steamynotes.webp";
       <p class="description my-4">
         A cloud-based note-keeping web app. Built for learning Flutter.
       </p>
-      <ul class="keypoints list-disc pl-10">
+      <ul class="keypoints list-disc pl-6">
         <li>Stores notes in the cloud, tied to a Google account</li>
         <li>Built cross-platform with <strong>Flutter</strong></li>
         <li>Powered by and hosted on <strong>Firebase</strong></li>
@@ -113,7 +113,7 @@ import steamynotesImage from "../images/steamynotes.webp";
         built during the <strong>Intel CV Summer Camp 2021</strong>
          to learn the <strong>OpenVINO</strong> toolkit.
       </p>
-      <ul class="keypoints list-disc pl-10">
+      <ul class="keypoints list-disc pl-6">
         <li>
           Detects body parts on a real-time video feed using neural networks
           from <strong>OpenModelZoo</strong> & <strong>MediaPipe</strong>
@@ -186,10 +186,6 @@ import steamynotesImage from "../images/steamynotes.webp";
 
   .project .keypoints {
     grid-area: points;
-
-    li {
-      @apply my-2;
-    }
   }
 
   .project .links {
diff --git a/src/sections/Skill.astro b/src/sections/Skill.astro
index 3096b96..7216930 100644
--- a/src/sections/Skill.astro
+++ b/src/sections/Skill.astro
@@ -12,9 +12,3 @@ const { icon } = Astro.props;
   <Icon name={icon} size={32} />
   <span class="text-center"><slot /></span>
 </li>
-
-<style>
-  span {
-    color: var(--color-on-canvas);
-  }
-</style>
diff --git a/src/styles/variables.css b/src/styles/variables.css
deleted file mode 100644
index f443c77..0000000
--- a/src/styles/variables.css
+++ /dev/null
@@ -1,22 +0,0 @@
-html {
-  --primary-color: #29c785;
-  --secondary-color: #29c785;
-  --background-color: #222222;
-  --background-color-opaque: #222222ee;
-  --canvas-color: #222222;
-  --color-on-primary: #232729;
-  --color-on-secondary: #ffffff;
-  --color-on-background: #ffffff;
-  --color-on-canvas: #ffffff;
-
-  --primary-font: "Montserrat", sans-serif;
-  --secondary-font: "Work Sans", sans-serif;
-
-  --shadow: 0 1px 3px #0003, 0 1px 1px #00000024, 0 2px 1px -1px #0000001f;
-  --shadow-md: 0 1px 5px #0003, 0 2px 2px #00000024, 0 3px 1px -2px #0000001f;
-  --shadow-lg: 0 2px 4px -1px #0003, 0 4px 5px #00000024, 0 1px 10px #0000001f;
-  --shadow-xl: 0 3px 5px -1px #0003, 0 6px 10px #00000024, 0 1px 18px #0000001f;
-  --shadow-2xl: 0 5px 5px -3px #0003, 0 8px 10px 1px #00000024, 0 3px 14px 2px #0000001f;
-
-  --max-content-width: 900px;
-}
diff --git a/tailwind.config.mjs b/tailwind.config.mjs
index 19f0614..26de21a 100644
--- a/tailwind.config.mjs
+++ b/tailwind.config.mjs
@@ -1,8 +1,32 @@
 /** @type {import('tailwindcss').Config} */
+import defaultTheme from "tailwindcss/defaultTheme";
+
 export default {
-	content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
-	theme: {
-		extend: {},
-	},
-	plugins: [],
-}
+  content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
+  theme: {
+    extend: {
+      colors: {
+        primary: "#29c785",
+        canvas: "#1f1f1f",
+
+        // "primary-color": "#29c785",
+        // "secondary-color": "#29c785",
+        // "background-color": "#222222",
+        // "background-color-opaque": "#222222ee",
+        // "canvas-color": "#222222",
+        // "color-on-primary": "#232729",
+        // "color-on-secondary": "#ffffff",
+        // "color-on-background": "#ffffff",
+        // "color-on-canvas": "#ffffff",
+      },
+      screens: {
+        hbp: "480px",
+      },
+      fontFamily: {
+        primary: ["Montserrat", ...defaultTheme.fontFamily.sans],
+        secondary: ["Work Sans", ...defaultTheme.fontFamily.sans],
+      },
+    },
+  },
+  plugins: [],
+};