diff --git a/app/src/App.vue b/app/src/App.vue
index 0f7e3a7..c5bb4a3 100644
--- a/app/src/App.vue
+++ b/app/src/App.vue
@@ -43,12 +43,22 @@ import NavLink from './components/NavLink.vue'
 
 .site-header-text {
   font-family: Sacramento;
-  font-size: 60px;
+  container-type: inline-size;
+  font-size: calc(min(60px, max(5cqw, 42px)));
   text-align: right;
   margin-top: 1rem;
   margin-bottom: 0;
 }
 
+.page-enter-active {
+  transition: all 0.5s ease;
+}
+
+.page-enter-from {
+  opacity: 0;
+  transform: translateX(30px);
+}
+
 /*
 Activates once the left and right half of the page stack due to width constraints.
 We remove a lot of the vertical spacing to make things fit better.
@@ -70,13 +80,4 @@ Once the device width is smaller than one of the halves, sync the page half to t
     width: calc(100% - 2rem);
   }
 }
-
-.page-enter-active {
-  transition: all 0.5s ease;
-}
-
-.page-enter-from {
-  opacity: 0;
-  transform: translateX(30px);
-}
 </style>