diff --git a/app/components/AlternateSolutionEditor.module.css b/app/components/AlternateSolutionEditor.module.css
new file mode 100644
index 00000000..9ea810f7
--- /dev/null
+++ b/app/components/AlternateSolutionEditor.module.css
@@ -0,0 +1,24 @@
+.page {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.main {
+  flex: 1 1 auto;
+  overflow: scroll;
+  position: relative;
+}
+
+.container {
+  outline: none;
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  flex-wrap: nowrap;
+  container-type: size;
+}
diff --git a/app/components/AlternateSolutionEditor.tsx b/app/components/AlternateSolutionEditor.tsx
index 8d1c5464..a59bdde3 100644
--- a/app/components/AlternateSolutionEditor.tsx
+++ b/app/components/AlternateSolutionEditor.tsx
@@ -40,6 +40,7 @@ import { isSome } from 'fp-ts/lib/Option';
 import { GridView } from './Grid';
 import { logAsyncErrors } from '../lib/utils';
 import { isTextInput } from '../lib/domUtils';
+import styles from './AlternateSolutionEditor.module.css';
 
 export function AlternateSolutionEditor(props: {
   grid: string[];
@@ -224,40 +225,21 @@ export function AlternateSolutionEditor(props: {
 
   return (
     <>
-      <div
-        css={{
-          display: 'flex',
-          flexDirection: 'column',
-          height: '100%',
-        }}
-      >
-        <div css={{ flex: 'none' }}>
+      <div className={styles.page}>
+        <div className="flexNone">
           <TopBar>{topBarChildren}</TopBar>
         </div>
-        <div
-          css={{ flex: '1 1 auto', overflow: 'scroll', position: 'relative' }}
-        >
+        <div className={styles.main}>
           <div
             // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
             tabIndex={0}
-            css={{
-              outline: 'none',
-              display: 'flex',
-              flex: '1 1 auto',
-              flexDirection: 'column',
-              alignItems: 'center',
-              height: '100%',
-              width: '100%',
-              position: 'absolute',
-              flexWrap: 'nowrap',
-              containerType: 'size',
-            }}
+            className={styles.container}
             ref={containerRef}
           >
             <div
               aria-label="grid"
-              css={{
-                margin: 'auto',
+              className="marginAuto"
+              style={{
                 width: useCQ
                   ? `min(100cqw, 100cqh * ${aspectRatio})`
                   : `min(${cqw}px, ${cqh}px * ${aspectRatio})`,
@@ -279,7 +261,7 @@ export function AlternateSolutionEditor(props: {
             </div>
           </div>
         </div>
-        <div css={{ flex: 'none', width: '100%' }}>
+        <div className="flexNone width100">
           <Keyboard
             toggleKeyboard={toggleKeyboard}
             keyboardHandler={keyboardHandler}
diff --git a/app/components/ArticlePage.module.css b/app/components/ArticlePage.module.css
new file mode 100644
index 00000000..91e8b5e7
--- /dev/null
+++ b/app/components/ArticlePage.module.css
@@ -0,0 +1,21 @@
+@value huge-and-up from '../lib/definitions.module.css';
+@value max-width from '../lib/definitions.module.css';
+
+.page {
+  margin: 2em 1em;
+}
+
+@media (huge-and-up) {
+  .page {
+    max-width: max-width;
+    margin: 2em auto;
+  }
+}
+
+.markdown {
+  margin-bottom: 2em;
+}
+
+.markdown h2 {
+  margin-top: 1em;
+}
diff --git a/app/components/ArticlePage.tsx b/app/components/ArticlePage.tsx
index c8b24418..2260ba53 100644
--- a/app/components/ArticlePage.tsx
+++ b/app/components/ArticlePage.tsx
@@ -2,12 +2,12 @@ import type { Root } from 'hast';
 import Head from 'next/head';
 import { ArticleT } from '../lib/article';
 import { ArticlePageProps } from '../lib/serverOnly';
-import { HUGE_AND_UP, MAX_WIDTH } from '../lib/style';
 import { ContactLinks } from './ContactLinks';
 import { ErrorPage } from './ErrorPage';
 import { Link } from './Link';
 import { Markdown } from './Markdown';
 import { DefaultTopBar } from './TopBar';
+import styles from './ArticlePage.module.css';
 
 export function ArticlePage(props: ArticlePageProps) {
   if ('error' in props) {
@@ -38,19 +38,8 @@ function Article(props: ArticleT & { hast: Root }) {
         />
       </Head>
       <DefaultTopBar />
-      <div
-        css={{
-          margin: '2em 1em',
-          [HUGE_AND_UP]: {
-            maxWidth: MAX_WIDTH,
-            margin: '2em auto',
-          },
-        }}
-      >
-        <Markdown
-          css={{ marginBottom: '2em', '& h2': { marginTop: '1em' } }}
-          hast={props.hast}
-        />
+      <div className={styles.page}>
+        <Markdown className={styles.markdown} hast={props.hast} />
         <p>
           This article is part of a series of posts designed to teach visitors
           about crosswords in general as well as some Crosshare specific
diff --git a/app/components/AuthHelpers.tsx b/app/components/AuthHelpers.tsx
index 2ecfe442..f9b8d82e 100644
--- a/app/components/AuthHelpers.tsx
+++ b/app/components/AuthHelpers.tsx
@@ -57,7 +57,7 @@ function renderLoginIfNeeded({
     return (
       <>
         <TopBar />
-        <div css={{ margin: '1em' }}>
+        <div className="margin1em">
           <p>
             Please sign-in with your Google account to continue. We use your
             account to keep track of the puzzles you&apos;ve played and your
@@ -72,7 +72,7 @@ function renderLoginIfNeeded({
     return (
       <>
         <TopBar />
-        <div css={{ margin: '1em' }}>
+        <div className="margin1em">
           <p>
             Please sign-in with your Google account to continue. We use your
             account to keep track of the puzzles you&apos;ve played and your
diff --git a/app/components/BigQuote.module.css b/app/components/BigQuote.module.css
new file mode 100644
index 00000000..8fe15fbd
--- /dev/null
+++ b/app/components/BigQuote.module.css
@@ -0,0 +1,34 @@
+@value small-and-up from '../lib/definitions.module.css';
+
+.outer {
+  padding: 2em;
+  background-color: var(--secondary);
+  text-align: center;
+  color: var(--text);
+}
+.wrapper {
+  max-width: 900px;
+  margin: auto;
+}
+
+.wrapper:before {
+  font-family: georgia, serif;
+  content: open-quote;
+  font-size: 6em;
+  line-height: 0.1em;
+  margin-right: 0.25em;
+  vertical-align: -0.4em;
+}
+.quote {
+  font-family: georgia, serif;
+  font-size: 20px;
+  font-style: italic;
+}
+@media (small-and-up) {
+  .quote {
+    font-size: 30px;
+  }
+  .attrib {
+    font-size: 20px;
+  }
+}
diff --git a/app/components/BigQuote.tsx b/app/components/BigQuote.tsx
index a127b061..993b3f68 100644
--- a/app/components/BigQuote.tsx
+++ b/app/components/BigQuote.tsx
@@ -1,52 +1,13 @@
-import { SMALL_AND_UP } from '../lib/style';
 import { ReactNode } from 'react';
+import styles from './BigQuote.module.css';
 
 export function BigQuote(props: { quote: string; attribution: ReactNode }) {
   return (
-    <div
-      css={{
-        padding: '2em',
-        backgroundColor: 'var(--secondary)',
-        textAlign: 'center',
-        color: 'var(--text)',
-      }}
-    >
-      <div
-        css={{
-          maxWidth: 900,
-          margin: 'auto',
-          '&:before': {
-            fontFamily: 'Georgia, serif',
-            content: 'open-quote',
-            fontSize: '6em',
-            lineHeight: '0.1em',
-            marginRight: '0.25em',
-            verticalAlign: '-0.4em',
-          },
-        }}
-      >
-        <span
-          css={{
-            fontFamily: 'Georgia, serif',
-            fontSize: 20,
-            [SMALL_AND_UP]: {
-              fontSize: 30,
-            },
-            fontStyle: 'italic',
-          }}
-        >
-          {props.quote}
-        </span>
+    <div className={styles.outer}>
+      <div className={styles.wrapper}>
+        <span className={styles.quote}>{props.quote}</span>
         <br />
-        <span
-          css={{
-            [SMALL_AND_UP]: {
-              fontSize: 20,
-            },
-          }}
-        >
-          &mdash; {props.attribution}
-        </span>
+        <span className={styles.attrib}>&mdash; {props.attribution}</span>
       </div>
     </div>
   );
diff --git a/app/components/BioEditor.tsx b/app/components/BioEditor.tsx
index 4e0a609e..5b92a0c8 100644
--- a/app/components/BioEditor.tsx
+++ b/app/components/BioEditor.tsx
@@ -215,7 +215,7 @@ export const BioEditor = (props: BioEditorProps) => {
             <h4>Live Preview:</h4>
             <Markdown hast={markdownToHast({ text: bioText })} />
           </div>
-          <form css={{ margin: '1em 0' }} onSubmit={submitEdit}>
+          <form className="margin1em0" onSubmit={submitEdit}>
             <label css={{ width: '100%', margin: 0 }}>
               Enter new bio text:
               <textarea
@@ -237,10 +237,10 @@ export const BioEditor = (props: BioEditorProps) => {
             >
               {bioText.length}/{BIO_LENGTH_LIMIT}
             </div>
-            <Button type="submit" css={{ marginRight: '0.5em' }} text="Save" />
+            <Button type="submit" className="marginRight0-5em" text="Save" />
             <Button
               boring={true}
-              css={{ marginRight: '0.5em' }}
+              className="marginRight0-5em"
               onClick={() => {
                 setIsOpen(false);
               }}
@@ -257,7 +257,7 @@ export const BioEditor = (props: BioEditorProps) => {
           {props.constructorPage.b ? (
             <>
               <Button
-                css={{ marginRight: '1.5em' }}
+                className="marginRight1-5em"
                 onClick={() => {
                   setIsOpen(true);
                 }}
@@ -282,7 +282,7 @@ export const BioEditor = (props: BioEditorProps) => {
         cover pic is a large photo that appears at the top of your blog page.
       </p>
       <Button
-        css={{ marginRight: '1.5em' }}
+        className="marginRight1-5em"
         onClick={props.addProfilePic}
         text="Edit profile pic"
       />
@@ -297,7 +297,7 @@ export const BioEditor = (props: BioEditorProps) => {
       {props.constructorPage.pp && props.constructorPage.pt ? (
         <>
           <Button
-            css={{ marginRight: '1.5em' }}
+            className="marginRight1-5em"
             onClick={() => {
               setShowPaypalEditor(true);
             }}
@@ -333,7 +333,7 @@ export const BioEditor = (props: BioEditorProps) => {
             <h4>Live Preview:</h4>
             <Markdown inline={true} hast={markdownToHast({ text: sigText })} />
           </div>
-          <form css={{ margin: '1em 0' }} onSubmit={submitSigEdit}>
+          <form className="margin1em0" onSubmit={submitSigEdit}>
             <label css={{ width: '100%', margin: 0 }}>
               Enter new signature:
               <textarea
@@ -357,13 +357,13 @@ export const BioEditor = (props: BioEditorProps) => {
             </div>
             <Button
               type="submit"
-              css={{ marginRight: '0.5em' }}
+              className="marginRight0-5em"
               disabled={sigText.trim().length === 0}
               text="Save"
             />
             <Button
               boring={true}
-              css={{ marginRight: '0.5em' }}
+              className="marginRight0-5em"
               onClick={() => {
                 setIsSigOpen(false);
               }}
@@ -381,7 +381,7 @@ export const BioEditor = (props: BioEditorProps) => {
           {props.constructorPage.sig ? (
             <>
               <Button
-                css={{ marginRight: '1.5em' }}
+                className="marginRight1-5em"
                 onClick={() => {
                   setIsSigOpen(true);
                 }}
@@ -418,11 +418,11 @@ export const BioEditor = (props: BioEditorProps) => {
                 />
               </label>
             </div>
-            <div css={{ marginTop: '2em' }}>
-              <label css={{ width: '100%' }}>
+            <div className="marginTop2em">
+              <label className="width100">
                 <p>Message to show in paypal dialogue:</p>
                 <input
-                  css={{ width: '100%' }}
+                  className="width100"
                   type="text"
                   value={paypalText}
                   onChange={(e) => {
@@ -453,14 +453,14 @@ export const BioEditor = (props: BioEditorProps) => {
       <h4>Social sharing buttons</h4>
       {isShareButtonsOpen ? (
         <>
-          <form css={{ margin: '1em 0' }} onSubmit={submitShareButtonsEdit}>
+          <form className="margin1em0" onSubmit={submitShareButtonsEdit}>
             <p>
               Enter the text that will show up in share dialogs on sites that
               support custom text (the variable <strong>{'{time}'}</strong> will
               get replaced with the sharer&apos;s solve time and{' '}
               <strong>{'{title}'}</strong> with the puzzle&apos;s title):
             </p>
-            <div css={{ margin: '1em 0' }}>
+            <div className="margin1em0">
               <LengthLimitedInput
                 css={{ width: '50%' }}
                 updateValue={setShareButtonsText}
@@ -474,13 +474,13 @@ export const BioEditor = (props: BioEditorProps) => {
             </div>
             <Button
               type="submit"
-              css={{ marginRight: '0.5em' }}
+              className="marginRight0-5em"
               disabled={shareButtonsText.trim().length === 0}
               text="Save"
             />
             <Button
               boring={true}
-              css={{ marginRight: '0.5em' }}
+              className="marginRight0-5em"
               onClick={() => {
                 setIsShareButtonsOpen(false);
               }}
@@ -498,7 +498,7 @@ export const BioEditor = (props: BioEditorProps) => {
           {props.constructorPage.st ? (
             <>
               <Button
-                css={{ marginRight: '1.5em' }}
+                className="marginRight1-5em"
                 onClick={() => {
                   setIsShareButtonsOpen(true);
                 }}
diff --git a/app/components/Builder.tsx b/app/components/Builder.tsx
index 4b3e4baa..990fcccf 100644
--- a/app/components/Builder.tsx
+++ b/app/components/Builder.tsx
@@ -1237,7 +1237,7 @@ const GridMode = ({
                       )}{' '}
                       No words should be repeated
                     </div>
-                    <h2 css={{ marginTop: '1.5em' }}>Fill</h2>
+                    <h2 className="marginTop1-5em">Fill</h2>
                     <div>Number of words: {stats.numEntries}</div>
                     <div>
                       Mean word length: {stats.averageLength.toPrecision(3)}
@@ -1537,7 +1537,7 @@ const GridMode = ({
           height: '100%',
         }}
       >
-        <div css={{ flex: 'none' }}>
+        <div className="flexNone">
           <TopBar>{topBarChildren}</TopBar>
         </div>
         {state.showDownloadLink ? (
diff --git a/app/components/ClueMode.tsx b/app/components/ClueMode.tsx
index 10ab63cf..91305000 100644
--- a/app/components/ClueMode.tsx
+++ b/app/components/ClueMode.tsx
@@ -103,7 +103,7 @@ const ClueRow = (props: {
           }}
         >
           <label
-            css={{ marginBottom: 0 }}
+            className="marginBottom0"
             htmlFor={props.entry.completedWord + '-' + props.idx + '-input'}
           >
             {props.entry.completedWord}
@@ -115,7 +115,7 @@ const ClueRow = (props: {
             spellCheck="true"
             data-testid={props.entry.completedWord + '-' + props.idx + '-input'}
             type="text"
-            css={{ flex: 1 }}
+            className="flex1"
             placeholder="Enter a clue"
             value={clueText}
             maxLength={MAX_STRING_LENGTH}
@@ -167,7 +167,7 @@ const ClueRow = (props: {
       <tr>
         <td></td>
         <td></td>
-        <td css={{ paddingBottom: '1em' }}>
+        <td className="paddingBottom1em">
           {clueText.startsWith('!#') ? (
             removeClueSpecials(clueText)
           ) : (
@@ -361,11 +361,11 @@ export const ClueMode = ({ state, ...props }: ClueModeProps) => {
 
         <div css={{ padding: '1em' }}>
           {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
-          <label css={{ width: '100%' }}>
+          <label className="width100">
             <h2>Title</h2>
             <LengthLimitedInput
               type="text"
-              css={{ width: '100%' }}
+              className="width100"
               placeholder="Give your puzzle a title"
               value={props.title || ''}
               maxLength={MAX_STRING_LENGTH}
@@ -377,7 +377,7 @@ export const ClueMode = ({ state, ...props }: ClueModeProps) => {
                 props.dispatch(sta);
               }}
             />
-            <div css={{ textAlign: 'right' }}>
+            <div className="textAlignRight">
               <LengthView
                 maxLength={MAX_STRING_LENGTH}
                 value={props.title || ''}
@@ -385,7 +385,7 @@ export const ClueMode = ({ state, ...props }: ClueModeProps) => {
               />
             </div>
           </label>
-          <h2 css={{ marginTop: '1em' }}>Metadata</h2>
+          <h2 className="marginTop1em">Metadata</h2>
           <div>
             <ButtonAsLink
               onClick={() => {
@@ -411,7 +411,7 @@ export const ClueMode = ({ state, ...props }: ClueModeProps) => {
               <h3>Note:</h3>
               <LengthLimitedInput
                 type="text"
-                css={{ width: '100%' }}
+                className="width100"
                 placeholder="Add a note"
                 value={props.notes}
                 maxLength={MAX_STRING_LENGTH}
@@ -423,7 +423,7 @@ export const ClueMode = ({ state, ...props }: ClueModeProps) => {
                   props.dispatch(sta);
                 }}
               />
-              <div css={{ textAlign: 'right' }}>
+              <div className="textAlignRight">
                 <LengthView
                   maxLength={MAX_STRING_LENGTH}
                   value={props.notes}
@@ -453,7 +453,7 @@ export const ClueMode = ({ state, ...props }: ClueModeProps) => {
                 }}
               />
               <ToolTipText
-                css={{ marginLeft: '0.5em' }}
+                className="marginLeft0-5em"
                 text={<FaInfoCircle />}
                 tooltip="Notes are shown before a puzzle is started and should be used if you need a short explainer of the theme or how the puzzle works"
               />
@@ -480,7 +480,7 @@ export const ClueMode = ({ state, ...props }: ClueModeProps) => {
                   props.dispatch(sta);
                 }}
               />
-              <div css={{ textAlign: 'right' }}>
+              <div className="textAlignRight">
                 <LengthView
                   maxLength={MAX_BLOG_LENGTH}
                   value={props.blogPost || ''}
@@ -514,16 +514,16 @@ export const ClueMode = ({ state, ...props }: ClueModeProps) => {
                 }}
               />
               <ToolTipText
-                css={{ marginLeft: '0.5em' }}
+                className="marginLeft0-5em"
                 text={<FaInfoCircle />}
                 tooltip="Blog posts are shown before and after the puzzle is solved - describe how you came up with the puzzle, talk about your day, whatever you want!"
               />
             </div>
           )}
-          <div css={{ marginTop: '1em' }}>
+          <div className="marginTop1em">
             <label>
               <input
-                css={{ marginRight: '1em' }}
+                className="marginRight1em"
                 type="checkbox"
                 checked={props.guestConstructor !== null}
                 onChange={(e) => {
@@ -541,7 +541,7 @@ export const ClueMode = ({ state, ...props }: ClueModeProps) => {
             <div css={{ marginLeft: '1.5em', marginBottom: '1em' }}>
               <LengthLimitedInput
                 type="text"
-                css={{ width: '100%' }}
+                className="width100"
                 placeholder="Guest constructor's name"
                 value={props.guestConstructor}
                 maxLength={MAX_STRING_LENGTH}
@@ -553,7 +553,7 @@ export const ClueMode = ({ state, ...props }: ClueModeProps) => {
                   props.dispatch(sta);
                 }}
               />
-              <div css={{ textAlign: 'right' }}>
+              <div className="textAlignRight">
                 <LengthView
                   maxLength={MAX_STRING_LENGTH}
                   value={props.guestConstructor}
@@ -567,7 +567,7 @@ export const ClueMode = ({ state, ...props }: ClueModeProps) => {
           <div>
             <label>
               <input
-                css={{ marginRight: '1em' }}
+                className="marginRight1em"
                 type="checkbox"
                 checked={state.isContestPuzzle}
                 onChange={(e) => {
@@ -580,7 +580,7 @@ export const ClueMode = ({ state, ...props }: ClueModeProps) => {
               />{' '}
               This is a meta/contest puzzle{' '}
               <ToolTipText
-                css={{ marginLeft: '0.5em' }}
+                className="marginLeft0-5em"
                 text={<FaInfoCircle />}
                 tooltip="A meta puzzle has an extra puzzle embedded in the grid for after solvers have finished solving. Solvers can submit their solution, find out if they were right or wrong, and view a leaderboard of those who've solved the contest correctly."
               />
@@ -655,7 +655,7 @@ export const ClueMode = ({ state, ...props }: ClueModeProps) => {
                 )}
                 <Button
                   type="submit"
-                  css={{ marginLeft: '0.5em' }}
+                  className="marginLeft0-5em"
                   disabled={
                     contestAnswerError !== '' ||
                     contestAnswerInProg.trim().length === 0
@@ -663,13 +663,13 @@ export const ClueMode = ({ state, ...props }: ClueModeProps) => {
                   text="Add Solution"
                 />
               </form>
-              <h4 css={{ marginTop: '1em' }}>Contest explanation</h4>
+              <h4 className="marginTop1em">Contest explanation</h4>
               <p>
                 After publishing, you can use a comment to explain how the
                 meta/contest works - comments are only visible to solvers who
                 have submitted or revealed the correct solution.
               </p>
-              <h4 css={{ marginTop: '1em' }}>Delay before allowing reveal</h4>
+              <h4 className="marginTop1em">Delay before allowing reveal</h4>
               <p>
                 Solvers get unlimited submission attempts and can optionally
                 reveal the answer if they aren&apos;t able to figure it out. You
@@ -679,7 +679,7 @@ export const ClueMode = ({ state, ...props }: ClueModeProps) => {
               <div>
                 <label>
                   <input
-                    css={{ marginRight: '1em' }}
+                    className="marginRight1em"
                     type="checkbox"
                     checked={
                       state.contestRevealDelay
@@ -700,7 +700,7 @@ export const ClueMode = ({ state, ...props }: ClueModeProps) => {
                 </label>
               </div>
 
-              <h4 css={{ marginTop: '1em' }}>Contest prize</h4>
+              <h4 className="marginTop1em">Contest prize</h4>
               <p>
                 If the contest has a prize solvers can choose to include their
                 email address in their submission to be eligible to win.
@@ -708,7 +708,7 @@ export const ClueMode = ({ state, ...props }: ClueModeProps) => {
               <div>
                 <label>
                   <input
-                    css={{ marginRight: '1em' }}
+                    className="marginRight1em"
                     type="checkbox"
                     checked={state.contestHasPrize}
                     onChange={(e) => {
@@ -729,7 +729,7 @@ export const ClueMode = ({ state, ...props }: ClueModeProps) => {
           <div>
             <label>
               <input
-                css={{ marginRight: '1em' }}
+                className="marginRight1em"
                 type="checkbox"
                 checked={state.isPrivate}
                 onChange={(e) => {
@@ -742,7 +742,7 @@ export const ClueMode = ({ state, ...props }: ClueModeProps) => {
               />{' '}
               This puzzle is private
               <ToolTipText
-                css={{ marginLeft: '0.5em' }}
+                className="marginLeft0-5em"
                 text={<FaInfoCircle />}
                 tooltip="Private puzzles are still visible to anybody you share the link with. They do not appear on your constructor blog, they aren't eligible to be featured on the Crosshare homepage, and your followers won't be notified when they are published."
               />
@@ -751,7 +751,7 @@ export const ClueMode = ({ state, ...props }: ClueModeProps) => {
           <div>
             <label>
               <input
-                css={{ marginRight: '1em' }}
+                className="marginRight1em"
                 type="checkbox"
                 checked={state.isPrivateUntil !== null}
                 onChange={(e) => {
@@ -764,7 +764,7 @@ export const ClueMode = ({ state, ...props }: ClueModeProps) => {
               />{' '}
               This puzzle should be private until a specified date/time
               <ToolTipText
-                css={{ marginLeft: '0.5em' }}
+                className="marginLeft0-5em"
                 text={<FaInfoCircle />}
                 tooltip="The puzzle won't appear on your constructor blog and your followers won't be notified until after the specified time."
               />
@@ -799,7 +799,7 @@ export const ClueMode = ({ state, ...props }: ClueModeProps) => {
             solvers quickly find puzzles with a particular attribute or theme.
           </p>
           {editingTags ? (
-            <div css={{ marginBottom: '1.5em' }}>
+            <div className="marginBottom1-5em">
               <TagEditor
                 userTags={state.userTags}
                 autoTags={autoTags}
@@ -832,11 +832,9 @@ export const ClueMode = ({ state, ...props }: ClueModeProps) => {
             </>
           )}
 
-          <h2 css={{ marginTop: '1em' }}>
-            Clues (use markdown for formatting):
-          </h2>
+          <h2 className="marginTop1em">Clues (use markdown for formatting):</h2>
           {props.completedEntries.length ? (
-            <table css={{ width: '100%' }}>
+            <table className="width100">
               <tbody>{clueRows}</tbody>
             </table>
           ) : (
@@ -859,7 +857,7 @@ export const ClueMode = ({ state, ...props }: ClueModeProps) => {
               </p>
             </>
           )}
-          <h2 css={{ marginTop: '1em' }}>Advanced</h2>
+          <h2 className="marginTop1em">Advanced</h2>
           <div>
             <h3>Alternate Solutions</h3>
             {state.alternates.length ? (
@@ -902,7 +900,7 @@ export const ClueMode = ({ state, ...props }: ClueModeProps) => {
               }}
             />
             <ToolTipText
-              css={{ marginLeft: '0.5em' }}
+              className="marginLeft0-5em"
               text={<FaInfoCircle />}
               tooltip={
                 <>
@@ -921,11 +919,11 @@ export const ClueMode = ({ state, ...props }: ClueModeProps) => {
               }
             />
           </div>
-          <div css={{ marginTop: '1em' }}>
+          <div className="marginTop1em">
             <h3>Comments</h3>
             <label>
               <input
-                css={{ marginRight: '1em' }}
+                className="marginRight1em"
                 type="checkbox"
                 checked={state.commentsDisabled}
                 onChange={(e) => {
diff --git a/app/components/ClueSuggestionOverlay.tsx b/app/components/ClueSuggestionOverlay.tsx
index 632c3ebd..da3c810d 100644
--- a/app/components/ClueSuggestionOverlay.tsx
+++ b/app/components/ClueSuggestionOverlay.tsx
@@ -116,7 +116,7 @@ export const SuggestOverlay = (props: SuggestOverlayProps) => {
           <div>
             <label>
               <input
-                css={{ marginRight: '1em' }}
+                className="marginRight1em"
                 type="checkbox"
                 checked={onlyNYT}
                 onChange={(e) => {
@@ -149,7 +149,7 @@ export const SuggestOverlay = (props: SuggestOverlayProps) => {
               },
             }}
           />
-          <h3 css={{ marginTop: '1em' }}>External Sources</h3>
+          <h3 className="marginTop1em">External Sources</h3>
           <ul>
             {ExternalSites.map((x) => (
               <li key={x[0]}>
diff --git a/app/components/Comments.module.css b/app/components/Comments.module.css
index 5b7a6b98..e83541de 100644
--- a/app/components/Comments.module.css
+++ b/app/components/Comments.module.css
@@ -1,7 +1,3 @@
-.commentWrapper {
-  margin-top: 1em;
-}
-
 .leftButton {
   margin-right: 0.5em !important;
 }
@@ -48,33 +44,3 @@
 .publishDate {
   font-style: italic;
 }
-
-.formLabel {
-  width: 100%;
-  margin: 0;
-}
-
-.lengthView {
-  text-align: right;
-}
-
-.header {
-  border-bottom: 1px solid var(--black);
-}
-
-.center {
-  text-align: center;
-}
-
-.marginTop {
-  margin-top: 1em;
-}
-
-.marginBottom {
-  margin-bottom: 1em;
-}
-
-.textarea {
-  width: 100%;
-  display: block;
-}
diff --git a/app/components/Comments.tsx b/app/components/Comments.tsx
index 46af76ca..594993db 100644
--- a/app/components/Comments.tsx
+++ b/app/components/Comments.tsx
@@ -120,7 +120,7 @@ interface CommentProps {
 }
 const CommentView = (props: CommentProps) => {
   return (
-    <div className={styles.commentWrapper}>
+    <div className="marginTop1em">
       <div>
         <CommentFlair
           publishTime={Math.max(
@@ -496,15 +496,15 @@ const CommentForm = ({
   return (
     <>
       <form onSubmit={logAsyncErrors(submitComment)}>
-        <div className={styles.marginBottom}>
-          <label className={styles.formLabel}>
+        <div className="marginBottom1em">
+          <label className="width100 margin0">
             {(props.replyToId !== undefined
               ? t`Enter your reply`
               : t`Leave a comment`) +
               ' ' +
               t`(please be nice!):`}
             <LengthLimitedTextarea
-              className={styles.textarea}
+              className="width100 displayBlock"
               maxLength={COMMENT_LENGTH_LIMIT}
               value={commentText}
               updateValue={logAsyncErrors(async (newVal) => {
@@ -517,7 +517,7 @@ const CommentForm = ({
               })}
             />
           </label>
-          <div className={styles.lengthView}>
+          <div className="textAlignRight">
             <LengthView
               maxLength={COMMENT_LENGTH_LIMIT}
               value={commentText}
@@ -807,12 +807,12 @@ export const Comments = ({
   }
 
   return (
-    <div className={styles.marginTop}>
-      <h4 className={styles.header}>
+    <div className="marginTop1em">
+      <h4 className="borderBottom1pxSolidBlack">
         <Trans>Comments</Trans>
       </h4>
       {!isMounted || !authContext.user || authContext.user.isAnonymous ? (
-        <div className={styles.center}>
+        <div className="textAlignCenter">
           <p>
             <Trans>Sign in with google to leave a comment of your own:</Trans>
           </p>
diff --git a/app/components/ConstructorPage.tsx b/app/components/ConstructorPage.tsx
index da1e8479..865f1d40 100644
--- a/app/components/ConstructorPage.tsx
+++ b/app/components/ConstructorPage.tsx
@@ -263,7 +263,7 @@ const FollowersListItem = ({
           cursor: 'pointer',
         }}
       >
-        <div css={{ marginRight: '1em' }}>
+        <div className="marginRight1em">
           <div>
             <b
               css={{
@@ -418,7 +418,7 @@ export const ConstructorPage = (props: ConstructorPageProps) => {
                     setShowOverlay(false);
                   }}
                 >
-                  <div css={{ textAlign: 'center' }}>
+                  <div className="textAlignCenter">
                     {overlayIsFollowing ? (
                       <>
                         <h2>
@@ -494,12 +494,12 @@ export const ConstructorPage = (props: ConstructorPageProps) => {
         <div css={{ textAlign: 'center', marginBottom: '1.5em' }}>
           <FollowButton page={props.constructorData} />
         </div>
-        <div css={{ marginBottom: '1.5em' }}>
+        <div className="marginBottom1-5em">
           <Markdown hast={props.bioHast} />
           {paypalEmail && paypalText ? (
             <div>
               <LinkButtonSimpleA
-                css={{ marginRight: '0.5em' }}
+                className="marginRight0-5em"
                 href={`https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=${encodeURIComponent(
                   paypalEmail
                 )}&item_name=${encodeURIComponent(
@@ -532,9 +532,9 @@ export const ConstructorPage = (props: ConstructorPageProps) => {
           />
         ))}
         {props.nextPage || props.prevPage !== null ? (
-          <p css={{ textAlign: 'center' }}>
+          <p className="textAlignCenter">
             {props.prevPage === 0 ? (
-              <Link css={{ marginRight: '2em' }} href={'/' + username}>
+              <Link className="marginRight2em" href={'/' + username}>
                 ← <Trans>Newer Puzzles</Trans>
               </Link>
             ) : (
@@ -542,7 +542,7 @@ export const ConstructorPage = (props: ConstructorPageProps) => {
             )}
             {props.prevPage ? (
               <Link
-                css={{ marginRight: '2em' }}
+                className="marginRight2em"
                 href={'/' + username + '/page/' + props.prevPage}
               >
                 ← <Trans>Newer Puzzles</Trans>
diff --git a/app/components/ConstructorStats.tsx b/app/components/ConstructorStats.tsx
index 4878de14..8d3ffcb2 100644
--- a/app/components/ConstructorStats.tsx
+++ b/app/components/ConstructorStats.tsx
@@ -96,7 +96,7 @@ const PuzzleList = ({
   return (
     <>
       <h4>{title}:</h4>
-      <ul css={{ listStyleType: 'none' }}>
+      <ul className="listStyleTypeNone">
         {matches.map((v, i) => (
           <PuzzleLink
             key={i}
diff --git a/app/components/CreateShareSection.tsx b/app/components/CreateShareSection.tsx
index d5359a2a..944170d7 100644
--- a/app/components/CreateShareSection.tsx
+++ b/app/components/CreateShareSection.tsx
@@ -42,7 +42,7 @@ export function CreateShareSection(props: { halfWidth: boolean }) {
           <FaHammer
             css={{ alignSelf: 'center', marginRight: '0.5em', fontSize: '2em' }}
           />
-          <div css={{ flex: 1 }}>
+          <div className="flex1">
             <Trans>
               <h4>Create a new puzzle</h4>
               <p
@@ -61,7 +61,7 @@ export function CreateShareSection(props: { halfWidth: boolean }) {
           <FaCloudUploadAlt
             css={{ alignSelf: 'center', marginRight: '0.5em', fontSize: '2em' }}
           />
-          <div css={{ flex: 1 }}>
+          <div className="flex1">
             <Trans>
               <h4>Upload a .puz file</h4>
               <p
diff --git a/app/components/DBLoader.tsx b/app/components/DBLoader.tsx
index 38e7f690..19274244 100644
--- a/app/components/DBLoader.tsx
+++ b/app/components/DBLoader.tsx
@@ -62,7 +62,7 @@ export const LoadButton = (props: {
   }
   return (
     <Button
-      css={{ fontSize: '1.5em' }}
+      className="fontSize1-5em"
       onClick={startBuild}
       text={props.buttonText}
     />
@@ -84,7 +84,7 @@ export const DBLoader = (): JSX.Element => {
   return (
     <>
       <DefaultTopBar />
-      <div css={{ margin: '1em' }}>
+      <div className="margin1em">
         <h2>Database Rebuilder</h2>
         {error ? <p>Error loading existing database.</p> : ''}
         {ready ? (
diff --git a/app/components/DateTimePicker.tsx b/app/components/DateTimePicker.tsx
index 74c9b0e0..7f7f1071 100644
--- a/app/components/DateTimePicker.tsx
+++ b/app/components/DateTimePicker.tsx
@@ -41,7 +41,7 @@ export const DateTimePicker = (props: DateTimePickerProps) => {
         }}
       />
       <input
-        css={{ marginLeft: '0.5em' }}
+        className="marginLeft0-5em"
         type="time"
         defaultValue={lightFormat(props.picked, 'HH:mm')}
         required
diff --git a/app/components/DifficultyBadge.tsx b/app/components/DifficultyBadge.tsx
index 27bec3ec..0f0ebddd 100644
--- a/app/components/DifficultyBadge.tsx
+++ b/app/components/DifficultyBadge.tsx
@@ -13,10 +13,7 @@ export const DifficultyBadge = (props: {
   const { user, prefs } = useContext(AuthContext);
 
   let symbol = (
-    <span
-      css={{ color: 'var(--primary)' }}
-      title="Unsure (not enough solves yet)"
-    >
+    <span className="colorPrimary" title="Unsure (not enough solves yet)">
       ●
     </span>
   );
@@ -29,7 +26,7 @@ export const DifficultyBadge = (props: {
     if (expectation < 0.25) {
       symbol = (
         <span
-          css={{ color: 'var(--text)' }}
+          className="colorText"
           title={`Very Difficult (${Math.round(props.puzzleRating.r)})`}
         >
           ◆◆
@@ -39,7 +36,7 @@ export const DifficultyBadge = (props: {
     } else if (expectation < 0.5) {
       symbol = (
         <span
-          css={{ color: 'var(--text)' }}
+          className="colorText"
           title={`Difficult (${Math.round(props.puzzleRating.r)})`}
         >
           ◆
diff --git a/app/components/DisplayNameForm.tsx b/app/components/DisplayNameForm.tsx
index fe6d3ee9..cb1a05bc 100644
--- a/app/components/DisplayNameForm.tsx
+++ b/app/components/DisplayNameForm.tsx
@@ -63,7 +63,7 @@ export const DisplayNameForm = ({ onCancel }: DisplayNameFormProps) => {
       <label>
         {ctx.displayName ? t`Update display name:` : t`Set your display name:`}
         <input
-          css={{ margin: '0 0.5em' }}
+          className="margin0-0-5em"
           type="text"
           value={newDisplayName || ''}
           onChange={(e) => {
@@ -79,7 +79,7 @@ export const DisplayNameForm = ({ onCancel }: DisplayNameFormProps) => {
       {onCancel ? (
         <Button
           boring={true}
-          css={{ marginLeft: '0.5em' }}
+          className="marginLeft0-5em"
           onClick={onCancel}
           text={t`Cancel`}
         />
diff --git a/app/components/EditableText.tsx b/app/components/EditableText.tsx
index f9280512..f50abcd2 100644
--- a/app/components/EditableText.tsx
+++ b/app/components/EditableText.tsx
@@ -107,7 +107,7 @@ export const EditableText = (
         />
         <Button
           boring={true}
-          css={{ marginLeft: '0.5em' }}
+          className="marginLeft0-5em"
           onClick={() => {
             setEditing(false);
             setValue(props.text ?? '');
@@ -155,7 +155,7 @@ export const EditableText = (
               />
               {props.deletable ? (
                 <Button
-                  css={{ marginLeft: '1em' }}
+                  className="marginLeft1em"
                   text="delete"
                   title={`Delete ${props.title}`}
                   onClick={logAsyncErrors(props.handleDelete)}
@@ -172,7 +172,7 @@ export const EditableText = (
                 <span>{props.text}</span>
               )}
               <ButtonAsLink
-                css={{ marginLeft: '1em' }}
+                className="marginLeft1em"
                 text="edit"
                 title={`Edit ${props.title}`}
                 onClick={() => {
@@ -181,7 +181,7 @@ export const EditableText = (
               />
               {props.deletable ? (
                 <ButtonAsLink
-                  css={{ marginLeft: '1em' }}
+                  className="marginLeft1em"
                   text="delete"
                   title={`Delete ${props.title}`}
                   onClick={logAsyncErrors(props.handleDelete)}
diff --git a/app/components/EmbedOverlay.tsx b/app/components/EmbedOverlay.tsx
index b85505da..38d8eb45 100644
--- a/app/components/EmbedOverlay.tsx
+++ b/app/components/EmbedOverlay.tsx
@@ -86,13 +86,13 @@ export const EmbedOverlay = ({
       <CopyableInput
         text={`<iframe style="height: 90vh; width: 100%;" src="https://crosshare.org/embed/${puzzle.id}/${user.uid}" frameborder="0" allowfullscreen="true" allowtransparency="true" allow="clipboard-write *"></iframe>`}
       />
-      <h3 css={{ marginTop: '1em' }}>Theme</h3>
+      <h3 className="marginTop1em">Theme</h3>
       {loadingOptions ? (
         <p>Loading your embed settings...</p>
       ) : (
         <ThemePicker userId={user.uid} {...embedOptions} />
       )}
-      <h3 css={{ marginTop: '1em' }}>Puzzle List</h3>
+      <h3 className="marginTop1em">Puzzle List</h3>
       <p>
         Alternatively, you can embed a list of your recent public puzzles all at
         once:
@@ -187,7 +187,7 @@ const ColorPicker = (props: ColorPickerProps) => {
   }
 
   return (
-    <div css={{ marginBottom: '1em' }}>
+    <div className="marginBottom1em">
       {swatches}
       <div>
         <input type="text" value={hexColor} onChange={updateHexColor} />
@@ -339,7 +339,7 @@ const ThemePicker = (props: EmbedOptionsT & { userId: string }) => {
       <div>
         <label>
           <input
-            css={{ marginRight: '1em' }}
+            className="marginRight1em"
             type="checkbox"
             checked={isDark}
             onChange={(e) => {
@@ -353,7 +353,7 @@ const ThemePicker = (props: EmbedOptionsT & { userId: string }) => {
       <div>
         <label>
           <input
-            css={{ marginRight: '1em' }}
+            className="marginRight1em"
             disabled={!isDark}
             type="checkbox"
             checked={preservePrimary}
@@ -375,7 +375,7 @@ const ThemePicker = (props: EmbedOptionsT & { userId: string }) => {
       <div>
         <label>
           <input
-            css={{ marginRight: '1em' }}
+            className="marginRight1em"
             type="checkbox"
             checked={customFontEnabled}
             onChange={(e) => {
@@ -439,12 +439,12 @@ const ThemePicker = (props: EmbedOptionsT & { userId: string }) => {
         />
       </label>
       <Button
-        css={{ marginTop: '1em' }}
+        className="marginTop1em"
         onClick={saveTheme}
         disabled={saving || !dirty}
         text={saving ? 'Saving...' : 'Save Theme Choices'}
       />
-      <h4 css={{ marginTop: '2em' }}>Preview</h4>
+      <h4 className="marginTop2em">Preview</h4>
       {customFontEnabled && fontStyles.length ? (
         <style
           dangerouslySetInnerHTML={{
diff --git a/app/components/ErrorPage.tsx b/app/components/ErrorPage.tsx
index 0ddf7a60..198edfaa 100644
--- a/app/components/ErrorPage.tsx
+++ b/app/components/ErrorPage.tsx
@@ -22,7 +22,7 @@ export const ErrorPage = (props: { title: string; children?: ReactNode }) => {
         <Link href="/">
           <Logo notificationCount={0} width="15em" height="15em" />
         </Link>
-        <h1 css={{ marginTop: '1em' }}>{props.title}</h1>
+        <h1 className="marginTop1em">{props.title}</h1>
         {props.children}
         <p>
           Click the angry bunny (or <Link href="/">here</Link>) to try the
diff --git a/app/components/FeatureList.tsx b/app/components/FeatureList.tsx
index 7a954b25..ee348f6b 100644
--- a/app/components/FeatureList.tsx
+++ b/app/components/FeatureList.tsx
@@ -32,7 +32,7 @@ export function FeatureListItem(props: {
         width: '100%',
       }}
     >
-      <h3 css={{ textAlign: 'center' }}>{props.heading}</h3>
+      <h3 className="textAlignCenter">{props.heading}</h3>
       <div
         css={{
           display: 'flex',
@@ -40,7 +40,7 @@ export function FeatureListItem(props: {
         }}
       >
         <div css={{ marginRight: '0.5em', fontSize: '200%' }}>{props.icon}</div>
-        <p css={{ flex: 1 }}>{props.text}</p>
+        <p className="flex1">{props.text}</p>
       </div>
     </div>
   );
diff --git a/app/components/FollowButton.tsx b/app/components/FollowButton.tsx
index 363c9a61..e996815a 100644
--- a/app/components/FollowButton.tsx
+++ b/app/components/FollowButton.tsx
@@ -64,7 +64,7 @@ export const FollowButton = ({
               setShowOverlay(false);
             }}
           >
-            <div css={{ textAlign: 'center' }}>
+            <div className="textAlignCenter">
               <h2>
                 Follow {page.n} to get notified when they post a new puzzle
               </h2>
@@ -104,7 +104,7 @@ export const FollowButton = ({
             <>
               {t`Follow`}
               <ToolTipText
-                css={{ marginLeft: '0.5em' }}
+                className="marginLeft0-5em"
                 text={<FaInfoCircle />}
                 tooltip={t`You can't follow yourself!`}
               />
diff --git a/app/components/ImageCropper.tsx b/app/components/ImageCropper.tsx
index 35f3313f..90d599d4 100644
--- a/app/components/ImageCropper.tsx
+++ b/app/components/ImageCropper.tsx
@@ -224,7 +224,7 @@ export function ImageCropper(props: {
           onChange={onSelectFile}
         />
       </div>
-      <div css={{ margin: '1em 0' }}>
+      <div className="margin1em0">
         {upImg ? (
           <ReactCrop
             aspect={props.targetSize[0] / props.targetSize[1]}
diff --git a/app/components/MarkdownPreview.tsx b/app/components/MarkdownPreview.tsx
index 71777de6..139526f5 100644
--- a/app/components/MarkdownPreview.tsx
+++ b/app/components/MarkdownPreview.tsx
@@ -14,7 +14,7 @@ export function MarkdownPreview(props: MarkdownPreviewProps) {
   return (
     <>
       <ButtonAsLink
-        css={{ marginRight: '1em' }}
+        className="marginRight1em"
         text="Preview"
         disabled={!props.markdown}
         onClick={() => {
diff --git a/app/components/MetaSubmission.tsx b/app/components/MetaSubmission.tsx
index 05982e63..1e33515c 100644
--- a/app/components/MetaSubmission.tsx
+++ b/app/components/MetaSubmission.tsx
@@ -73,7 +73,7 @@ export const MetaSubmissionForm = (props: {
             <br />
             <label>
               <input
-                css={{ marginRight: '1em' }}
+                className="marginRight1em"
                 type="checkbox"
                 checked={enteringForPrize}
                 onChange={(e) => {
@@ -93,7 +93,7 @@ export const MetaSubmissionForm = (props: {
             <p>
               <Button
                 type="submit"
-                css={{ marginRight: '0.5em' }}
+                className="marginRight0-5em"
                 disabled={!/\S/.test(submission)}
                 text="Submit"
               />
@@ -122,7 +122,7 @@ export const MetaSubmissionForm = (props: {
       )}
       <p>
         <Button
-          css={{ marginRight: '0.5em' }}
+          className="marginRight0-5em"
           onClick={() => {
             props.dispatch({
               type: 'CONTESTREVEAL',
@@ -159,13 +159,13 @@ export const MetaSubmission = (props: {
   const authContext = useContext(AuthContext);
   if (!authContext.user || authContext.user.isAnonymous) {
     return (
-      <div css={{ marginTop: '1em' }}>
-        <h4 css={{ borderBottom: '1px solid var(--black)' }}>Contest</h4>
+      <div className="marginTop1em">
+        <h4 className="borderBottom1pxSolidBlack">Contest</h4>
         <p>
           This is a meta puzzle! Sign in with google to submit your solution,
           view the solution, view the leaderboard, and read or submit comments:
         </p>
-        <div css={{ textAlign: 'center' }}>
+        <div className="textAlignCenter">
           {authContext.user ? (
             <GoogleLinkButton user={authContext.user} />
           ) : (
@@ -182,8 +182,8 @@ export const MetaSubmission = (props: {
     props.isAuthor;
 
   return (
-    <div css={{ marginTop: '1em' }}>
-      <h4 css={{ borderBottom: '1px solid var(--black)' }}>Contest</h4>
+    <div className="marginTop1em">
+      <h4 className="borderBottom1pxSolidBlack">Contest</h4>
 
       {props.contestSubmission ? (
         isMetaSolution(props.contestSubmission, props.solutions) ? (
diff --git a/app/components/ModerateOverlay.tsx b/app/components/ModerateOverlay.tsx
index 7f3fe820..5aa3b338 100644
--- a/app/components/ModerateOverlay.tsx
+++ b/app/components/ModerateOverlay.tsx
@@ -105,25 +105,25 @@ export const ModeratingOverlay = memo(function ModeratingOverlay({
         </>
       )}
       {puzzle.isPrivate !== false ? (
-        <h4 css={{ color: 'var(--error)' }}>This puzzle is private</h4>
+        <h4 className="colorError">This puzzle is private</h4>
       ) : (
         ''
       )}
       {puzzle.isPrivateUntil && puzzle.isPrivateUntil > new Date().getTime() ? (
-        <h4 css={{ color: 'var(--error)' }}>
+        <h4 className="colorError">
           This puzzle is private until{' '}
           {new Date(puzzle.isPrivateUntil).toISOString()}
         </h4>
       ) : (
         ''
       )}
-      <div css={{ marginTop: '1em' }}>Pick a date to appear as daily mini:</div>
+      <div className="marginTop1em">Pick a date to appear as daily mini:</div>
       <UpcomingMinisCalendar
         disableExisting={true}
         value={date}
         onChange={setDate}
       />
-      <div css={{ marginTop: '1em' }}>
+      <div className="marginTop1em">
         <button
           disabled={!date || puzzle.moderated || puzzle.isPrivate !== false}
           onClick={logAsyncErrors(schedule)}
@@ -131,7 +131,7 @@ export const ModeratingOverlay = memo(function ModeratingOverlay({
           Schedule As Daily Mini
         </button>
       </div>
-      <div css={{ marginTop: '1em' }}>
+      <div className="marginTop1em">
         <button
           disabled={puzzle.isPrivate !== false}
           onClick={() => {
@@ -141,7 +141,7 @@ export const ModeratingOverlay = memo(function ModeratingOverlay({
           Set as Featured
         </button>
       </div>
-      <div css={{ marginTop: '1em' }}>
+      <div className="marginTop1em">
         <button
           onClick={() => {
             logAsyncErrors(markAsModerated)(false);
diff --git a/app/components/NewPuzzleForm.tsx b/app/components/NewPuzzleForm.tsx
index cc78320d..0e68bbc5 100644
--- a/app/components/NewPuzzleForm.tsx
+++ b/app/components/NewPuzzleForm.tsx
@@ -17,10 +17,10 @@ interface SizeSelectProps {
 
 const SizeSelectInput = (props: SizeSelectProps) => {
   return (
-    <div css={{ fontSize: '1.5em' }}>
+    <div className="fontSize1-5em">
       <label>
         <input
-          css={{ marginRight: '1em' }}
+          className="marginRight1em"
           type="radio"
           name="size"
           value={props.label}
@@ -97,10 +97,10 @@ const labelForPrefill = (p: PrefillSquares) => {
 
 const PrefillSelectInput = (props: PrefillSelectProps) => {
   return (
-    <div css={{ fontSize: '1.5em' }}>
+    <div className="fontSize1-5em">
       <label>
         <input
-          css={{ marginRight: '1em' }}
+          className="marginRight1em"
           type="radio"
           name="prefill"
           value={props.option}
@@ -171,7 +171,7 @@ export function NewPuzzleForm(props: {
       {props.hideWarning ? (
         ''
       ) : (
-        <p css={{ color: 'var(--error)' }}>
+        <p className="colorError">
           WARNING: all progress on your current puzzle will be permanently lost.
           If you want to keep it, please publish the current puzzle or export a
           .puz file first.
@@ -226,14 +226,14 @@ export function NewPuzzleForm(props: {
             setCurrent={setCurrent}
           />
           {current === 'Custom' && errorMsg ? (
-            <p css={{ color: 'var(--error)' }}>{errorMsg}</p>
+            <p className="colorError">{errorMsg}</p>
           ) : (
             ''
           )}
           <div>
             <label>
               <input
-                css={{ marginRight: '1em' }}
+                className="marginRight1em"
                 type="checkbox"
                 checked={prefill !== undefined}
                 onChange={(e) => {
diff --git a/app/components/Page.tsx b/app/components/Page.tsx
index c74a5af5..5542eadb 100644
--- a/app/components/Page.tsx
+++ b/app/components/Page.tsx
@@ -83,9 +83,9 @@ const TinyNavButton = ({ isLeft, dispatch }: TinyNavButtonProps) => {
       }}
     >
       {isLeft ? (
-        <FaAngleDoubleLeft css={{ position: 'absolute' }} />
+        <FaAngleDoubleLeft className="positionAbsolute" />
       ) : (
-        <FaAngleDoubleRight css={{ position: 'absolute' }} />
+        <FaAngleDoubleRight className="positionAbsolute" />
       )}
     </button>
   );
diff --git a/app/components/Preview.tsx b/app/components/Preview.tsx
index 6892002e..b0bf5d95 100644
--- a/app/components/Preview.tsx
+++ b/app/components/Preview.tsx
@@ -156,7 +156,7 @@ export const Preview = (props: PuzzleInProgressT & AuthProps): JSX.Element => {
             height: '100%',
           }}
         >
-          <div css={{ flex: 'none' }}>
+          <div className="flexNone">
             <DefaultTopBar>
               <TopBarLink
                 icon={<FaRegNewspaper />}
diff --git a/app/components/PublishOverlay.tsx b/app/components/PublishOverlay.tsx
index 162193ce..d43b8898 100644
--- a/app/components/PublishOverlay.tsx
+++ b/app/components/PublishOverlay.tsx
@@ -116,14 +116,14 @@ export function PublishOverlay(props: {
             {lightFormat(props.toPublish.pvu.toDate(), "M/d/y' at 'h:mma")}.
           </p>
         ) : null}
-        <p css={{ color: 'var(--error)' }}>
+        <p className="colorError">
           All puzzles are reviewed and subject to removal at any time for any
           reason (e.g. if the content is deemed offensive or if it is found to
           be copyright infringement)
         </p>
         {props.warnings.length ? (
           <>
-            <p css={{ color: 'var(--error)' }}>Warnings:</p>
+            <p className="colorError">Warnings:</p>
             <ul>
               {props.warnings.map((s, i) => (
                 <li key={i}>{s}</li>
diff --git a/app/components/Puzzle.tsx b/app/components/Puzzle.tsx
index b97dea16..a486c09d 100644
--- a/app/components/Puzzle.tsx
+++ b/app/components/Puzzle.tsx
@@ -198,7 +198,7 @@ const KeepTryingOverlay = ({
         </Trans>
       </p>
       <Button
-        css={{ width: '100%' }}
+        className="width100"
         onClick={() => {
           dispatch({ type: 'DISMISSKEEPTRYING' });
         }}
diff --git a/app/components/PuzzleHeading.tsx b/app/components/PuzzleHeading.tsx
index 931e33f3..00f6e4d9 100644
--- a/app/components/PuzzleHeading.tsx
+++ b/app/components/PuzzleHeading.tsx
@@ -91,7 +91,7 @@ export const PuzzleHeading = (props: {
       )}
       {props.blogPost ? (
         <div css={{ margin: '1em 0', overflowWrap: 'break-word' }}>
-          <Markdown css={{ textAlign: 'left' }} hast={props.blogPost} />
+          <Markdown className="textAlignLeft" hast={props.blogPost} />
         </div>
       ) : (
         ''
@@ -100,7 +100,7 @@ export const PuzzleHeading = (props: {
         <div css={{ margin: '1em 0', overflowWrap: 'break-word' }}>
           <Markdown
             inline={true}
-            css={{ textAlign: 'left' }}
+            className="textAlignLeft"
             hast={props.constructorPage.sig}
           />
         </div>
@@ -111,9 +111,9 @@ export const PuzzleHeading = (props: {
       {props.showTip &&
       props.constructorPage?.pp &&
       props.constructorPage.pt ? (
-        <div css={{ textAlign: 'center' }}>
+        <div className="textAlignCenter">
           <LinkButtonSimpleA
-            css={{ marginRight: '0.5em' }}
+            className="marginRight0-5em"
             href={`https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=${encodeURIComponent(
               props.constructorPage.pp
             )}&item_name=${encodeURIComponent(
diff --git a/app/components/PuzzleLink.tsx b/app/components/PuzzleLink.tsx
index e99bbf57..0cb8460f 100644
--- a/app/components/PuzzleLink.tsx
+++ b/app/components/PuzzleLink.tsx
@@ -122,7 +122,7 @@ const PuzzleLink = (props: {
         ]}
         href={url}
       >
-        <div css={{ position: 'relative' }}>
+        <div className="positionRelative">
           <PuzzleSizeIcon width={props.width} height={props.height} />
           {authored || (play && play.f) ? (
             <div
@@ -150,7 +150,7 @@ const PuzzleLink = (props: {
           )}
         </div>
       </Link>
-      <div css={{ flex: 1 }}>
+      <div className="flex1">
         <Link noTargetBlank={props.noTargetBlank} css={linkCss} href={url}>
           <h3
             css={{
@@ -360,7 +360,7 @@ export const PuzzleResultLink = ({
   if (props.showPrivateStatus) {
     if (puzzle.isPrivate !== false) {
       date = (
-        <span css={{ color: 'var(--error)' }}>
+        <span className="colorError">
           <Trans comment="The variable is a timestamp like '4 days ago' or 'hace 4 dias'">
             Published privately <PastDistanceToNow date={publishDate} />
           </Trans>
@@ -371,7 +371,7 @@ export const PuzzleResultLink = ({
       new Date(puzzle.isPrivateUntil) > new Date()
     ) {
       date = (
-        <span css={{ color: 'var(--error)' }}>
+        <span className="colorError">
           <Trans comment="The variable is a timestamp like 'in 4 days' or 'en 4 dias'">
             Private, going public <DistanceToNow date={publishDate} />
           </Trans>
diff --git a/app/components/PuzzleOverlay.tsx b/app/components/PuzzleOverlay.tsx
index 05c2ba50..321fd4b0 100644
--- a/app/components/PuzzleOverlay.tsx
+++ b/app/components/PuzzleOverlay.tsx
@@ -203,7 +203,7 @@ export const PuzzleOverlay = (props: SuccessOverlayProps | BeginPauseProps) => {
         constructorIsPatron={props.puzzle.constructorIsPatron}
         guestConstructor={props.puzzle.guestConstructor}
       />
-      <div css={{ textAlign: 'center' }}>
+      <div className="textAlignCenter">
         {props.overlayType === OverlayType.BeginPause ? (
           <>
             {props.loadingPlayState ? (
@@ -212,7 +212,7 @@ export const PuzzleOverlay = (props: SuccessOverlayProps | BeginPauseProps) => {
               </div>
             ) : (
               <>
-                <div css={{ marginBottom: '1em' }}>{props.message}</div>
+                <div className="marginBottom1em">{props.message}</div>
                 <Button
                   onClick={() => {
                     window.parent.postMessage({ type: 'resume' }, '*');
@@ -220,9 +220,9 @@ export const PuzzleOverlay = (props: SuccessOverlayProps | BeginPauseProps) => {
                   }}
                   text={props.dismissMessage}
                 />
-                <p css={{ marginTop: '1em' }}>{loginButton}</p>
+                <p className="marginTop1em">{loginButton}</p>
                 {props.downsOnly ? (
-                  <p css={{ marginTop: '1em' }}>
+                  <p className="marginTop1em">
                     <Trans>You are currently solving downs-only:</Trans> (
                     <ButtonAsLink
                       onClick={() => {
@@ -236,7 +236,7 @@ export const PuzzleOverlay = (props: SuccessOverlayProps | BeginPauseProps) => {
                   ''
                 )}
                 {isContest ? (
-                  <p css={{ marginTop: '1em' }}>
+                  <p className="marginTop1em">
                     <Trans>
                       This is a contest/meta puzzle. To submit your answer,
                       first finish solving the grid (or reveal it if you get
@@ -345,8 +345,8 @@ export const PuzzleOverlay = (props: SuccessOverlayProps | BeginPauseProps) => {
       >
         {isContest && props.puzzle.contestAnswers ? (
           <>
-            <div css={{ marginTop: '1em' }}>
-              <h4 css={{ borderBottom: '1px solid var(--black)' }}>
+            <div className="marginTop1em">
+              <h4 className="borderBottom1pxSolidBlack">
                 <Trans>Leaderboard (updated hourly)</Trans>
               </h4>
               {winningSubmissions?.length ? (
diff --git a/app/components/PuzzleStats.tsx b/app/components/PuzzleStats.tsx
index cf97e9a6..16dd56a3 100644
--- a/app/components/PuzzleStats.tsx
+++ b/app/components/PuzzleStats.tsx
@@ -154,7 +154,7 @@ const MetaSubmissionList = (props: MetaSubmissionListProps) => {
 
   return (
     <>
-      <p css={{ margin: '1em' }}>
+      <p className="margin1em">
         <CSVLink
           data={subs.map((s) => ({
             ...s,
@@ -179,7 +179,7 @@ const MetaSubmissionList = (props: MetaSubmissionListProps) => {
           Download submission table as CSV
         </CSVLink>
       </p>
-      <div css={{ margin: '1em' }}>
+      <div className="margin1em">
         <Table
           css={{
             '& .cell': {
@@ -367,7 +367,7 @@ export const StatsPage = ({
           height: '100%',
         }}
       >
-        <div css={{ flex: 'none' }}>
+        <div className="flexNone">
           <DefaultTopBar>
             {!hideShare && stats?.sct ? (
               <>
@@ -409,7 +409,7 @@ export const StatsPage = ({
         >
           {stats ? (
             <>
-              <h3 css={{ width: '100%' }}>
+              <h3 className="width100">
                 Stats for <b>{puzzle.title}</b>
               </h3>
               <div
@@ -472,7 +472,7 @@ export const StatsPage = ({
               </div>
               <div css={{ paddingTop: '1em', textAlign: 'center' }}>
                 <ButtonAsLink
-                  css={{ marginRight: '0.5em' }}
+                  className="marginRight0-5em"
                   disabled={mode === StatsMode.AverageTime}
                   onClick={() => {
                     setMode(StatsMode.AverageTime);
@@ -492,7 +492,7 @@ export const StatsPage = ({
                 />
                 {isMeta ? (
                   <ButtonAsLink
-                    css={{ marginLeft: '0.5em' }}
+                    className="marginLeft0-5em"
                     disabled={mode === StatsMode.MetaSubmissions}
                     onClick={() => {
                       setMode(StatsMode.MetaSubmissions);
diff --git a/app/components/ReportOverlay.tsx b/app/components/ReportOverlay.tsx
index 472237e5..be90583c 100644
--- a/app/components/ReportOverlay.tsx
+++ b/app/components/ReportOverlay.tsx
@@ -119,7 +119,7 @@ export const ReportOverlay = (props: {
           </div>
           <h3>Notes</h3>
           <form onSubmit={logAsyncErrors(submitReport)}>
-            <div css={{ marginBottom: '1em' }}>
+            <div className="marginBottom1em">
               <label css={{ width: '100%', margin: 0 }}>
                 <p>
                   (Optional) Add any notes that you think might be helpful to
@@ -132,7 +132,7 @@ export const ReportOverlay = (props: {
                   updateValue={setNotes}
                 />
               </label>
-              <div css={{ textAlign: 'right' }}>
+              <div className="textAlignRight">
                 <LengthView
                   maxLength={COMMENT_LENGTH_LIMIT}
                   value={notes}
@@ -142,20 +142,20 @@ export const ReportOverlay = (props: {
             </div>
             <Button
               type="submit"
-              css={{ marginRight: '0.5em' }}
+              className="marginRight0-5em"
               disabled={submitting}
               text={'Report comment'}
             />
             <Button
               boring={true}
               disabled={submitting}
-              css={{ marginRight: '0.5em' }}
+              className="marginRight0-5em"
               onClick={props.closeOverlay}
               text={'Cancel'}
             />
           </form>
 
-          <p css={{ marginTop: '2em' }}>
+          <p className="marginTop2em">
             <i>
               False reports waste our moderators&apos;s time and will eventually
               lead to your account being banned.
diff --git a/app/components/SharingButtons.tsx b/app/components/SharingButtons.tsx
index 19ddc481..59cd5208 100644
--- a/app/components/SharingButtons.tsx
+++ b/app/components/SharingButtons.tsx
@@ -64,13 +64,13 @@ function url(network: Network, path: string, text: string): string {
 function icon(network: Network): ReactNode {
   switch (network) {
     case Network.Facebook:
-      return <FaFacebook css={{ verticalAlign: 'text-bottom' }} />;
+      return <FaFacebook className="verticalAlignTextBottom" />;
     case Network.Twitter:
-      return <FaTwitter css={{ verticalAlign: 'text-bottom' }} />;
+      return <FaTwitter className="verticalAlignTextBottom" />;
     case Network.Email:
-      return <FaEnvelope css={{ verticalAlign: 'text-bottom' }} />;
+      return <FaEnvelope className="verticalAlignTextBottom" />;
     case Network.Clipboard:
-      return <FaRegClipboard css={{ verticalAlign: 'text-bottom' }} />;
+      return <FaRegClipboard className="verticalAlignTextBottom" />;
   }
 }
 
diff --git a/app/components/SolverPreferencesList.tsx b/app/components/SolverPreferencesList.tsx
index 018515d3..d8ba1d1f 100644
--- a/app/components/SolverPreferencesList.tsx
+++ b/app/components/SolverPreferencesList.tsx
@@ -18,7 +18,7 @@ export const PrefSetting = (props: PrefSettingProps) => {
   return (
     <label>
       <input
-        css={{ marginRight: '1em' }}
+        className="marginRight1em"
         type="checkbox"
         checked={props.invert ? !prefSet : prefSet}
         onChange={logAsyncErrors(async (e) => {
diff --git a/app/components/TagEditor.tsx b/app/components/TagEditor.tsx
index f69735f3..40499c58 100644
--- a/app/components/TagEditor.tsx
+++ b/app/components/TagEditor.tsx
@@ -120,7 +120,7 @@ export function TagEditor(props: TagEditorProps) {
       />
       {tags.length < 5 ? (
         <>
-          <div css={{ marginTop: '1em' }}>
+          <div className="marginTop1em">
             <input
               type="text"
               placeholder={`New tag name`}
@@ -148,7 +148,7 @@ export function TagEditor(props: TagEditorProps) {
             ''
           ) : (
             <>
-              <h5 css={{ marginTop: '1em' }}>Example tags:</h5>
+              <h5 className="marginTop1em">Example tags:</h5>
               <TagList
                 tags={['themeless', 'themed', 'cryptic', 'grid-art', 'lang-es']}
                 onClick={(t) => {
@@ -161,7 +161,7 @@ export function TagEditor(props: TagEditorProps) {
       ) : (
         <p>You must remove an existing tag if you want to add any new ones.</p>
       )}
-      <div css={{ marginTop: '1em' }}>
+      <div className="marginTop1em">
         <Button
           onClick={() => {
             props
@@ -184,7 +184,7 @@ export function TagEditor(props: TagEditorProps) {
         {props.cancel ? (
           <Button
             boring={true}
-            css={{ marginLeft: '0.5em' }}
+            className="marginLeft0-5em"
             onClick={props.cancel}
             text="Cancel"
           />
diff --git a/app/components/TopBar.tsx b/app/components/TopBar.tsx
index 57969044..c4e9213f 100644
--- a/app/components/TopBar.tsx
+++ b/app/components/TopBar.tsx
@@ -682,7 +682,7 @@ const NotificationLink = ({
           css={NotificationLinkCSS}
           href={`/crosswords/${n.p}/${slugify(n.pn)}`}
         >
-          <FaComment css={{ marginRight: '0.5em' }} /> {n.cn} commented on{' '}
+          <FaComment className="marginRight0-5em" /> {n.cn} commented on{' '}
           <u>{n.pn}</u>
         </Link>
       );
@@ -693,7 +693,7 @@ const NotificationLink = ({
           css={NotificationLinkCSS}
           href={`/crosswords/${n.p}/${slugify(n.pn)}`}
         >
-          <FaComments css={{ marginRight: '0.5em' }} /> {n.cn} replied to your
+          <FaComments className="marginRight0-5em" /> {n.cn} replied to your
           comment on <u>{n.pn}</u>
         </Link>
       );
@@ -704,8 +704,8 @@ const NotificationLink = ({
           css={NotificationLinkCSS}
           href={`/crosswords/${n.p}/${slugify(n.pn)}`}
         >
-          <FaRegNewspaper css={{ marginRight: '0.5em' }} /> {n.an} published a
-          new puzzle: <u>{n.pn}</u>
+          <FaRegNewspaper className="marginRight0-5em" /> {n.an} published a new
+          puzzle: <u>{n.pn}</u>
         </Link>
       );
       break;
@@ -715,8 +715,8 @@ const NotificationLink = ({
           css={NotificationLinkCSS}
           href={`/crosswords/${n.p}/${slugify(n.pn)}`}
         >
-          <FaRegGrinStars css={{ marginRight: '0.5em' }} /> Crosshare is
-          featuring your puzzle <u>{n.pn}</u>
+          <FaRegGrinStars className="marginRight0-5em" /> Crosshare is featuring
+          your puzzle <u>{n.pn}</u>
           {n.as ? ` as ${n.as}` : ' on the homepage'}!
         </Link>
       );
diff --git a/app/lib/definitions.module.css b/app/lib/definitions.module.css
new file mode 100644
index 00000000..3527d65d
--- /dev/null
+++ b/app/lib/definitions.module.css
@@ -0,0 +1,5 @@
+/* make any changes in concert w/ style.ts */
+@value small-and-up: min-width: 576px;
+@value large-and-up: min-width: 992px;
+@value huge-and-up: min-width: 1240px;
+@value max-width: 1200px;
diff --git a/app/lib/style.css b/app/lib/style.css
index 88d27da7..1072c427 100644
--- a/app/lib/style.css
+++ b/app/lib/style.css
@@ -329,4 +329,117 @@ div.paragraph + div.paragraph {
   height: 1em;
   margin: 0 .05em 0 .1em;
   vertical-align: -0.1em;
+}
+
+/* atomic styles */
+.flexNone {
+  flex: none;
+}
+.flex1 {
+  flex: 1;
+}
+.flex50 {
+  flex: 50%;
+}
+.width100 {
+  width: 100%;
+}
+.displayBlock {
+  display: block;
+}
+.margin0 {
+  margin: 0;
+}
+.margin1em {
+  margin: 1em;
+}
+.marginTop1em {
+  margin-top: 1em;
+}
+.marginTop1-5em {
+  margin-top: 1.5em;
+}
+.marginTop2em {
+  margin-top: 2em;
+}
+.marginRight0-5em {
+  margin-right: 0.5em;
+}
+.marginRight1em {
+  margin-right: 1em;
+}
+.marginRight1-5em {
+  margin-right: 1.5em;
+}
+.marginRight2em {
+  margin-right: 2em;
+}
+.marginLeft0-5em {
+  margin-left: 0.5em;
+}
+.marginLeft1em {
+  margin-left: 1em;
+}
+.marginBottom0 {
+  margin-bottom: 0;
+}
+.marginBottom1em {
+  margin-bottom: 1em;
+}
+.marginBottom1-5em {
+  margin-bottom: 1.5em;
+}
+.marginBottom2em {
+  margin-bottom: 2em;
+}
+.marginAuto {
+  margin: auto;
+}
+.margin1em0 {
+  margin: 1em 0;
+}
+.margin2em0 {
+  margin: 2em 0;
+}
+.margin0-0-5em {
+  margin: 0 0.5em;
+}
+.paddingBottom1em {
+  padding-bottom: 1em;
+}
+.textAlignLeft {
+  text-align: left;
+}
+.textAlignRight {
+  text-align: right;
+}
+.textAlignCenter {
+  text-align: center;
+}
+.listStyleTypeNone {
+  list-style-type: none;
+}
+.colorPrimary {
+  color: var(--primary);
+}
+.colorText {
+  color: var(--text);
+}
+.colorError {
+  color: var(--error);
+}
+.fontSize1-5em{
+  font-size: 1.5em;
+}
+.positionAbsolute {
+  position: absolute;
+}
+.positionRelative {
+  position: relative;
+}
+.borderBottom1pxSolidBlack {
+  border-bottom: 1px solid var(--black);
+}
+.verticalAlignTextBottom {
+  vertical-align: text-bottom;
 }
\ No newline at end of file
diff --git a/app/lib/style.ts b/app/lib/style.ts
index 474714be..0c6b09b1 100644
--- a/app/lib/style.ts
+++ b/app/lib/style.ts
@@ -10,12 +10,14 @@ import { EmbedStylingProps } from '../components/EmbedStyling';
 
 export const KEYBOARD_HEIGHT = 164;
 export const HEADER_HEIGHT = 35;
-export const MAX_WIDTH = 1200;
 export const PROFILE_PIC: [number, number] = [200, 200];
 export const COVER_PIC: [number, number] = [1200, 400];
 
 export const TINY_COL_MIN_HEIGHT = 50;
 export const SQUARE_HEADER_HEIGHT = 68;
+
+// make any changes in concert w/ definitions.module.css
+export const MAX_WIDTH = 1200;
 export const SMALL_BREAKPOINT = 576;
 export const LARGE_BREAKPOINT = 992;
 export const SMALL_AND_UP_RULES = '(min-width: ' + SMALL_BREAKPOINT + 'px)';
diff --git a/app/pages/account.tsx b/app/pages/account.tsx
index 088df5ca..7e355a30 100644
--- a/app/pages/account.tsx
+++ b/app/pages/account.tsx
@@ -57,7 +57,7 @@ const UnsubSetting = (props: UnsubSettingProps) => {
   return (
     <label>
       <input
-        css={{ marginRight: '1em' }}
+        className="marginRight1em"
         type="checkbox"
         disabled={!props.neverDisable && unsubbedAll}
         checked={props.invert ? unsubbed : !unsubbed && !unsubbedAll}
@@ -108,7 +108,7 @@ export const AccountPage = ({ user, constructorPage, prefs }: AuthProps) => {
         <meta name="robots" content="noindex" />
       </Head>
       <DefaultTopBar accountSelected />
-      <div css={{ margin: '1em' }}>
+      <div className="margin1em">
         <h2>Account</h2>
         <p>
           You&apos;re logged in as <b>{user.email}</b>.{' '}
@@ -131,7 +131,7 @@ export const AccountPage = ({ user, constructorPage, prefs }: AuthProps) => {
         <DisplayNameForm />
         <h3>Notification Settings</h3>
         <p>Email me (to {user.email}, at most once per day) when:</p>
-        <ul css={{ listStyleType: 'none' }}>
+        <ul className="listStyleTypeNone">
           <li>
             <UnsubSetting
               prefs={prefs}
@@ -167,7 +167,7 @@ export const AccountPage = ({ user, constructorPage, prefs }: AuthProps) => {
             />
           </li>
         </ul>
-        <hr css={{ margin: '2em 0' }} />
+        <hr className="margin2em0" />
         <h2>Solving Preferences</h2>
         <ul
           css={{
@@ -177,12 +177,12 @@ export const AccountPage = ({ user, constructorPage, prefs }: AuthProps) => {
         >
           <SolverPreferencesList prefs={prefs} userId={user.uid} />
         </ul>
-        <hr css={{ margin: '2em 0' }} />
+        <hr className="margin2em0" />
         <h2>Browser-specific Settings</h2>
         <h3>Color Theme</h3>
         <label>
           <input
-            css={{ marginRight: '0.5em' }}
+            className="marginRight0-5em"
             type="radio"
             name="theme"
             value="default"
@@ -197,7 +197,7 @@ export const AccountPage = ({ user, constructorPage, prefs }: AuthProps) => {
         <br />
         <label>
           <input
-            css={{ marginRight: '0.5em' }}
+            className="marginRight0-5em"
             type="radio"
             name="theme"
             value="dark"
@@ -212,7 +212,7 @@ export const AccountPage = ({ user, constructorPage, prefs }: AuthProps) => {
         <br />
         <label>
           <input
-            css={{ marginRight: '0.5em' }}
+            className="marginRight0-5em"
             type="radio"
             name="theme"
             value="light"
@@ -227,7 +227,7 @@ export const AccountPage = ({ user, constructorPage, prefs }: AuthProps) => {
         <h3>Audio</h3>
         <label>
           <input
-            css={{ marginRight: '1em' }}
+            className="marginRight1em"
             type="checkbox"
             checked={muted}
             onChange={(e) => {
@@ -237,7 +237,7 @@ export const AccountPage = ({ user, constructorPage, prefs }: AuthProps) => {
           Mute success music
         </label>
 
-        <hr css={{ margin: '2em 0' }} />
+        <hr className="margin2em0" />
         <h2>Crossword Blog</h2>
         {hasAuthoredPuzzle ? (
           <CreatePageForm
diff --git a/app/pages/admin.tsx b/app/pages/admin.tsx
index 4e227fd9..3d3f8e92 100644
--- a/app/pages/admin.tsx
+++ b/app/pages/admin.tsx
@@ -106,7 +106,7 @@ const PuzzleListItem = (props: PuzzleResult) => {
     );
   });
   return (
-    <li key={props.id} css={{ marginBottom: '2em' }}>
+    <li key={props.id} className="marginBottom2em">
       <Link href={`/crosswords/${props.id}/${slugify(props.title)}`}>
         {props.title}
       </Link>{' '}
@@ -124,7 +124,7 @@ const PuzzleListItem = (props: PuzzleResult) => {
       {props.blogPost ? (
         <div css={{ margin: '1em 0', overflowWrap: 'break-word' }}>
           <Markdown
-            css={{ textAlign: 'left' }}
+            className="textAlignLeft"
             hast={markdownToHast({ text: props.blogPost })}
           />
         </div>
@@ -140,7 +140,7 @@ const PuzzleListItem = (props: PuzzleResult) => {
           </li>
         ))}
       </ul>
-      <div css={{ marginBottom: '1em' }}>
+      <div className="marginBottom1em">
         <button
           // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
           disabled={!!props.isPrivate}
@@ -151,7 +151,7 @@ const PuzzleListItem = (props: PuzzleResult) => {
           Set as Featured
         </button>
       </div>
-      <div css={{ marginBottom: '1em' }}>
+      <div className="marginBottom1em">
         <button
           onClick={logAsyncErrors(async () => {
             return makePrivate();
@@ -160,7 +160,7 @@ const PuzzleListItem = (props: PuzzleResult) => {
           Make Private
         </button>
       </div>
-      <div css={{ marginBottom: '1em' }}>
+      <div className="marginBottom1em">
         <button
           onClick={logAsyncErrors(async () => {
             return markAsModerated(false);
@@ -281,7 +281,7 @@ export default requiresAdmin(() => {
         <meta name="robots" content="noindex" />
       </Head>
       <DefaultTopBar />
-      <div css={{ margin: '1em' }}>
+      <div className="margin1em">
         {mailErrors?.length ? (
           <div>
             <h4>There are {mailErrors.length} mail errors!</h4>
@@ -292,9 +292,7 @@ export default requiresAdmin(() => {
         )}
         {reportedComments?.length ? (
           <>
-            <h4 css={{ borderBottom: '1px solid var(--black)' }}>
-              Reported Comments:
-            </h4>
+            <h4 className="borderBottom1pxSolidBlack">Reported Comments:</h4>
             <ul>
               {reportedComments.map((rc) => (
                 <li key={`${rc.cid}-${rc.u}`}>
@@ -309,7 +307,7 @@ export default requiresAdmin(() => {
                   </div>
                   <button
                     disabled={rc.d || !rc.ca}
-                    css={{ marginRight: '2em' }}
+                    className="marginRight2em"
                     onClick={logAsyncErrors(async () => {
                       if (!rc.ca) {
                         return;
@@ -353,9 +351,7 @@ export default requiresAdmin(() => {
         ) : (
           ''
         )}
-        <h4 css={{ borderBottom: '1px solid var(--black)' }}>
-          Comment Moderation
-        </h4>
+        <h4 className="borderBottom1pxSolidBlack">Comment Moderation</h4>
         {!commentsForModeration || commentsForModeration.length === 0 ? (
           <div>No comments are currently awaiting moderation.</div>
         ) : (
@@ -364,7 +360,7 @@ export default requiresAdmin(() => {
               <Link href={`/crosswords/${cfm.pid}`}>puzzle</Link> {cfm.n}:
               <Markdown hast={markdownToHast({ text: cfm.c })} />
               <button
-                css={{ marginRight: '2em' }}
+                className="marginRight2em"
                 onClick={logAsyncErrors(async () => {
                   await updateDoc(getDocRef('cfm', cfm.i), {
                     approved: true,
@@ -421,9 +417,7 @@ export default requiresAdmin(() => {
         )}
         {stats ? (
           <>
-            <h4 css={{ borderBottom: '1px solid var(--black)' }}>
-              Today&apos;s Stats
-            </h4>
+            <h4 className="borderBottom1pxSolidBlack">Today&apos;s Stats</h4>
             <div>Total completions: {stats.n}</div>
             <div>Users w/ completions: {stats.u.length}</div>
             <h5>Top Puzzles</h5>
@@ -446,12 +440,10 @@ export default requiresAdmin(() => {
         ) : (
           ''
         )}
-        <h4 css={{ borderBottom: '1px solid var(--black)' }}>Upcoming Minis</h4>
+        <h4 className="borderBottom1pxSolidBlack">Upcoming Minis</h4>
 
         <UpcomingMinisCalendar disableExisting={false} onChange={goToPuzzle} />
-        <h4 css={{ borderBottom: '1px solid var(--black)' }}>
-          Unsubscribe User
-        </h4>
+        <h4 className="borderBottom1pxSolidBlack">Unsubscribe User</h4>
         <form
           onSubmit={logAsyncErrors(async (e: React.FormEvent) => {
             e.preventDefault();
@@ -471,7 +463,7 @@ export default requiresAdmin(() => {
           <label>
             Unsubscribe by user id:
             <input
-              css={{ margin: '0 0.5em' }}
+              className="margin0-0-5em"
               type="text"
               value={uidToUnsub}
               onChange={(e) => {
@@ -481,9 +473,7 @@ export default requiresAdmin(() => {
           </label>
           <Button type="submit" text="Unsubscribe" />
         </form>
-        <h4 css={{ borderBottom: '1px solid var(--black)' }}>
-          Record Donation
-        </h4>
+        <h4 className="borderBottom1pxSolidBlack">Record Donation</h4>
         <form
           onSubmit={logAsyncErrors(async (e: React.FormEvent) => {
             e.preventDefault();
@@ -517,7 +507,7 @@ export default requiresAdmin(() => {
           <label>
             Email
             <input
-              css={{ margin: '0 0.5em' }}
+              className="margin0-0-5em"
               type="text"
               value={donationEmail}
               onChange={(e) => {
@@ -528,7 +518,7 @@ export default requiresAdmin(() => {
           <label>
             Amount
             <input
-              css={{ margin: '0 0.5em' }}
+              className="margin0-0-5em"
               type="text"
               value={donationAmount}
               onChange={(e) => {
@@ -540,7 +530,7 @@ export default requiresAdmin(() => {
           <label>
             Received Amount
             <input
-              css={{ margin: '0 0.5em' }}
+              className="margin0-0-5em"
               type="text"
               value={donationReceivedAmount}
               onChange={(e) => {
@@ -551,7 +541,7 @@ export default requiresAdmin(() => {
           <label>
             Name
             <input
-              css={{ margin: '0 0.5em' }}
+              className="margin0-0-5em"
               type="text"
               value={donationName}
               onChange={(e) => {
@@ -562,7 +552,7 @@ export default requiresAdmin(() => {
           <label>
             Page
             <input
-              css={{ margin: '0 0.5em' }}
+              className="margin0-0-5em"
               type="text"
               value={donationPage}
               onChange={(e) => {
@@ -573,7 +563,7 @@ export default requiresAdmin(() => {
           <label>
             UserId
             <input
-              css={{ margin: '0 0.5em' }}
+              className="margin0-0-5em"
               type="text"
               value={donationUserId}
               onChange={(e) => {
@@ -585,9 +575,7 @@ export default requiresAdmin(() => {
         </form>
         {donations ? (
           <>
-            <h4 css={{ borderBottom: '1px solid var(--black)' }}>
-              Donation Totals
-            </h4>
+            <h4 className="borderBottom1pxSolidBlack">Donation Totals</h4>
             <p>
               Total given:{' '}
               {Math.floor(donations.d.reduce((prev, cur) => prev + cur.a, 0))}
diff --git a/app/pages/articles/[slug]/edit.tsx b/app/pages/articles/[slug]/edit.tsx
index 631d136d..9423f27f 100644
--- a/app/pages/articles/[slug]/edit.tsx
+++ b/app/pages/articles/[slug]/edit.tsx
@@ -103,7 +103,7 @@ const ArticleEditor = ({
         <title>{`Editing | ${article.t} | Crosshare`}</title>
       </Head>
       <DefaultTopBar />
-      <div css={{ margin: '1em' }}>
+      <div className="margin1em">
         <p>
           Note: changes may take up to an hour to appear on the site - we cache
           pages to keep Crosshare fast!
@@ -111,7 +111,7 @@ const ArticleEditor = ({
         <h3>Slug</h3>
         <EditableText
           title="Slug"
-          css={{ marginBottom: '1em' }}
+          className="marginBottom1em"
           text={article.s}
           hast={markdownToHast({ text: article.s })}
           maxLength={100}
@@ -128,7 +128,7 @@ const ArticleEditor = ({
         <h3>Title</h3>
         <EditableText
           title="Title"
-          css={{ marginBottom: '1em' }}
+          className="marginBottom1em"
           text={article.t}
           hast={markdownToHast({ text: article.t })}
           maxLength={300}
@@ -143,7 +143,7 @@ const ArticleEditor = ({
         <EditableText
           textarea={true}
           title="Content"
-          css={{ marginBottom: '1em' }}
+          className="marginBottom1em"
           text={article.c}
           hast={markdownToHast({ text: article.c })}
           maxLength={1000000}
@@ -158,7 +158,7 @@ const ArticleEditor = ({
         <p>
           <label>
             <input
-              css={{ marginRight: '1em' }}
+              className="marginRight1em"
               type="checkbox"
               checked={article.f}
               onChange={logAsyncErrors(async (e) => {
diff --git a/app/pages/articles/index.tsx b/app/pages/articles/index.tsx
index d0cf2ba8..b0b0122b 100644
--- a/app/pages/articles/index.tsx
+++ b/app/pages/articles/index.tsx
@@ -38,9 +38,9 @@ export default requiresAdmin(() => {
         <meta name="robots" content="noindex" />
       </Head>
       <DefaultTopBar />
-      <div css={{ margin: '1em' }}>
+      <div className="margin1em">
         <Button
-          css={{ marginBottom: '2em' }}
+          className="marginBottom2em"
           text="New Article"
           onClick={logAsyncErrors(async () => {
             const newArticle: ArticleT = {
diff --git a/app/pages/construct.tsx b/app/pages/construct.tsx
index 5cec70be..ff020df2 100644
--- a/app/pages/construct.tsx
+++ b/app/pages/construct.tsx
@@ -243,7 +243,7 @@ export default function BuilderPage() {
             },
           }}
         >
-          <h2 css={{ textAlign: 'center' }}>New to making crosswords?</h2>
+          <h2 className="textAlignCenter">New to making crosswords?</h2>
           <p>
             Don’t be intimidated! Constructing great crosswords takes a lot of
             practice, but it’s easy to get started. When you first launch the
@@ -353,7 +353,7 @@ export default function BuilderPage() {
             },
           }}
         >
-          <h2 css={{ textAlign: 'center' }}>FAQ</h2>
+          <h2 className="textAlignCenter">FAQ</h2>
           <h3>What if I have an existing puzzle I’d like to upload?</h3>
           <p>
             Crosshare supports .puz uploading <Link href="/upload">here</Link>.
diff --git a/app/pages/dailyminis/[[...slug]].tsx b/app/pages/dailyminis/[[...slug]].tsx
index 728fffd4..9644ebb0 100644
--- a/app/pages/dailyminis/[[...slug]].tsx
+++ b/app/pages/dailyminis/[[...slug]].tsx
@@ -193,13 +193,13 @@ export default function DailyMiniPage(props: PageProps) {
         )}
       </Head>
       <DefaultTopBar />
-      <div css={{ margin: '1em' }}>
+      <div className="margin1em">
         <h2>
           <Trans comment="the variable is a month and year like 'noviembre de 2021'">
             Crosshare Daily Mini Puzzles for {date}
           </Trans>
         </h2>
-        <div css={{ marginBottom: '2em' }}>{description}</div>
+        <div className="marginBottom2em">{description}</div>
         {props.puzzles.map(([day, puzzle, cp, isPatron]) => {
           const displayDate = new Date(
             props.year,
@@ -221,7 +221,7 @@ export default function DailyMiniPage(props: PageProps) {
         <p css={{ textAlign: 'center', paddingBottom: '1em' }}>
           {props.newerLink ? (
             <Link
-              css={{ marginRight: '1em' }}
+              className="marginRight1em"
               href={'/dailyminis/' + props.newerLink}
             >
               <Trans>Newer Minis</Trans>
diff --git a/app/pages/dashboard.tsx b/app/pages/dashboard.tsx
index c6ac0636..8d901022 100644
--- a/app/pages/dashboard.tsx
+++ b/app/pages/dashboard.tsx
@@ -49,7 +49,7 @@ export const DashboardPage = ({ user, constructorPage }: AuthProps) => {
         <meta name="robots" content="noindex" />
       </Head>
       <DefaultTopBar dashboardSelected />
-      <div css={{ margin: '1em' }}>
+      <div className="margin1em">
         <CreateShareSection halfWidth={false} />
         <ConstructorStats userId={user.uid} />
         {authoredPuzzles.length ? (
diff --git a/app/pages/donate.tsx b/app/pages/donate.tsx
index fe25d17f..e438f084 100644
--- a/app/pages/donate.tsx
+++ b/app/pages/donate.tsx
@@ -118,7 +118,7 @@ export default function DonatePage({ donors }: DonateProps) {
         <PatronIcon css={PatronHeaderCSS} />
       </div>
       <div css={{ margin: 'auto', maxWidth: 900, padding: '1em' }}>
-        <h2 css={{ textAlign: 'center' }}>Become a Crosshare Patron</h2>
+        <h2 className="textAlignCenter">Become a Crosshare Patron</h2>
         <p>
           Crosshare is developed by a <b>very</b> small team of volunteers.
           Every donation, no matter how small, makes a huge difference towards
@@ -151,21 +151,21 @@ export default function DonatePage({ donors }: DonateProps) {
           <input type="hidden" name="currency_code" value="USD" />
           <Button type="submit" text="Donate (via credit card / paypal)" />
         </form>
-        <p css={{ marginTop: '1.5em' }}>
+        <p className="marginTop1-5em">
           We also accept donations via Zelle. Zelle is great because 100% of
           your donation goes to Crosshare! Please send your donation to{' '}
           <b>mike@crosshare.org</b>. Be sure to follow up with an email so we
           know which account to give a patron icon to and how you&apos;d like to
           be listed on the contributors list!
         </p>
-        <p css={{ textAlign: 'center' }}>
+        <p className="textAlignCenter">
           <i>
             If you&apos;d like to donate but not via paypal/zelle, please
             contact us via <ContactLinks />.
           </i>
         </p>
       </div>
-      <h2 css={{ textAlign: 'center' }}>
+      <h2 className="textAlignCenter">
         The contributors who make Crosshare possible
       </h2>
       <p></p>
@@ -173,7 +173,7 @@ export default function DonatePage({ donors }: DonateProps) {
         {donors.map((d, i) => (
           <li key={i} css={{ fontWeight: d.above100 ? 'bold' : 'normal' }}>
             {differenceInDays(now, new Date(d.date)) <= 32 ? (
-              <PatronIcon css={{ marginRight: '0.5em' }} />
+              <PatronIcon className="marginRight0-5em" />
             ) : (
               ''
             )}
diff --git a/app/pages/edit/[puzzleId].tsx b/app/pages/edit/[puzzleId].tsx
index fc157d30..cc8e655a 100644
--- a/app/pages/edit/[puzzleId].tsx
+++ b/app/pages/edit/[puzzleId].tsx
@@ -204,11 +204,11 @@ const ClueRow = (props: {
           width: '1px',
         }}
       >
-        <label css={{ marginBottom: 0 }} htmlFor={word + '-input'}>
+        <label className="marginBottom0" htmlFor={word + '-input'}>
           {word}
         </label>
       </td>
-      <td css={{ paddingBottom: '1em' }}>
+      <td className="paddingBottom1em">
         {editing ? (
           <form
             css={{ display: 'flex', flexWrap: 'wrap' }}
@@ -236,7 +236,7 @@ const ClueRow = (props: {
             />
             <Button
               boring={true}
-              css={{ marginLeft: '0.5em' }}
+              className="marginLeft0-5em"
               onClick={() => {
                 setEditing(false);
                 setValue(props.entry.clue);
@@ -260,7 +260,7 @@ const ClueRow = (props: {
               />
             )}
             <ButtonAsLink
-              css={{ marginLeft: '1em' }}
+              className="marginLeft1em"
               text="edit"
               title={`Edit ${word}`}
               onClick={() => {
@@ -359,7 +359,7 @@ const PuzzleEditor = ({
           <title>{`Editing | ${puzzle.title} | Crosshare`}</title>
         </Head>
         <DefaultTopBar />
-        <div css={{ margin: '1em' }}>
+        <div className="margin1em">
           <p>
             Note: changes may take up to an hour to appear on the site - we
             cache pages to keep Crosshare fast!
@@ -367,7 +367,7 @@ const PuzzleEditor = ({
           <h3>Title</h3>
           <EditableText
             title="Title"
-            css={{ marginBottom: '1em' }}
+            className="marginBottom1em"
             text={puzzle.title}
             hast={false}
             maxLength={MAX_STRING_LENGTH}
@@ -376,7 +376,7 @@ const PuzzleEditor = ({
             }
           />
           <h3>Clues</h3>
-          <table css={{ width: '100%' }}>
+          <table className="width100">
             <tbody>{clueRows}</tbody>
           </table>
           <h3>Tags</h3>
@@ -385,7 +385,7 @@ const PuzzleEditor = ({
             solvers quickly find puzzles with a particular attribute or theme.
           </p>
           {editingTags ? (
-            <div css={{ marginBottom: '1.5em' }}>
+            <div className="marginBottom1-5em">
               <TagEditor
                 userTags={puzzle.userTags ?? []}
                 autoTags={puzzle.autoTags ?? []}
@@ -426,7 +426,7 @@ const PuzzleEditor = ({
           <EditableText
             title="Constructor Note"
             deletable={true}
-            css={{ marginBottom: '1em' }}
+            className="marginBottom1em"
             text={puzzle.constructorNotes}
             hast={markdownToHast({ text: puzzle.constructorNotes ?? '' })}
             maxLength={MAX_STRING_LENGTH}
@@ -441,7 +441,7 @@ const PuzzleEditor = ({
           <EditableText
             title="Constructor's Name"
             deletable={true}
-            css={{ marginBottom: '1em' }}
+            className="marginBottom1em"
             text={puzzle.guestConstructor}
             hast={false}
             maxLength={MAX_STRING_LENGTH}
@@ -463,7 +463,7 @@ const PuzzleEditor = ({
             textarea={true}
             title="Blog Post"
             deletable={true}
-            css={{ marginBottom: '1em' }}
+            className="marginBottom1em"
             text={puzzle.blogPost}
             hast={markdownToHast({ text: puzzle.blogPost ?? '' })}
             maxLength={MAX_BLOG_LENGTH}
@@ -493,7 +493,7 @@ const PuzzleEditor = ({
           ) : (
             ''
           )}
-          <h3 css={{ marginTop: '1em' }}>Privacy</h3>
+          <h3 className="marginTop1em">Privacy</h3>
           {
             // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
             puzzle.isPrivate ? (
@@ -516,7 +516,7 @@ const PuzzleEditor = ({
           <p>
             <label>
               <input
-                css={{ marginRight: '1em' }}
+                className="marginRight1em"
                 type="checkbox"
                 // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
                 checked={isPrivate ? true : false}
@@ -549,7 +549,7 @@ const PuzzleEditor = ({
             <p>
               <label>
                 <input
-                  css={{ marginRight: '1em' }}
+                  className="marginRight1em"
                   type="checkbox"
                   checked={
                     isPrivateUntil !== null && isPrivateUntil > Date.now()
@@ -590,7 +590,7 @@ const PuzzleEditor = ({
             <p>Private until is unavailable if a puzzle has ever been public</p>
           )}
           <Button
-            css={{ marginRight: '1em' }}
+            className="marginRight1em"
             text="Update Privacy Settings"
             disabled={
               isPrivate === puzzle.isPrivate &&
@@ -626,7 +626,7 @@ const PuzzleEditor = ({
               setIsPrivateUntil(puzzle.isPrivateUntil);
             }}
           />
-          <h3 css={{ marginTop: '1em' }}>Contest / meta puzzle</h3>
+          <h3 className="marginTop1em">Contest / meta puzzle</h3>
           <p>
             A meta puzzle has an extra puzzle embedded in the grid for after
             solvers have finished solving. Solvers can submit their solution,
@@ -670,7 +670,7 @@ const PuzzleEditor = ({
               )}
               <EditableText
                 title="Solution"
-                css={{ marginBottom: '1em' }}
+                className="marginBottom1em"
                 text={''}
                 hast={false}
                 maxLength={MAX_META_SUBMISSION_LENGTH}
@@ -733,7 +733,7 @@ const PuzzleEditor = ({
               above to add a prompt for the contest.
             </p>
           )}
-          <h3 css={{ marginTop: '1em' }}>Alternate Solutions</h3>
+          <h3 className="marginTop1em">Alternate Solutions</h3>
           <p>
             Alternate solutions can be used if one or more entries in your
             puzzle have multiple valid solutions (e.g. a Schrödinger&apos;s
@@ -781,10 +781,10 @@ const PuzzleEditor = ({
             }}
             text="Add an alternate solution"
           />
-          <h3 css={{ marginTop: '1em' }}>Comments</h3>
+          <h3 className="marginTop1em">Comments</h3>
           <label>
             <input
-              css={{ marginRight: '1em' }}
+              className="marginRight1em"
               type="checkbox"
               checked={puzzle.commentsDisabled}
               onChange={logAsyncErrors(async (e) => {
@@ -797,7 +797,7 @@ const PuzzleEditor = ({
             />{' '}
             Disable comments for this puzzle
           </label>
-          <h3 css={{ marginTop: '1em' }}>Delete</h3>
+          <h3 className="marginTop1em">Delete</h3>
           {puzzle.dailyMiniDate ? (
             <p>
               This puzzle has been selected as a daily mini - please contact us
diff --git a/app/pages/embed/list/[userId]/[[...pageNumber]].tsx b/app/pages/embed/list/[userId]/[[...pageNumber]].tsx
index cff2c781..24457d07 100644
--- a/app/pages/embed/list/[userId]/[[...pageNumber]].tsx
+++ b/app/pages/embed/list/[userId]/[[...pageNumber]].tsx
@@ -118,10 +118,10 @@ export default function ThemedPage(props: PageProps | PageErrorProps) {
             />
           ))}
           {props.nextPage || props.prevPage !== null ? (
-            <p css={{ textAlign: 'center' }}>
+            <p className="textAlignCenter">
               {props.prevPage === 0 ? (
                 <Link
-                  css={{ marginRight: '2em' }}
+                  className="marginRight2em"
                   href={`/embed/list/${props.userId}${
                     colorModeQuery ? '?' + colorModeQuery : ''
                   }`}
@@ -134,7 +134,7 @@ export default function ThemedPage(props: PageProps | PageErrorProps) {
               )}
               {props.prevPage ? (
                 <Link
-                  css={{ marginRight: '2em' }}
+                  className="marginRight2em"
                   href={`/embed/list/${props.userId}/${props.prevPage}${
                     colorModeQuery ? '?' + colorModeQuery : ''
                   }`}
diff --git a/app/pages/featured/[pageNumber].tsx b/app/pages/featured/[pageNumber].tsx
index ce34ec73..9dd31175 100644
--- a/app/pages/featured/[pageNumber].tsx
+++ b/app/pages/featured/[pageNumber].tsx
@@ -155,9 +155,9 @@ export default function FeaturedPageHandler(props: PageProps) {
           />
         ))}
         {props.nextPage !== null || props.prevPage !== null ? (
-          <p css={{ textAlign: 'center' }}>
+          <p className="textAlignCenter">
             {props.prevPage === 0 ? (
-              <Link css={{ marginRight: '2em' }} href="/">
+              <Link className="marginRight2em" href="/">
                 ← <Trans>Newer Puzzles</Trans>
               </Link>
             ) : (
@@ -165,7 +165,7 @@ export default function FeaturedPageHandler(props: PageProps) {
             )}
             {props.prevPage ? (
               <Link
-                css={{ marginRight: '2em' }}
+                className="marginRight2em"
                 href={'/featured/' + props.prevPage}
               >
                 ← <Trans>Newer Puzzles</Trans>
diff --git a/app/pages/index.tsx b/app/pages/index.tsx
index 9a79530c..0ebfb701 100644
--- a/app/pages/index.tsx
+++ b/app/pages/index.tsx
@@ -122,7 +122,7 @@ export default function HomePage({
 
       <DefaultTopBar />
 
-      <div css={{ margin: '1em' }}>
+      <div className="margin1em">
         {showCampaignForYear ? (
           showCampaignForYear <= 2024 ? (
             <Link
@@ -143,7 +143,7 @@ export default function HomePage({
             >
               <div>
                 <h3>
-                  <span css={{ color: 'var(--error)' }}>Thank you!</span>
+                  <span className="colorError">Thank you!</span>
                 </h3>
                 Thanks to the generous support of all of our patrons,
                 Crosshare&apos;s {showCampaignForYear - 1} fundraising campaign
@@ -169,8 +169,8 @@ export default function HomePage({
               href="/donate"
             >
               <h3>
-                <span css={{ color: 'var(--error)' }}>Read this</span> - we need
-                your help!
+                <span className="colorError">Read this</span> - we need your
+                help!
               </h3>
               <div>
                 As Crosshare continues to grow (and add new features) I need
@@ -187,7 +187,7 @@ export default function HomePage({
         ) : (
           ''
         )}
-        <p css={{ marginBottom: '1em' }}>
+        <p className="marginBottom1em">
           <Trans>
             Crosshare is a <b>free</b>, <b>ad-free</b>, and{' '}
             <a href="https://github.com/crosshare-org/crosshare">open-source</a>{' '}
@@ -211,7 +211,7 @@ export default function HomePage({
           }}
         >
           {dailymini ? (
-            <div css={{ flex: '50%' }}>
+            <div className="flex50">
               <h2>
                 <Trans>Daily Mini</Trans>
               </h2>
@@ -237,15 +237,15 @@ export default function HomePage({
           ) : (
             ''
           )}
-          <div css={{ flex: '50%' }}>
+          <div className="flex50">
             <CreateShareSection halfWidth={true} />
           </div>
         </div>
-        <hr css={{ margin: '2em 0' }} />
-        <h2 css={{ marginBottom: 0 }}>
+        <hr className="margin2em0" />
+        <h2 className="marginBottom0">
           <Trans>Featured Puzzles</Trans>
         </h2>
-        <div css={{ marginBottom: '1.5em' }}>
+        <div className="marginBottom1-5em">
           <Link href="/newest">
             <Trans>View all puzzles</Trans> &rarr;
           </Link>
@@ -266,9 +266,9 @@ export default function HomePage({
             <Trans>Previous featured puzzles</Trans> &rarr;
           </Link>
         </p>
-        <hr css={{ margin: '2em 0' }} />
+        <hr className="margin2em0" />
         <UnfinishedPuzzleList user={user} />
-        <h4 css={{ marginTop: '2em' }}>
+        <h4 className="marginTop2em">
           <Trans>Frequently asked questions and information</Trans>
         </h4>
         <ul
diff --git a/app/pages/newest/[[...pageNumber]].tsx b/app/pages/newest/[[...pageNumber]].tsx
index 4e1cba71..8107194f 100644
--- a/app/pages/newest/[[...pageNumber]].tsx
+++ b/app/pages/newest/[[...pageNumber]].tsx
@@ -153,10 +153,10 @@ export default function NewestPageHandler(props: PageProps) {
         ))}
         {/* eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing */}
         {props.nextPage || props.prevPage !== null ? (
-          <p css={{ textAlign: 'center' }}>
+          <p className="textAlignCenter">
             {props.prevPage !== null ? (
               <Link
-                css={{ marginRight: '2em' }}
+                className="marginRight2em"
                 href={`/newest/${
                   props.prevPage !== 0 ? `/${props.prevPage}` : ''
                 }`}
diff --git a/app/pages/tags/[...path].tsx b/app/pages/tags/[...path].tsx
index 9727267d..f15989d4 100644
--- a/app/pages/tags/[...path].tsx
+++ b/app/pages/tags/[...path].tsx
@@ -195,7 +195,7 @@ export default function TagPageHandler(props: PageProps) {
           />
         </h1>
         {props.article ? (
-          <Markdown css={{ marginBottom: '2em' }} hast={props.article.hast} />
+          <Markdown className="marginBottom2em" hast={props.article.hast} />
         ) : (
           ''
         )}
@@ -212,10 +212,10 @@ export default function TagPageHandler(props: PageProps) {
         ))}
         {/* eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing */}
         {props.nextPage || props.prevPage !== null ? (
-          <p css={{ textAlign: 'center' }}>
+          <p className="textAlignCenter">
             {props.prevPage !== null ? (
               <Link
-                css={{ marginRight: '2em' }}
+                className="marginRight2em"
                 href={`/tags/${urlTags}/${
                   props.prevPage !== 0 ? `/page/${props.prevPage}` : ''
                 }`}
diff --git a/app/pages/thankyou.tsx b/app/pages/thankyou.tsx
index ad104f10..71330116 100644
--- a/app/pages/thankyou.tsx
+++ b/app/pages/thankyou.tsx
@@ -14,7 +14,7 @@ export default function ThankYouPage() {
         <title>{`Thank you | Crosshare Crossword Constructor and Puzzles`}</title>
       </Head>
       <DefaultTopBar />
-      <div css={{ margin: '1em' }}>
+      <div className="margin1em">
         <h2>
           Thank you! <Emoji symbol="🥰" />
         </h2>
diff --git a/app/pages/twocol.tsx b/app/pages/twocol.tsx
index b5c01c1f..6356a9c4 100644
--- a/app/pages/twocol.tsx
+++ b/app/pages/twocol.tsx
@@ -11,7 +11,7 @@ export default function TwoColTestPage() {
           height: '100%',
         }}
       >
-        <div css={{ flex: 'none' }}>
+        <div className="flexNone">
           <DefaultTopBar />
         </div>
         <div