diff --git a/assets/theme-css/backtotop.css b/assets/theme-css/backtotop.css
index cf4d5aa1..94ce41a5 100644
--- a/assets/theme-css/backtotop.css
+++ b/assets/theme-css/backtotop.css
@@ -4,7 +4,7 @@
   opacity: 0;
   visibility: hidden;
   bottom: 25px;
-  margin: 0 25px 0 0;
+  margin: 0 1.563rem 0 0;
   z-index: 9999;
   transition: 0.35s;
   transform: scale(0.7);
@@ -34,7 +34,7 @@
   transition: all 0.3s;
   border-radius: 50%;
   text-align: center;
-  font-size: 26px;
+  font-size: 1.625rem;
 }
 body #backtotop a {
   outline: none;
diff --git a/assets/theme-css/content.css b/assets/theme-css/content.css
index 90977a87..01891d99 100644
--- a/assets/theme-css/content.css
+++ b/assets/theme-css/content.css
@@ -9,7 +9,7 @@
   flex-basis: 70em;
   flex-shrink: 1;
   flex-direction: column;
-  margin: 0 30px;
+  margin: 0 1.875rem;
   padding: 1rem;
 
   /* Handle code cells overflowing */
diff --git a/assets/theme-css/footer.css b/assets/theme-css/footer.css
index f10c5560..86ca78e5 100644
--- a/assets/theme-css/footer.css
+++ b/assets/theme-css/footer.css
@@ -10,7 +10,7 @@
 }
 
 #footer-logo-column {
-  padding: 20px 5vw;
+  padding: 1.25rem 5vw;
   font-size: 1rem;
 }
 
@@ -23,8 +23,8 @@
 }
 
 .footer-column {
-  padding-left: 0px;
-  margin-top: 20px;
+  padding-left: 0;
+  margin-top: 1.25rem;
   flex-basis: 0;
   flex-grow: 1;
   flex-shrink: 1;
@@ -40,7 +40,7 @@
 
 .footer-actions {
   max-width: 25vw;
-  margin: 20px 25px;
+  margin: 1.25rem 1.563rem;
 }
 
 .footer-actions > p {
@@ -104,6 +104,6 @@
 }
 
 .copyright {
-  font-size: 12px;
+  font-size: 0.75rem;
   color: var(--colorSecondary);
 }
diff --git a/assets/theme-css/lists.css b/assets/theme-css/lists.css
index a34bd5cc..f9c50bf3 100644
--- a/assets/theme-css/lists.css
+++ b/assets/theme-css/lists.css
@@ -6,13 +6,13 @@ dl.field-list {
 dl.field-list > dt {
   font-weight: bold;
   word-break: break-word;
-  padding-left: 0.5em;
-  padding-right: 5px;
+  padding-left: 0.5rem;
+  padding-right: 0.313rem;
 }
 
 dl.field-list > dd {
-  padding-left: 0.5em;
-  margin-top: 0em;
-  margin-left: 0em;
-  margin-bottom: 0em;
+  padding-left: 0.5rem;
+  margin-top: 0;
+  margin-left: 0;
+  margin-bottom: 0;
 }
diff --git a/assets/theme-css/news.css b/assets/theme-css/news.css
index 20e4cefd..99c06939 100644
--- a/assets/theme-css/news.css
+++ b/assets/theme-css/news.css
@@ -20,10 +20,10 @@
 .news-title {
   display: flex;
   letter-spacing: 1.5px;
-  font-size: 27px;
+  font-size: 1.688rem;
   font-weight: bold;
-  margin: 10px;
-  margin-right: 20px;
+  margin: 0.625rem;
+  margin-right: 1.25rem;
 }
 
 @media only screen and (max-width: 1300px) {
@@ -39,7 +39,7 @@
 @media only screen and (max-width: 1090px) {
   .news-container {
     flex-direction: column;
-    padding: 30px;
+    padding: 1.875rem;
   }
 
   .news-date {
diff --git a/assets/theme-css/posts.css b/assets/theme-css/posts.css
index b0ca5ce9..4e8aeae7 100644
--- a/assets/theme-css/posts.css
+++ b/assets/theme-css/posts.css
@@ -99,7 +99,7 @@
 }
 
 .tag-cloud-title {
-  font-size: 32px;
-  margin-top: 60px;
-  padding-bottom: 10px;
+  font-size: 2rem;
+  margin-top: 3.75rem;
+  padding-bottom: 0.625rem;
 }
diff --git a/assets/theme-css/shortcuts.css b/assets/theme-css/shortcuts.css
index f6bb65d5..b3fd540f 100644
--- a/assets/theme-css/shortcuts.css
+++ b/assets/theme-css/shortcuts.css
@@ -10,7 +10,7 @@
 }
 
 #shortcuts {
-  margin-top: 10px;
+  margin-top: 0.625rem;
   font-size: 0.9rem;
 }
 
@@ -20,7 +20,7 @@
 }
 
 #shortcuts > div:not(.active) {
-  margin-left: 2px;
+  margin-left: 0.125rem;
   border-left: 1px solid var(--pst-color-text-base);
   opacity: 0.75;
 }
