diff --git a/index.html b/index.html
index 7e3bb47..e693b28 100644
--- a/index.html
+++ b/index.html
@@ -6,7 +6,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Lain | mybio</title>
     <meta name="description" content="personal website" />
-    <meta name="theme-color" content="#1a1a1a" />
+    <meta name="theme-color" content="#032a09" />
+    <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#032a09" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
     
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
diff --git a/src/app.css b/src/app.css
index 24dae23..c6ca660 100644
--- a/src/app.css
+++ b/src/app.css
@@ -2,3 +2,14 @@
 html,body{height:100%}
 body{margin:0;background:#0b0b0b;color:#00cc00;font-family:VT323,Fantaskue,ui-monospace,monospace;font-size:22px;letter-spacing:.5px}
 *{box-sizing:border-box}
+
+@supports (-webkit-touch-callout: none) {
+  :root {
+    --safari-bottom-bar-height: env(safe-area-inset-bottom);
+    --safari-top-bar-height: env(safe-area-inset-top);
+  }
+  body {
+    padding-bottom: var(--safari-bottom-bar-height);
+    padding-top: var(--safari-top-bar-height);
+  }
+}