Update index.html

index.html

@@ -10,14 +10,18 @@
     <link rel="icon" href="icon.png" type="image/png">
     <script src="https://cdn.jsdelivr.net/npm/video-frames@1/dist/videoframes.umd.min.js"></script>
     <style>
-    body {
-          display: flex;
-          flex-direction: column;
-          align-items: center;
-          color: #00ffcc;
-          font-family: "M PLUS Rounded 1c", monospace;
-          overflow-x: hidden;
-        }
+body {
+    margin: 0;
+    padding: 0;
+    background-color: #0a192f;
+    color: #00ffcc;
+    font-family: "M PLUS Rounded 1c", monospace;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center; /* 中央揃え */
+    width: 100%; /* 追加 */
+}
     
         h1 {
           color: #00aaff;
@@ -523,13 +527,15 @@
             0% { opacity: 0.2; }
             100% { opacity: 0.8; }
         }
-    .wave-container {
-        position: fixed;
-        width: 100%;
-        height: 100%;
-        z-index: -1;
-    }
-    
+.wave-container {
+    position: fixed; /* absoluteからfixedに変更 */
+    top: 0;
+    left: 0;
+    width: 100vw; /* 100%から100vwに変更 */
+    height: 100vh; /* 100%から100vhに変更 */
+    z-index: -1; /* 背景として最背面に */
+    overflow: hidden; /* はみ出た部分を非表示 */
+}
     /* グリッド線を最背面に */
     .grid-lines {
         position: absolute;