diff --git a/home/index.html b/home/index.html
index 9e1555c..6bd5574 100644
--- a/home/index.html
+++ b/home/index.html
@@ -10,15 +10,15 @@
     <link rel="icon" type="image/png" href="assets/logo_icon.png" />
 </head>
 <body>
-    <img src="assets/logo.png" class="img" />
+    <img src="assets/logo.png" class="logo" />
     <div class="flex flex-col gap-8 mt-4">
-        <p>hello, and welcome to atom.town. here, you will be at home.</p>
+        <p class="font-light">hello, and welcome to atom.town. here, you will be at home.</p>
         <div class="flex flex-col">
-            <a href="https://mail.atom.town" target="_blank" class="pop big heavy">webmail</a>
-            <a href="https://git.atom.town" target="_blank" class="pop big heavy">git</a>
+            <a href="https://mail.atom.town" target="_blank" class="font-normal pop big">webmail</a>
+            <a href="https://git.atom.town" target="_blank" class="font-normal pop big">git</a>
         </div>
         <div class="flex flex-col">
-            <a href="terms-privacy.html" class="pop big heavy">terms & privacy</a>
+            <a href="terms-privacy.html" class="font-normal pop big">terms & privacy</a>
         </div>
     </div>
 </body>
diff --git a/home/style.css b/home/style.css
index 475c1f1..33d3ff9 100644
--- a/home/style.css
+++ b/home/style.css
@@ -17,32 +17,18 @@ body {
     padding: 20px;
 }
 
-* {
-    font-style: italic;
+p, a, li, ul, h2 {
     color: white;
-    font-weight: 300;
-}
-
-.heavy {
-    font-weight: 400;
-}
-
-.heavier {
-    font-weight: 500;
-}
-
-p, a, li, ul {
+    font-style: italic;
     font-size: 20px;
     @media (max-width: 1024px) {
         font-size: 40px;
     }
 }
 
-.big {
-    font-size: 24px;
-    @media (max-width: 1024px) {
-        font-size: 48px;
-    }
+ul {
+    list-style-type: "» ";
+    padding-left: 1em;
 }
 
 /* tailwind lite */
@@ -57,18 +43,28 @@ p, a, li, ul {
 
 .mt-4 { margin-top: calc(var(--space) * 4); }
 
+.self-start { align-self: flex-start; }
+
+.font-light { font-weight: 300; }
+.font-normal { font-weight: 400; }
+.font-heavy { font-weight: 500; }
+
 .max-w-md {
     max-width: calc(var(--space) * 160);
     @media (max-width: 1024px) {
         max-width: calc(var(--space) * 320);
     }
 }
-
-.self-start { align-self: flex-start; }
 /* tailwind lite */
 
+.big {
+    font-size: 24px;
+    @media (max-width: 1024px) {
+        font-size: 48px;
+    }
+}
+
 .pop {
-    display: inline-block;
     transform-origin: left center;
     transition: transform 0.1s ease;
 }
@@ -77,7 +73,7 @@ p, a, li, ul {
     transform: scale(1.25);
 }
 
-.img {
+.logo {
     object-fit: contain;
     align-self: flex-start;
     max-height: 64px;
@@ -85,8 +81,3 @@ p, a, li, ul {
         max-height: 128px;
     }
 }
-
-ul {
-    list-style-type: "» ";
-    padding-left: 1.2em;
-}
diff --git a/home/terms-privacy.html b/home/terms-privacy.html
index c350335..7682f94 100644
--- a/home/terms-privacy.html
+++ b/home/terms-privacy.html
@@ -10,26 +10,26 @@
     <link rel="icon" type="image/png" href="assets/logo_icon.png" />
 </head>
 <body>
-    <img src="assets/logo.png" class="img" />
+    <img src="assets/logo.png" class="logo" />
     <div class="flex flex-col gap-8 mt-4 max-w-md">
-        <p>here you can learn some things</p>
+        <p class="font-light">here you can learn some things</p>
         <div class="flex flex-col gap-2">
-            <h2 class="big heavier">terms</h2>
+            <h2 class="font-heavy big">terms</h2>
             <ul>
-                <li>the fitnessgram pacer test is a multistage aerobic capacity test</li>
-                <li>that progressively gets more difficult as it continues. the 20 meter pacer test</li>
-                <li>will begin in 30 seconds. line up at the start. the running speed starts slowly,</li>
+                <li class="font-light">the fitnessgram pacer test is a multistage aerobic capacity test</li>
+                <li class="font-light">that progressively gets more difficult as it continues. the 20 meter pacer test</li>
+                <li class="font-light">will begin in 30 seconds. line up at the start. the running speed starts slowly,</li>
             </ul>
         </div>
         <div class="flex flex-col gap-2">
-            <h2 class="big heavier">privacy</h2>
+            <h2 class="font-heavy big">privacy</h2>
             <ul>
-                <li>but gets faster each minute after you hear this signal *boop*. a single lap should be completed</li>
-                <li>each time you hear this sound *ding*. remember to run in a straight line, and run as long as possible.</li>
-                <li>the second time you fail to complete a lap before the sound, your test is over. the test will begin on the word start. on your mark, get ready, start.</li>
+                <li class="font-light">but gets faster each minute after you hear this signal *boop*. a single lap should be completed</li>
+                <li class="font-light">each time you hear this sound *ding*. remember to run in a straight line, and run as long as possible.</li>
+                <li class="font-light">the second time you fail to complete a lap before the sound, your test is over. the test will begin on the word start. on your mark, get ready, start.</li>
             </ul>
         </div>
-        <a href="##" onclick="history.go(-1)" class="self-start pop heavy">← back</a>
+        <a href="##" onclick="history.go(-1)" class="self-start font-normal pop">← back</a>
     </div>
 </body>
 </html>