@@ -32,19 +32,19 @@
 }
 
 .shortcuts-H2 {
-  padding: 5px 5px 0 15px;
+  padding: 0.313rem 0.313rem 0 0.938rem;
   font-size: 95%;
   cursor: pointer;
 }
 
 .shortcuts-H3 {
-  padding: 5px 5px 0 25px;
+  padding: 0.313rem 0.313rem 0 1.563rem;
   font-size: 90%;
   cursor: pointer;
 }
 
 .shortcuts-H4 {
-  padding: 5px 5px 0 35px;
+  padding: 0.313rem 0.313rem 0 2.188rem;
   font-size: 85%;
   cursor: pointer;
 }
diff --git a/assets/theme-css/styles.css b/assets/theme-css/styles.css
index 343ac371..395f4ba7 100644
--- a/assets/theme-css/styles.css
+++ b/assets/theme-css/styles.css
@@ -109,7 +109,7 @@ a > code {
 
 @media only screen and (max-width: 600px) {
   .flex-column {
-    margin: 0 30px;
+    margin: 0 1.875rem;
   }
 }
 
@@ -130,7 +130,7 @@ svg.icon {
 }
 
 .chroma {
-  padding: 10px;
+  padding: 0.625rem;
 }
 
 /* reboot stuff needed for pydata-sphinx-theme */
diff --git a/assets/theme-css/tabs.css b/assets/theme-css/tabs.css
index a3f6be5c..6cc159ac 100644
--- a/assets/theme-css/tabs.css
+++ b/assets/theme-css/tabs.css
@@ -7,8 +7,8 @@
   display: flex;
   flex-flow: row wrap;
   row-gap: 0.25rem;
-  margin-bottom: 0px;
-  padding-bottom: 0px;
+  margin-bottom: 0;
+  padding-bottom: 0;
 }
 
 /* The tab is the clickable element that selects between tabpanels (see below) */
@@ -48,7 +48,7 @@
 [role="tabpanel"] {
   border-top: 1px solid var(--pst-color-border);
   border-bottom: 1px solid var(--pst-color-border);
-  margin-top: 1px;
+  margin-top: 0.063rem;
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
   width: 100%;
diff --git a/assets/theme-css/videos.css b/assets/theme-css/videos.css
index 51f9a449..ac5ce31d 100644
--- a/assets/theme-css/videos.css
+++ b/assets/theme-css/videos.css
@@ -13,7 +13,7 @@ iframe {
   max-width: 100%;
   height: 360px;
   margin-top: 1rem;
-  margin-bottom: 0rem;
+  margin-bottom: 0;
 }
 
 .youtube .video-meta {