diff --git a/public/styles.css b/public/styles.css
index 0f5afd9..1a16425 100644
--- a/public/styles.css
+++ b/public/styles.css
@@ -1144,10 +1144,12 @@ button::-moz-focus-inner {
 
 #about x-background {
     position: absolute;
-    top: calc(28px - 250px);
-    right: calc(36px - 250px);
-    width: 500px;
-    height: 500px;
+    --size: max(max(230vw, 230vh), calc(150vh + 150vw));
+    --size-half: calc(var(--size)/2);
+    top: calc(28px - var(--size-half));
+    right: calc(36px - var(--size-half));
+    width: var(--size);
+    height: var(--size);
     border-radius: 50%;
     background: var(--primary-color);
     transform: scale(0);
@@ -1161,7 +1163,7 @@ button::-moz-focus-inner {
 }
 
 #about:target x-background {
-    transform: scale(10);
+    transform: scale(1);
 }
 
 #about .row a {
diff --git a/public_included_ws_fallback/styles.css b/public_included_ws_fallback/styles.css
index 3ba9d45..9c34a99 100644
--- a/public_included_ws_fallback/styles.css
+++ b/public_included_ws_fallback/styles.css
@@ -1170,10 +1170,12 @@ button::-moz-focus-inner {
 
 #about x-background {
     position: absolute;
-    top: calc(28px - 250px);
-    right: calc(36px - 250px);
-    width: 500px;
-    height: 500px;
+    --size: max(max(230vw, 230vh), calc(150vh + 150vw));
+    --size-half: calc(var(--size)/2);
+    top: calc(28px - var(--size-half));
+    right: calc(36px - var(--size-half));
+    width: var(--size);
+    height: var(--size);
     border-radius: 50%;
     background: var(--primary-color);
     transform: scale(0);
@@ -1187,7 +1189,7 @@ button::-moz-focus-inner {
 }
 
 #about:target x-background {
-    transform: scale(10);
+    transform: scale(1);
 }
 
 #about .row a {